Remove the native SafeAreaView and the deprecated public export

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/TextInput/InputAccessoryView.js

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

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

@@ -12,6 +12,7 @@ import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
 
 import type {HostInstance} from 'react-native';
 
+import SafeAreaView from '../../../../src/private/components/safeareaview/SafeAreaView_INTERNAL_DO_NOT_USE';
 import * as Fantom from '@react-native/fantom';
 import * as React from 'react';
 import {createRef} from 'react';
@@ -116,3 +117,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/LogBox/UI/LogBoxInspectorFooterButton.js

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

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

@@ -8,10 +8,9 @@
  * @format
  */
 
-import type {ViewProps} from '../../Components/View/ViewPropTypes';
 import type {LogLevel} from '../Data/LogBoxLog';
 
-import SafeAreaView from '../../Components/SafeAreaView/SafeAreaView';
+import SafeAreaView from '../../../src/private/components/safeareaview/SafeAreaView_INTERNAL_DO_NOT_USE';
 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/__tests__/__snapshots__/LogBoxNotificationContainer-test.js.snap

@@ -1,16 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`LogBoxNotificationContainer should render both an error and warning notification 1`] = `
-<SafeAreaView
+<View
+  experimental_onSafeAreaInsetsChange={[Function]}
   style={
-    Object {
-      "alignItems": "center",
-      "bottom": 20,
-      "left": 10,
-      "pointerEvents": "box-none",
-      "position": "absolute",
-      "right": 10,
-    }
+    Array [
+      Object {
+        "alignItems": "center",
+        "bottom": 20,
+        "left": 10,
+        "pointerEvents": "box-none",
+        "position": "absolute",
+        "right": 10,
+      },
+      null,
+    ]
   }
 >
   <View
@@ -107,7 +111,7 @@ exports[`LogBoxNotificationContainer should render both an error and warning not
       totalLogCount={1}
     />
   </View>
-</SafeAreaView>
+</View>
 `;
 
 exports[`LogBoxNotificationContainer should render null with no logs 1`] = `null`;
@@ -119,16 +123,20 @@ exports[`LogBoxNotificationContainer should render selected fatal error even whe
 exports[`LogBoxNotificationContainer should render selected syntax error even when disabled 1`] = `null`;
 
 exports[`LogBoxNotificationContainer should render the latest error notification 1`] = `
-<SafeAreaView
+<View
+  experimental_onSafeAreaInsetsChange={[Function]}
   style={
-    Object {
-      "alignItems": "center",
-      "bottom": 20,
-      "left": 10,
-      "pointerEvents": "box-none",
-      "position": "absolute",
-      "right": 10,
-    }
+    Array [
+      Object {
+        "alignItems": "center",
+        "bottom": 20,
+        "left": 10,
+        "pointerEvents": "box-none",
+        "position": "absolute",
+        "right": 10,
+      },
+      null,
+    ]
   }
 >
   <View
@@ -178,20 +186,24 @@ exports[`LogBoxNotificationContainer should render the latest error notification
       totalLogCount={2}
     />
   </View>
-</SafeAreaView>
+</View>
 `;
 
 exports[`LogBoxNotificationContainer should render the latest warning notification 1`] = `
-<SafeAreaView
+<View
+  experimental_onSafeAreaInsetsChange={[Function]}
   style={
-    Object {
-      "alignItems": "center",
-      "bottom": 20,
-      "left": 10,
-      "pointerEvents": "box-none",
-      "position": "absolute",
-      "right": 10,
-    }
+    Array [
+      Object {
+        "alignItems": "center",
+        "bottom": 20,
+        "left": 10,
+        "pointerEvents": "box-none",
+        "position": "absolute",
+        "right": 10,
+      },
+      null,
+    ]
   }
 >
   <View
@@ -241,5 +253,5 @@ exports[`LogBoxNotificationContainer should render the latest warning notificati
       totalLogCount={2}
     />
   </View>
-</SafeAreaView>
+</View>
 `;

packages/react-native/Package.swift

@@ -490,7 +490,6 @@ let reactFabric = RNTarget(
     "components/inputaccessory",
     "components/modal",
     "components/rncore",
-    "components/safeareaview",
     "components/switch",
     "components/text",
     "components/textinput",
@@ -528,12 +527,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",
@@ -586,7 +579,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
@@ -709,7 +702,6 @@ let targets = [
   reactFabricImage,
   reactFabricInputAccessory,
   reactFabricModal,
-  reactFabricSafeAreaView,
   reactFabricSwitch,
   reactFabricTextLayoutManager,
   reactFabricText,
@@ -896,7 +888,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"

packages/react-native/React/Base/RCTBridge.mm

@@ -55,7 +55,6 @@
       @"RCTDebuggingOverlayManager",
       @"RCTModalHostViewManager",
       @"RCTRefreshControlManager",
-      @"RCTSafeAreaViewManager",
       @"RCTScrollContentViewManager",
       @"RCTScrollViewManager",
       @"RCTSwitchManager",

packages/react-native/React/Fabric/Mounting/ComponentViews/RCTFabricComponentsPlugins.h

@@ -34,7 +34,6 @@ Class<RCTComponentViewProtocol> RCTDebuggingOverlayCls(void) __attribute__((used
 Class<RCTComponentViewProtocol> RCTInputAccessoryCls(void) __attribute__((used));
 Class<RCTComponentViewProtocol> RCTParagraphCls(void) __attribute__((used));
 Class<RCTComponentViewProtocol> RCTPullToRefreshViewCls(void) __attribute__((used));
-Class<RCTComponentViewProtocol> RCTSafeAreaViewCls(void) __attribute__((used));
 Class<RCTComponentViewProtocol> RCTScrollViewCls(void) __attribute__((used));
 Class<RCTComponentViewProtocol> RCTSwitchCls(void) __attribute__((used));
 Class<RCTComponentViewProtocol> RCTTextInputCls(void) __attribute__((used));

packages/react-native/React/Fabric/Mounting/ComponentViews/RCTFabricComponentsPlugins.mm

@@ -23,7 +23,6 @@
     {"InputAccessoryView", RCTInputAccessoryCls},
     {"Paragraph", RCTParagraphCls},
     {"PullToRefreshView", RCTPullToRefreshViewCls},
-    {"SafeAreaView", RCTSafeAreaViewCls},
     {"ScrollView", RCTScrollViewCls},
     {"Switch", RCTSwitchCls},
     {"TextInput", RCTTextInputCls},