How to add on click React-navigation 5.0 header react native

Hi Guys, In the last article, we learned about How to add on click React-navigation 5.0 header react native, in this article will learn about header onPress react-navigation 5.0. we are going to create a project with react-navigation 5.0 with two screens home.js and details.js and customize header using navigation.setOptions in React.useLayoutEffect, let’s start with an example

1. Create a new project

To know more about react-navigation 5.0 check this post to learn step by step installation and how to use react-navigation 5.0, setting up App.js, navigation from one screen to another and now will see how to navigate from header button

2. Install React-navigation 5.0

Install react-navigation using the following command with support libraries

Run the following command for supportive libraries

3. Screens

Create home.js and add following code in it

Create second screen Detail.js

4. Create Stack Navigator

Create MainStackNavigator.js and add the following code to it. we have to import both screens which we had created before and pass these screens to stack navigator. also, we have added style to the stack navigator using screenOptions. also, you can add different styles to different screens in the stack.screen

5. React-navigation 5.0 header onPress

Inside your function get navigation from props and set options to navigation using navigation.setOptions using React.useLayoutEffect. I have added the Right header text using headerRight in setOptions like below, other navigation props are the same as the previous versions of react navigationOptions

6. Output

Here’s is the output for How to add on click React-navigation 5.0 header react native

React navigation 5.0 header on press react native
React navigation 5.0 header on press react native

Thank you 🙂

Leave a Reply

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