First commit of the new app

app/(tabs)/_layout.tsx

@@ -1,35 +1,145 @@
 import { Tabs } from 'expo-router';
-import React from 'react';
+import { Image, Platform, StyleSheet, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { colors } from '@/assets/styles/colors';
 
-import { HapticTab } from '@/components/haptic-tab';
-import { IconSymbol } from '@/components/ui/icon-symbol';
-import { Colors } from '@/constants/theme';
-import { useColorScheme } from '@/hooks/use-color-scheme';
-
-export default function TabLayout() {
-  const colorScheme = useColorScheme();
+export default function TabsLayout() {
+  const insets = useSafeAreaInsets();
 
   return (
     <Tabs
       screenOptions={{
-        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
-        headerShown: false,
-        tabBarButton: HapticTab,
+        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="index"
+        name="perfil/index"
         options={{
-          title: 'Home',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
+          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="explore"
+        name="home/index"
         options={{
-          title: 'Explore',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
+          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,
+  },
+});