fix: tab bar not visible on Android

Add SafeAreaProvider to root layout and use dynamic safe area insets
for tab bar height/padding instead of hardcoded values that didn't
account for Android system navigation bar.

apps/frontend-mobile/app/(tabs)/_layout.tsx

@@ -1,6 +1,7 @@
 import { Tabs } from 'expo-router';
 import { Ionicons } from '@expo/vector-icons';
 import { View, StyleSheet, Platform } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { colors, shadows } from '../../constants/theme';
 
 function ScanIcon({ color, size }: { color: string; size: number }) {
@@ -14,12 +15,19 @@ function ScanIcon({ color, size }: { color: string; size: number }) {
 }
 
 export default function TabLayout() {
+  const insets = useSafeAreaInsets();
+  const bottomPadding = Platform.OS === 'ios' ? insets.bottom : 8;
+
   return (
     <Tabs
       screenOptions={{
         tabBarActiveTintColor: colors.primary,
         tabBarInactiveTintColor: colors.textSecondary,
-        tabBarStyle: styles.tabBar,
+        tabBarStyle: {
+          ...styles.tabBar,
+          height: 60 + bottomPadding,
+          paddingBottom: bottomPadding,
+        },
         tabBarLabelStyle: styles.tabBarLabel,
         headerStyle: styles.header,
         headerTintColor: colors.primary,
@@ -84,8 +92,6 @@ const styles = StyleSheet.create({
   tabBar: {
     backgroundColor: colors.card,
     borderTopColor: colors.border,
-    height: Platform.OS === 'ios' ? 88 : 64,
-    paddingBottom: Platform.OS === 'ios' ? 24 : 8,
     paddingTop: 8,
   },
   tabBarLabel: {