How to Go Back to a Specific Screen in React-Navigation Library

1. How to Navigate React Application Using the react-navigation Library
2. Use the goBack() Method to Go Back One Screen in React Native
3. Use the goBack() Method to Go Back to a Specific Screen in the Navigation Stack in React Native

React Native is a JavaScript library that allows you to write mobile applications in JavaScript. It is component-based, saving many hours of writing repetitive code.

It has its own templating language JSX that is easy to learn and allows you to declaratively define and invoke elements.

React Native doesn’t include built-in navigation functionality, so developers have to use external libraries to navigate from one page to another. The react-navigation is one of the most popular libraries for implementing navigation features in React Native.

This article explores how developers can use react-navigation to go back to the previous page or a specific page in the navigation stack.

How to Navigate React Application Using the react-navigation Library

Navigation in React Native applications is a little different from typical websites. Technically, the entire application is already loaded, so the user can view one screen at a time by changing the URL.

There are no built-in back and forward buttons in mobile applications like the ones you’d find in a web browser. However, in React Native, there is a better way to allow users to go back (or forward) by one screen.

You can implement the button that, when clicked, returns the user to a specific screen. In react-navigation, you can do that using the goBack() method.

Use the goBack() Method to Go Back One Screen in React Native

The goBack() method is one of the most important methods in the react-navigation library. It allows you to go back to one of the previous screens in your navigation stack.

If you don’t supply any arguments, it will perform the default action and take you one step back in the navigation stack. Let’s look at an example.

function DetailsScreen({ navigation: { goBack } }) {
  return (
    <View>
      <Button onPress={() => goBack()} title="Return to the previous screen from the Details component" />
    </View>
  );
}

Clicking this button will take you back to the screen you viewed before the DetailsScreen component.

Use the goBack() Method to Go Back to a Specific Screen in the Navigation Stack in React Native

It’s important to understand that to go back to a specific screen in the navigation stack using the goBack method, you must call it from the component you want to go back from.

If you want to go back multiple screens, you must provide an argument to the goBack() method: the string value key of the screen you want to go back one step from. If it sounds confusing, read it multiple times, but also let’s look at the practical example.

Let’s imagine we have four screens in the navigation stack: Homepage > Category > Post > Details. If you’re currently on the Details screen and want to go back to the homepage, you should pass down the key value of the screen right after Homepage, which is Category.

Afterward, when you call the goBack() method from the Details, you must pass that key value of the Category screen as the argument, like below.

<Button onPress={() => goBack(key)} title="Return to multiple steps to Homepage screen" />

In short, the key value you provide to the goBack() method is used to specify the component you should go back one step from.