Revision history [back]

1. Install React Navigation: In order to use React Navigation, you need to install it. You can install it using npm or yarn.

   npm install @react-navigation/native
   

   or

   yarn add @react-navigation/native
   

2. Install Dependencies:

   You have to install the dependencies for the type of navigation you want to use. For example, if you want to use Stack Navigation, you need to install the following dependencies:

   npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
   

   or

   yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
   

   If you want to use Tab Navigation, you need to install the following dependencies:

   npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view @react-navigation/bottom-tabs
   

   or

   yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view @react-navigation/bottom-tabs
   

3. Import necessary classes:

   After installing dependencies, you need to import necessary classes from the @react-navigation/native and react-native modules.

   import { NavigationContainer } from '@react-navigation/native';
   import { createStackNavigator } from '@react-navigation/stack';
   import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
   import { View } from 'react-native';
   

4. Create Navigation Stack:

   Now, you can create your navigation stack. You can create a stack navigator using createStackNavigator method.

   const Stack = createStackNavigator();
   
   const NavigationStack = () => {
      return (
          <Stack.Navigator>
              // Add Screens Here
          </Stack.Navigator>
      );
   }
   

   In the above code, we have created a Stack Navigator using createStackNavigator. We have also created a NavigationStack component which is responsible for rendering the different screens of the app.

5. Create Screen Components:

   Now, you can create your screen components.

   const HomeScreen = () => {
      return (
          <View>
              // Add Home Screen UI Components Here
          </View>
      );
   }
   
   const SettingsScreen = () => {
      return (
          <View>
              // Add Settings Screen UI Components Here
          </View>
      );
   }
   

6. Add Screens to Navigation Stack:

   After creating the screen components, you can add them to your navigation stack.

   const NavigationStack = () => {
      return (
          <Stack.Navigator>
              <Stack.Screen name="Home" component={HomeScreen} />
              <Stack.Screen name="Settings" component={SettingsScreen} />
          </Stack.Navigator>
      );
   }
   

   In the above code, we have added HomeScreen and SettingsScreen components to our NavigationStack.

7. Wrap your App with Navigation Container:

   Lastly, you need to wrap your app with the NavigationContainer component.

   const App = () => {
      return (
          <NavigationContainer>
              <NavigationStack />
          </NavigationContainer>
      );
   }
   

   In the above code, we have wrapped our NavigationStack component with the NavigationContainer component. This allows us to navigate between different screens in our app.

That's it! You have now successfully replaced the React Native screen with React Navigation in your app.