In this article, we are going to implement navigation in React Native using only three libraries. It is easy, and beginner friendly article to understand and implement your own navigation for your apps.

Imports for React native navigation?

For navigation in react native, you are going to need following libraries:

@react-navigation/native

@react-navigation/native-stack

react-native-screens

You can make the react navigation work using only the first two libraries. But you will run into problems once you upload your app to Google play store. So, you will need to install these three libraries, so you can easily upload your app to Google play store without any issues.

Implementing navigation in react native?

Create Expo App

You can initialize a React Native app, using either bare npm, or with Expo. In this article, we are going to see how we can create a React native app using Expo.

All you need to do is write the following in the cmd. It will create a react native app using Expo.

npx create-expo-app my-app

This will download and install all the required files for your app. Once this finishes up, you can run the following command to run your app on your device or android emulator.

npx expo start

Installing Libraries

Now that your basic app is generated, and you can run it in the emulator. Next, you will need to install libraries for navigation.

npm i @react-navigation/native-stack @react-navigation/native-stack npm i react-native-screens

Simple copy and paste the above line to install all of the required libraries in one go.

Handling imports

Paste the following lines of code in the App.Js file

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();

These lines will allow you to create different screens for different sections of your application. Now we will create four different screens in the next section.

Creating Screens

Create four pages in screens folder.

Now we need to import our individual pages from screens folder and use them to make navigation screens as follows.

//importing different pages
import HomePage from "./screens/Home"
import ContactPage from "./screens/Contact"
import AboutPage from "./screens/About"
import MainScreen from "./screens/Main"

const Stack = createNativeStackNavigator();

export default function App() {
  return (
<NavigationContainer>
    <Stack.Navigator initialRouteName='mainscreen'>
    <Stack.Screen
        name="mainscreen"
        component={MainScreen}
        options={{headerShown:false}}
      />
    <Stack.Screen
        name="home"
        component={HomePage}
        options={{headerShown:false}}
      /> 
      <Stack.Screen
        name="about"
        component={AboutPage}
        options={{headerShown:false}}      
      /> 
      <Stack.Screen
        name="contact"
        component={ContactPage}
        options={{headerShown:false}}
      />
    </Stack.Navigator>
</NavigationContainer>
  );
}

Creating Menu Items

After we have installed navigation libraries, created and imported screens, we now need to display menu items so we can click and move through different pages. For that, we will have our main.js file act as the initial page, that will gets rendered on first app load. There we will have three menu items, for home, about, and contact pages.

The code for the menu page is as follows:
(I have removed styles from this code, for simplicity. But detailed code will be available in the github repo.)

import { View, Text, StyleSheet, StatusBar, TouchableOpacity } from 'react-native'
import React from 'react'
import { useNavigation } from '@react-navigation/native'


const Main = () => {
    const navigation = useNavigation()

  return (
    <>
    <StatusBar/>
    <View>
      <Text>React Native Navigation</Text>
      <TouchableOpacity onPress={()=>navigation.navigate("home")}><Text>Home</Text></TouchableOpacity>
      <TouchableOpacity onPress={()=>navigation.navigate("about")}><Text>About</Text></TouchableOpacity>
      <TouchableOpacity onPress={()=>navigation.navigate("contact")}><Text>Contact</Text></TouchableOpacity>
    </View>

      </>
  )
}
})
export default Main

Displaying Headers

As we saw previously that we created four different screens. But we hid the header as we displayed our own content. But what if we want to show header for each screen. We can easily do this by modifying our options in Stack.Screen.

You can customize this header any way you want. Also, it comes with back functionality on its own, so you don’t need to add your own back button.

Navigating between screens

To navigation between screens, all you need to do is the following:

• Import useNavigation from “@react-navigation/native”
• Navigate on the press of button, using navigate and name of the screens that you want to navigate to.

import { View, Text, TouchableOpacity } from 'react-native'
import { useNavigation } from '@react-navigation/native'


const Main = () => {
    const navigation = useNavigation()

  return (
    <View>
      <Text>React Native Navigation</Text>
      <TouchableOpacity onPress={()=>navigation.navigate("home")}><Text>Home</Text></TouchableOpacity>
      <TouchableOpacity  onPress={()=>navigation.navigate("about")}><Text>About</Text></TouchableOpacity>
      <TouchableOpacity onPress={()=>navigation.navigate("contact")}><Text>Contact</Text></TouchableOpacity>
    </View>
  )
}
export default Main

Going back

If you need to go back one screen, you can use the goBack() functionality from @react-navigation/native.

import { useNavigation } from '@react-navigation/native'
const navigate = useNavigation()
<TouchableOpacity onPress={()=>navigate.goBack()}><Text>Go Back</Text></TouchableOpacity>

Conclusion

There you go. Comprehensive, to the point article on React Native Navigation. Code is available on GitHub.