Tabs & Drawer Navigation

Multi-section apps

Bottom tabs suit primary app sections (Home, Search, Profile). Drawer suits many secondary destinations. Nest navigators: tabs inside stack, or stack inside each tab.

Bottom tab navigator

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

const Tab = createBottomTabNavigator();

function MainTabs() {
  return (
    <Tab.Navigator screenOptions={{ headerShown: false }}>
      <Tab.Screen name="Home" component={HomeStack} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

Navigation patterns

• Auth flow: Stack with Login vs MainTabs based on isLoggedIn state.
• Modal screens: presentation: 'modal' in stack screen options.
• Deep linking: map URLs to screens for push notification taps.
• Type-safe params: define ParamList types for every navigator.