Restore SafeAreaProvider in App.tsx (#156)

Author: huntie

template/App.tsx

@@ -7,23 +7,31 @@
 
 import { NewAppScreen } from '@react-native/new-app-screen';
 import { StatusBar, StyleSheet, useColorScheme, View } from 'react-native';
+import {
+  SafeAreaProvider,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
 
 function App() {
   const isDarkMode = useColorScheme() === 'dark';
 
   return (
-    <>
+    <SafeAreaProvider>
       <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
       <AppContent />
-    </>
+    </SafeAreaProvider>
   );
 }
 
 function AppContent() {
-  // TODO(huntie): Restore safeAreaInsets assignment (see #153)
+  const safeAreaInsets = useSafeAreaInsets();
+
   return (
     <View style={styles.container}>
-      <NewAppScreen templateFileName="App.tsx" />
+      <NewAppScreen
+        templateFileName="App.tsx"
+        safeAreaInsets={safeAreaInsets}
+      />
     </View>
   );
 }

template/package.json

@@ -12,7 +12,8 @@
   "dependencies": {
     "react": "19.1.0",
     "react-native": "1000.0.0",
-    "@react-native/new-app-screen": "0.82.0-main"
+    "@react-native/new-app-screen": "0.82.0-main",
+    "react-native-safe-area-context": "^5.5.2"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",