React Native Navigation
By: Pritam Banerjee
Tags: React Native, React Native Tutorial, React Native Routing, React Native Navigation, Navigation Tutorial

React Native Navigation is one of the important part for any mobile application because it will create routing mechanism or navigation for your mobile application. Now the point is how to create React Native Navigation, So there are some couple of packages available in the market to create React Native Navigation or Routing. But among them we will discuss the best package to create React Native Routing and that is none other than React Native official package for navigation. So please check step by step information that how to create React Native Navigation.

Installation and Setup

First, you need to install the react native navigation in your project by using npm or yarn package manager and the command is given below.

npm install @react-navigation/native @react-navigation/stack yarn add @react-navigation/native @react-navigation/stack

If you are using expo then you need to install expo package and the command is given below.

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

To finalize installation of react-native-gesture-handler , add the following at the top (make sure it's at the top and there's nothing else before it) of your entry file, such as index.js or App.js

Create App Component

import { StatusBar } from 'expo-status-bar'; import React from 'react'; import { StyleSheet, Text, Image, View, Alert } from 'react-native'; import Header from './components/header'; import { Button } from 'react-native-paper'; import Home from './components/non-secure/Home'; import Routes from './Routes'; export default function App() { return ( <React.Fragment> <Header /> <Routes /> </React.Fragment> ); }

So you can see that we have created two components one is Header and an another one is Routes component and we are using functional components so that we take the benefits of react hooks and context API. For UI we are using React Native Paper and their corresponding packages. Now lets create Routes component.

Create Routes Component

import Home from './components/non-secure/Home' import * as React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import Register from './components/non-secure/Register'; import Profile from './components/secure/Profile'; const Stack = createStackNavigator(); const Routes = () => { return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Home" component={Home} options={{ title: 'Home' }} /> <Stack.Screen name="Register" component={Register} /> <Stack.Screen name="Profile" component={Profile} /> </Stack.Navigator> </NavigationContainer> ); }; export default Routes;

So if you see the above code here we are creating a createStackNavigator function to create Stack component and after stack component it will take some props. So the name and component both are two mandatory props, name will define in what will be the navigation name and by using the navigation name we will go to any other pages and the other one is component. So in the component props we just simply define the component that’s it, Now you just created the routes. So lets create header component.

Create Header Component

import { StatusBar } from 'expo-status-bar'; import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { Appbar } from 'react-native-paper'; export default function Header() { return ( <Appbar.Header> <Appbar.Content title="Application Name" /> </Appbar.Header> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, bottom: { position: 'absolute', left: 0, right: 0, top: 50, }, });

So Now we just created a simple header by using React Native Paper Appbar header and content component which will give us mobile app header. Now lets create Profile and Register Component.

Create Register Component

So in Register component we will create a simple form using react-native-paper-form-builder and then once they will fill up the form and submit it then they will go to Profile Component. So that you will get an idea how this navigation will work.

import React, { useState } from 'react' import { StyleSheet, Text, Image, View, Alert, TouchableOpacity, ScrollView } from 'react-native'; import FormBuilder from 'react-native-paper-form-builder'; import {useForm} from 'react-hook-form'; import { Button } from 'react-native-paper'; const Register = ({ navigation }: any) => { const [confirm, setConfirm] = useState(null); const [code, setCode] = useState(''); const form = useForm({ defaultValues: { firstName: '', lastName: '', phone: '', }, mode: 'onChange', }); const Signup = async (data: any) => { console.log(data); navigation.navigate('Profile') } return ( <React.Fragment> <View style={styles.containerStyle}> <ScrollView contentContainerStyle={styles.scrollViewStyle}> <Text style={styles.headingStyle}>Customer/Merchant Registration</Text> <FormBuilder form={form} formConfigArray={[ { type: 'input', name: 'firstName', label: 'First Name', rules: { required: { value: true, message: 'First Name is required', }, }, variant: 'outlined', textInputProps: { autoCapitalize: 'none', }, }, { type: 'input', name: 'lastName', label: 'Last Name', rules: { required: { value: true, message: 'Last Name is required', }, }, variant: 'outlined', textInputProps: { autoCapitalize: 'none', }, }, { type: 'input', name: 'phone', label: 'Phone', rules: { required: { value: true, message: 'Phone Number is required', }, }, variant: 'outlined', textInputProps: { autoCapitalize: 'none', }, } ]}> <Button mode={'contained'} onPress={ form.handleSubmit((data: any) => { Signup(data); })}> Submit </Button> </FormBuilder> </ScrollView> </View> </React.Fragment> ) } export default Register const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, title: { textAlign: 'center', marginVertical: 8, }, fixToText: { flexDirection: 'row', justifyContent: 'space-between', }, separator: { marginVertical: 8, borderBottomColor: '#737373', borderBottomWidth: StyleSheet.hairlineWidth, }, containerStyle: { flex: 1, }, scrollViewStyle: { flex: 1, padding: 15, justifyContent: 'center', backgroundColor: '#fff' }, headingStyle: { fontSize: 18, textAlign: 'center', marginBottom: 40, }, });

So when we will click on Submit button then it will navigate to Profile Component, By using this code we can navigate ‘navigation.navigate(‘Profile’)’ and in here in the navigate function we have given a parameter which is nothing but route name. So now our Register component is ready and lets create a simple Profile component.

Create Profile Component

import React, { useState } from 'react' import { StyleSheet, Text, Image, View, Alert, TouchableOpacity, ScrollView } from 'react-native'; import { Title } from 'react-native-paper'; const Profile = () => { return ( <React.Fragment> <View style={styles.container}> <Title>Profile Page</Title> </View> </React.Fragment> ) } export default Profile const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, title: { textAlign: 'center', marginVertical: 8, }, fixToText: { flexDirection: 'row', justifyContent: 'space-between', }, separator: { marginVertical: 8, borderBottomColor: '#737373', borderBottomWidth: StyleSheet.hairlineWidth, } })

So now our code is ready where you can do a simple navigation from Register page to Profile page using react navigation package. But you can customize it for your own needs and it also provides some of best advance features.