Antoni Nuñez Romeu
150 lines
3.7 KiB
TypeScript
150 lines
3.7 KiB
TypeScript
import { Tabs } from 'expo-router';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { View, StyleSheet, Platform, useWindowDimensions } from 'react-native';
|
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
import { colors, shadows } from '../../constants/theme';
|
|
|
|
const TABLET_MIN_WIDTH = 768;
|
|
|
|
function ScanIcon({ color, size }: { color: string; 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 bottomPadding = Platform.OS === 'ios' ? insets.bottom : 8;
|
|
|
|
return (
|
|
<Tabs
|
|
screenOptions={{
|
|
tabBarActiveTintColor: colors.primary,
|
|
tabBarInactiveTintColor: colors.textSecondary,
|
|
tabBarStyle: {
|
|
...(isTablet ? styles.tabBarTablet : styles.tabBar),
|
|
height: (isTablet ? 64 : 60) + bottomPadding,
|
|
paddingBottom: bottomPadding,
|
|
},
|
|
tabBarLabelStyle: {
|
|
...styles.tabBarLabel,
|
|
...(isTablet ? styles.tabBarLabelTablet : {}),
|
|
},
|
|
headerStyle: styles.header,
|
|
headerTintColor: colors.primary,
|
|
headerTitleStyle: {
|
|
...styles.headerTitle,
|
|
...(isTablet ? styles.headerTitleTablet : {}),
|
|
},
|
|
}}
|
|
>
|
|
<Tabs.Screen
|
|
name="home"
|
|
options={{
|
|
title: 'Inicio',
|
|
tabBarIcon: ({ color, size }) => (
|
|
<Ionicons name="home" size={size} color={color} />
|
|
),
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="index"
|
|
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({
|
|
tabBar: {
|
|
backgroundColor: colors.card,
|
|
borderTopColor: colors.border,
|
|
paddingTop: 8,
|
|
},
|
|
tabBarTablet: {
|
|
backgroundColor: colors.card,
|
|
borderTopColor: colors.border,
|
|
paddingTop: 10,
|
|
paddingHorizontal: 24,
|
|
},
|
|
tabBarLabel: {
|
|
fontSize: 11,
|
|
fontWeight: '500',
|
|
},
|
|
tabBarLabelTablet: {
|
|
fontSize: 13,
|
|
},
|
|
header: {
|
|
backgroundColor: colors.card,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 1 },
|
|
shadowOpacity: 0.05,
|
|
shadowRadius: 4,
|
|
elevation: 1,
|
|
},
|
|
headerTitle: {
|
|
color: colors.text,
|
|
fontWeight: '600',
|
|
fontSize: 17,
|
|
},
|
|
headerTitleTablet: {
|
|
fontSize: 20,
|
|
},
|
|
fabContainer: {
|
|
position: 'absolute',
|
|
top: -16,
|
|
alignItems: 'center',
|
|
},
|
|
fab: {
|
|
width: 52,
|
|
height: 52,
|
|
borderRadius: 26,
|
|
backgroundColor: colors.scanButton,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
});
|