React-native react-navigation tutorial with navigationOptions

React-native react-navigation tutorial

In this article, we going to learn about React-native react-navigation tutorial with navigationOptions, if you are going to develop an application then you must learn react-native navigation, the best way to navigate from one screen to another is React-native’s Stack navigation this allows you to navigates to multiple screens, transfer data from one screen through to another, you can add special transition while navigating through screens to use this we need to install library called React navigation

Overview

  1. Create react-native project
  2. Create two screens in the project under the Component folder
  3. Install React navigation
  4. Usage navigation

1. Create react-native project

If you don’t know about basics of react-native then please read this article

2. Create two screens

I have two screens in my project first screen is default App.js, HomeScreen.js and third is detailsView.js screen

3. Install React navigation

To install react navigation open command line and goto project root folder and type following command

this will install react navigation library in our node_modules folder

4. Usage

To use this library first import this as follows in App.js

after that, we need to define our every new screen in Stack navigation to do this first import screens

after imports all screen defined all screen

We need to call this const navigation in return method

This will return HomeScreen and displayed render data from Home screen now consider HomeScreen.js is displayed and we need to go detailView.js from home screen then just add the following line on the onPress event of the button

This will navigate to detailView.js. you can also pass data from this onPress navigation event

You can send the whole object also just define the key for that object and pass the object, also make sure name detailView is same as in App.js navigation definition

App.js code

React navigation options

Navigation option is the most important thing in react-native which provide different option to navigate on the screen let’s understand with the code below:

As we see in above code we can set Title, headerStyle which change the background color, headerTintColor is the text color on the toolbar, headerTitleStyle set style to text, headerleft generally contain back button we can add also a custom back button here, headerRight we can add an icon on the right-hand side of the navigation toolbar we can add multiple icon here

Thank you 🙂 enjoy coding…

 

 

 

9 Replies to “React-native react-navigation tutorial with navigationOptions”

  1. Hi,
    This is absolutely wonderful post. Thanks for sharing.
    I am bit stuck in navigating through header if you could help. The following is my code

    (

    “want to navigate to Screen2”}>

    ),

    }} />

    Any help would be appreciated.
    thanks

      1. Thanks
        Unfortunately,this doesn’t work for me because i am unable to add navigationOptions in my and it throws an error (can’t find variable: navigationOptions).
        The second solution I tried has the same problem it throws an error (can’t find variable navigation)
        The reason it doesn’t work for me because I have a separate JS class for handling navigation.
        In case if you want to check I referred this post for stack navigation.
        https://heartbeat.fritz.ai/getting-started-with-stack-navigator-using-react-navigation-5-in-react-native-and-expo-apps-4c516becaee1

        Cheers!!

        1. Got it,
          Just put the following code in your Home.js

          const { navigation } = props

          React.useLayoutEffect(() => {
          navigation.setOptions({
          headerRight: () => (
          // onPress={()=> navigation.navigate(‘Detail’,{ item: character })}
          ),
          });
          }, [navigation]);

Leave a Reply

Your email address will not be published. Required fields are marked *