46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
import type { ReactElement } from 'react';
|
|
import { Tabs } from 'expo-router';
|
|
import { Icon } from '@/components';
|
|
import type { IconName } from '@/components';
|
|
import { useTheme } from '@/theme';
|
|
|
|
// Open on Chats, not the leftmost (Contacts) tab.
|
|
export const unstable_settings = {
|
|
initialRouteName: 'index',
|
|
};
|
|
|
|
const tabIcon =
|
|
(name: IconName) =>
|
|
({ color, size }: { color: string; size: number }): ReactElement => (
|
|
<Icon name={name} size={size} color={color} />
|
|
);
|
|
|
|
// Persistent bottom navigation for the authenticated area: Contacts · Chats ·
|
|
// Settings. Chat/profile/group and modals live in the parent stack so they
|
|
// cover the tab bar when opened.
|
|
export default function TabsLayout(): ReactElement {
|
|
const { colors } = useTheme();
|
|
return (
|
|
<Tabs
|
|
screenOptions={{
|
|
headerShown: false,
|
|
tabBarActiveTintColor: colors.accent,
|
|
tabBarInactiveTintColor: colors.textMuted,
|
|
tabBarStyle: {
|
|
backgroundColor: colors.background,
|
|
borderTopColor: colors.border,
|
|
},
|
|
}}
|
|
>
|
|
<Tabs.Screen
|
|
name="contacts"
|
|
options={{ title: 'Contacts', tabBarIcon: tabIcon('user') }}
|
|
/>
|
|
<Tabs.Screen name="index" options={{ title: 'Chats', tabBarIcon: tabIcon('chats') }} />
|
|
<Tabs.Screen
|
|
name="settings"
|
|
options={{ title: 'Settings', tabBarIcon: tabIcon('settings') }}
|
|
/>
|
|
</Tabs>
|
|
);
|
|
}
|