Project 92 of 100 - Basic Navigation in React Native

Hey! I'm on a mission to make 100 React.js projects. Please follow my dev.to profile or my twitter for updates and feel free to reach out if you have questions. Thanks for your support!

Link to the repo: github

For today's project I simply went through the docs on the official React Native page to set up some basic routing for an app.

I won't go through initializing a React Native app because I did that yesterday and the day before in some detail.

My only goal today was to show a home screen with buttons to navigate to other screens, and a couple of other screens to navigate to. So the first thing I did was create a couple of extra screens, one I called Profile and the other I called List. For fun, I did create a ListItem component and fed a small list of groceries from a JS array of objects into the List page, but it's basically just a list of text objects. In Profile I just wrote my name.

Lastly, I created a Home page for the buttons to exist in. The other two screens are secondary screens, and Home was going to be the home screen. When we install navigation the App file will simply hold our navigation and routing, so it was important to create a Home screen to store JSX in for the buttons.

Once the screens were created, I imported the pre-made Button component from React Native and created two, one for each secondary page. Here's what the template code from that file looked like for me:

...
function HomeScreen({ navigation }) {
  const { navigate } = navigation;
  return (
    <View>
      <Text style={ styles.headerText } >
        Home Screen
      </Text>
      <View style={ styles.buttonsContainer }>
        <Button
          title="Go to Profile Screen"
          onPress={()=> navigate( 'Profile' )}
        />
        <Button
          title="Go to List Screen"
          onPress={()=> navigate( 'List' )}
        />
      </View>
    </View>
  )
};
...

Now, in our App file, we can set up some navigation since we have a component for the home screen view.

First, let's install the libraries we'll want to use for navigation. According to the official docs, the following line installs the necessary libraries:

npm install @react-navigation/native @react-navigation/native-stack

Now, we can use Expo to install missing dependencies. Here's the line for that:

expo install react-native-screens react-native-safe-area-context

Next, in our App file we want to import the navigation modules.

...
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();
...

As you can see, we import NavigationContainer which we'll need to set up things, we also import createNativeStackNavigation and call it, instantiating it to a variable we call Stack.

Lastly, we set up navigation in App by enclosing everything in NavigationContainer tags. Inside those tags, we create the stack and each screen within it:

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

This shows a path for each screen we have in the app.

You may have noticed that in the HomeScreen we have onPress props on the button elements sending users to different pages. To do this with React Navigation, we destructure out a navigation prop that comes with each element using React Navigation. The navigate() function that takes an argument sends us to the corret place in the stack we created earlier ourselves :)

If you like projects like this and want to stay up to date with more, check out my Twitter @jwhubert91, I follow back! See you tomorrow for another project.