React-navigation 5.0 example react-native

Hi guys, in this article we are going to learn about How to use React-navigation 5.0 example react-native, as we have already familiar with previous versions of react-navigation. in this version in this, we can change configuration dynamically, also can access context, props, and state in the navigator, this is a most important update of react-navigation so let’s start with making a new project using expo

1. Create a new project

Firstly, install expo client using the following command

Create a project using the following command

2. Install React-navigation 5.0

first, install the following library for react-navigation

then install supportive libraries using the following command

3. Create screens

We are going to create two screens one is Home.js and the second is details.js

1. Home.js

As we can see in the above code, I have added one button on the Home screen to navigate to next screen for this we have to get navigation from props as below

To navigate between screens

2. Details.js

4. Create stack navigator

Import the following components

We have to define screens inside Stack.navigator and add this Stack.Navigator inside parent NavigationContainer 

1.  MainStackNavigation.js

5. App.js

Simply define MainStackNavigation in App.js

Note: Data transfer between screen is the same as previous versions of react-navigation

to start expo project use following command

6. How to use React-navigation 5.0 exampleHow to use React-navigation 5.x react-native

 

Leave a Reply

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