113 lines
4.5 KiB
TypeScript
113 lines
4.5 KiB
TypeScript
import { BlurView } from "expo-blur";
|
|
import { isLiquidGlassAvailable } from "expo-glass-effect";
|
|
import { Link, Tabs, router } from "expo-router";
|
|
import { Icon, Label, NativeTabs } from "expo-router/unstable-native-tabs";
|
|
import { SymbolView } from "expo-symbols";
|
|
import { Feather, MaterialCommunityIcons, Ionicons } from "@expo/vector-icons";
|
|
import React from "react";
|
|
import { Platform, Pressable, StyleSheet, View, useColorScheme } from "react-native";
|
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
|
|
import { Colors } from "@/constants/colors";
|
|
|
|
function NativeTabLayout() {
|
|
return (
|
|
<NativeTabs>
|
|
<NativeTabs.Trigger name=\"index\">
|
|
<Icon sf={{ default: \"face.smiling\", selected: \"face.smiling.fill\" }} />
|
|
<Label>Timmy</Label>
|
|
</NativeTabs.Trigger>
|
|
<NativeTabs.Trigger name=\"matrix\">
|
|
<Icon sf={{ default: \"cube\", selected: \"cube.fill\" }} />
|
|
<Label>Matrix</Label>
|
|
</NativeTabs.Trigger>
|
|
<NativeTabs.Trigger name=\"feed\">
|
|
<Icon sf={{ default: \"list.bullet\", selected: \"list.bullet.circle.fill\" }} />
|
|
<Label>Feed</Label>
|
|
</NativeTabs.Trigger>
|
|
</NativeTabs>
|
|
);
|
|
}
|
|
|
|
function ClassicTabLayout() {
|
|
const insets = useSafeAreaInsets();
|
|
const isIOS = Platform.OS === "ios";
|
|
const isWeb = Platform.OS === "web";
|
|
const C = Colors.dark;
|
|
|
|
return (
|
|
<Tabs
|
|
screenOptions={{
|
|
headerShown: false,
|
|
tabBarActiveTintColor: C.accentGlow,\n tabBarInactiveTintColor: C.textMuted,
|
|
tabBarStyle: {
|
|
position: "absolute",
|
|
backgroundColor: isIOS ? "transparent" : C.surface,
|
|
borderTopWidth: 0,
|
|
elevation: 0,
|
|
...(isWeb ? { height: 84 } : {}),
|
|
},
|
|
tabBarBackground: () =>
|
|
isIOS ? (
|
|
<BlurView
|
|
intensity={80}
|
|
tint=\"dark\"
|
|
style={[StyleSheet.absoluteFill, { borderTopWidth: 0.5, borderTopColor: C.border }]}
|
|
/>
|
|
) : isWeb ? (
|
|
<View
|
|
style={[StyleSheet.absoluteFill, { backgroundColor: C.surface, borderTopWidth: 0.5, borderTopColor: C.border }]}
|
|
/>
|
|
) : (
|
|
<View style={[StyleSheet.absoluteFill, { backgroundColor: C.surface, borderTopWidth: 0.5, borderTopColor: C.border }]} />
|
|
),\
|
|
}}\
|
|
>
|
|
<Tabs.Screen
|
|
name=\"index\"
|
|
options={{
|
|
title: "Timmy",
|
|
headerShown: true,
|
|
headerRight: () => (\n <Link href=\"/settings\" asChild>\n <Pressable style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1 })}>
|
|
<Ionicons name=\"settings-outline\" size={24} color={C.text} style={{ marginRight: 15 }} />\n </Pressable>\n </Link>\n ),
|
|
tabBarIcon: ({ color, size }) =>
|
|
isIOS ? (
|
|
<SymbolView name=\"face.smiling\" tintColor={color} size={size} />
|
|
) : (
|
|
<MaterialCommunityIcons name=\"emoticon-outline\" size={size} color={color} />
|
|
),\
|
|
}}\
|
|
/>
|
|
<Tabs.Screen
|
|
name=\"matrix\"
|
|
options={{
|
|
title: "Matrix",
|
|
tabBarIcon: ({ color, size }) =>
|
|
isIOS ? (
|
|
<SymbolView name=\"cube\" tintColor={color} size={size} />
|
|
) : (
|
|
<MaterialCommunityIcons name=\"cube-outline\" size={size} color={color} />
|
|
),\
|
|
}}\
|
|
/>
|
|
<Tabs.Screen
|
|
name=\"feed\"
|
|
options={{
|
|
title: "Feed",
|
|
tabBarIcon: ({ color, size }) =>
|
|
isIOS ? (
|
|
<SymbolView name=\"list.bullet\" tintColor={color} size={size} />
|
|
) : (
|
|
<Feather name=\"activity\" size={size} color={color} />
|
|
),\
|
|
}}\
|
|
/>
|
|
</Tabs>
|
|
);
|
|
}
|
|
|
|
export default function TabLayout() {
|
|
if (isLiquidGlassAvailable()) {\n return (\n <NativeTabs>\n <NativeTabs.Screen\n name=\"index\"\n options={{\n title: \"Timmy\",\n headerShown: true,\n headerRight: () => (\n <Link href=\"/settings\" asChild>\n <Pressable style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1 })}>\n <Ionicons name=\"settings-outline\" size={24} color={C.text} style={{ marginRight: 15 }} />\n </Pressable>\n </Link>\n ),\n }}\n />\n <NativeTabs.Screen name=\"matrix\" />\n <NativeTabs.Screen name=\"feed\" />\n </NativeTabs>\n );\n }
|
|
return <ClassicTabLayout />;\
|
|
}
|