React-navigation 5.0 header onPress react native

Hi Guys, In the last article, we learned about how to use new react-navigation 5.0 in 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 following code into it

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

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 *