Update safe area handling for NewAppScreen (0.81) (#151)

Author: huntie

template/App.tsx

@@ -7,14 +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 (
-    <View style={styles.container}>
+    <SafeAreaProvider>
       <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
-      <NewAppScreen templateFileName="App.tsx" />
+      <AppContent />
+    </SafeAreaProvider>
+  );
+}
+
+function AppContent() {
+  const safeAreaInsets = useSafeAreaInsets();
+
+  return (
+    <View style={styles.container}>
+      <NewAppScreen
+        templateFileName="App.tsx"
+        safeAreaInsets={safeAreaInsets}
+      />
     </View>
   );
 }

template/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "react": "19.1.0",
     "react-native": "1000.0.0",
+    "react-native-safe-area-context": "^5.5.1",
     "@react-native/new-app-screen": "0.82.0-main"
   },
   "devDependencies": {