navigate

Learn to transition with navigation.navigate.

The navigate function

To move from one screen to another you call navigation.navigate('ScreenName'). This pushes the target screen on top of the stack. The navigation object is automatically passed as a prop to every screen component inside the stack.

You trigger the transition by calling navigate in the onPress handler of a Button or Pressable. For example: onPress={() => navigation.navigate('Details')}. The target screen name must match the name attribute of Stack.Screen exactly.

Exercise Your turn: add a button to navigate to Details

Add a Button to the HomeScreen component. When pressed it should call navigation.navigate('Details'). Receive the navigation prop from the component parameters.

Show example solution

function HomeScreen({ navigation }) {
  return (
    <View>
      <Text>Home</Text>
      <Button
        title="Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

The navigation prop

Every screen component inside a stack automatically receives a navigation prop. This prop contains functions like navigate, goBack and setParams. You can destructure it from the component parameters: function HomeScreen({ navigation }).

If the screen also needs route information (for example to read passed params), you can receive both: function Screen({ navigation, route }). These two props are injected automatically by React Navigation; you do not pass them manually.

Test yourself

What does navigation.navigate('Details') do?
```
navigation.navigate('Details')
```
- Pushes the Details screen on top of the stack
- Closes the app
- Pops the Details screen from the stack
- Deletes all screens
Show answer

Pushes the Details screen on top of the stack — navigate pushes the target screen on top of the stack.

Fill in the blank: navigate to Details

navigation.____('Details');

Show answer

navigation.navigate('Details');

Match: function and effect

navigate

pushes a new screen
goBack

returns to previous screen
setParams

updates params

Next lesson: params

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies