feat: configure tab navigation

- Setup tabs with FinanceTracker theme
- Add two tabs: Keuangan and Statistik
- Custom tab bar styling
This commit is contained in:
Dita Aji Pratama 2026-04-18 12:22:38 +07:00
parent 3da65062c8
commit f0b2cf9f7e

View File

@ -1,35 +1,34 @@
import { Tabs } from 'expo-router';
import React from 'react';
import { HapticTab } from '@/components/haptic-tab';
import { IconSymbol } from '@/components/ui/icon-symbol';
import { Colors } from '@/constants/theme';
import { useColorScheme } from '@/hooks/use-color-scheme';
import { COLORS } from '@/constants/theme';
export default function TabLayout() {
const colorScheme = useColorScheme();
return (
<Tabs
screenOptions={{
tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
tabBarActiveTintColor: COLORS.primary,
headerShown: false,
tabBarButton: HapticTab,
tabBarStyle: {
backgroundColor: COLORS.card,
borderTopColor: COLORS.border,
},
}}>
<Tabs.Screen
name="index"
options={{
title: 'Home',
title: 'Keuangan',
tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
}}
/>
<Tabs.Screen
name="explore"
options={{
title: 'Explore',
tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
title: 'Statistik',
tabBarIcon: ({ color }) => <IconSymbol size={28} name="chart.bar.fill" color={color} />,
}}
/>
</Tabs>
);
}
}