React Native Navigation Cheat Sheet: Stack, Tabs, Params & Linking

Most React Native apps use React Navigation: a native stack for screens, bottom tabs for primary sections, and params to pass ids — not huge objects. Headers come from the navigator. Deep links map URLs to screen names so push notifications can open the right product.

This React Native cheat sheet is written for people searching for a fast, accurate reference: students, junior developers, and teams shipping production software. Pin it, copy the snippets, and come back when syntax slips.

Quick reference

• Stack: Push/pop screens. navigation.navigate("Details", { id }).
• Tabs: Bottom tabs wrap stacks so each tab keeps its own history.
• Params: Pass serializable data (id, slug). Fetch the rest in the screen.
• goBack: navigation.goBack(). navigate to an existing screen pops to it on a stack.
• Header: options={{ title: "Cart" }} or navigation.setOptions from the screen.
• Hooks: useNavigation, useRoute, useFocusEffect for refetch on focus.
• Types: Type the param list in TypeScript so navigate is checked.
• Linking: Map https://app/product/1 to Product with id: 1.

Copy-paste examples

Stack navigate with an id param

Keep params small. Read route.params once and load data in useEffect or a query hook.

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Button, Text, View } from 'react-native';

const Stack = createNativeStackNavigator();

function List({ navigation }) {
  return (
    <View>
      <Button title="Open #41" onPress={() => navigation.navigate('Details', { id: 41 })} />
    </View>
  );
}
function Details({ route }) {
  return <Text>Project {route.params.id}</Text>;
}
export function AppNav() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="List" component={List} />
        <Stack.Screen name="Details" component={Details} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Common mistakes

• Passing whole API objects in params (stale data, huge serialization).
• Nesting multiple NavigationContainers by accident.
• Using navigate when you meant push and wondering why the screen did not stack.
• Forgetting to wrap the app in NavigationContainer at the root.

FAQ

1. React Navigation vs native stack only? React Navigation is the common JS API. @react-navigation/native-stack uses native screens. Expo Router is file-based routing on top of similar ideas.

1. How do I reset to Home? navigation.reset({ index: 0, routes: [{ name: "Home" }] }) after logout — do not leave auth screens in history.

1. Can I use react-router? Not for native screens. React Router is for the web DOM. Some universal frameworks abstract both.

Related React Native cheat sheets

• React Native Cheat Sheet 2026
• React Native Components Cheat Sheet
• React Native Hooks Cheat Sheet

Build with this stack

When a cheat sheet is not enough — you need a production app, a student FYP, or a custom dashboard — ArpaNeuro builds mobile app development and also sells ready-made source code. Request a quote and tell us the stack.

Browse software development services or the source code marketplace if you want a working codebase instead of starting from a blank file.