ppc_amnet/amnet-native/components/AMUITabBar.tsx

import {useTheme} from 'react-native-paper';
import {TouchableOpacity, View} from "react-native";
import {useSafeAreaInsets} from "react-native-safe-area-context";

// tab bar inspired by https://stackoverflow.com/a/64028171
export function AMUITabBar({state, descriptors, navigation}) {
    const theme = useTheme();
    const insets = useSafeAreaInsets();

    return (
        <View style={{
            left: 0,
            right: 0,
            bottom: 0,
            position: 'absolute',
            height: 60 + insets.bottom,
            backgroundColor: theme.colors.surface,
        }}>
        <View
            style={{
                gap: 15,
                height: 60,
                flexDirection: "row",
                alignItems: "stretch",
            }}>
            {state.routes.map((route, index) => {
                const {options} = descriptors[route.key];
                const isFocused = state.index === index;
                const onPress = () => {
                    const event = navigation.emit({
                        type: 'tabPress',
                        target: route.key,
                    });

                    if (!isFocused && !event.defaultPrevented) {
                        navigation.navigate(route.name);
                    }
                };

                return (
                    <TouchableOpacity
                        key={route.key}
                        onPress={onPress}
                        accessibilityRole="button"
                        testID={options.tabBarTestID}
                        accessibilityLabel={options.tabBarAccessibilityLabel}
                        style={{flexGrow: 1, alignItems: "center", justifyContent: "center"}}>
                        {options.tabBarIcon({color: isFocused ? theme.colors.primary : theme.colors.outline, size: 24})}
                    </TouchableOpacity>
                );
            })}
        </View>
        </View>
    );
}