Dingdong_app/navigation/BottomTabNavigator.js

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import * as React from "react";
import { useTheme, Text } from "@ui-kitten/components";
import TabBarIcon from "../components/TabBarIcon";
import OrderScreen from "../screens/OrderScreen";
import HomeScreen from "../screens/HomeScreen";
import UserScreen from "../screens/UserScreen";
import { useModel } from "flooks";
import { useFocusEffect } from "@react-navigation/native";

const BottomTab = createBottomTabNavigator();

export default function BottomTabNavigator({ navigation, route }) {
    const theme = useTheme();
    const { tab1, tab2, tab3 } = useModel("wordsModel");
    return (
        <BottomTab.Navigator headerMode='none' initialRouteName='Order'>
            <BottomTab.Screen
                name='Home'
                component={HomeScreen}
                options={{
                    tabBarLabel: ({ focused }) => (
                        <Text
                            category='c1'
                            status={focused ? "primary" : "info"}
                        >
                            {tab1}
                        </Text>
                    ),
                    tabBarIcon: ({ focused }) => (
                        <TabBarIcon focused={focused} name='home' />
                    ),
                }}
            />
            <BottomTab.Screen
                name='Order'
                component={OrderScreen}
                options={{
                    tabBarLabel: ({ focused }) => (
                        <Text
                            category='c1'
                            status={focused ? "primary" : "info"}
                        >
                            {tab2}
                        </Text>
                    ),
                    tabBarIcon: ({ focused }) => (
                        <TabBarIcon focused={focused} name='file-text' />
                    ),
                }}
            />

            <BottomTab.Screen
                name='User'
                component={UserScreen}
                options={{
                    tabBarLabel: ({ focused }) => (
                        <Text
                            category='c1'
                            status={focused ? "primary" : "info"}
                        >
                            {tab3}
                        </Text>
                    ),
                    tabBarIcon: ({ focused }) => (
                        <TabBarIcon focused={focused} name='person' />
                    ),
                }}
            />
        </BottomTab.Navigator>
    );
}