trails-cool/trails
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use NativeTabs for liquid glass tab bar on iOS 26

Browse source 
Switches from expo-router Tabs to NativeTabs (unstable API) which
renders native tab bars with liquid glass on iOS 26 and Material
bottom navigation on Android. Adds SF Symbols and Material icons.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ullrich Schäfer 2026-04-12 23:24:51 +02:00
parent 065bc633ea
commit 70ff0652a5
No known key found for this signature in database
GPG key ID: A32FF691A0F752D9
1 changed files with 31 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

67
apps/mobile/app/(tabs)/_layout.tsx
View file

@ -1,41 +1,36 @@
import { Tabs } from "expo-router";
import { NativeTabs } from "expo-router/unstable-native-tabs";
export default function TabLayout() {
return (
<Tabs
screenOptions={{
tabBarActiveTintColor: "#4A6B40",
headerShown: false,
}}
>
<Tabs.Screen
name="index"
options={{
title: "Map",
tabBarIcon: () => null,
}}
/>
<Tabs.Screen
name="routes"
options={{
title: "Routes",
tabBarIcon: () => null,
}}
/>
<Tabs.Screen
name="activities"
options={{
title: "Activities",
tabBarIcon: () => null,
}}
/>
<Tabs.Screen
name="profile"
options={{
title: "Profile",
tabBarIcon: () => null,
}}
/>
</Tabs>
<NativeTabs>
<NativeTabs.Trigger name="index">
<NativeTabs.Trigger.Icon
sf={{ default: "map", selected: "map.fill" }}
md="map"
/>
<NativeTabs.Trigger.Label>Map</NativeTabs.Trigger.Label>
</NativeTabs.Trigger>
<NativeTabs.Trigger name="routes">
<NativeTabs.Trigger.Icon
sf={{ default: "signpost.right", selected: "signpost.right.fill" }}
md="route"
/>
<NativeTabs.Trigger.Label>Routes</NativeTabs.Trigger.Label>
</NativeTabs.Trigger>
<NativeTabs.Trigger name="activities">
<NativeTabs.Trigger.Icon
sf={{ default: "figure.hiking", selected: "figure.hiking" }}
md="directions_bike"
/>
<NativeTabs.Trigger.Label>Activities</NativeTabs.Trigger.Label>
</NativeTabs.Trigger>
<NativeTabs.Trigger name="profile">
<NativeTabs.Trigger.Icon
sf={{ default: "person", selected: "person.fill" }}
md="person"
/>
<NativeTabs.Trigger.Label>Profile</NativeTabs.Trigger.Label>
</NativeTabs.Trigger>
</NativeTabs>
);
}