add react-native-safe-area-context

Author: flexbox

hackathon/ui-tier-list/template/App.tsx

@@ -1,21 +1,23 @@
+import { SafeAreaProvider } from "react-native-safe-area-context";
 import { StatusBar } from "expo-status-bar";
-import { StyleSheet, Text, View } from "react-native";
+import { StyleSheet, View } from "react-native";
+
+import { LoginScreen } from "./LoginScreen";
 
 // eslint-disable-next-line import/no-default-export
 export default function App() {
   return (
-    <View style={styles.container}>
-      <Text>Open up App.tsx to start working on your app!</Text>
+    <SafeAreaProvider>
       <StatusBar style="auto" />
-    </View>
+      <View style={styles.container}>
+        <LoginScreen />
+      </View>
+    </SafeAreaProvider>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: "#fff",
-    alignItems: "center",
-    justifyContent: "center",
   },
 });

hackathon/ui-tier-list/template/LoginScreen.tsx

@@ -0,0 +1,12 @@
+import { View, Text } from "react-native";
+import React from "react";
+
+interface Props {}
+
+export const LoginScreen = (props: Props) => {
+  return (
+    <View style={{ alignItems: "center", flex: 1, justifyContent: "center" }}>
+      <Text>LoginScreen</Text>
+    </View>
+  );
+};

hackathon/ui-tier-list/template/package.json

@@ -14,6 +14,7 @@
     "react": "18.1.0",
     "react-dom": "18.1.0",
     "react-native": "0.70.5",
+    "react-native-safe-area-context": "^4.4.1",
     "react-native-web": "~0.18.9"
   },
   "devDependencies": {