Remove the native SafeAreaView and the deprecated public export

`SafeAreaView` has been deprecated for several releases in favour of
`react-native-safe-area-context`, and the previous change moved the core
surfaces that cannot use the library onto a JavaScript implementation built
on the safe area insets prop. Nothing needs the native component now.

Removed: the C++ shadow node, state and component descriptor, the iOS
component view, the Android view and view manager, the codegen spec and every
registration of them, plus the long-deprecated public export from `index.js`,
the Flow and TypeScript surfaces, the deprecated type stubs, the Babel lazy
import list and the ESLint import map. The private component drops its
`_INTERNAL_DO_NOT_USE` suffix now that it is the only one left.

This is a breaking change for anyone still importing `SafeAreaView` from
`react-native`; the replacement is `react-native-safe-area-context`, or the
`experimental_onSafeAreaInsetsChange` prop directly.

Author: janicduplessis

packages/eslint-plugin-react-native/utils.js

@@ -143,10 +143,6 @@ const publicAPIMapping = {
       'RefreshControlPropsIOS',
     ],
   },
-  'Libraries/Components/SafeAreaView/SafeAreaView': {
-    default: 'SafeAreaView',
-    types: ['SafeAreaViewInstance'],
-  },
   'Libraries/Components/ScrollView/ScrollView': {
     default: 'ScrollView',
     types: [

packages/react-native-babel-preset/src/configs/lazy-imports.js

@@ -29,7 +29,6 @@ module.exports = new Set([
   'Pressable',
   'ProgressBarAndroid',
   'ProgressViewIOS',
-  'SafeAreaView',
   'ScrollView',
   'SectionList',
   'Slider',

packages/react-native/Libraries/Components/SafeAreaView/RCTSafeAreaViewNativeComponent.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import SafeAreaView from '../../../src/private/components/safeareaview/SafeAreaView_INTERNAL_DO_NOT_USE';
+import SafeAreaView from '../../../src/private/components/safeareaview/SafeAreaView';
 import StyleSheet, {
   type ColorValue,
   type ViewStyleProp,

packages/react-native/Libraries/Components/SafeAreaView/SafeAreaView.js

@@ -16,6 +16,7 @@ import * as Fantom from '@react-native/fantom';
 import * as React from 'react';
 import {createRef} from 'react';
 import {View} from 'react-native';
+import SafeAreaView from 'react-native/src/private/components/safeareaview/SafeAreaView';
 
 const INSETS = {top: 44, right: 0, bottom: 34, left: 0};
 
@@ -106,3 +107,41 @@ describe('experimental_onSafeAreaInsetsChange', () => {
     ).toEqual(<rn-view experimental_onSafeAreaInsetsChange="true" />);
   });
 });
+
+describe('<SafeAreaView>', () => {
+  it('applies the insets it receives as padding', () => {
+    const root = Fantom.createRoot();
+    const nodeRef = createRef<HostInstance>();
+
+    Fantom.runTask(() => {
+      root.render(<SafeAreaView collapsable={false} ref={nodeRef} />);
+    });
+
+    expect(
+      root
+        .getRenderedOutput({
+          props: ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'],
+        })
+        .toJSX(),
+    ).toEqual(<rn-view />);
+
+    Fantom.dispatchNativeEvent(nodeRef, 'safeAreaInsetsChange', {
+      insets: INSETS,
+    });
+
+    expect(
+      root
+        .getRenderedOutput({
+          props: ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'],
+        })
+        .toJSX(),
+    ).toEqual(
+      <rn-view
+        paddingBottom="34"
+        paddingLeft="0"
+        paddingRight="0"
+        paddingTop="44"
+      />,
+    );
+  });
+});

packages/react-native/Libraries/Components/TextInput/InputAccessoryView.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import SafeAreaView from '../../src/private/components/safeareaview/SafeAreaView_INTERNAL_DO_NOT_USE';
+import SafeAreaView from '../../src/private/components/safeareaview/SafeAreaView';
 import View from '../Components/View/View';
 import StyleSheet from '../StyleSheet/StyleSheet';
 import BackHandler from '../Utilities/BackHandler';

packages/react-native/Libraries/Components/View/__tests__/ViewSafeAreaInsets-itest.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import SafeAreaView from '../../../src/private/components/safeareaview/SafeAreaView_INTERNAL_DO_NOT_USE';
+import SafeAreaView from '../../../src/private/components/safeareaview/SafeAreaView';
 import View from '../../Components/View/View';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';

packages/react-native/Libraries/LogBox/LogBoxNotificationContainer.js

@@ -8,10 +8,9 @@
  * @format
  */
 
-import type {ViewProps} from '../../Components/View/ViewPropTypes';
 import type {LogLevel} from '../Data/LogBoxLog';
 
-import SafeAreaView from '../../../src/private/components/safeareaview/SafeAreaView_INTERNAL_DO_NOT_USE';
+import SafeAreaView from '../../../src/private/components/safeareaview/SafeAreaView';
 import View from '../../Components/View/View';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
@@ -27,13 +26,10 @@ type Props = Readonly<{
   level: LogLevel,
 }>;
 
-const LogBoxInspectorHeaderSafeArea: React.ComponentType<ViewProps> =
-  Platform.OS === 'android' ? View : SafeAreaView;
-
 export default function LogBoxInspectorHeader(props: Props): React.Node {
   if (props.level === 'syntax') {
     return (
-      <LogBoxInspectorHeaderSafeArea style={styles[props.level]}>
+      <SafeAreaView style={styles[props.level]}>
         <View style={styles.header}>
           <View style={styles.title}>
             <Text
@@ -44,7 +40,7 @@ export default function LogBoxInspectorHeader(props: Props): React.Node {
             </Text>
           </View>
         </View>
-      </LogBoxInspectorHeaderSafeArea>
+      </SafeAreaView>
     );
   }
 
@@ -56,7 +52,7 @@ export default function LogBoxInspectorHeader(props: Props): React.Node {
   const titleText = `Log ${props.selectedIndex + 1} of ${props.total}`;
 
   return (
-    <LogBoxInspectorHeaderSafeArea style={styles[props.level]}>
+    <SafeAreaView style={styles[props.level]}>
       <View style={styles.header}>
         <LogBoxInspectorHeaderButton
           id="logbox_header_button_prev"
@@ -81,7 +77,7 @@ export default function LogBoxInspectorHeader(props: Props): React.Node {
           onPress={() => props.onSelectIndex(nextIndex)}
         />
       </View>
-    </LogBoxInspectorHeaderSafeArea>
+    </SafeAreaView>
   );
 }
 

packages/react-native/Libraries/LogBox/UI/LogBoxInspectorFooterButton.js

@@ -480,7 +480,6 @@ let reactFabric = RNTarget(
     "components/inputaccessory",
     "components/modal",
     "components/rncore",
-    "components/safeareaview",
     "components/switch",
     "components/text",
     "components/textinput",
@@ -518,12 +517,6 @@ let reactFabricSwitch = RNTarget(
   dependencies: [.reactNativeDependencies, .reactCore, .reactJsiExecutor, .reactTurboModuleCore, .jsi, .logger, .reactDebug, .reactFeatureFlags, .reactUtils, .reactRuntimeScheduler, .reactCxxReact, .yoga, .reactRendererDebug, .reactGraphics, .reactFabric, .reactTurboModuleBridging]
 )
 
-let reactFabricSafeAreaView = RNTarget(
-  name: .reactFabricSafeAreaView,
-  path: "ReactCommon/react/renderer/components/safeareaview",
-  dependencies: [.reactNativeDependencies, .reactCore, .reactJsiExecutor, .reactTurboModuleCore, .jsi, .logger, .reactDebug, .reactFeatureFlags, .reactUtils, .reactRuntimeScheduler, .reactCxxReact, .yoga, .reactRendererDebug, .reactGraphics, .reactFabric, .reactTurboModuleBridging]
-)
-
 let reactFabricTextLayoutManager = RNTarget(
   name: .reactFabricTextLayoutManager,
   path: "ReactCommon/react/renderer/textlayoutmanager",
@@ -576,7 +569,7 @@ let reactRCTFabric = RNTarget(
   name: .reactRCTFabric,
   path: "React/Fabric",
   searchPaths: [virtualViewPath],
-  dependencies: [.reactNativeDependencies, .reactCore, .reactRCTImage, .yoga, .reactRCTText, .jsi, .reactFabricInputAccessory, .reactFabricModal, .reactFabricSafeAreaView, .reactFabricSwitch, .reactFabricText, .reactFabricTextInput, .reactFabricUnimplementedView, .reactFabricTextLayoutManager, .reactGraphics, .reactImageManager, .reactDebug, .reactUtils, .reactPerformanceTimeline, .reactRendererDebug, .reactRendererConsistency, .reactRuntimeScheduler, .reactRCTAnimation, .reactJsInspector, .reactJsInspectorNetwork, .reactJsInspectorTracing, .reactFabric, .reactFabricImage, .rctSwiftUIWrapper]
+  dependencies: [.reactNativeDependencies, .reactCore, .reactRCTImage, .yoga, .reactRCTText, .jsi, .reactFabricInputAccessory, .reactFabricModal, .reactFabricSwitch, .reactFabricText, .reactFabricTextInput, .reactFabricUnimplementedView, .reactFabricTextLayoutManager, .reactGraphics, .reactImageManager, .reactDebug, .reactUtils, .reactPerformanceTimeline, .reactRendererDebug, .reactRendererConsistency, .reactRuntimeScheduler, .reactRCTAnimation, .reactJsInspector, .reactJsInspectorNetwork, .reactJsInspectorTracing, .reactFabric, .reactFabricImage, .rctSwiftUIWrapper]
 )
 
 /// React-ImageManagerApple.podspec
@@ -699,7 +692,6 @@ let targets = [
   reactFabricImage,
   reactFabricInputAccessory,
   reactFabricModal,
-  reactFabricSafeAreaView,
   reactFabricSwitch,
   reactFabricTextLayoutManager,
   reactFabricText,
@@ -885,7 +877,6 @@ extension String {
   static let reactFabricImage = "React-FabricImage"
   static let reactFabricInputAccessory = "React-FabricInputAccessory"
   static let reactFabricModal = "React-FabricModal"
-  static let reactFabricSafeAreaView = "React-FabricSafeAreaView"
   static let reactFabricSwitch = "React-FabricSwitch"
   static let reactFabricTextLayoutManager = "React-FabricTextLayoutManager"
   static let reactFabricText = "React-FabricText"