Hi everyone, In this article we are going to talk about React Navigation in React Native. What is React Navigation? How can we install and configure and how can we use it ?

Firstly I want to talk about What React Navigation is ?

React Navigation is an easy-to-use JavaScript plugin to move screens expected. React Navigation has developed as entirely native.

Now Let’s get started configuring React Navigation.

VERY IMPORTANT NOTE: I have installed on RN 0.60 version. Installation can be changed for different versions. I have copied the installation guide from official React Navigation page today / 15.07.2019. I recommend to check React Navigation Official page.

Here is the link: https://reactnavigation.org/docs/en/getting-started.html

Install the react-navigation package in your React Native project.

I recommend start command prompt as administrator in Windows.

Next, install react-native-gesture-handler. If you’re using the Expo managed workflow then you don’t need to do anything here, it’s included in the SDK. Otherwise:

On React Native >= 0.60, linking is automatic. If you’re on an older React Native version, you need to manually link it. If there is a problem on this step you need to restart command promt as administrator . To do that, run:

No additional steps are required for iOS.

To finalise installation of react-native-gesture-handler for Android, be sure to make the necessary modifications to MainActivity.java :

Use jetifier to work around libraries using the support library on Android:

Add jetify under scripts.postinstall in your package.json:

Then install it (make sure to run this after adding the postinstall script)::

Finally, run react-native run-android or react-native run-ios to launch the app on your device/simulator.

Hybrid iOS Applications (Skip for RN only projects)

If you’re using React Navigation within a hybrid app – an iOS app that has both Swift/ObjC and React Native parts – you may be missing the RTCLinkingIOS subspec in your Podfile, which is installed by default in new RN projects. To add this, ensure your Podfile looks like the following:

You’re good to go! Now we have installed React Navigation. Let’s make an example now.

First we need to import react Navigation libraries.

After importing libraries. Now create the react screens. In App.js file we can create all classes seperately.

Above code have three screens classes. Bottom of the code we have ceated an AppNavigator with createStackNavigator. We selected HomeScreen as initialRoute Screen. This means when the Appnavigator started Home screen will show firstly.

In ChatScreen class we have examples about passing parameters between screens.

In above code block we are navigating to the DetailsPage. In AppNavigator we have created DetailsScreen named as Details. So we must call this screen as Details in this function. Also we are passing a data named itemId to the DetailsPage. When we pressed the Button screen will go to the DetailsPage with itemId parameter.

Also we have a goBack() function in our ChatScreen. Now let’s take a look at it.

When we use this goBack() function our program will go to last screen and remove current screen from memory. When we use navigate to go another screen program will keep current screen in memory and go new screen. When we use the goBack() program will go last screen and clean current screen.

What If we want to just go to another screen without parameters ?

Here is the a navigate example. This example has no parameters. This code block will navigate new screen without parameter.

Now lets configure header bar on the pages.

Under the ChatScreen class there is an object named navigationOptions declerated as static. In here we have specified name of the screen and the left logo of the hader. In here I specified the person that I am chatting with. I have send the Image profile link and name of person from the before page. In here CSS rules will be enough.

So If we want to set a default configuration.

Then we need to put this code block under the options section in AppNavigator. Our AppNavigator code block will be like below.

This view will be default now and if we want to specify for the page, we need to declera under all pages.

Thats all for this article.

Keep following my posts.

Have a nice coding…

Burak hamdi TUFAN.


Please enter your comment!
Please enter your name here