Tab Bar

4 tabs visíveis: Buscar, Favoritos, Viagens, Perfil. Feedback háptico no iOS.

app/(tabs)/_layout.tsx — TabBar4 tabs | active #4494FC | inactive rgba(255,255,255,0.50) | bg #000000

searchBuscar

favorite_borderFavoritos

confirmation_numberViagens

person_outlinePerfil

Tab Bar — Buscar ativo

Propriedade	Valor	Descrição
`tabBarActiveTintColor`	`#4494FC`	embarko_blue
`tabBarInactiveTintColor`	`rgba(255,255,255,0.50)`	white50
`tabBarStyle.backgroundColor`	`#000000`
`icon size (mobile)`	`24px`
`label fontSize (mobile)`	`11px`
`label fontFamily`	`Medium`
`paddingHorizontal (mobile)`	`8px`
`icon size (tablet)`	`32px`
`label fontSize (tablet)`	`15px`
`label marginTop (tablet)`	`4px`
`tab bar height (tablet)`	`92px`
`paddingHorizontal (tablet)`	`24px`

Ícones por Tab

Tab	Biblioteca	Ícone
Buscar	MaterialIcons	`search`
Favoritos	MaterialIcons	`favorite_border`
Viagens	MaterialCommunityIcons	`ticket-confirmation-outline`
Perfil	MaterialIcons	`person_outline`

Código

// app/(tabs)/_layout.tsx
<Tabs screenOptions={{
  tabBarActiveTintColor: colors.embarko_blue,
  tabBarInactiveTintColor: colors.white50,
  tabBarStyle: { backgroundColor: colors.background },
  tabBarButton: HapticTab, // Haptics.impactAsync(ImpactFeedbackStyle.Light)
}}>
  <Tabs.Screen name="index" options={{ title: 'Buscar',
    tabBarIcon: ({ color, size }) => (
      <MaterialIcons name="search" size={size} color={color} />
    ) }} />
  <Tabs.Screen name="favoritos" options={{ title: 'Favoritos',
    tabBarIcon: ({ color, size }) => (
      <MaterialIcons name="favorite-border" size={size} color={color} />
    ) }} />
  {/* Viagens: MaterialCommunityIcons "ticket-confirmation-outline" */}
  {/* Perfil: MaterialIcons "person-outline" */}
</Tabs>

// Tablet detection — app/(tabs)/_layout.tsx
const isTablet =
  Platform.OS !== "web" &&
  ((Platform.OS === "ios" && Platform.isPad) ||
   (Platform.OS === "android" && shortestSide >= 600));

const tabBarStyle = isTablet
  ? { height: 92, paddingHorizontal: 24 }
  : { paddingHorizontal: 8 };

const tabIconSize = isTablet ? 32 : 24;
const tabLabelStyle = isTablet
  ? { fontSize: 15, marginTop: 4 }
  : { fontSize: 11 };