113 lines
3.3 KiB
TypeScript
113 lines
3.3 KiB
TypeScript
import { Tabs } from 'expo-router';
|
|
import React from 'react';
|
|
import { StyleSheet, Platform, View } from 'react-native';
|
|
import { Feather } from '@expo/vector-icons';
|
|
import { useAppTheme } from '../../context/ThemeContext';
|
|
import { useAppConfig } from '../../context/ConfigContext';
|
|
|
|
export default function TabLayout() {
|
|
const { colors, isDark } = useAppTheme();
|
|
const { config, syncConfig } = useAppConfig();
|
|
|
|
// Reference design: dark/charcoal tab bar with lime active, gray inactive
|
|
const tabBarBg = isDark ? '#111111' : '#FFFFFF';
|
|
const activeColor = isDark ? '#C6F135' : '#1A1A1A'; // lime on dark, black on light
|
|
const inactiveColor = isDark ? '#555555' : '#AAAAAA';
|
|
|
|
return (
|
|
<Tabs
|
|
screenListeners={{
|
|
state: () => {
|
|
syncConfig();
|
|
},
|
|
}}
|
|
screenOptions={{
|
|
tabBarActiveTintColor: activeColor,
|
|
tabBarInactiveTintColor: inactiveColor,
|
|
headerShown: false,
|
|
tabBarStyle: {
|
|
position: 'absolute',
|
|
borderTopWidth: 0,
|
|
backgroundColor: 'transparent',
|
|
elevation: 0,
|
|
height: 78,
|
|
paddingBottom: Platform.OS === 'ios' ? 22 : 12,
|
|
paddingTop: 10,
|
|
},
|
|
tabBarBackground: () => (
|
|
<View
|
|
style={[
|
|
StyleSheet.absoluteFill,
|
|
{
|
|
backgroundColor: tabBarBg,
|
|
borderTopWidth: 1,
|
|
borderTopColor: isDark ? '#2A2A2A' : '#EEEEEE',
|
|
}
|
|
]}
|
|
/>
|
|
),
|
|
tabBarLabelStyle: {
|
|
fontFamily: 'Outfit_600SemiBold',
|
|
fontSize: 11,
|
|
marginTop: 2,
|
|
},
|
|
}}>
|
|
|
|
<Tabs.Screen
|
|
name="index"
|
|
options={{
|
|
title: 'Home',
|
|
tabBarIcon: ({ color, focused }) => (
|
|
<View style={focused ? [styles.activeIconWrap, { backgroundColor: isDark ? '#C6F13520' : '#1A1A1A12' }] : null}>
|
|
<Feather name="home" size={22} color={color} />
|
|
</View>
|
|
),
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="notifications"
|
|
options={{
|
|
title: 'Activity',
|
|
tabBarIcon: ({ color, focused }) => (
|
|
<View style={focused ? [styles.activeIconWrap, { backgroundColor: isDark ? '#C6F13520' : '#1A1A1A12' }] : null}>
|
|
<Feather name="bell" size={22} color={color} />
|
|
</View>
|
|
),
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="help"
|
|
options={{
|
|
title: 'Support',
|
|
tabBarIcon: ({ color, focused }) => (
|
|
<View style={focused ? [styles.activeIconWrap, { backgroundColor: isDark ? '#C6F13520' : '#1A1A1A12' }] : null}>
|
|
<Feather name="help-circle" size={22} color={color} />
|
|
</View>
|
|
),
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="explore"
|
|
options={{
|
|
title: 'Profile',
|
|
tabBarIcon: ({ color, focused }) => (
|
|
<View style={focused ? [styles.activeIconWrap, { backgroundColor: isDark ? '#C6F13520' : '#1A1A1A12' }] : null}>
|
|
<Feather name="user" size={22} color={color} />
|
|
</View>
|
|
),
|
|
}}
|
|
/>
|
|
</Tabs>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
activeIconWrap: {
|
|
width: 42,
|
|
height: 30,
|
|
borderRadius: 10,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
});
|