Getting Started with React Navigation in React Native
Reading Time: 3 minutesWhy 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:
npm install @react-navigation/native
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 useStack.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
- iOS – react-native run-ios
- Android – react-native run-android