Updated April 6, 2023
Introduction to React Native Navigation
A navigation can be defined as a component which allows users to interact with the application and perform navigation across different pages within the context of the application. In order to use navigation in react native application we need to add dependency of react native navigation into our project, dependency is available for both android and IOS.
Syntax:
// import react component
import React, { Component } from 'react';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator, createAppContainer } from "react-navigation"; // import react native navigation
import <Screen1> from './components/<Screen1>';
import <Screen2> from './components/<Screen2>';
export default class <ClassName> extends React.Component {
render() {
// return container
return <ApplicationContainer />;
}
}
// calling createStackNavigator to define different screens
const AppNavigator = createStackNavigator({
// define different screens eligible for navigation
<Screen1_Name>: {
screen: <Screen1>
},
<Screen2_Name>: {
screen: <Screen1>
}
});
const ApplicationContainer = createAppContainer(AppNavigator);
const styles = StyleSheet.create({
container: {
// define different style parameters as per our requirement
},
});It first requires importing navigation into our code after we add dependency navigation into our project. In the render method we have used ApplicationContainer tag and specified implementation of ApplicationContainer using corresponding method. Here <ClassName> represents name of react class. As you can see, we have used createStackNavigator method to define different screens eligible for Navigation.
How does Navigation work in React Native?
In order to use react native navigation we need to add dependency into our react native project.
Navigation dependency can be added by running the below command:
npm install --save react-native-navigationAfter the above command runs successfully, we can import dependency into our project and use it as per our requirement. As you can see from the above syntax createStackNavigator method is used to define different screens available for navigation. Apart from the above mentioned library, there are several other libraries that are used to provide attractive animations along with functionality.
Example
Given below is an example:
Code:
import React from'react';
import { StyleSheet, Text, View } from 'react-native';
import { createAppContainer } from "react-navigation";
import HomeScreen from'./components/HomeScreen';
import CoursesScreen from'./components/CoursesScreen';
import { createStackNavigator } from 'react-navigation-stack';
export default class App extends React.Component {
render() {
return<ApplicationContainer />;
}
}
// define different screens eligible for navigation
const AppNavigator = create StackNavigator({
Home: {
screen: HomeScreen
},
Courses: {
screen: CoursesScreen
}
});
const ApplicationContainer = create AppContainer(AppNavigator);
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});The source code for the above-mentioned HomeScreen is as follows:
Code:
import React, { Component } from'react';
import { Button, View, Text } from'react-native';
import { createStackNavigator, createAppContainer } from'react-navigation';
export default class HomescreenextendsComponent {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>WELCOMETOEDUCBA</Text>
<Button
title="Go to Courses"
// navigation to CoursesScreen on click of button
onPress={() =>this.props.navigation.navigate('CoursesScreen')}
/>
</View>
)
}
}The source code of CoursesScreen is as follows:
Code:
import React, { Component } from 'react';
import { Button, View, Text } from'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
export default class CoursesScreenextendsComponent {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>COURSESOFFEREDBYEDUCBAARE:</Text>
<Text>JAVA</Text>
<Text>BIGDATA</Text>
<Text>DATASCIENCE</Text>
<Text>CLOUD</Text>
</View>
)
}
}After executing the above code we will see the below output on the mobile screen:
Output:
On clicking on ‘GO TO COURSES’ Button we will navigate to another screen showing list of courses offered like the one below:
Apart from the above-mentioned navigation, there can be another type of navigation that can be implemented in a similar way as shown above with small changes.
Recommended Articles
This is a guide to React Native Navigation. Here we discuss the introduction to React Native Navigation, how navigation works with examples. There are several third-party libraries that can be used to provide more customizations to navigation. You may also have a look at the following articles to learn more –
