Categories
JavaScript Answers

How to reset the navigation stack for the home screen with React Navigation and React Native?

Spread the love

Sometimes, we want to reset the navigation stack for the home screen with React Navigation and React Native.

In this article, we’ll look at how to reset the navigation stack for the home screen with React Navigation and React Native.

How to reset the navigation stack for the home screen with React Navigation and React Native?

To reset the navigation stack for the home screen with React Navigation and React Native, we can use the navigation.dispatch and the CommonActions.reset methods.

For instance, we write

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

navigation.dispatch(
  CommonActions.reset({
    index: 1,
    routes: [
      { name: "Home" },
      {
        name: "Profile",
        params: { user: "jane" },
      },
    ],
  })
);

to call navigation.dispatch with the object returned by the CommonActions.reset method.

We call CommonActions.reset with an object that resets the navigation state of the app to the have the Home and Profile routes.

The existing navigation state is replaced with the items we called CommonActions.reset with.

Conclusion

To reset the navigation stack for the home screen with React Navigation and React Native, we can use the navigation.dispatch and the CommonActions.reset methods.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.