Add optional safeAreaInsets prop to NewAppScreen (replacing SafeAreaView) (#52507)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/52507

Resolves https://github.com/reactwg/react-native-releases/issues/1011.

Changelog:
[General][Changed] - `NewAppScreen` no longer internally handles device safe area, use optional `safeAreaInsets` prop (aligned in 0.81 template)

Reviewed By: cortinico

Differential Revision: D78006238

fbshipit-source-id: 01fb16d6754b69a722ea11838d558bebd4748026

packages/new-app-screen/src/NewAppScreen.js

@@ -13,10 +13,7 @@ import {ThemedText, useTheme} from './Theme';
 import * as React from 'react';
 import {
   Image,
-  Platform,
-  SafeAreaView,
   ScrollView,
-  StatusBar,
   StyleSheet,
   Text,
   TouchableHighlight,
@@ -29,24 +26,32 @@ import {version as ReactNativeVersion} from 'react-native/Libraries/Core/ReactNa
 
 export type NewAppScreenProps = $ReadOnly<{
   templateFileName?: string,
+  safeAreaInsets?: $ReadOnly<{
+    top: number,
+    bottom: number,
+    left: number,
+    right: number,
+  }>,
 }>;
 
-const statusBarHeightOffset = Platform.select({
-  android: StatusBar.currentHeight || 0,
-  default: 0,
-});
-
 export default function NewAppScreen({
   templateFileName = 'App.tsx',
+  safeAreaInsets = {top: 0, bottom: 0, left: 0, right: 0},
 }: NewAppScreenProps): React.Node {
   const {colors} = useTheme();
   const isDarkMode = useColorScheme() === 'dark';
   const isLargeScreen = useWindowDimensions().width > 600;
 
   return (
-    <SafeAreaView style={{backgroundColor: colors.background}}>
-      <ScrollView>
-        <View style={[styles.container, {paddingTop: statusBarHeightOffset}]}>
+    <View
+      style={{
+        backgroundColor: colors.background,
+        paddingTop: safeAreaInsets.top,
+        paddingLeft: safeAreaInsets.left,
+        paddingRight: safeAreaInsets.right,
+      }}>
+      <ScrollView style={{paddingBottom: safeAreaInsets.bottom}}>
+        <View style={styles.container}>
           <View style={styles.header}>
             <Image
               style={styles.logo}
@@ -99,7 +104,7 @@ export default function NewAppScreen({
           </View>
         </View>
       </ScrollView>
-    </SafeAreaView>
+    </View>
   );
 }
 

packages/new-app-screen/src/index.d.ts

@@ -11,6 +11,14 @@ import type * as React from 'react';
 
 export type NewAppScreenProps = Readonly<{
   templateFileName?: string | undefined;
+  safeAreaInsets?:
+    | Readonly<{
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+      }>
+    | undefined;
 }>;
 
 export function NewAppScreen(props: NewAppScreenProps): React.ReactNode;