React Native Getting Started With React Navigation 3.x Tutorial to Add Activity

Hello guys, As we all know react navigation has recently launched its new version 3.x with some major new upgrades. Old React Navigation components name is changed. So it cannot work with old components if you have the older version of react navigation 1.0 or 2.0 then the old components will but other than if you have install new version 3.x then you should use its newly hybrid components. So in this tutorial we would going to add multiple activities screen in our react native project using react navigation 3.x in android iOS application example tutorial. So let’s get started ūüôā .

Contents in this project Getting Started With React Navigation 3.x Tutorial to Add Activity in Android iOS React Native project :

1. Open your react native project in Command Prompt or Terminal and execute below command to install the react navigation library in your project.

Screenshot of CMD :

Screenshot of CMD after successfully executing above command:

2. Now we need to install the react-native-gesture-handler library in our project in order to use it with android and iOS. If you are using EXPO then you can leave this step. To install the react-native-gesture-handler execute the below command in your react native project.

Screenshot of CMD :

Screenshot of CMD after executing above command:

3. Finally we need to execute the react-native link  command in your project so it will re-arranged the complete react native project folder and index the newly installed libraries.

4. No additional steps are required for iOS devices for iOS applications it is ready to go.

5. To configure the react-native-gesture-handler library for react native project we need to add some additional libraries in our MainActivity.java file.

So goto YourProject Р> android -> app -> src- >main -> java -> com-> YourProject -> MainActivity.java file. Open MainActivity.java file in edit mode in notepad or any text editor and put below files.

You need to also put the return function for ReactActivityDelegate.

Complete source code or our MainActivity.java file, It will help you to understand all the modifications:

6. Now all the changes is been made, Its time to start coding ūüôā .

7. Open your project’s App.js file and import¬†StyleSheet, Text, View and Button component in your project.

8. Import the createStackNavigator and createAppContainer component of react navigation in your project. I will explain their usages in next step.

9. Create a View class in your project named as HomeScreen, Inside this class we would simply create a View. This would be our Home screen of application.

static navigationOptions : It is used to add some extra data in application activity header title bar.

title : Used to show the activity title name in Action Title bar.

gotoNextActivity : Inside this function we would simply creating the react navigation’s navigate method to navigate the second activity.

Screenshot of Home screen :

React Navigation10. Creating another activity named as SecondScreen in your project. This would be our second screen activity of application.

Screenshot of Second Screen:

11. Creating a Constant named as RootStack with createStackNavigator component and pass all the two created classes inside it with unique identifier like Home and Second. Now we will access these classes with the identifiers.

initialRouteName : Is used to define the Home Screen of application, You can define any of your screen here and it will become your home screen.

12. The final step is to pass the complete RootStack constant holder into createAppContainer component.

13. Creating Style:

14. Complete source code for App.js File :

Screenshots:

Leave a Reply

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