Project 92 of 100 - Basic Navigation in React Native
Tags: react, reactnative, javascript, typescript
Published: 2022-01-04 07:44:13

*Hey! I'm on a mission to make 100 React.js projects. Please follow my dev.to profile or my [twitter](https://www.twitter.com/jwhubert91) for updates and feel free to reach out if you have questions. Thanks for your support!*

Link to the repo: [github](https://github.com/jwhubert91/reactNativeNavigation)

For today's project I simply went through the docs on the official [React Native page](https://reactnative.dev/docs/navigation) to set up some basic routing for an app. 

I won't go through initializing a React Native app because I did that [yesterday](https://dev.to/jwhubert91/project-91-of-100-build-a-grocery-list-in-react-native-with-18n1) and [the day before](https://dev.to/jwhubert91/project-90-of-100-react-native-starter-19g0) 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:

```JS
...
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.

```JS
...
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:

```JS
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](https://twitter.com/jwhubert91), I follow back! See you tomorrow for another project.**