Ichitux/FarmaFinder
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: tab bar not visible on Android #21

Merged
Ichitux merged 5 commits from fix/android-tab-bar-visibility into main 2026-07-07 21:53:18 +00:00
Conversation 0 Commits 5 Files Changed 15
+53 -44
2 changed files with 53 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 69ef048388 - Show all commits
apps/frontend-mobile/app/(tabs)/_layout.tsx
+9 -3
View File
@@ -1,6 +1,7 @@
import { Tabs } from 'expo-router'; import { Tabs } from 'expo-router';
import { Ionicons } from '@expo/vector-icons'; import { Ionicons } from '@expo/vector-icons';
import { View, StyleSheet, Platform } from 'react-native'; import { View, StyleSheet, Platform } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { colors, shadows } from '../../constants/theme'; import { colors, shadows } from '../../constants/theme';
function ScanIcon({ color, size }: { color: string; size: number }) { function ScanIcon({ color, size }: { color: string; size: number }) {
@@ -14,12 +15,19 @@ function ScanIcon({ color, size }: { color: string; size: number }) {
} }
export default function TabLayout() { export default function TabLayout() {
const insets = useSafeAreaInsets();
const bottomPadding = Platform.OS === 'ios' ? insets.bottom : 8;
return ( return (
<Tabs <Tabs
screenOptions={{ screenOptions={{
tabBarActiveTintColor: colors.primary, tabBarActiveTintColor: colors.primary,
tabBarInactiveTintColor: colors.textSecondary, tabBarInactiveTintColor: colors.textSecondary,
tabBarStyle: styles.tabBar, tabBarStyle: {
...styles.tabBar,
height: 60 + bottomPadding,
paddingBottom: bottomPadding,
},
tabBarLabelStyle: styles.tabBarLabel, tabBarLabelStyle: styles.tabBarLabel,
headerStyle: styles.header, headerStyle: styles.header,
headerTintColor: colors.primary, headerTintColor: colors.primary,
@@ -84,8 +92,6 @@ const styles = StyleSheet.create({
tabBar: { tabBar: {
backgroundColor: colors.card, backgroundColor: colors.card,
borderTopColor: colors.border, borderTopColor: colors.border,
height: Platform.OS === 'ios' ? 88 : 64,
paddingBottom: Platform.OS === 'ios' ? 24 : 8,
paddingTop: 8, paddingTop: 8,
}, },
tabBarLabel: { tabBarLabel: {
apps/frontend-mobile/app/_layout.tsx
+44 -41
View File
@@ -3,6 +3,7 @@ import { Stack } from 'expo-router';
import { StatusBar } from 'expo-status-bar'; import { StatusBar } from 'expo-status-bar';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { GestureHandlerRootView } from 'react-native-gesture-handler'; import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { useAuthStore } from '../store/authStore'; import { useAuthStore } from '../store/authStore';
import { registerForPushNotifications, addNotificationListener, addNotificationResponseListener } from '../services/notifications'; import { registerForPushNotifications, addNotificationListener, addNotificationResponseListener } from '../services/notifications';
import { colors } from '../constants/theme'; import { colors } from '../constants/theme';
@@ -35,47 +36,49 @@ export default function RootLayout() {
return ( return (
<GestureHandlerRootView style={{ flex: 1 }}> <GestureHandlerRootView style={{ flex: 1 }}>
<QueryClientProvider client={queryClient}> <SafeAreaProvider>
<Stack <QueryClientProvider client={queryClient}>
screenOptions={{ <Stack
headerStyle: { backgroundColor: colors.card }, screenOptions={{
headerTintColor: colors.primary, headerStyle: { backgroundColor: colors.card },
headerTitleStyle: { color: colors.text, fontWeight: '600' }, headerTintColor: colors.primary,
}} headerTitleStyle: { color: colors.text, fontWeight: '600' },
> }}
<Stack.Screen name="(tabs)" options={{ headerShown: false }} /> >
<Stack.Screen <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
name="medicine/[id]" <Stack.Screen
options={{ title: 'Medicamento' }} name="medicine/[id]"
/> options={{ title: 'Medicamento' }}
<Stack.Screen />
name="pharmacy/[id]" <Stack.Screen
options={{ title: 'Farmacia' }} name="pharmacy/[id]"
/> options={{ title: 'Farmacia' }}
<Stack.Screen />
name="scanner" <Stack.Screen
options={{ name="scanner"
title: 'Escanear', options={{
headerShown: false, title: 'Escanear',
}} headerShown: false,
/> }}
<Stack.Screen />
name="auth/login" <Stack.Screen
options={{ name="auth/login"
title: 'Iniciar Sesión', options={{
headerShown: false, title: 'Iniciar Sesión',
}} headerShown: false,
/> }}
<Stack.Screen />
name="auth/register" <Stack.Screen
options={{ name="auth/register"
title: 'Registrarse', options={{
headerShown: false, title: 'Registrarse',
}} headerShown: false,
/> }}
</Stack> />
<StatusBar style="auto" /> </Stack>
</QueryClientProvider> <StatusBar style="auto" />
</QueryClientProvider>
</SafeAreaProvider>
</GestureHandlerRootView> </GestureHandlerRootView>
); );
} }