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>
  );
}

// ... other code from the previous section
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