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

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

export default function TabLayout() {
    const { height } = Dimensions.get('window');

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

    // 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()
                },
                tabBarStyle: {
                    height: height * 0.105,
                    display: tabBarVisible ? 'flex' : 'none'
                },
                tabBarIconStyle: {
                    width: 10,
                    height: 10
                }
            }}
        >
            <Tabs.Screen
                name="(home)"
                options={{
                    title: '主頁',
                    // tabBarHideOnKeyboard: true,
                    tabBarIcon: ({ focused }) => (
                        <TabHomeIcon color={focused ? '#02677D' : '#BBBBBB'} />
                    )
                }}
            />
            <Tabs.Screen
                name="(charging)"
                options={{
                    title: '充電',
                    tabBarHideOnKeyboard: true,
                    tabBarIcon: ({ focused }) => (
                        <TabChargingIcon
                            color={focused ? '#02677D' : '#BBBBBB'}
                        />
                    )
                }}
            />
            <Tabs.Screen
                name="(account)"
                options={{
                    title: '帳戶',
                    tabBarHideOnKeyboard: true,
                    tabBarIcon: ({ focused, color }) => (
                        <TabAccountIcon
                            color={focused ? '#02677D' : '#BBBBBB'}
                        />
                    )
                }}
            />
        </Tabs>
    );
}