React Navigation V5 in React Native

React Navigation became one of the most popular navigation solutions in React Native. React Navigation 5.0 is a new way to navigate between the screens.

Installation :

To install react-navigation V5 you just need to run this command in the project terminal.

yarn add @react-navigation/native

Now you need to install the dependencies which are used by the navigators. To install these dependencies you just need to run this command in the project terminal.

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

To finalize installation of react-native-gesture-handler, add the following at the top (make sure it's at the top and there's nothing else before it) of your entry file, such as index.js or App.js :

import 'react-native-gesture-handler';

From React Native 0.60 and higher, linking is automatic. So you don’t need to run react-native link.

If you’re on a Mac and developing for iOS, you need to install the pods (via Cocoapods) to complete the linking.

npx pod-install ios

Differences

Container:

In V4 we use createAppContainer which is imported from “react-navigation” and used as

import {createAppContainer, createSwitchNavigator} from 'react-navigation';
const AppNavigator = createStackNavigator(
 {
 LoginScreen: LoginScreen,
 HomeScreen: HomeScreen,
 },
 {
 initialRouteName: “LoginScreen”
 }
);
const AppContainer=createAppContainer(AppNavigator);

but in V5 we use NavigationContainer which is imported from “@react-navigation/native” and we wrap the whole app in it.

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;

With the new API, we render the navigator as a component and pass the configuration as props.

Switch Navigator

In V5 Switch Navigator is deprecated but if you want to use the logic of switch navigator. you can use these logic's to replace or change the root of the stack.

import {StackActions} from ‘@react-navigation/native’;

1- this.props.navigation.dispatch(StackActions.replace(‘LoginScreen’));

2- this.props.navigation.reset({

index:0,

routes:[{name:‘LoginScreen’}]

})

Hooks first API

With new React Hooks, it’s much easier to reuse stateful logic, and works great with type systems unlike higher order components. The new implementation heavily uses hooks internally, but we have also made some hooks for the public API.

• useNavigation — Access the navigation prop of the parent screen in any child component.
• useRoute — Access the route prop (previously navigation.state) of the parent screen in any child component.
• useFocusEffect — Run a side-effect when a screen comes into focus, similar to React.useEffect , useful for subscribing to event listeners only when the screen is focused.
• useIsFocused — Get the current focus state of the screen, useful for rendering content based on focus state.

Update options from component

We’ve added a new setOptions method on the navigation prop to make configuring screen navigation options more intuitive than its static navigationOptions predecessor. It lets us easily set screen options based on props, state or context without messing with params. Instead of using static options, we can call it anytime to configure the screen.

navigation.setOptions({
  headerRight: () => (
    <DoneButton
      onPress={async () => {
        await saveNote();        navigation.replace('Notes');
      }}
    />
  ),
})

This will make it much easier for patterns such as adding a button in the header which needs to interact with the screen state.

Upgrading

You don’t need to upgrade to this version if React Navigation 4 is working well for you. It’s still going to receive bug fixes and maintain compatibility with the latest React Native version.

If you do want to upgrade, There is a compatibility layer to help you gradually migrate your code. You should also read our upgrade guide for a list of differences which will give you a better idea of the new changes.

Try it out

To give the new version a try, you can go to https://reactnavigation.org/

If you found this tutorial useful, you know what to do now. Hit that clap button and follow me to get more articles and tutorials on your feed.

Thank You !