0PricingLogin▼
React Native Academy · Lesson

Navigating Between Screens and Passing Params

Use navigation.navigate to move between screens, pass parameters in the second argument, and read them with route.params on the destination screen.

The navigation Prop in Screens

Every component registered as a screen in a React Navigation navigator automatically receives a navigation prop. This object provides methods to move between screens, go back, and manage the navigation stack. You can also access it in nested components using the useNavigation hook.

function HomeScreen({ navigation }) {
  // navigation.navigate, navigation.goBack, etc.
  return <View />;
}

Navigating with navigation.navigate

Call navigation.navigate('ScreenName') to move to another screen. If the screen is already in the stack and you navigate to it again, React Navigation will go to the existing instance rather than adding a duplicate. Use navigation.push('ScreenName') to always push a new instance.

function HomeScreen({ navigation }) {
  return (
    <Button
      title='Go to Details'
      onPress={() => navigation.navigate('Details')}
    />
  );
}

All lessons in this course

  1. Installing and Configuring React Navigation
  2. Navigating Between Screens and Passing Params
  3. Bottom Tab Navigator
  4. Drawer Navigator and Nested Navigators
← Back to React Native Academy