Skip to main content

React Native Navigation

Image of Madeline Watts
Madeline Watts
Software Engineer
GitHubLinkedIn
Read More
Hello! I'm Madeline, the founder of AppHelion and full time app developer. I have developed and published several apps using a variety of frameworks and I started AppHelion to share what I've learned!

Last Updated: May 2025

GitHubView on GitHub

In this guide, I will show you how to implement navigation in React Native using the React Navigation package.

Using React Navigation​

  1. First install the required React Navigation packages npm install @react-navigation/native @react-navigation/native-stack

  2. Install react-native-screens and react-native-safe-area-context

  • Expo: npx expo install react-native-screens react-native-safe-area-context

  • Without Expo: npm install react-native-screens react-native-safe-area-context

  1. Pod install
cd ios
pod install
cd ..
  1. Wrap the entry point of your app (App.tsx in my case) with NavigationContainer:
// App.tsx

import {DefaultTheme, NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import React from 'react';
import HomeScreen from './src/screens/HomeScreen';
import ProfileScreen from './src/screens/ProfileScreen';

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      // ...
    </NavigationContainer>
  );
}

export default App;
  1. Create Stack and set up NavigationStack:
// App.tsx

import {DefaultTheme, NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import React from 'react';
import HomeScreen from './src/screens/HomeScreen';
import ProfileScreen from './src/screens/ProfileScreen';

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator> // add this
        <Stack.Screen name="Home" component={HomeScreen} /> // populate with your app's screens
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Using Navigation Example​

To navigate from one screen to another:

...

function HomeScreen(navigation) {
  return (
    <View style={{flex: 1,padding: 5, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Welcome to the HomePage</Text>
      <Button
        title="Go to the profile screen"
        onPress={() => navigation.navigate('Profile')}
      />
    </View>
  );
}

...
  1. Run your app and test the navigation
note

If you get this Unimplemented Component error:

Unimplemented Component Error IOS

Run npx react-native start --reset-cache to clear the metro bundler cache or restart the app.

TypeScript Navigation Types:​

If you're using TypeScript, you will need to set up navigation types.

  1. Install npm install --save-dev @types/react

  2. Create a file where you can define your navigation and route param types, src/types/NavigationTypes.ts

  • Import the navigation and route Props
import {NativeStackNavigationProp} from '@react-navigation/native-stack';
import {RouteProp} from '@react-navigation/native';
  • Create RootStackParamList type. This is where you will define the parameters for each of your screens. In this example, my profile page takes name in the form of a string:
export type RootStackParamList = {
  Home: undefined;
  Profile: {name: string};
};
  • Create HomeScreenNavigationProp and ProfileScreenRouteProp types. You'll need to do this for each screen in your app.
export type HomeScreenNavigationProp = NativeStackNavigationProp<
  RootStackParamList,
  'Home'
>;

export type ProfileScreenRouteProp = RouteProp<RootStackParamList, 'Profile'>;
  • All Together:
import {NativeStackNavigationProp} from '@react-navigation/native-stack';
import {RouteProp} from '@react-navigation/native';

export type RootStackParamList = {
  Home: undefined;
  Profile: {name: string};
};

export type HomeScreenNavigationProp = NativeStackNavigationProp<
  RootStackParamList,
  'Home'
>;

export type ProfileScreenRouteProp = RouteProp<RootStackParamList, 'Profile'>;
  1. Add the type (HomeScreenNavigationProp) into screen:
  • Import your HomeScreenNavigationProp into HomeScreen
import {HomeScreenNavigationProp} from '../types/NavigationTypes';
  • Define type Props which will be used as our navigation type
type Props = {
  navigation: HomeScreenNavigationProp;
};
  • Have HomeScreen accept navigation as an argument
function HomeScreen({navigation}: Props): React.JSX.Element {
  // ...
}
  • Completed HomeScreen.tsx:
// HomeScreen.tsx
import React from 'react';
import {Button, Text, View} from 'react-native';
import {HomeScreenNavigationProp} from '../types/NavigationTypes';

type Props = {
  navigation: HomeScreenNavigationProp;
};

function HomeScreen({navigation}: Props): React.JSX.Element {
  return (
    <View style={{padding: 5, alignItems: 'center', justifyContent: 'center'}}>
      <Button
        title="Go to the profile screen"
        onPress={() => navigation.navigate('Profile', {name: "Jane"})}
      />
    </View>
  );
}

export default HomeScreen;
  • Do the same for your other screens
// ProfileScreen.tsx

import React from 'react';
import {Text, View} from 'react-native';
import {ProfileScreenRouteProp} from '../types/NavigationTypes';

type Props = {
  route: ProfileScreenRouteProp;
};

function ProfileScreen({route}: Props): React.JSX.Element {
  const {name} = route.params;

  return (
    <View style={{padding: 5, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Welcome, {name}!</Text>
    </View>
  );
}

export default ProfileScreen;
  1. Add RootStackParamList as the type of Stack in App.tsx
// App.tsx

import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import React from 'react';
import HomeScreen from './src/screens/HomeScreen';
import ProfileScreen from './src/screens/ProfileScreen';
import { RootStackParamList } from './src/types/NavigationTypes';

const Stack = createNativeStackNavigator<RootStackParamList>(); // ⭐️ add type here!

function App(): React.JSX.Element {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Now you can navigate between the home screen and the profile page

HomeScreen

Home Screen

ProfileScreen

Profile Screen

tip

If you'd like to remove the default headers this solution will disable all headers:

// App.tsx

/* imports */

const Stack = createNativeStackNavigator<RootStackParamList>();

function App(): React.JSX.Element {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerShown: false, // ⭐️ disables header globally
        }}>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

0r for just specific screens:

// App.tsx

/* imports */

const Stack = createNativeStackNavigator<RootStackParamList>();

function App(): React.JSX.Element {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{
            headerShown: false, // ⭐️ disables header for just HomeScreen!
          }}
        />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;
```

Congratulations 🎉 You can now navigate between screens in your app!

To update your app's layout or background color check out 🔗 Using SafeAreaView with React Native Navigation!

If you want to read more or would like to reference the 🔗 Official React Native Navigation Docs!