Add New Activity in React Native App Using StackNavigator Android iOS Tutorial

Activities also knows as screens is used to add multiple individual pages( Screens ) in react native android and iOS applications. Activity is the only way to show another screen with its own individual component sets on it without interrupting the other activity. So in this tutorial we would going to add new activity in our react native application using StackNavigatorStackNavigator is the module of react navigation library. So let’s get started 🙂 .

NOTE : This is the older version of React Navigation, In new version all the components is changed so read our New React Navigation 3.x tutorial.

Contents in this project Add New Activity in React Native App Using StackNavigator :

1. Start a fresh React Native project. If you don’t know how then read my this tutorial.

2. Add react-navigation library inside your project :

1 : Open your project using command prompt like i did in below screenshot and type below command inside your react native project folder. For example : My project name is ActivityProject . So first i am going into my ActivityProject project using cd command then inside that project folder i have to type the below command.

2 : After start installing react navigation library the screen should look like below screenshot :

3 : After done installing react-navigation library the screen should look like below screenshot.

3. Start coding :

1. After successfully installed the react navigation library next step is to start coding, So open your project’s App.js file.

2. Add AppRegistry , StyleSheet , Text , View , Button component in import block.

3. After adding all above component we should have to add the StackNavigator import from react-navigation block.

4. Create a fresh class named as MainActivity and extend Component to that class. This class should  be our first main activity.

5. Add static navigation options inside that class. Using the static navigation options we can set our activity title name which would show inside the activity above Toolbar / Action bar.

6. Create a function named as OpenSecondActivityFunction . This function would allow us the open the second activity on button click.

this.props.navigation.navigate(‘Second’) : The second parameter pass in this function indicates to the second activity.

7. Add render’s return method in this class and add View component as parent and inside the View component add 1 Text component and 1 Button component. We are also calling the OpenSecondActivityFunction on button onPress.

Add New Activity

8. Now create another class named as SecondActivity just after MainActivity class. This should be our second screen.

9. Now as you can see in above mentioned code we have calling style sheet named as container and ActivityNameTextCss . So we need to create both css class .

10. Step 10 is very important because in this step we would navigate the MainActivity and SecondActivity using StackNavigator method. Place this code just after the SecondActivity class.

First object navigate to MainActivity.

Second object navigate to SecondActivity.

11. Complete source code for App.js File :

Screenshot in Android device :

Screenshot in iOS device :

Stack Navigator activity calling life cycle :-

6 Comments

  1. hi admin,
    it worked when i did like this :-

    const FirstProject = StackNavigator(
    {
    First: { screen: LoginActivity },

    Second: { screen: ProfileActivity},
    });
    export default () => ;

  2. I have a query :-
    if i have to use external js file to include in this i.e my LoginActivity and ProfileActivity classes are different js files. then how can i use stack navigator with that.

  3. Awesome Blog with very neat and wonderful explanation. Thank you so much

  4. Hi Sir,
    This is mind blowing tuts am following your tuts buts am struggling to install react (Stack Navigation and guest-handler node_module ) means am not figuring out it well

Leave a Reply

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