React Native theorytheory 0/50 · 0%
Navigation · easy

9. Navigation basics

Stacks, tabs and screens with React Navigation.

Most apps use `@react-navigation/native` with a navigator like `createNativeStackNavigator` to move between screens, pushing new screens onto a stack and popping back.

import { createNativeStackNavigator } from "@react-navigation/native-stack";

const Stack = createNativeStackNavigator();

function App() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Wallet" component={WalletScreen} />
      <Stack.Screen name="TxDetail" component={TxDetailScreen} />
    </Stack.Navigator>
  );
}

Each screen receives a `navigation` prop; calling `navigation.navigate("TxDetail", { hash })` pushes a new screen and passes params that the target screen reads via `route.params`.

Check your understanding

  1. 1. What does navigation.navigate do?

  2. 2. How does a screen receive navigation params?

  3. 3. What package provides the native stack navigator?