navigate
- React Native course
- Beginner
- Lesson 90/116
- 5 min
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.
Practice 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.
Starter code
function HomeScreen({ navigation }) {
return (
<View>
<Text>Home</Text>
{/* add a transition button */}
</View>
);
}Sample 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.
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does navigation.navigate('Details') do?
navigation.navigate('Details')- Pushes the Details screen on top of the stack Correct answer
- Closes the app
- Pops the Details screen from the stack
- Deletes all screens
Explanation: navigate pushes the target screen on top of the stack.
2 Fill in the blank: navigate to Details
navigation.____('Details');navigation.navigate('Details');Explanation: navigate moves you to the target screen.
3 Match: function and effect
| Term | Meaning |
|---|---|
navigate |
pushes a new screen |
goBack |
returns to previous screen |
setParams |
updates params |