This is my Tab Bar Components file:

import {Text, TouchableOpacity, View} from "react-native";
import {AntDesign, Entypo} from '@expo/vector-icons';

export default function TabBarComp({state, descriptors, navigation}) {
    return (
        <View className="flex flex-row justify-between shadow bg-white h-[70] w-full">
            {state.routes.map((route, index) => {
                const {options} = descriptors[route.key];
                const label =
                    options.tabBarLabel !== undefined
                        ? options.tabBarLabel
                        : options.title !== undefined
                            ? options.title
                            : route.name;
                const isFocused = state.index === index;
                const onPress = () => {
                    const event = navigation.emit({
                        type: 'tabPress',
                        target: route.key,
                    });
                    if (!isFocused && !event.defaultPrevented) {
                        navigation.navigate(route.name);
                    }
                };
                const onLongPress = () => {
                    navigation.emit({
                        type: 'tabLongPress',
                        target: route.key,
                    });
                };
                return (
                    <TouchableOpacity
                        key={index}
                        className={`flex flex-1 items-center justify-center`}
                        accessibilityRole="button"
                        accessibilityStates={isFocused ? ['selected'] : []}
                        accessibilityLabel={options.tabBarAccessibilityLabel}
                        onPress={onPress}
                        onLongPress={onLongPress}
                    >
                        {route.name === "Home" ? isFocused ? <Entypo name="home" size={30} color="#B79845"/> :
                            <AntDesign name="home" size={24} color="#43525A"/> : null}
                        {route.name === "Activity" ? isFocused ?
                            <AntDesign name="calendar" size={30} color="#B79845"/> :
                            <AntDesign name="calendar" size={24} color="#43525A"/> : null}
                        {route.name === "Announ" ? isFocused ?
                            <AntDesign name="notification" size={30} color="#B79845"/> :
                            <AntDesign name="notification" size={24} color="#43525A"/> : null}
                        {route.name === "General" ? isFocused ? <AntDesign name="book" size={30} color="#B79845"/> :
                            <AntDesign name="book" size={24} color="#43525A"/> : null}
                        {route.name === "More" ? isFocused ? <AntDesign name="appstore-o" size={30} color="#B79845"/> :
                            <AntDesign name="appstore-o" size={24} color="#43525A"/> : null}
                        <Text
                            className={`text-center font-semibold text-[9px] ${isFocused ? "font-black text-secondary" : "text-primary"}`}>
                            {label}
                        </Text>
                    </TouchableOpacity>
                );
            })}
        </View>
    );
}

How do I make the tab navigator appear at the bottom of my application’s detail pages?

How do I make the tab navigator appear at the bottom of my application’s detail pages?

How do I make the tab navigator appear at the bottom of my application’s detail pages?