119 lines
3.9 KiB
TypeScript
Executable file
119 lines
3.9 KiB
TypeScript
Executable file
import { Tabs } from "expo-router/tabs";
|
|
import { Redirect } from "expo-router";
|
|
import {
|
|
View,
|
|
ActivityIndicator,
|
|
StatusBar,
|
|
} from "react-native";
|
|
import { LinearGradient } from "expo-linear-gradient";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
import { useAuth } from "@/src/contexts/AuthContext";
|
|
import { tw, theme, MyTouchableOpacity, MyText } from "common-ui";
|
|
import ProfileChecker from "@/components/ProfileChecker";
|
|
import HomeIcon from "@/components/icons/HomeIcon";
|
|
import StoresIcon from "@/components/icons/StoresIcon";
|
|
import OrderAgainIcon from "@/components/icons/OrderAgainIcon";
|
|
import MeIcon from "@/components/icons/MeIcon";
|
|
import { useAppStore } from "@/src/store/appStore";
|
|
|
|
export default function Layout() {
|
|
const { isAuthenticated, isLoading } = useAuth();
|
|
const hideTabsNav = useAppStore((state) => state.hideTabsNav);
|
|
const shouldHideTabs = Object.values(hideTabsNav).some(Boolean);
|
|
|
|
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<View style={tw`flex-1 justify-center items-center bg-white`}>
|
|
<ActivityIndicator size="large" color={theme.colors.pink2} />
|
|
</View>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{/* <StatusBar barStyle="dark-content" backgroundColor={theme.colors.brand25} /> */}
|
|
<Tabs
|
|
// backBehavior="history"
|
|
screenOptions={{
|
|
tabBarActiveTintColor: theme.colors.brand500,
|
|
tabBarInactiveTintColor: '#4B5563',
|
|
tabBarStyle: shouldHideTabs ? { display: 'none' } : {
|
|
backgroundColor: 'white',
|
|
borderTopColor: '#E5E7EB',
|
|
borderTopWidth: 1,
|
|
paddingBottom: 5,
|
|
paddingTop: 5,
|
|
height: 60,
|
|
},
|
|
headerShown: false,
|
|
}}
|
|
>
|
|
<Tabs.Screen
|
|
name="(tabs)/home"
|
|
options={{
|
|
tabBarLabel: 'Home',
|
|
tabBarIcon: ({ color, size, focused }) => (
|
|
<HomeIcon focused={focused} size={size} color={color} />
|
|
),
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="(tabs)/stores"
|
|
options={{
|
|
tabBarLabel: 'Stores',
|
|
tabBarIcon: ({ color, size, focused }) => (
|
|
<StoresIcon focused={focused} size={size} color={color} />
|
|
),
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="(tabs)/flash-delivery"
|
|
options={{
|
|
tabBarLabel: () => null,
|
|
tabBarIcon: () => null,
|
|
tabBarButton: (props) => (
|
|
<MyTouchableOpacity
|
|
{...(props as any)}
|
|
style={[
|
|
props.style,
|
|
tw`items-center justify-center -top-2`, // Adjusted elevation
|
|
]}
|
|
>
|
|
<View style={tw`items-center`}>
|
|
<LinearGradient
|
|
colors={[theme.colors.brand400, theme.colors.brand600]}
|
|
style={tw`w-14 h-14 rounded-full justify-center items-center shadow-lg border-4 border-white`}
|
|
>
|
|
<Ionicons name="flash" size={28} color="white" />
|
|
</LinearGradient>
|
|
<MyText numberOfLines={1} style={tw`text-[10px] font-bold text-brand600 mt-0.5`}>Flash Delivery</MyText>
|
|
</View>
|
|
</MyTouchableOpacity>
|
|
),
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="(tabs)/order-again"
|
|
options={{
|
|
tabBarLabel: 'Order Again',
|
|
tabBarIcon: ({ color, size, focused }) => (
|
|
<OrderAgainIcon focused={focused} size={size} color={color} />
|
|
),
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="(tabs)/me"
|
|
options={{
|
|
tabBarLabel: 'Me',
|
|
tabBarIcon: ({ color, size, focused }) => (
|
|
<MeIcon focused={focused} size={size} color={color} />
|
|
),
|
|
}}
|
|
/>
|
|
</Tabs>
|
|
<ProfileChecker />
|
|
</>
|
|
);
|
|
}
|