145 lines
3.8 KiB
TypeScript
145 lines
3.8 KiB
TypeScript
import { Tabs } from 'expo-router';
|
|
import { Image, Platform, StyleSheet, View } from 'react-native';
|
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
import { colors } from '@/assets/styles/colors';
|
|
|
|
export default function TabsLayout() {
|
|
const insets = useSafeAreaInsets();
|
|
|
|
return (
|
|
<Tabs
|
|
screenOptions={{
|
|
headerShown: true,
|
|
headerTitleAlign: 'center',
|
|
headerShadowVisible: false,
|
|
headerStyle: {
|
|
backgroundColor: colors.background_1,
|
|
},
|
|
headerTitle: () => (
|
|
<Image source={require('@/assets/icons/logotipo-azul.png')} style={styles.logo} resizeMode="contain" />
|
|
),
|
|
tabBarStyle: [
|
|
styles.tabBar,
|
|
{
|
|
height: (Platform.OS === 'ios' ? 54 : 64) + insets.bottom,
|
|
paddingBottom: 8 + insets.bottom,
|
|
},
|
|
],
|
|
tabBarItemStyle: styles.tabItem,
|
|
tabBarActiveTintColor: colors.vermelho,
|
|
tabBarInactiveTintColor: colors.azul,
|
|
tabBarLabelStyle: {
|
|
fontSize: 14,
|
|
fontWeight: '600',
|
|
},
|
|
tabBarHideOnKeyboard: true,
|
|
}}>
|
|
<Tabs.Screen
|
|
name="perfil/index"
|
|
options={{
|
|
title: 'Perfil',
|
|
tabBarIcon: ({ focused }) => (
|
|
<View style={focused ? styles.iconActiveContainer : styles.iconContainer}>
|
|
<Image
|
|
source={
|
|
focused
|
|
? require('@/assets/icons/perfil-selecionado.png')
|
|
: require('@/assets/icons/perfil.png')
|
|
}
|
|
style={focused ? styles.iconActive : styles.icon}
|
|
resizeMode="contain"
|
|
/>
|
|
</View>
|
|
),
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="home/index"
|
|
options={{
|
|
title: 'Inicio',
|
|
tabBarIcon: ({ focused }) => (
|
|
<View style={focused ? styles.iconActiveContainer : styles.iconContainer}>
|
|
<Image
|
|
source={
|
|
focused
|
|
? require('@/assets/icons/home-selecionado.png')
|
|
: require('@/assets/icons/home.png')
|
|
}
|
|
style={focused ? styles.iconActive : styles.icon}
|
|
resizeMode="contain"
|
|
/>
|
|
</View>
|
|
),
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="contactos/index"
|
|
options={{
|
|
title: 'Contactos',
|
|
tabBarIcon: ({ focused }) => (
|
|
<View style={focused ? styles.iconActiveContainer : styles.iconContainer}>
|
|
<Image
|
|
source={
|
|
focused
|
|
? require('@/assets/icons/contactos-fill.png')
|
|
: require('@/assets/icons/contactos.png')
|
|
}
|
|
style={focused ? styles.iconActive : styles.icon}
|
|
resizeMode="contain"
|
|
/>
|
|
</View>
|
|
),
|
|
}}
|
|
/>
|
|
</Tabs>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
tabBar: {
|
|
position: 'absolute',
|
|
paddingHorizontal: 50,
|
|
paddingTop: 16,
|
|
backgroundColor: colors.branco,
|
|
borderTopWidth: 0,
|
|
borderTopLeftRadius: 60,
|
|
borderTopRightRadius: 60,
|
|
shadowColor: '#000',
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 10,
|
|
shadowOffset: { width: 0, height: -2 },
|
|
elevation: 10,
|
|
},
|
|
tabItem: {
|
|
paddingVertical: 1,
|
|
},
|
|
iconContainer: {
|
|
width: 34,
|
|
height: 34,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginBottom: 10,
|
|
},
|
|
iconActiveContainer: {
|
|
width: 40,
|
|
height: 40,
|
|
borderRadius: 24,
|
|
backgroundColor: colors.vermelho,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginBottom: 10,
|
|
},
|
|
icon: {
|
|
width: 26,
|
|
height: 26,
|
|
},
|
|
iconActive: {
|
|
width: 26,
|
|
height: 26,
|
|
tintColor: colors.branco,
|
|
},
|
|
logo: {
|
|
width: 180,
|
|
height: 60,
|
|
},
|
|
}); |