crazycharge-app/app/(auth)/(tabs)/_layout.tsx

import { useEffect, useState } from 'react';
import { Tabs, useSegments } from 'expo-router';
import { Dimensions, Platform } from 'react-native';
import { TabAccountIcon, TabChargingIcon, TabHomeIcon } from '../../../component/global/SVG';

import { useColorScheme } from 'nativewind';
export default function TabLayout() {
    const { height } = Dimensions.get('window');
    const { colorScheme } = useColorScheme();

    const activeColor = colorScheme === 'dark' ? '#36DFFF' : '#02677D';
    const inactiveColor = colorScheme === 'dark' ? '#666666' : '#BBBBBB';

    const segment = useSegments();
    const [tabBarVisible, setTabBarVisible] = useState(true);

    // Calculate marginBottom based on screen height
    const calculateMarginBottom = () => {
        if (Platform.OS === 'ios') return 0;
        if (height < 600) return 0;
        return 15;
    };

    useEffect(() => {
        // Determine if the tab bar should be visible based on the current segment
        const isScanQrPage = segment[segment.length - 1] === 'scanQrPage';
        setTabBarVisible(!isScanQrPage);
    }, [segment]);

    return (
        <Tabs
            screenOptions={{
                headerShown: false,
                tabBarLabelStyle: {
                    fontSize: 16,
                    marginBottom: calculateMarginBottom(),
                    color: colorScheme === 'dark' ? '#CCCCCC' : '#666666'
                },
                tabBarStyle: {
                    height: height * 0.105,
                    display: tabBarVisible ? 'flex' : 'none',
                    backgroundColor: colorScheme === 'dark' ? '#041316' : '#FFFFFF'
                },
                tabBarIconStyle: {
                    width: 10,
                    height: 10,
                    marginTop: 15,
                    marginBottom: 15
                }
            }}
        >
            <Tabs.Screen
                name="(home)"
                options={{
                    title: '主頁',
                    // tabBarHideOnKeyboard: true,
                    tabBarIcon: ({ focused }) => <TabHomeIcon color={focused ? activeColor : inactiveColor} />
                }}
            />
            <Tabs.Screen
                name="(charging)"
                options={{
                    title: '充電',
                    tabBarHideOnKeyboard: true,
                    tabBarIcon: ({ focused }) => <TabChargingIcon color={focused ? activeColor : inactiveColor} />
                }}
            />
            <Tabs.Screen
                name="(account)"
                options={{
                    title: '帳戶',
                    tabBarHideOnKeyboard: true,
                    tabBarIcon: ({ focused }) => <TabAccountIcon color={focused ? activeColor : inactiveColor} />
                }}
            />
        </Tabs>
    );
}