Merge remote-tracking branch 'origin/main'

gutpull · Aug 27, 2023 · 42d83ba · 42d83ba
2 parents 011fee6 + f585c66
commit 42d83ba
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 19 deletions.
diff --git a/Start.tsx b/Start.tsx
@@ -18,6 +18,7 @@ import { ThemeOptionsMap } from "@src/theme/themeOptions";
 import { useFiltersStore } from "@src/stores/filters/filtersStore";
 import { loadFavorites } from "@src/slices/favorites/favoritesActions";
 import { useAccountStore } from "@src/stores/account/accountStore";
+import { SafeAreaProvider } from "react-native-safe-area-context";
 import loadSettings from "./src/stores/settings/actions/loadSettings";
 import setSetting from "./src/stores/settings/actions/setSetting";
 import Toast from "./src/components/common/Toast";
@@ -154,23 +155,25 @@ function Start({ onReady }: StartProps) {
   }
 
   return (
-    <GluestackUIProvider config={glueStackTheme}>
-      <ErrorBoundary onError={logError} FallbackComponent={MemmyErrorView}>
-        {/* eslint-disable-next-line react/style-prop-object */}
-        <StatusBar style={statusBarColor} />
-        <GestureHandlerRootView
-          style={{
-            flex: 1,
-            backgroundColor: ThemeOptionsMap[currentTheme].colors.bg,
-          }}
-        >
-          <>
-            <Toast />
-            <Stack onReady={onStackReady} />
-          </>
-        </GestureHandlerRootView>
-      </ErrorBoundary>
-    </GluestackUIProvider>
+    <SafeAreaProvider>
+      <GluestackUIProvider config={glueStackTheme}>
+        <ErrorBoundary onError={logError} FallbackComponent={MemmyErrorView}>
+          {/* eslint-disable-next-line react/style-prop-object */}
+          <StatusBar style={statusBarColor} />
+          <GestureHandlerRootView
+            style={{
+              flex: 1,
+              backgroundColor: ThemeOptionsMap[currentTheme].colors.bg,
+            }}
+          >
+            <>
+              <Toast />
+              <Stack onReady={onStackReady} />
+            </>
+          </GestureHandlerRootView>
+        </ErrorBoundary>
+      </GluestackUIProvider>
+    </SafeAreaProvider>
   );
 }
 

diff --git a/src/components/common/Navigation/CustomTabBar.tsx b/src/components/common/Navigation/CustomTabBar.tsx
@@ -4,6 +4,7 @@ import { Box, Text, View, VStack } from "@src/components/common/Gluestack";
 import { useThemeOptions } from "@src/stores/settings/settingsStore";
 import React from "react";
 import { TouchableOpacity } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { onGenericHapticFeedback } from "../../../helpers/HapticFeedbackHelpers";
 import { AccountsContextMenu } from "../ContextMenu/AccountsContextMenu";
 import TabBarGestureHandler from "./TabBarGestureHandler";
@@ -51,16 +52,18 @@ export function CustomTabBar({
   navigation,
 }: BottomTabBarProps) {
   const { colors } = useThemeOptions();
+  const insets = useSafeAreaInsets();
 
   return (
     <TabBarGestureHandler>
       <View
         style={{
           flexDirection: "row",
-          height: 75,
           backgroundColor: colors.navBarBg,
           paddingTop: 6,
-          paddingHorizontal: 5,
+          paddingBottom: insets.bottom,
+          paddingLeft: insets.left,
+          paddingRight: insets.right,
           borderTopWidth: 1,
           borderTopColor: colors.border,
         }}