Render the internal SafeAreaView from the safe area insets prop

The core surfaces that cannot depend on `react-native-safe-area-context` —
LogBox, the element inspector, `InputAccessoryView` — get their safe area
padding from a private component that until now wrapped the native
`RCTSafeAreaView`. It applies the prop instead, in JavaScript.

The insets come from the synchronous inset event, which is processed in the
frame that mounts the view, so the first frame is already padded.

Two consequences, both visible in the updated LogBox snapshots: these
surfaces now apply safe area padding on Android too, where they previously
fell back to a plain `View`, and they re-render when insets arrive rather
than being padded natively.

The native implementations are untouched here — the deprecated public
`SafeAreaView` still uses them. This only moves the internal component onto
the prop, so the two can be compared against each other before the native
side is removed.

Author: janicduplessis

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

@@ -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_INTERNAL_DO_NOT_USE';
 
 const INSETS = {top: 44, right: 0, bottom: 34, left: 0};
 
@@ -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/src/private/components/safeareaview/SafeAreaView_INTERNAL_DO_NOT_USE.js

@@ -9,23 +9,62 @@
  */
 
 import type {ViewProps} from '../../../../Libraries/Components/View/ViewPropTypes';
+import type {
+  SafeAreaInsets,
+  SafeAreaInsetsChangeEvent,
+} from '../../../../Libraries/Types/CoreEventTypes';
+import type {HostInstance} from '../../types/HostInstance';
 
 import View from '../../../../Libraries/Components/View/View';
-import UIManager from '../../../../Libraries/ReactNative/UIManager';
-import Platform from '../../../../Libraries/Utilities/Platform';
+import I18nManager from '../../../../Libraries/ReactNative/I18nManager';
 import * as React from 'react';
+import {useCallback, useMemo, useState} from 'react';
 
-const exported: component(
-  ref?: React.RefSetter<React.ElementRef<typeof View>>,
-  ...ViewProps
-) = Platform.select({
-  ios: require('../../../../src/private/components/safeareaview/specs/RCTSafeAreaViewNativeComponent')
-    .default,
-  android: UIManager.hasViewManagerConfig('RCTSafeAreaView')
-    ? require('../../../../src/private/components/safeareaview/specs/RCTSafeAreaViewNativeComponent')
-        .default
-    : View,
-  default: View,
-});
+/**
+ * Renders its children within the safe area of the device, by applying the part
+ * of the view that is covered by the system UI as padding.
+ */
+component SafeAreaView(
+  ref?: React.RefSetter<HostInstance>,
+  ...props: ViewProps
+) {
+  const {style, experimental_onSafeAreaInsetsChange, ...otherProps} = props;
+  const [insets, setInsets] = useState<?SafeAreaInsets>(null);
+
+  const handleSafeAreaInsetsChange = useCallback(
+    (event: SafeAreaInsetsChangeEvent) => {
+      setInsets(event.nativeEvent.insets);
+      experimental_onSafeAreaInsetsChange?.(event);
+    },
+    [experimental_onSafeAreaInsetsChange],
+  );
+
+  const paddingStyle = useMemo(() => {
+    if (insets == null) {
+      return null;
+    }
+    // Insets are physical edges, but Yoga remaps paddingLeft/paddingRight to
+    // start/end when I18nManager's swapLeftAndRightInRTL is on, which would
+    // pad the mirror-image edge in RTL. Swap the values so the physical edge
+    // keeps its inset.
+    const {isRTL, doLeftAndRightSwapInRTL} = I18nManager.getConstants();
+    const swap = isRTL && doLeftAndRightSwapInRTL;
+    return {
+      paddingTop: insets.top,
+      paddingRight: swap ? insets.left : insets.right,
+      paddingBottom: insets.bottom,
+      paddingLeft: swap ? insets.right : insets.left,
+    };
+  }, [insets]);
+
+  return (
+    <View
+      {...otherProps}
+      ref={ref}
+      experimental_onSafeAreaInsetsChange={handleSafeAreaInsetsChange}
+      style={[style, paddingStyle]}
+    />
+  );
+}
 
-export default exported;
+export default SafeAreaView;

…AreaView/__tests__/SafeAreaView-itest.js …areaview/__tests__/SafeAreaView-itest.jspackages/react-native/Libraries/Components/SafeAreaView/__tests__/SafeAreaView-itest.js renamed to packages/react-native/src/private/components/safeareaview/__tests__/SafeAreaView-itest.js packages/react-native/Libraries/Components/SafeAreaView/__tests__/SafeAreaView-itest.js renamed to packages/react-native/src/private/components/safeareaview/__tests__/SafeAreaView-itest.js

@@ -12,7 +12,8 @@ import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
 
 import * as Fantom from '@react-native/fantom';
 import * as React from 'react';
-import {SafeAreaView, Text} from 'react-native';
+import {Text} from 'react-native';
+import SafeAreaView from 'react-native/src/private/components/safeareaview/SafeAreaView_INTERNAL_DO_NOT_USE';
 
 describe('<SafeAreaView>', () => {
   it('renders with children', () => {

packages/react-native/src/private/devsupport/devmenu/elementinspector/InspectorPanel.js

@@ -12,7 +12,7 @@
 
 import type {ElementsHierarchy, InspectedElement} from './Inspector';
 
-import SafeAreaView from '../../../../../Libraries/Components/SafeAreaView/SafeAreaView';
+import SafeAreaView from '../../../components/safeareaview/SafeAreaView_INTERNAL_DO_NOT_USE';
 import * as React from 'react';
 
 const ScrollView =