refactor: wrap in safe area view

Author: NuclearRedeye

App.tsx

@@ -3,7 +3,8 @@ import * as React from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { HomeScreen } from './src/screens/home';
-import { DetailsScreen } from './src/screens/details';
+import { AboutScreen } from './src/screens/about';
+import { StyleSheet, SafeAreaView } from 'react-native';
 
 const Stack = createNativeStackNavigator();
 
@@ -16,8 +17,8 @@ function RootStack() {
         initialParams={{ message: 'Hello World' }}
       />
       <Stack.Screen
-        name="Details"
-        component={DetailsScreen}
+        name="About"
+        component={AboutScreen}
         initialParams={{ depth: 1 }}
       />
     </Stack.Navigator>
@@ -26,8 +27,17 @@ function RootStack() {
 
 export default function App() {
   return (
-    <NavigationContainer>
-      <RootStack />
-    </NavigationContainer>
+    <SafeAreaView style={styles.root}>
+      <NavigationContainer>
+        <RootStack />
+      </NavigationContainer>
+    </SafeAreaView>
   );
-}
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    backgroundColor: '#ECEDE9',
+  },
+});