Learn about Navigators in React Native.

In this tutorial I will discuss how you can add navigators to your react native app.

Navigation is an essential part of any mobile app and in react native we can implement it easily with the react-navigation package which resembles exactly to react-router-dom in React.js

Ok lets get started. First install all the necessary npm packages related to navigation.

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

After installing these npm packages in your react native app, add the below code to your main app.js to use the stack navigator in your react native app.

There are different types of navigators like,

1. Stack Navigator
2. Drawer Navigator
3. Navigator at the bottom of app

In this post we will be using stack navigator.

Stack navigator is the most prevalent type of navigators in mobile phones.

It operates via the stack method which involves something like LIFO(Last in First out) concept.

import React from 'react';
import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Home from './Components/Home'
import Map from './Components/Map'

const Stack = createStackNavigator();

const App = ()=> {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen options={{ title: 'Neo Budget' }} 
          name="Home" component={Home} />
         <Stack.Screen name="Map" component={Map} />

      </Stack.Navigator>
    </NavigationContainer>
  );

}

export default App;

Here is the working example of it.

First we import all the npm packages and we wrap the the stack navigator with the parent Navigation Container.

Then we use the stack navigator just like how we do in react router.

We set the component to the stack screen to tell the navigator to look in that component when we use the navigate prop and set the title of our app in it with option prop.

Now the biggest advantage here is that we can send props to the other component with the stack navigator.

import React,{useState,useEffect} from 'react';
import {Text,View,Button} from 'react-native'
const Main = ({navigation}) => {
return(
<View>
 <Button onPress={() => navigation.navigate('Home',{data:item})} title="Go to Data"></Button>
</View>
)}

And then we can access the props in the other component just like we do in react like below,

import React,{useState,useEffect} from 'react';
import {Text,View} from 'react-native'
const Home = ({route}) => {

 return (
        <View>
         <Text>{route.params.data}</Text>
        </View>
}

export default Home;

And that's how we can integrate stack navigator in our mobile app and pass data from one page from to another.

Remember the heirarchy of using navigators:

1. Import all the packages in app.js and wrap it like react router.
2. Then we can use them like simple components and send data with navigation.navigate to other components and catch that data with route.params.variable.

I have just scratched the surface of navigators here and in the next post I will discuss how we can style our navigators, add buttons to them and discussing about using,

• goBack()
• push()
• pop() in our stack navigators and also be discussing about drawer navigators which is being used by all of the top firms in their mobile apps.

I will also be using Async-storage which is used to store data to mobile and is the exact carbon copy of local storage in browser

Stay tuned.

Thank you for reading!!

Check out my portfolio: Gautham's portfolio

Check out my blog: coding-magnified.tech

Check React Project about budgeting: neo-budget

My Other Articles:

• Universal CSS properties everyone must know

• Create-react-app

• Git for beginners

• Change headers in react with react-helmet

• Know How to apply box-shadow on all four sides.

• Simple CSS Selectors.

• CSS Pseudo Elements.