Using React Navigation 5.x

A little while ago I wrote an article on how to set up the react-navigation package for react-native projects. When writing that article I had only been exposed to react navigation 4.x and wrote a quick how-to on setting navigation within a mobile application. After having used react-navigation 5.x a little bit, I wanted to write another quick tutorial on once again setting up basic navigation within your react-native application.

Installation

Regardless of how you initialize a react-native project you will need to install the core library. CD in to your project directory and run the following line in your terminal:

 $ npm install @react-navigation/native

Next we need to install the dependencies. If you initialized your project using the expo-cli you will need to run the following line terminal:

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

On the other hand if you initialized your project using the react-native-cli then run the following line:

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

Finally we are going to install the ‘Stack’ navigation library. This will provide a project with the ability to use the ‘Stack Navigator’. There are several other navigators you can choose from such as ‘Tab’ and ‘Drawer’, but ‘Stack’ provides us the general functionalities we would want in any mobile application. Like before we are going to run another line in our terminal:

$ npm install @react-navigation/stack

With this we have installed all of our dependencies so now it is time to set up our navigation.

Adding Screens To Navigate To

For this example our next step is to add a few screens to navigate too. I am setting up three screens below: a HomeScreen, FirstScreen, and SecondScreen. The Home Screen will render two buttons, and the First and Second will render a single string of text once we navigate to them:

// HomeScreen
import React from 'react'
import { View, Button } from 'react-native'
const HomeScreen = () => {
  return (
    <View>
      <Button
        title='First'
      />
      <Button
        title='Second'
      />
    </View>
  )
}
export default HomeScreen
...
// FirstScreen
import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
const FirstScreen = () => {
  return (
    <View>
      <Text> First Screen </Text>
    </View>
  )
}
export default FirstScreen
const styles = StyleSheet.create({})
...
// SecondScreen
import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
const SecondScreen = () => {
  return (
    <View>
      <Text> Second Screen </Text>
    </View>
  )
}
export default SecondScreen
const styles = StyleSheet.create({})

Setting up the Navigator

Now that we have some screens to navigate to, our next step will be to enter our applications ‘App.js’ file and add four import statements. First, the ‘NavigationContainer’ from the ‘react navigation’ library. Second, the ‘createStackNaivigator’ function from ‘react-navigation/stack’. Finally, we will import the Home, First and Second screens.

import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import HomeScreen from './src/screens/HomeScreen
import FirstScreen from './src/screens/FirstScreen'
import SecondScreen from './src/screens/SecondScreen

Our next step will be to create our navigation stack through the ‘createStackNavigator’ function above our component:

const Stack = createStackNavigator()

Following this we can now wrap we can now remove everything in our App.js component render and add in our ‘NavigationContainer’:

export default function App() {
  return (
    <NavigationContainer>
    </NavigationContainer>
  )
}

Next we can add our Stack and call on the ‘Navigator’ function so that we can set up our navigation routes:

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
      </Stack.Navigator>
    </NavigationContainer>
   )
}

After this we can begin wiring up our screens by adding a Stack.Screen element inside our Stack.Navigator. To do so we will also pass each Stack.Screen a few props. A component prop and a name prop. The component prop will be a piece of ‘JSX’ that points to the appropriate component; while the name will be a string that should also correspond to the component. Finally, we also need to pass our Stack.Navigator a prop called initialRouteName which will receive a string that correspond to one of the name props under our Stack.Screen in this case our HomeScreen:

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen 
          component={HomeScreen}
          name="Home"
        />
        <Stack.Screen 
          component={FirstScreen}
          name="First"
        />
        <Stack.Screen 
          component={SecondScreen}
          name="Second"
        />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

With this our navigator is set up we now just need to add a little bit of logic to our home screen so that we can navigate to our First and Second screens.

Wiring up the Navigator in the HomeScreen

To finish up the setup we just need to pass the navigation prop to our HomeScreen:

const HomeScreen = ({navigation}) => {
  return (
    <View>
      <Button
        title='First'
      />
      <Button
        title='Second'
      />
    </View>
  )
}

Next we can add the on press events to our buttons and in our callback functions for those events call on the navigate function on our navigation prop passing the name of our navigation route as an argument:

const HomeScreen = ({navigation}) => {
  return (
    <View>
      <Button
        title='First'
        onPress={() => navigation.navigate("First")}
      />
      <Button
        title='Second'
        onPress={() => navigation.navigate("Second")}
      />
    </View>
  )
}

With this we can now start our sever, press on the buttons and watch what happens:

Final Code Snippets

import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import HomeScreen from './src/screens/HomeScreen
import FirstScreen from './src/screens/FirstScreen'
import SecondScreen from './src/screens/SecondScreen
const Stack = createStackNavigator()
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen 
          component={HomeScreen}
          name="Home"
        />
        <Stack.Screen 
          component={FirstScreen}
          name="First"
        />
        <Stack.Screen 
          component={SecondScreen}
          name="Second"
        />
      </Stack.Navigator>
    </NavigationContainer>
  )
}
... 
//HomeScreen
import React from 'react'
import { View, Button } from 'react-native'
const HomeScreen = ({navigation}) => {
  return (
    <View>
      <Button
        title='First'
        onPress={() => navigation.navigate("First")}
      />
      <Button
        title='Second'
        onPress={() => navigation.navigate("Second")}
      />
    </View>
  )
}
export default HomeScreen
...
// FirstScreen
import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
const FirstScreen = () => {
  return (
    <View>
      <Text> First Screen </Text>
    </View>
  )
}
export default FirstScreen
const styles = StyleSheet.create({})
...
//Second Screen
import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
const SecondScreen = () => {
  return (
    <View>
      <Text> Second Screen </Text>
    </View>
  )
}
export default SecondScreen
const styles = StyleSheet.create({})

Conclusion

That’s all it takes to get started with react-navigation 5x. Happy Coding!