Drawer Navigator

npx expo install @react-navigation/drawer
npx expo install react-native-gesture-handler react-native-reanimated

module.exports = function (api) {
    api.cache(true);
    return {
        presets: ['babel-preset-expo'],
        plugins: ['react-native-reanimated/plugin'],
    };
};

// App.tsx или index.js — самое начало
import 'react-native-gesture-handler';

import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

export default function DrawerNavigator() {
    return (
        <Drawer.Navigator>
            <Drawer.Screen name="Home" component={HomeScreen} />
            <Drawer.Screen name="Profile" component={ProfileScreen} />
            <Drawer.Screen name="Settings" component={SettingsScreen} />
        </Drawer.Navigator>
    );
}

<Drawer.Navigator
    drawerContent={(props) => <CustomDrawer {...props} />}
>

import { DrawerContentScrollView, DrawerItemList, DrawerItem } from '@react-navigation/drawer';

function CustomDrawer(props: DrawerContentComponentProps) {
    return (
        <DrawerContentScrollView {...props}>
            <View style={styles.header}>
                <Avatar source={{ uri: user.avatar }} />
                <Text style={styles.name}>{user.name}</Text>
                <Text style={styles.email}>{user.email}</Text>
            </View>

            <DrawerItemList {...props} />

            <DrawerItem
                label="Выйти"
                onPress={() => logout()}
                icon={({ size, color }) => <Ionicons name="log-out" size={size} color={color} />}
            />
        </DrawerContentScrollView>
    );
}

<Drawer.Navigator
    screenOptions={{
        drawerActiveTintColor: '#c1442e',
        drawerInactiveTintColor: '#333',
        drawerActiveBackgroundColor: '#fdece8',
        drawerStyle: {
            backgroundColor: '#fff',
            width: 280,
        },
        drawerPosition: 'left', // 'left' | 'right'
        drawerType: 'front',    // 'front' | 'back' | 'slide' | 'permanent'
        swipeEnabled: true,
        swipeEdgeWidth: 50,
        headerShown: true,
    }}
>

navigation.openDrawer();
navigation.closeDrawer();
navigation.toggleDrawer();

<Drawer.Screen
    name="Home"
    component={HomeScreen}
    options={{
        drawerLabel: 'Главная',
        drawerIcon: ({ color, size }) => <Ionicons name="home" size={size} color={color} />,
    }}
/>

options={{
    drawerLabel: () => (
        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
            <Text>Сообщения</Text>
            <Badge>3</Badge>
        </View>
    ),
}}

function RootNavigator() {
    return (
        <Stack.Navigator screenOptions={{ headerShown: false }}>
            <Stack.Screen name="Main" component={DrawerNavigator} />
            <Stack.Screen name="Details" component={DetailsScreen} />
        </Stack.Navigator>
    );
}