ppc_amnet/amnet-native/components/AMUITabBar.tsx

import {useTheme} from 'react-native-paper';
import {TouchableOpacity, View} from "react-native";

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

    return (
        <View
            style={{
                left: 0,
                right: 0,
                bottom: 0,
                height: 60,
                display: "flex",
                flexDirection: "row",
                alignItems: "center",
                justifyContent: "space-around",
                backgroundColor: theme.colors.surface,
            }}>
            {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}
                        accessibilityRole="button"
                        accessibilityLabel={options.tabBarAccessibilityLabel}
                        testID={options.tabBarTestID}
                        onPress={onPress}>
                        {options.tabBarIcon({color: isFocused ? theme.colors.primary : theme.colors.outline, size: 24})}
                    </TouchableOpacity>
                );
            })}
        </View>
    );
}