Drawer Navigator

npm install @react-navigation/drawer react-native-gesture-handler react-native-reanimated

import { createDrawerNavigator, DrawerContentScrollView, DrawerItemList, DrawerItem } from '@react-navigation/drawer';
import { Ionicons } from '@expo/vector-icons';

const Drawer = createDrawerNavigator();

// Custom drawer content
function CustomDrawerContent(props: DrawerContentComponentProps) {
  const user = useAuthUser(); // your auth hook

  return (
    <DrawerContentScrollView {...props} contentContainerStyle={{ flex: 1, backgroundColor: '#0f172a' }}>
      {/* User info at top */}
      <View style={{ padding: 20, paddingTop: 48, borderBottomWidth: 1, borderBottomColor: '#1e293b' }}>
        <Image source={{ uri: user.avatarUri }} style={{ width: 56, height: 56, borderRadius: 28, marginBottom: 10 }} />
        <Text style={{ color: '#f1f5f9', fontWeight: '700', fontSize: 16 }}>{user.name}</Text>
        <Text style={{ color: '#64748b', fontSize: 13 }}>{user.email}</Text>
      </View>

      {/* Standard nav items */}
      <DrawerItemList {...props} />

      {/* Spacer pushes logout to bottom */}
      <View style={{ flex: 1 }} />

      {/* Logout at bottom */}
      <DrawerItem
        label="Sign Out"
        icon={({ color }) => <Ionicons name="log-out-outline" size={20} color={color} />}
        onPress={signOut}
        labelStyle={{ color: '#f87171' }}
        style={{ marginBottom: 20 }}
      />
    </DrawerContentScrollView>
  );
}

function AppDrawer() {
  return (
    <Drawer.Navigator
      drawerContent={props => <CustomDrawerContent {...props} />}
      screenOptions={{
        drawerStyle: { backgroundColor: '#0f172a', width: 280 },
        drawerActiveTintColor: '#229c6b',
        drawerInactiveTintColor: '#94a3b8',
        drawerActiveBackgroundColor: '#1e293b',
        headerShown: false,
      }}
    >
      <Drawer.Screen name="Dashboard" component={DashboardScreen}
        options={{ drawerIcon: ({ color }) => <Ionicons name="grid-outline" size={20} color={color} /> }}
      />
      <Drawer.Screen name="Analytics" component={AnalyticsScreen}
        options={{ drawerIcon: ({ color }) => <Ionicons name="bar-chart-outline" size={20} color={color} /> }}
      />
    </Drawer.Navigator>
  );
}

// Type stubs
function useAuthUser() { return { name: 'Sarah', email: 'sarah@example.com', avatarUri: 'https://i.pravatar.cc/100' }; }
function signOut() {}
function DashboardScreen() { return null; }
function AnalyticsScreen() { return null; }
type DrawerContentComponentProps = Parameters<Parameters<typeof Drawer.Navigator>[0]['drawerContent'] & {}>[0];