Bottom Tab Navigator

npx expo install @react-navigation/bottom-tabs

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

const Tab = createBottomTabNavigator();

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

<Tab.Navigator
    screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
            const icons = {
                Feed: focused ? 'home' : 'home-outline',
                Search: focused ? 'search' : 'search-outline',
                Profile: focused ? 'person' : 'person-outline',
            };
            return <Ionicons name={icons[route.name]} size={size} color={color} />;
        },
        tabBarActiveTintColor: '#c1442e',
        tabBarInactiveTintColor: '#999',
    })}
>

<Tab.Screen
    name="Feed"
    component={FeedScreen}
    options={{
        tabBarLabel: 'Лента',
        title: 'Лента',
        tabBarBadge: 3,
    }}
/>

type TabParamList = {
    Feed: undefined;
    Search: undefined;
    Profile: { userId?: string };
};

const Tab = createBottomTabNavigator<TabParamList>();

<Tab.Screen
    name="Chat"
    component={ChatScreen}
    options={{ tabBarStyle: { display: 'none' } }}
/>

useLayoutEffect(() => {
    navigation.getParent()?.setOptions({ tabBarStyle: { display: 'none' } });
    return () => navigation.getParent()?.setOptions({ tabBarStyle: undefined });
}, [navigation]);

<Tab.Navigator tabBar={(props) => <CustomTabBar {...props} />}>

screenOptions={{
    tabBarActiveTintColor: '#c1442e',
    tabBarInactiveTintColor: '#999',
    tabBarStyle: {
        backgroundColor: '#fff',
        borderTopColor: '#e5e5e5',
        height: 60,
        paddingBottom: 8,
        paddingTop: 8,
    },
    tabBarLabelStyle: {
        fontSize: 12,
        fontWeight: '600',
    },
    tabBarHideOnKeyboard: true,
    headerShown: true,
}}

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

function FeedScreen() {
    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();

    return (
        <Pressable onPress={() => navigation.navigate('Details', { id: 5 })}>
            <Text>Открыть</Text>
        </Pressable>
    );
}