I implemented the router for the first time in React Native.

Image by starline on Freepik

React Navigation is the library I used to accomplish routing in my first React Native application.

Web browsers use session history whenever the user navigates from one page to another. These histories can be modified and manipulated later with the help of methods like go( ), forward ( ), and back( ), etc.

read more about history API here

Since React Native is not a web application, we might not have the concept of session history or history stack because the app is not running in a browser. React Navigation library allow us to create a history stack as browsers do.

This article is all about how I set up and made navigation between screens for the first time. I will take you through the journey I have followed to Install and Integrate it into my starting project.

Installation

Let us Install all the dependencies to make things work.

Firstly, Install the core react-navigation library.

npm install @react-navigation/native

Secondly, Install the Native Stack library to create a browser-like history stack in your app.

npm install @react-navigation/native-stack

Finally, let us install dependencies for the native-stack library as well.

npm install react-native-safe-area-context

npm install react-native-screens

We have installed all the required dependencies. It is time to go for Integration.

Integration

• I will create a react-native app with two screens to demonstrate route integration. There I will navigate from the Home screen to the Products screen.
• Copy and paste the code below into your App.js file.

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import Home from './screens/Home';
import Products from './screens/Products';

const Stack = createNativeStackNavigator();

export default function App() {
 return (
   <NavigationContainer>
    <Stack.Navigator> 
     <Stack.Screen name='Home' component={Home} />
     <Stack.Screen name='Products' component={Products} />
    </Stack.Navigator>
   </NavigationContainer>
 );
}

Don’t worry if you got confused. Let me brief it.

• We have imported NavigationContainer and createNativeStackNavigator from react-navigation. These two are responsible for setting up the navigation stack in the application.
• The Navigator component provided by the createNativeStackNavigator will act as a history stack. It will hold an ’n’ number of Screen components to construct a routing tree.

As you can see in the above code, the Screen component has two props. Let’s see what they do as well.

name : This prop is one of the inevitable props which accepts a value to identify a route. Different screens should have distinct names.

component : This prop will help us to load a particular component based on route name. for instance, when you use the name Home while navigating, it will load the component Home since it is the value of the component prop as per the code sample above.

Navigation from Home to the Products screen

Let’s see how to navigate to the Products screen from Home with a button click.

• Copy and paste the code below into your Home component file.

 const Home = (props) => {
 let { navigate } = props.navigation;

 const handleBtnPress = () => navigate('Products');

 return (
  <View>
   <Button title='Our Products' onPress={handleBtnPress} />
  </View>
 );
};

Let me explain what I have done in this code.

• The component attached to the component prop of the Screen will have access to the navigation object provided by the react-navigation.

<Stack.Screen name='Home' component={Home} />

• I destructured the navigate method from it for navigation.

Always remember that any child of the Home component will not have direct access to the navigation object.

• You may notice that I have passed ‘Products’ as the value for navigate function because this is the name I used for the Products screen in the App.js.

<Stack.Screen name='Products' component={Products} />

• I hope you understand the necessity for a name prop in the Screen component. Isn’t it?

That’s it for this article. See you next time 👋

Let me know in the comment section how well this article helped you as a beginner.

I will say you are my type if you love to build web and mobile apps for everyone. Are you my type? If so, we should stay connected.

Connect with me via link-tree