add safearea to bottom tab bar

amnet-native/components/AMUITabBar.tsx

@@ -1,22 +1,26 @@
 import {useTheme} from 'react-native-paper';
 import {TouchableOpacity, View} from "react-native";
+import {useSafeAreaInsets} from "react-native-safe-area-context";
 
 // tab bar inspired by https://stackoverflow.com/a/64028171
 export function AMUITabBar({state, descriptors, navigation}) {
     const theme = useTheme();
+    const insets = useSafeAreaInsets();
 
     return (
+        <View style={{
+            left: 0,
+            right: 0,
+            bottom: 0,
+            height: 60 + insets.bottom,
+            backgroundColor: theme.colors.surface,
+        }}>
         <View
             style={{
-                left: 0,
-                right: 0,
-                bottom: 0,
                 height: 60,
-                display: "flex",
                 flexDirection: "row",
                 alignItems: "center",
                 justifyContent: "space-around",
-                backgroundColor: theme.colors.surface,
             }}>
             {state.routes.map((route, index) => {
                 const {options} = descriptors[route.key];
@@ -37,6 +41,7 @@ export function AMUITabBar({state, descriptors, navigation}) {
                         key={route.key}
                         accessibilityRole="button"
                         accessibilityLabel={options.tabBarAccessibilityLabel}
+                        style={{paddingVertical: 15, paddingHorizontal: 35}}
                         testID={options.tabBarTestID}
                         onPress={onPress}>
                         {options.tabBarIcon({color: isFocused ? theme.colors.primary : theme.colors.outline, size: 24})}
@@ -44,5 +49,6 @@ export function AMUITabBar({state, descriptors, navigation}) {
                 );
             })}
         </View>
+        </View>
     );
 }