React Navigation Latest Version 5.x in React Native Example Tutorial

React native has recently launched its new version 5.x with major changes. React navigation is used in react native apps to add and manage multiple screens. We can easily add multiple activities in our react native project using react navigation. React Navigation has changed its way of installation. Now we have to make some changes in Android’s default files. So in this tutorial we would learn about React Navigation Latest Version 5.x in React Native Android iOS Example Tutorial.

Contents in this project React Navigation Latest Version 5.x in React Native Example Tutorial:

1. The first step is to install the latest version of React Navigation library in our react native project. So open your react native project root folder directory in Command Prompt and execute below command.

Screenshot of CMD:

Screenshot of CMD after done installation:

2. Now we have to install reanimated, gesture handler, react native screens, react native safe area and masked view component in our react native project. So again open your react native root project folder in Command Prompt and execute below command. These libraries are compulsory for react navigation.

Screenshot of CMD:Screenshot of CMD after done installation:

3. Next step is to install the Stack Navigator library in your react native project. Because the libraries we have installed so fare is used to build blocks and shared foundation for navigator. Execute below command again in your Root directory of your react native project in Command Prompt or Terminal.

Screenshot of CMD:Screenshot after done installation:

4. Now your project is ready to go with new 5.x version of React Navigation. Next part is start coding for app. So open your project’s App.js file. Import react-native-gesture-handler at top of your code. If we do not import react-native-gesture-handler then it will not show us an error in debug mode but surely give error in original complete APK mode.

5. Import StyleSheet, Text, View and Button component in your project.

6. NavigationContainer and createStackNavigator component from react navigation library.

7. Create a function with function keyword named as HomeScreen with navigation prop. This is our first home screen. In latest version of react navigation they improves the structure of app coding. So this way we can easily make Views in react navigation.

  • navigateToScreen : Function is used to navigate to next screen on button onPress event in react navigation 5.x.

Screenshot of Home Screen:

8. Create another function class named as SecondScreen. This would be our Second activity screen of app.

Screenshot of Second Screen:

9. Create a Constant createStackNavigator() named as Stack.

10. Create a function named as App and put Stack.Screen with Screens names and wrap them in Stack.Navigator. We have to also wrap the Stack.Navigator in Navigation Container component. Navigation Container component holds the navigation state for all given child components classes.

11. Creating Style.

12. Call our main export default syntax then we have to call the App function here, Which would automatically render all the views.

13. Complete Source Code for App.js file class:

Screenshots:

React Navigation Latest Version 5.x in React Native Example Tutorial

10 Comments

  1. good tutorial sir , please create with custom drawer navigation. complete auth flow with redux
    1. login and registration screen
    2. home screen with custom drawer navigation

    • Rahul i am currently learning about Redux. As soon as possible i am finish with it. I’ll post a tutorial regarding your query. And one more thing please explain your need more briefly 🙂 .

  2. sir, if you need my code i can share with you

  3. Hello sir plis create crud, login with react context and react navigation 5 thanks before

  4. hi
    in need wand to put home screen code within homescreen.js file and second screen code in secondscreen.js file and navigation codes in App.js file. can you help me to re write above code into this format
    because my project contain more page of codes .

    • hii jithin
      you need to create project structure for code reusable
      1. root src folder
      inside src folder
      create components ,container,common,navigation,redux folders, and
      root.js file

  5. @Admin Can you share some references from where i can also learn about redux.

  6. Hello Sir, I really need to know how to make a nested menu in side drawer in the react navigation 5.x .

Leave a Reply

Your email address will not be published.