95 lines
3.0 KiB
TypeScript
95 lines
3.0 KiB
TypeScript
import FontAwesome from '@expo/vector-icons/FontAwesome';
|
|
import { Link, Tabs } from 'expo-router';
|
|
import React from 'react';
|
|
import { Pressable } from 'react-native';
|
|
|
|
import { useClientOnlyValue } from '@/components/useClientOnlyValue';
|
|
import { useColorScheme } from '@/components/useColorScheme';
|
|
import Colors from '@/constants/Colors';
|
|
|
|
// You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
|
|
function TabBarIcon(props: {
|
|
name: React.ComponentProps<typeof FontAwesome>['name'];
|
|
color: string;
|
|
}) {
|
|
return <FontAwesome size={28} style={{ marginBottom: -3 }} {...props} />;
|
|
}
|
|
|
|
export default function TabLayout() {
|
|
const colorScheme = useColorScheme();
|
|
|
|
return (
|
|
<Tabs
|
|
screenOptions={{
|
|
tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
|
|
// Disable the static render of the header on web
|
|
// to prevent a hydration error in React Navigation v6.
|
|
headerShown: useClientOnlyValue(false, true),
|
|
}}>
|
|
<Tabs.Screen
|
|
name="index"
|
|
options={{
|
|
title: 'Dashboard',
|
|
tabBarIcon: ({ color }) => <TabBarIcon name="dashboard" color={color} />,
|
|
headerRight: () => (
|
|
<Link href="/modal" asChild>
|
|
<Pressable>
|
|
{({ pressed }) => (
|
|
<FontAwesome
|
|
name="plus-circle"
|
|
size={25}
|
|
color={Colors[colorScheme ?? 'light'].text}
|
|
style={{ marginRight: 15, opacity: pressed ? 0.5 : 1 }}
|
|
/>
|
|
)}
|
|
</Pressable>
|
|
</Link>
|
|
),
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="investments"
|
|
options={{
|
|
title: 'Investments',
|
|
tabBarIcon: ({ color }) => <TabBarIcon name="line-chart" color={color} />,
|
|
headerRight: () => (
|
|
<Link href="/add-asset" asChild>
|
|
<Pressable>
|
|
{({ pressed }) => (
|
|
<FontAwesome
|
|
name="plus-circle"
|
|
size={25}
|
|
color={Colors[colorScheme ?? 'light'].text}
|
|
style={{ marginRight: 15, opacity: pressed ? 0.5 : 1 }}
|
|
/>
|
|
)}
|
|
</Pressable>
|
|
</Link>
|
|
),
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="goals"
|
|
options={{
|
|
title: 'Goals',
|
|
tabBarIcon: ({ color }) => <TabBarIcon name="flag" color={color} />,
|
|
headerRight: () => (
|
|
<Link href="/add-goal" asChild>
|
|
<Pressable>
|
|
{({ pressed }) => (
|
|
<FontAwesome
|
|
name="plus-circle"
|
|
size={25}
|
|
color={Colors[colorScheme ?? 'light'].text}
|
|
style={{ marginRight: 15, opacity: pressed ? 0.5 : 1 }}
|
|
/>
|
|
)}
|
|
</Pressable>
|
|
</Link>
|
|
),
|
|
}}
|
|
/>
|
|
</Tabs>
|
|
);
|
|
}
|