React Navigation Deep Dive: Stack, Tab, and Drawer Navigators

Why React Navigation?

React Navigation is the community standard for routing in React Native. It is JavaScript-based, highly customizable, and works seamlessly with Expo.

Setup

npx expo install @react-navigation/native react-native-screens react-native-safe-area-context
npx expo install @react-navigation/native-stack @react-navigation/bottom-tabs

Stack Navigator

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

const Stack = createNativeStackNavigator();

function RootStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Detail" component={DetailScreen} />
    </Stack.Navigator>
  );
}

Bottom Tab Navigator

const Tab = createBottomTabNavigator();

function TabNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Feed" component={FeedScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
}

Nesting Navigators

The most common real-world pattern: tabs at the root, stacks inside each tab.

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="HomeTab" component={HomeStack} />
        <Tab.Screen name="ProfileTab" component={ProfileStack} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Type-Safe Navigation

Always type your route params � it eliminates an entire class of navigation bugs. Use NativeStackNavigationProp with your param list type for full IntelliSense on navigation.navigate calls.

Conclusion

Nest navigators intentionally. Too much nesting makes header bar and back button behaviour confusing for users. Keep your navigation tree shallow and predictable.