Dingdong_app/screens/OrderScreen.js

import { Ionicons } from "@expo/vector-icons";
import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import { Dimensions } from "react-native";
import { StyleSheet } from "react-native";
import { useModel } from "flooks";
import NavHeaderBar from "../components/NavHeaderBar";
import OrderListScreen from "./OrderListScreen";
import { Layout, Text } from "@ui-kitten/components";
import LoadingNode from "../components/LoadingNode";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
const Tab = createMaterialTopTabNavigator();

const labelText = (focused, title) => (
    <Text category='s1' status={focused ? "primary" : ""}>
        {title}
    </Text>
);
export default function OrderScreen() {
    const { NOTRECEIVED, RECEIVED, REJECTED, COMPLETED, tab2 } = useModel(
        "wordsModel"
    );
    return (
        <>
            <NavHeaderBar title={tab2} />
            <Tab.Navigator
                initialRouteName='NOTRECEIVED'
                lazy={true}
                tabBarOptions={{
                    activeTintColor: "#FFC21C",
                    inactiveTintColor: "#000",
                    style: styles.tabBack,
                    indicatorStyle: styles.indicatorStyle,
                    labelStyle: {
                        zIndex: 2,
                    },
                }}
                lazyPlaceholder={LoadingNode}
            >
                <Tab.Screen
                    name='NOTRECEIVED'
                    component={OrderListScreen}
                    options={{
                        tabBarLabel: ({ focused }) =>
                            labelText(focused, NOTRECEIVED),
                    }}
                />
                <Tab.Screen
                    name='RECEIVED'
                    component={OrderListScreen}
                    options={{
                        tabBarLabel: ({ focused }) =>
                            labelText(focused, RECEIVED),
                    }}
                />
                <Tab.Screen
                    name='COMPLETED'
                    component={OrderListScreen}
                    options={{
                        tabBarLabel: ({ focused }) =>
                            labelText(focused, COMPLETED),
                    }}
                />
                <Tab.Screen
                    name='REJECTED'
                    component={OrderListScreen}
                    options={{
                        tabBarLabel: ({ focused }) =>
                            labelText(focused, REJECTED),
                    }}
                />
            </Tab.Navigator>
        </>
    );
}

const styles = StyleSheet.create({
    tabBack: {
        backgroundColor: "#eee",
    },
    indicatorStyle: {
        backgroundColor: "#FFC21C",
    },
});