feat: Mobile settings screen (#34) (#101)

This commit was merged in pull request #101.
This commit is contained in:
2026-03-23 22:07:04 +00:00
parent 74522c56dd
commit 2ed21eebb2
6 changed files with 298 additions and 36 deletions

View File

@@ -1,11 +1,11 @@
import { BlurView } from "expo-blur";
import { isLiquidGlassAvailable } from "expo-glass-effect";
import { Tabs } from "expo-router";
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 } from "@expo/vector-icons";
import { Feather, MaterialCommunityIcons, Ionicons } from "@expo/vector-icons";
import React from "react";
import { Platform, StyleSheet, View, useColorScheme } from "react-native";
import { Platform, Pressable, StyleSheet, View, useColorScheme } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Colors } from "@/constants/colors";
@@ -13,16 +13,16 @@ import { Colors } from "@/constants/colors";
function NativeTabLayout() {
return (
<NativeTabs>
<NativeTabs.Trigger name="index">
<Icon sf={{ default: "face.smiling", selected: "face.smiling.fill" }} />
<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" }} />
<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" }} />
<NativeTabs.Trigger name=\"feed\">
<Icon sf={{ default: \"list.bullet\", selected: \"list.bullet.circle.fill\" }} />
<Label>Feed</Label>
</NativeTabs.Trigger>
</NativeTabs>
@@ -39,8 +39,7 @@ function ClassicTabLayout() {
<Tabs
screenOptions={{
headerShown: false,
tabBarActiveTintColor: C.accentGlow,
tabBarInactiveTintColor: C.textMuted,
tabBarActiveTintColor: C.accentGlow,\n tabBarInactiveTintColor: C.textMuted,
tabBarStyle: {
position: "absolute",
backgroundColor: isIOS ? "transparent" : C.surface,
@@ -52,7 +51,7 @@ function ClassicTabLayout() {
isIOS ? (
<BlurView
intensity={80}
tint="dark"
tint=\"dark\"
style={[StyleSheet.absoluteFill, { borderTopWidth: 0.5, borderTopColor: C.border }]}
/>
) : isWeb ? (
@@ -61,52 +60,53 @@ function ClassicTabLayout() {
/>
) : (
<View style={[StyleSheet.absoluteFill, { backgroundColor: C.surface, borderTopWidth: 0.5, borderTopColor: C.border }]} />
),
}}
),\
}}\
>
<Tabs.Screen
name="index"
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} />
<SymbolView name=\"face.smiling\" tintColor={color} size={size} />
) : (
<MaterialCommunityIcons name="emoticon-outline" size={size} color={color} />
),
}}
<MaterialCommunityIcons name=\"emoticon-outline\" size={size} color={color} />
),\
}}\
/>
<Tabs.Screen
name="matrix"
name=\"matrix\"
options={{
title: "Matrix",
tabBarIcon: ({ color, size }) =>
isIOS ? (
<SymbolView name="cube" tintColor={color} size={size} />
<SymbolView name=\"cube\" tintColor={color} size={size} />
) : (
<MaterialCommunityIcons name="cube-outline" size={size} color={color} />
),
}}
<MaterialCommunityIcons name=\"cube-outline\" size={size} color={color} />
),\
}}\
/>
<Tabs.Screen
name="feed"
name=\"feed\"
options={{
title: "Feed",
tabBarIcon: ({ color, size }) =>
isIOS ? (
<SymbolView name="list.bullet" tintColor={color} size={size} />
<SymbolView name=\"list.bullet\" tintColor={color} size={size} />
) : (
<Feather name="activity" size={size} color={color} />
),
}}
<Feather name=\"activity\" size={size} color={color} />
),\
}}\
/>
</Tabs>
);
}
export default function TabLayout() {
if (isLiquidGlassAvailable()) {
return <NativeTabLayout />;
}
return <ClassicTabLayout />;
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 />;\
}