Project Setup and Installing React Navigation
Here in this example, we will set up our project using the expo tool because it allows us to set up our project without installing android studio and Xcode. We are assuming that you have Node LTS version 14 or greater.
Setup
Run this command to install the expo globally into your system.
npm install -g expo-cli
Run this command to create a new project.
expo init NavigationTutorial
Now run these commands to enter your project's directory and open the project in your code editor.
cd NavigationTutorial
code . #This opens the project in VScode
Installing
Now install the react-native navigation library using the following command.
npm install @react-navigation/native @react-navigation/native-stack
Now install the peer dependencies this command is used with expo only.
expo install react-native-screens react-native-safe-area-context
If you are using React Native CLI Quickstart on your machine, you do not need to do the above procedure. Create a new project and install the navigation library using the first command from installing section above, and to install the peer dependencies use the following command.
npm install react-native-screens react-native-safe-area-context
Also see, React Native Reanimated
Example of React Native Navigation
In this example, we will create a simple react native application with two screens home screen (HomeScreen.js) and an about screen (AboutScreen.js) both the files are in the components folder. By default home screen will open up with a button on it and after pressing the button, you will be navigated to the other screen.
Now Let’s see the codes.
HomeScreen.js
Code:
import React, { Component } from 'react';
import { Button, View, Text, StyleSheet } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
export default class Homescreen extends Component {
render() {
return (
<View style={styles.container}>
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
}}>
<Text style={styles.titleText}>Home Screen</Text>
</View>
<View style={styles.buttonContainer}>
<Button
onPress={() => this.props.navigation.navigate('About')}
title="Go To About Screen"
color="orange"
/>
</View>
<View style={styles.bottomText}>
<Text>
<Text style={styles.bottomText1}>code</Text>
<Text style={styles.bottomText2}>studio</Text>
</Text>
<Text>Powered By</Text>
<Text style={styles.bottomText3}>Coding Ninjas</Text>
</View>
</View>
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: 'teal'
},
buttonContainer: {
flex: 1,
margin: 30
},
titleText: {
fontSize: 30,
color: 'black',
fontWeight: "bold"
},
bottomText: {
marginBottom:30,
textAlign: 'center',
alignItems: "center",
},
bottomText1: {
fontSize: 25,
fontWeight: 'bold',
},
bottomText2: {
fontSize: 25,
},
bottomText3: {
fontWeight: 'bold',
color: 'orange'
}
})
Explanation: We have made a new file for designing the home screen as HomeScreen.js. This practice brings modularity to our code. Here we have a text view with the text "Home Screen" and below it, there is a button view with the text "Go to About" in its onpress property, we are specifying the destination screen.
AboutScreen.js
Code:
import React, { Component } from 'react';
import { Button, View, Text, StyleSheet, Image } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
export default class Aboutscreen extends Component {
render() {
return (
<View style={styles.container}>
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
}}>
<Text style={styles.titleText}>About Screen</Text>
</View>
<View style={styles.bottomText}>
<Text>
<Text style={styles.bottomText1}>code</Text>
<Text style={styles.bottomText2}>studio</Text>
</Text>
<Text>Powered By</Text>
<Text style={styles.bottomText3}>Coding Ninjas</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: 'teal'
},
titleText: {
fontSize: 30,
color: 'black',
fontWeight: "bold"
},
imageStyle: {
flex: 1,
height: 10,
width: 10,
alignItems: 'center',
},
bottomText: {
marginBottom:30,
textAlign: 'center',
alignItems: "center",
},
bottomText1: {
fontSize: 25,
fontWeight: 'bold',
},
bottomText2: {
fontSize: 25,
},
bottomText3: {
fontWeight: 'bold',
color: 'orange'
}
})
Explanation: In the about screen, there is just a text view with the text of "About Screen" it does nothing much.
App.js
Code:
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import HomeScreen from './components/HomeScreen';
import AboutScreen from './components/AboutScreen';
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
const AppNavigator = createStackNavigator({
Home: {
screen: HomeScreen
},
About: {
screen: AboutScreen
},
},{
initialRouteName: "Home"
});
const AppContainer = createAppContainer(AppNavigator);
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Explanation: Here, the render() function calls the AppContainer, which in return calls the AppNavigator, which is calling the createStackNavigator function where we define all our screens that are previously being imported, and we are giving an initial route screen also. By default home screen will get open up.
Output:
Frequently Asked Questions
What is the react-navigation package?
React Navigation was created out of the necessity for an expandable yet simple-to-use navigation solution built on top of powerful native primitives and written fully in JavaScript (so you can read and understand the entire code).
What is the use of createStackNavigator?
It allows your app to transition between screens by stacking each new screen on the previous one. The stack navigation is set up to have the same appearance and feel as iOS and Android: fresh screens slide in from the right on iOS and fade in from the bottom on Android.
What is the use of createAppContainer?
In react-native, createAppContainer is a function that returns a React component that takes the React component created by createStackNavigator as a parameter and can be exported directly to be used as our app's root component from App.js.
Conclusion
In this article, we have extensively discussed Navigation in React Native. We discussed how this navigation package works and one simple example to clarify the concept.
We hope that this blog has helped you enhance your knowledge regarding Navigation. Do check out the awesome content on the Coding Ninjas Website, Android Development, Coding Ninjas Studio Problems, Coding Ninjas Studio Interview Bundle, Coding Ninjas Studio Interview Experiences, Coding Ninjas Courses, Coding Ninjas Studio Contests, and Coding Ninjas Studio Test Series. Do upvote our blog to help other ninjas grow.
Happy Coding!
85+ registered 