Navigation in React Native for moving between screens

In every react native app the most important thing is navigation. We have multiple screens in our app and we can go to any screen we want. So in this series we are gonna talk about different type of navigation. Firstly we are gonna talk about Stack navigator for navigating between screens.

Stack Navigator

For navigation in a normal web browser we give href link to ‘a’ tag and move between screens. Web browser have a history stack where these pages are push and pop. But the problem arises in react native because it doesn’t have the history stack. So this is where we need other navigation library.

Stack Navigator of React Navigation make it happen to give History stack and moving between the screen mechanism. If you don’t go for hybrid navigation and use only one stack navigator then it gives you all the functionality like web browser. So in this post we are gonna implement it in our app. In next post i am gonna go into other navigators.

Installation

Firstly before installing the stack navigator we need to install react navigation dependencies.

React Navigation

using npm

npm install @react-navigation/native

using yarn

yarn add @react-navigation/native

Dependency for Expo management project

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

Dependency for bare React Native Application

using npm

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

using yarn

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

If you are on mac you need to do this for linking

npx pod-install ios

Now for linking the gesture handler just add this in the first line of your app.js

import 'react-native-gesture-handler';

Everything is done now you can install Stack Navigator

Installation of Stack Navigator

using npm

npm install @react-navigation/stack

using yarn

yarn add @react-navigation/stack

Creating a stack navigator from scretch

For creating a stack navigator we have a function called createStackNavigator.

It has 2 properties

1. Navigator
2. screen

Navigator is parent component and screen is child component. Also we are gonna use NavigationContainer. It is wrapper of our navigator. It manage all the states and navigation. Let’s understand them by example.

//App.js

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>
  );
}


function PostsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Posts Screen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
 <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Posts" component={PostsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Here we have two screens Home and Posts. we give initial route to Home so this is the one which is gonna come front. Stack navigator is wrapped inside NavigationContainer.

Now the question arises how to go to next screen.

Moving Between Screens

For moving between screens we’ll use the navigation prop, that is passed down to our screen component. we also use navigate function and give the route name where we want to go.

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

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Posts')}
      />
    </View>
  );
}

// ... other code from the previous section

Now we are on Posts page according to this example but if we want to navigate multiple time in this screen this is not gonna work. For that we have to push in that stack.

<Button
  title="Go to Details... again"
  onPress={() => navigation.push('Details')}
/>

In next post i am gonna explain how you can create Drawer and tab navigator and after that also gonna explain how to use all of them together and create hybrid navigation. If you have any question write down in the comments.