feat(edge-to-edge): support edge-to-edge Android layout

wouterds · Jul 4, 2023 · b3ca041 · b3ca041
1 parent 874229c
commit b3ca041
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 15 deletions.
diff --git a/src/App/index.tsx b/src/App/index.tsx
@@ -31,20 +31,26 @@ const App = () => {
   }, []);
 
   return (
-    <View style={styles.container}>
-      <NavigationContainer
-        theme={{
-          ...DefaultTheme,
-          colors: {
-            ...DefaultTheme.colors,
-            background: styles.container.backgroundColor,
-          },
-        }}>
-        <StatusBar barStyle="light-content" />
-        <DebugInfo />
-        {!isReady ? <Screen.Splash /> : <Navigation />}
-      </NavigationContainer>
-    </View>
+    <>
+      <StatusBar
+        barStyle="light-content"
+        translucent
+        backgroundColor="transparent"
+      />
+      <View style={styles.container}>
+        <NavigationContainer
+          theme={{
+            ...DefaultTheme,
+            colors: {
+              ...DefaultTheme.colors,
+              background: styles.container.backgroundColor,
+            },
+          }}>
+          <DebugInfo />
+          {!isReady ? <Screen.Splash /> : <Navigation />}
+        </NavigationContainer>
+      </View>
+    </>
   );
 };
 

diff --git a/src/App/styles.ts b/src/App/styles.ts
@@ -3,6 +3,8 @@ import { StyleSheet } from 'react-native';
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    width: '100%',
+    height: '100%',
     backgroundColor: '#15181f',
   },
 });

diff --git a/src/screens/Splash/index.tsx b/src/screens/Splash/index.tsx
@@ -7,7 +7,11 @@ import styles from './styles';
 
 const SplashScreen = () => (
   <>
-    <StatusBar barStyle="light-content" />
+    <StatusBar
+      barStyle="light-content"
+      translucent
+      backgroundColor="transparent"
+    />
     <View style={styles.container}>
       <SafeAreaView style={styles.content}>
         <FastImage