Jay Poojara
React Native React Navigation

Getting Started with React Navigation in React Native

July 15, 2020 3 min read

author:

Getting Started with React Navigation in React Native

Reading Time: 3 minutes
React Navigation Demo

Why we need a navigation library?

React Native by default doesn’t provide any routing library. So we have to use a third-party library. There are many libraries that are available. But one of the most famous and stable libraries is react-navigation. So, let’s take a deep look at it.

Intro to React Navigation Library:

  • React Navigation library is quite simple to use and understand. It provides a different kinds of navigators. i.e.
    • TabNavigator – For Tab-based navigation
    • DrawerNavigator – For side menu-based navigation
    • StackNavigator – It’s one of the most used navigators to transition from one screen to another screen.

There are many more navigators are there. But we in this topic we will use one of the most important navigator StackNavigator.

Why StackNavigator is widely used?

  • StackNavigator provides the way to transition users from one screen to another screen.
  • It handles many things like screen transitioning effect, mobile action bar (Header) back button, swipe gestures for iOS, etc.
  • In spite of giving many features and handling many things under the hood, it gives the freedom to customize almost everything from animation to action bar colors, icons and click events of its elements, etc.

So, Let’s take a look at it in the code.

Step 1:

Create a new react native project using react-cli. If you don’t know how to do it, please refer to this article.

Step 2:

Install the react-navigation library using the following commands:

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

Now, from React Native version 0.60 onwards linking is automatic. If you are using React Native version older than 0.60, then use the command react-native link.

Step 3:

If you are on Mac and developing for iOS too, use the following command to install the required pods.

cd ios && pod install && cd ..

Step 4:

Now, the final step to finishing the installation of react-native-gesture-handler

Add the following line on the top of the entry file index.js import 'react-native-gesture-handler';

Step 5:

Now let’s create 3 new files,

  • navigationStack.js
  • screenA.js
  • screenB.js

Step 6:

Now install react-native/stack library to use stack navigator using the following command

npm install @react-navigation/stack

Step 7:

Now we will add buttons in screenA and screenB to navigate from screenA to screen B and vise e versa.

Now for screenA,

import React, {Component} from 'react';
import {Button, View} from 'react-native';

export default class screenA extends Component {
  render() {
    return (
      <View style={Styles.container}>
        <Button
          title={'Go To Screen B'}
          onPress={() => {
            this.props.navigation.navigate('screenB');
          }}
        />
      </View>
    );
  }
}
const Styles = {
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
};

And for screenB.js

import React, {Component} from 'react';
import {Button, View} from 'react-native';

export default class screenB extends Component {
  render() {
    return (
      <View style={Styles.container}>
        <Button
          title={'Go To Screen A'}
          onPress={() => {
            this.props.navigation.navigate('screenA');
          }}
        />
      </View>
    );
  }
}
const Styles = {
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
};

Step 8:

Now, let’s work on our navigation part, we will create one stack navigator and will use screenA and screenB.

import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import screenA from './screenA';
import screenB from './screenB';

const Stack = createStackNavigator();

export function AppStack() {
  return (
    <Stack.Navigator initialRouteName={'screenA'}>
      <Stack.Screen name={'screenA'} component={screenA} />
      <Stack.Screen name={'screenB'} component={screenB} />
    </Stack.Navigator>
  );
}

Now, the above code might be a little bit confusing, so let’s take a look at it.

  • createStackNavigator will create the component and we are storing it in the variable called Stack.
  • Now, to import these things easily on other files, we have created one function called AppStack.
  • Now, every time you want to create a stack-navigator, use Stack.Navigator component and for screens inside it use Stack.Screen component.
  • Now, let’s understand the props which we are using here
    • initialRouteName – Which screen component you want to show first when app launches
    • name – Name that will be displayed on the top of the screen (or back button and header)
    • component – A component class that will be used to display the content of the screen.
    • Now, if you want to create the nested stack, that’ also possible, You just need to repeat the above steps once again.

Step 9:

Now, add following code to App.js

import 'react-native-gesture-handler';
import * as React from 'react';
import {AppStack} from './src/navigationStack';
import {NavigationContainer} from '@react-navigation/native';

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

That’s it, now run the app using the following command

  1. iOS – react-native run-ios
  2. Android – react-native run-android

Hello, I am Jay Poojara, a professional Android, Laravel, NodeJS, EmberJS & React Native Developer. I am a very enthusiastic learner about the latest web and mobile technologies and a big fan of PS4 and Movies.
Leave a comment

Your email address will not be published. Required fields are marked *