React Native Finish Current Activity Route Screen Navigate to Next using createSwitchNavigator Example Tutorial

Since we all start development in react native its been very hard for new beginners to kill the current activity and then navigate to another so when application user clicks on the back button it will not allow him to go back on previous activity. But now using the createSwitchNavigator component of React Navigation library we can do it easily with a single line of code and all of our activities defined inside the createSwitchNavigator block will not be loaded on back button press event and can be only load if user want to navigate them using this.props.navigation.navigate function(). So in this tutorial we would going to Finish Current Activity Route Screen Navigate to Next using createSwitchNavigator Example Tutorial in react native android iOS app. So let’s get started 🙂 .

Note : This kind of functionality is mostly used in login applications where developer needs to finish the Profile activity after clicking on Logout button, so user cannot go back after logout.

Contents in this project Finish Current Activity Route Screen Navigate to Next using createSwitchNavigator Example Tutorial in React Native Android iOS App:

1. The most important step is the install the React Navigation library into our current react native project so we can use its inbuilt createSwitchNavigator component. So to install the react navigation library open your react native project folder in command prompt / terminal and execute below command.

Screenshots of CMD :

2. Now the installation part is done, now we need to start coding. Import the StyleSheet, Text, View and Button component in your App.js file.

3. Import the createSwitchNavigator component from react navigation library.

4. Create the first activity class named as MainActivity. This class would be our main home class.

static navigationOptions : title : Used to set the Activity title shows inside the Action bar.

gotoSecondActivity : Inside this function we would navigate to next activity.

Screenshot of MainActivity :

Finish Current Activity Route Screen Navigate

5. Creating another SecondActivity class in your project. This would be our next class.

Screenshot of SecondActivity:

6. Creating the createSwitchNavigator method and pass both activity classes inside it , This would automatically add the functionality to finish the current activity on going to next.

7. Creating the CSS Style sheet.

8. Complete source code for App.js File :

Screenshots:

4 Comments

  1. how will pass a this.state data from MainActivity to SecondActivity using props? please help..this example is working in my app but i want to pass a state value from mainactivity to secondactivity… please please help

    • Nazeer you cannotpass state from one activity to another instead you can pass the value of state to another activity and then on the next activity you can receive the value.

  2. How can I finish current screen when move to another screen ?

    • Rohit when you are using switch navigator as i have shown in this tutorial then it will automatically finish the current screen while moving to next.

Leave a Reply

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