fix(mobile): add translucent status bar (#3420)

* fix(mobile): add translucent status bar

* chore(mobile): simplify splash screen configuration

Author: lawvs

apps/mobile/app.config.ts

@@ -85,6 +85,9 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
     },
     googleServicesFile: "./build/google-services.json",
   },
+  androidStatusBar: {
+    translucent: true,
+  },
   // web: {
   //   bundler: "metro",
   //   output: "static",

apps/mobile/src/App.tsx

@@ -1,3 +1,4 @@
+import { StatusBar } from "expo-status-bar"
 import { View } from "react-native"
 import Animated, { interpolate, useAnimatedStyle } from "react-native-reanimated"
 import { RootSiblingParent } from "react-native-root-siblings"
@@ -21,16 +22,19 @@ export function App({ children }: { children: React.ReactNode }) {
     ],
   }))
   return (
-    <View className="flex-1 bg-black">
-      <Session />
+    <>
+      <StatusBar translucent animated />
+      <View className="flex-1 bg-black">
+        <Session />
 
-      <Animated.View className="flex-1 overflow-hidden" style={style}>
-        <RootSiblingParent>{children}</RootSiblingParent>
-      </Animated.View>
-      {__DEV__ && <DebugButton />}
+        <Animated.View className="flex-1 overflow-hidden" style={style}>
+          <RootSiblingParent>{children}</RootSiblingParent>
+        </Animated.View>
+        {__DEV__ && <DebugButton />}
 
-      <EnvProfileIndicator />
-    </View>
+        <EnvProfileIndicator />
+      </View>
+    </>
   )
 }