Files
bincio-activity/mobile/app/(tabs)/_layout.tsx
T
Davide Scaini 090d4bd8dc feat(mobile): search/filter tab — sport, date, sort; hidden on Karoo
Adds a fourth tab visible only on Android API 29+ (full phone, not Karoo).
Filters by sport pill, date preset (7d/30d/6mo/year), and sort order
(newest/distance/elevation). Paginated FlatList with the same activity cards.

ActivityCard extracted to mobile/components/ActivityCard.tsx so both the
feed tab and the new search tab share the same component without duplication.
2026-04-27 15:10:35 +02:00

46 lines
1.4 KiB
TypeScript

import { Tabs } from 'expo-router';
import { Platform } from 'react-native';
import { useTheme } from '@/ThemeContext';
const isKaroo = Platform.OS === 'android' && (Platform.Version as number) < 29;
export default function TabLayout() {
const theme = useTheme();
return (
<Tabs
screenOptions={{
headerShown: false,
tabBarStyle: { backgroundColor: '#18181b', borderTopColor: '#27272a' },
tabBarActiveTintColor: theme.accent,
tabBarInactiveTintColor: '#71717a',
}}
>
<Tabs.Screen
name="index"
options={{ title: 'Feed', tabBarIcon: ({ color }) => <TabIcon label="⬡" color={color} /> }}
/>
<Tabs.Screen
name="import"
options={{ title: 'Import', tabBarIcon: ({ color }) => <TabIcon label="↑" color={color} /> }}
/>
<Tabs.Screen
name="search"
options={{
title: 'Search',
tabBarIcon: ({ color }) => <TabIcon label="⌕" color={color} />,
href: isKaroo ? null : '/search',
}}
/>
<Tabs.Screen
name="settings"
options={{ title: 'Settings', tabBarIcon: ({ color }) => <TabIcon label="⚙" color={color} /> }}
/>
</Tabs>
);
}
function TabIcon({ label, color }: { label: string; color: string }) {
const { Text } = require('react-native');
return <Text style={{ color, fontSize: 18 }}>{label}</Text>;
}