Ichitux
131 lines
3.5 KiB
TypeScript
131 lines
3.5 KiB
TypeScript
import { Tabs } from 'expo-router';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { View, StyleSheet, useWindowDimensions } from 'react-native';
|
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
import { useThemeContext } from '../../components/ThemeProvider';
|
|
import { shadows } from '../../constants/theme';
|
|
|
|
const TABLET_MIN_WIDTH = 768;
|
|
|
|
// Standard Android navigation bar heights in dp
|
|
const ANDROID_NAV_BAR_HEIGHT = 48;
|
|
|
|
function ScanIcon({ size }: { size: number }) {
|
|
return (
|
|
<View style={styles.fabContainer}>
|
|
<View style={[styles.fab, shadows.scanButton]}>
|
|
<Ionicons name="scan" size={size} color="#ffffff" />
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
export default function TabLayout() {
|
|
const insets = useSafeAreaInsets();
|
|
const { width } = useWindowDimensions();
|
|
const isTablet = width >= TABLET_MIN_WIDTH;
|
|
const { colors } = useThemeContext();
|
|
// Use safe area insets if available, otherwise use standard Android nav bar height
|
|
const bottomPadding = insets.bottom > 0 ? insets.bottom : ANDROID_NAV_BAR_HEIGHT;
|
|
|
|
return (
|
|
<Tabs
|
|
screenOptions={{
|
|
tabBarActiveTintColor: colors.primary,
|
|
tabBarInactiveTintColor: colors.textSecondary,
|
|
tabBarStyle: {
|
|
...(isTablet ? styles.tabBarTablet : {}),
|
|
backgroundColor: colors.card,
|
|
borderTopColor: colors.border,
|
|
paddingTop: isTablet ? 10 : 8,
|
|
height: (isTablet ? 64 : 60) + bottomPadding,
|
|
paddingBottom: bottomPadding,
|
|
...(isTablet ? { paddingHorizontal: 24 } : {}),
|
|
},
|
|
tabBarLabelStyle: {
|
|
fontSize: isTablet ? 13 : 11,
|
|
fontWeight: '500',
|
|
},
|
|
headerStyle: {
|
|
backgroundColor: colors.card,
|
|
},
|
|
headerTintColor: colors.primary,
|
|
headerTitleStyle: {
|
|
color: colors.text,
|
|
fontWeight: '600',
|
|
fontSize: isTablet ? 20 : 17,
|
|
},
|
|
sceneContainerStyle: { backgroundColor: 'transparent' },
|
|
sceneStyle: { backgroundColor: 'transparent' },
|
|
}}
|
|
>
|
|
<Tabs.Screen
|
|
name="index"
|
|
options={{
|
|
title: 'Inicio',
|
|
tabBarIcon: ({ color, size }) => (
|
|
<Ionicons name="home" size={size} color={color} />
|
|
),
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="search"
|
|
options={{
|
|
title: 'Buscar',
|
|
tabBarIcon: ({ color, size }) => (
|
|
<Ionicons name="search" size={size} color={color} />
|
|
),
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="scan"
|
|
options={{
|
|
title: 'Escanear',
|
|
tabBarIcon: ({ color, size }) => <ScanIcon color={color} size={size} />,
|
|
tabBarLabel: () => null,
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="alerts"
|
|
options={{
|
|
title: 'Avisos',
|
|
tabBarIcon: ({ color, size }) => (
|
|
<Ionicons name="notifications" size={size} color={color} />
|
|
),
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="map"
|
|
options={{
|
|
href: null,
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="profile"
|
|
options={{
|
|
title: 'Perfil',
|
|
tabBarIcon: ({ color, size }) => (
|
|
<Ionicons name="person" size={size} color={color} />
|
|
),
|
|
}}
|
|
/>
|
|
</Tabs>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
fabContainer: {
|
|
position: 'absolute',
|
|
top: -16,
|
|
alignItems: 'center',
|
|
},
|
|
fab: {
|
|
width: 52,
|
|
height: 52,
|
|
borderRadius: 26,
|
|
backgroundColor: '#2b5bb5',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
});
|