Dingdong_app/navigation/TopTabNavigator.js

import { createTopTabNavigator } from "@react-navigation/top-tabs";
import * as React from "react";
import { useModel } from "flooks";
import { 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";

const TopTab = createTopTabNavigator();

export default function TopTabNavigator() {
    const { tab1, tab2, tab3 } = useModel("wordsModel");
    return (
      <TopTab.Navigator headerMode='none' initialRouteName='Home'>
        <TopTab.Screen
          name='Home'
          component={HomeScreen}
          options={{
                    tabBarLabel: ({ focused }) => (
                      <Text
                        category='c1'
                        status={focused ? "primary" : "info"}
                      >
                        {tab1}
                      </Text>
                    ),
                    tabBarIcon: ({ focused }) => (
                      <TabBarIcon focused={focused} name='home' />
                    ),
                }}
        />
        <TopTab.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' />
                    ),
                }}
        />

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