fix(mobile): fix some mobile warning after expo 54 upgrade

3 files changed, 25 insertions, 13 deletions

diff --git a/apps/mobile/components/SplashScreenController.tsx b/apps/mobile/components/SplashScreenController.tsx
new file mode 100644
index 00000000..52c80415
--- /dev/null
+++ b/apps/mobile/components/SplashScreenController.tsx
@@ -0,0 +1,14 @@
+import { SplashScreen } from "expo-router";
+import useAppSettings from "@/lib/settings";
+
+SplashScreen.preventAutoHideAsync();
+
+export default function SplashScreenController() {
+  const { isLoading } = useAppSettings();
+
+  if (!isLoading) {
+    SplashScreen.hide();
+  }
+
+  return null;
+}
diff --git a/apps/mobile/components/navigation/stack.tsx b/apps/mobile/components/navigation/stack.tsx
index f53b3652..145c591f 100644
--- a/apps/mobile/components/navigation/stack.tsx
+++ b/apps/mobile/components/navigation/stack.tsx
@@ -1,4 +1,4 @@
-import { TextStyle, ViewStyle } from "react-native";
+import { Platform, TextStyle, ViewStyle } from "react-native";
 import { Stack } from "expo-router/stack";
 import { cssInterop } from "nativewind";
 
@@ -14,7 +14,10 @@ function StackImpl({ contentStyle, headerStyle, ...props }: StackProps) {
     headerStyle: {
       backgroundColor: headerStyle?.backgroundColor?.toString(),
     },
-    navigationBarColor: contentStyle?.backgroundColor?.toString(),
+    navigationBarColor:
+      Platform.OS === "android"
+        ? undefined
+        : contentStyle?.backgroundColor?.toString(),
     headerTintColor: headerStyle?.color?.toString(),
   };
   return <Stack {...props} />;
diff --git a/apps/mobile/components/ui/CustomSafeAreaView.tsx b/apps/mobile/components/ui/CustomSafeAreaView.tsx
index 840ea058..33c9a765 100644
--- a/apps/mobile/components/ui/CustomSafeAreaView.tsx
+++ b/apps/mobile/components/ui/CustomSafeAreaView.tsx
@@ -1,5 +1,4 @@
-import { Platform, SafeAreaView } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { SafeAreaView } from "react-native-safe-area-context";
 import { useHeaderHeight } from "@react-navigation/elements";
 
 export default function CustomSafeAreaView({
@@ -9,21 +8,17 @@ export default function CustomSafeAreaView({
   children: React.ReactNode;
   edges?: ("top" | "bottom")[];
 }) {
-  const insets = useSafeAreaInsets();
   const headerHeight = useHeaderHeight();
 
   return (
     <SafeAreaView
       style={{
         flex: 1,
-        paddingTop:
-          // Some ugly hacks to make the app look the same on both android and ios
-          Platform.OS == "android" && edges.includes("top")
-            ? headerHeight > 0
-              ? headerHeight
-              : insets.top
-            : undefined,
-        paddingBottom: edges.includes("bottom") ? insets.bottom : undefined,
+        paddingTop: edges.includes("top")
+          ? headerHeight > 0
+            ? headerHeight
+            : undefined
+          : undefined,
       }}
     >
       {children}