Omar SobhandClaude Opus 4.8
e77e812609
- Onboarding gate: the `hydrated` flag never flipped (onRehydrateStorage hit the store const during synchronous MMKV hydration), leaving a blank null gate. Dropped the flag; gate directly on `onboarded` (MMKV hydrates synchronously). - Tab bar: removed the item padding that clipped the icons; clean taller bar with safe-area bottom padding. - New-card screen: header title "Make your card" (centered), removed the body heading and all the detail fields + back-of-card links (captured in onboarding) and the Publish button (returns later on the flipped card). Keeps Take/Choose photo + AI scene/video + Save. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
55 lines
1.9 KiB
TypeScript
55 lines
1.9 KiB
TypeScript
// Bottom tab bar for the standalone app:
|
|
// backpack → your cards (gallery)
|
|
// money bag → collectible cards
|
|
// robot → work-agent cards
|
|
// cog → settings
|
|
import { MaterialCommunityIcons } from "@expo/vector-icons";
|
|
import { Redirect, Tabs } from "expo-router";
|
|
import { StyleSheet } from "react-native";
|
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
import { useProfileStore } from "../../src/stores/profileStore";
|
|
|
|
type IconName = keyof typeof MaterialCommunityIcons.glyphMap;
|
|
|
|
function tabIcon(name: IconName) {
|
|
return ({ color, size }: { color: string; size: number }) => (
|
|
<MaterialCommunityIcons name={name} size={size} color={color} />
|
|
);
|
|
}
|
|
|
|
export default function TabsLayout() {
|
|
const insets = useSafeAreaInsets();
|
|
const onboarded = useProfileStore((s) => s.onboarded);
|
|
|
|
// First-run users go to onboarding (MMKV hydrates synchronously, so this is
|
|
// correct on the first render — no flash).
|
|
if (!onboarded) return <Redirect href="/onboarding" />;
|
|
|
|
return (
|
|
<Tabs
|
|
screenOptions={{
|
|
headerShown: false,
|
|
tabBarActiveTintColor: "#ff3b30",
|
|
tabBarInactiveTintColor: "#6b6b70",
|
|
tabBarStyle: {
|
|
backgroundColor: "#0e0e12",
|
|
borderTopWidth: StyleSheet.hairlineWidth,
|
|
borderTopColor: "#1c1c22",
|
|
height: 64 + insets.bottom,
|
|
paddingTop: 8,
|
|
paddingBottom: insets.bottom + 10,
|
|
},
|
|
tabBarLabelStyle: { fontSize: 11, fontWeight: "600", marginBottom: 2 },
|
|
}}
|
|
>
|
|
<Tabs.Screen name="index" options={{ title: "Cards", tabBarIcon: tabIcon("bag-personal") }} />
|
|
<Tabs.Screen
|
|
name="collectibles"
|
|
options={{ title: "Collectibles", tabBarIcon: tabIcon("sack") }}
|
|
/>
|
|
<Tabs.Screen name="agents" options={{ title: "Agents", tabBarIcon: tabIcon("robot") }} />
|
|
<Tabs.Screen name="settings" options={{ title: "Settings", tabBarIcon: tabIcon("cog") }} />
|
|
</Tabs>
|
|
);
|
|
}
|