How to clear previous screens in React Native

Hi Guys, In this article we are going to learn about How to clear previous screens in React Native. As we all know React Native uses React Navigation to navigate between screens. When developing mobile applications with React Native, it’s important to manage the navigation flow and ensure that the user experience remains smooth and intuitive. One common requirement is to clear the previous screens when navigating to a new screen. In this article, we will explore how to achieve this using the CommonActions.reset method in React Native navigation. let’s understand with an example.

1. Import the necessary dependencies

To begin, make sure you have the necessary dependencies installed in your React Native project. This includes the react-navigation library, which provides a robust navigation solution for React Native apps. Import the required modules in the file where you want to implement the screen reset functionality

import { CommonActions } from '@react-navigation/native';

2. Implement the screen reset functionality

Inside your component, you can add a button or any other user-triggered event to initiate the screen reset. Here’s an example of how you can use the CommonActions.reset method in the onPress event handler

<TouchableOpacity
 activeOpacity={0.8}
 onPress={() => {
          navigation.dispatch(
          CommonActions.reset({
                   index: 0,
                   routes: [{ name: 'Home' }],
              })
           );
          // navigation.navigate('Home');
         }}>
<Text>Go to Home</Text>
</TouchableOpacity>

As you can see in the above code

• CommonActions.reset is a method provided by the react-navigation library that allows you to reset the navigation state.
• The reset method takes an object with two properties: index and routes.
• index specifies the index of the active route in the navigation stack. In this case, we set it to 0 to ensure that the “Home” screen becomes the active route.
• routes is an array of route objects that defines the new navigation stack. In this example, we only include the “Home” route.

3. Using navigation.pop() method

Import the following dependencies from React Navigation.

import { useNavigation } from '@react-navigation/native';

4. Source code previous Screens in React Native

import React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

const App = () => {
  const navigation = useNavigation();

  const handleClearAndNavigate = () => {
    navigation.pop(1);
    // Replace 'ScreenName' with the name of the screen you want to navigate to
    navigation.navigate('Home');
  };

  return (
    <Button title="Clear and Navigate" onPress={handleClearAndNavigate} />
  );
};

export default App;

Both solutions for offer flexibility in managing the navigation stack in React Native. Choose the approach that best fits your requirements and provides the desired user experience.

This is How to clear previous screens in React Native. Happy coding 🙂