Skip to main content

Moving between screens

In the previous section, we defined a stack navigator with two routes (Home and Details), but we didn't learn how to let a user navigate from Home to Details.

If this was a web browser, we'd be able to write something like this:

<a href="details.html">Go to Details</a>

Or programmatically in JavaScript:

window.location.href = 'details.html';

So how do we do this in React Navigation? There are two main ways to navigate between screens in React Navigation:

The simplest way to navigate is using the Link component from @react-navigation/native or the Button component from @react-navigation/elements:

import * as React from 'react';
import { View, Text } from 'react-native';
import { createStaticNavigation } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Link } from '@react-navigation/native';
import { Button } from '@react-navigation/elements';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Link screen="Details">Go to Details</Link>
      <Button screen="Details">Go to Details</Button>
    </View>
  );
}

function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

const RootStack = createNativeStackNavigator({
  initialRouteName: 'Home',
  screens: {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
});

const Navigation = createStaticNavigation(RootStack);

export default function App() {
  return <Navigation />;
}
Try on Snack

The Link and Button components accept a screen prop specifying where to navigate when pressed. On the web, they render as anchor tags (<a>) with proper href attributes.

note

The built-in Link and Button components have their own styling. To create custom link or button components matching your app's design, see the useLinkProps hook.

Using the navigation object​

Another way to navigate is by using the navigation object. This method gives you more control over when and how navigation happens.

The navigation object is available in your screen components through the useNavigation hook:

import * as React from 'react';
import { View, Text } from 'react-native';
import {
  createStaticNavigation,
  useNavigation,
} from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Button } from '@react-navigation/elements';

function HomeScreen() {
  const navigation = useNavigation();

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button onPress={() => navigation.navigate('Details')}>
        Go to Details
      </Button>
    </View>
  );
}

// ... other code from the previous section
Try on Snack

The useNavigation hook returns the navigation object. We can call navigate with the route name we want to go to.

note

Calling navigation.navigate with an incorrect route name shows an error in development and does nothing in production.

What happens if we navigate to Details again while already on the Details screen?

function DetailsScreen() {
  const navigation = useNavigation();

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Button onPress={() => navigation.navigate('Details')}>
        Go to Details... again
      </Button>
    </View>
  );
}
Try on Snack

Tapping "Go to Details... again" does nothing because we're already on that route. The navigate function means "go to this screen" - if you're already there, it does nothing.

Let's say we actually want to add another Details screen. This is common when you pass unique data to each route (more on that when we talk about params!). To do this, use push instead of navigate. This adds another route regardless of the existing navigation history:

<Button onPress={() => navigation.push('Details')}>
  Go to Details... again
</Button>
Try on Snack

Each push call adds a new route to the stack, while navigate only pushes if you're not already on that route.

Going back​

The native stack navigator's header automatically shows a back button when there's a screen to go back to.

You can use navigation.goBack() to trigger going back programmatically from your own buttons:

function DetailsScreen() {
  const navigation = useNavigation();

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Button onPress={() => navigation.push('Details')}>
        Go to Details... again
      </Button>
      <Button onPress={() => navigation.goBack()}>Go back</Button>
    </View>
  );
}
Try on Snack
note

On Android, React Navigation calls goBack() automatically on hardware back button press or back gesture.

Sometimes you need to go back multiple screens at once. For example, if you're several screens deep in a stack and want to go back to the first screen. You have two options:

  • navigation.popTo('Home') - Go back to a specific screen (in this case, Home)
  • navigation.popToTop() - Go back to the first screen in the stack
function DetailsScreen() {
  const navigation = useNavigation();

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Button onPress={() => navigation.push('Details')}>
        Go to Details... again
      </Button>
      <Button onPress={() => navigation.goBack()}>Go back</Button>
      <Button onPress={() => navigation.popTo('Home')}>Go to Home</Button>
      <Button onPress={() => navigation.popToTop()}>
        Go back to first screen in stack
      </Button>
    </View>
  );
}
Try on Snack

Summary​