React Navigation v8 Cheat Sheet

React Navigation v8 shipped with a ton of changes. New APIs, new defaults, and a completely reworked TypeScript experience. If you've been putting off the upgrade, this is the cheat sheet that'll get you up to speed fast, short explanations, copy-paste code snippets, and the stuff that actually matters.

Bookmark this one. You'll come back to it.

If you prefer video, I built a full crash course on YouTube walking through all of this step by step.

Static vs Dynamic Navigation

v8 recommends static configuration. Less boilerplate, automatic deep linking, better TypeScript inference. If you're starting a new project, go static.

Static (recommended):

import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { createStaticNavigation } from "@react-navigation/native";
 
const RootStack = createNativeStackNavigator({
  screens: {
    Home: HomeScreen,
    Profile: ProfileScreen,
  },
});
 
const Navigation = createStaticNavigation(RootStack);
 
export default function App() {
  return <Navigation />;
}

Dynamic (more flexible, more boilerplate):

import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
 
const Stack = createNativeStackNavigator();
 
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

When to use which:

• Static: most apps, simpler setup, auto deep linking
• Dynamic: when you need runtime conditional screens (auth flows, feature flags)

Native Bottom Tabs

Bottom tabs now use native implementations by default, UITabBarController on iOS, BottomNavigationView on Android. No extra config needed.