Fixes and tickets

src/navigation/TabBar.js

@@ -2,20 +2,29 @@ import { Motion } from "@legendapp/motion";
 import * as Haptics from "expo-haptics";
 import React, { useState } from "react";
 import { Text, TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import ItemContainer from "../components/ItemContainer/ItemContainer";
 import useLayoutType from "../hooks/useLayoutType";
+import { responsiveHeight } from "../actions/responsiveSizes";
 import { gutters, Palette, Style } from "../styles";
 import { FONT_FAMILY } from "../styles/Fonts";
 
 const TabBar = ({ state = {}, descriptors = {}, navigation = {} }) => {
-  const { isWeb } = useLayoutType();
+  const { isWeb, isIOS } = useLayoutType();
   const [pressedIndex, setPressedIndex] = useState(null);
+  const { bottom: bottomInset = 0 } = useSafeAreaInsets();
+  const fallbackBottomOffset = responsiveHeight(2, true);
+  const bottomOffset = isWeb
+    ? gutters
+    : isIOS
+      ? Math.max(bottomInset, fallbackBottomOffset)
+      : bottomInset + fallbackBottomOffset;
 
   return (
     <View
       style={{
         position: "absolute",
-        bottom: isWeb ? gutters : 5,
+        bottom: bottomOffset,
         width: "90%",
         maxWidth: 500,
         alignSelf: "center",