feat: JS-only implementation on top of core safe area primitives

src/InitialWindow.native.ts

@@ -1,8 +1,33 @@
-import type { Metrics } from './SafeArea.types';
+import { Dimensions, type ScaledSize } from 'react-native';
+import type { EdgeInsets, Metrics } from './SafeArea.types';
+import { SUPPORTS_CORE_SAFE_AREA_INSETS } from './coreSafeAreaInsets';
 import NativeSafeAreaContext from './specs/NativeSafeAreaContext';
 
-export const initialWindowMetrics = (NativeSafeAreaContext?.getConstants?.()
-  ?.initialWindowMetrics ?? null) as Metrics | null;
+// Drop once the installed react-native types declare the field.
+type ScaledSizeWithInsets = ScaledSize & {
+  safeAreaInsets?: EdgeInsets;
+};
+
+function getInitialWindowMetrics(): Metrics | null {
+  if (SUPPORTS_CORE_SAFE_AREA_INSETS) {
+    // Core reports window safe area insets through the Dimensions module,
+    // using the same native code as the `onSafeAreaInsetsChange` view prop.
+    const { width, height, safeAreaInsets } = Dimensions.get(
+      'window',
+    ) as ScaledSizeWithInsets;
+    if (safeAreaInsets == null) {
+      return null;
+    }
+    return {
+      insets: safeAreaInsets,
+      frame: { x: 0, y: 0, width, height },
+    };
+  }
+  return (NativeSafeAreaContext?.getConstants?.()?.initialWindowMetrics ??
+    null) as Metrics | null;
+}
+
+export const initialWindowMetrics = getInitialWindowMetrics();
 
 /**
  * @deprecated

src/JSSafeAreaView.tsx

@@ -0,0 +1,123 @@
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+import {
+  Edge,
+  EdgeMode,
+  EdgeRecord,
+  NativeSafeAreaViewInstance,
+  NativeSafeAreaViewProps,
+} from './SafeArea.types';
+import { useSafeAreaInsets } from './SafeAreaContext';
+
+const defaultEdges: Record<Edge, EdgeMode> = {
+  top: 'additive',
+  left: 'additive',
+  bottom: 'additive',
+  right: 'additive',
+};
+
+function getEdgeValue(
+  inset: number,
+  current: number,
+  mode: EdgeMode | undefined,
+) {
+  switch (mode) {
+    case 'maximum':
+      return Math.max(current, inset);
+    case 'additive':
+      return current + inset;
+    case 'off':
+    default:
+      return current;
+  }
+}
+
+export const JSSafeAreaView = React.forwardRef<
+  NativeSafeAreaViewInstance,
+  NativeSafeAreaViewProps
+>(({ style = {}, mode, edges, ...rest }, ref) => {
+  const insets = useSafeAreaInsets();
+
+  const edgesRecord = React.useMemo(() => {
+    if (edges == null) {
+      return defaultEdges;
+    }
+
+    return Array.isArray(edges)
+      ? edges.reduce<EdgeRecord>((acc, edge: Edge) => {
+          acc[edge] = 'additive';
+          return acc;
+        }, {})
+      : // ts has trouble with refining readonly arrays.
+        (edges as EdgeRecord);
+  }, [edges]);
+
+  const appliedStyle = React.useMemo(() => {
+    const flatStyle = StyleSheet.flatten(style) as Record<string, number>;
+
+    if (mode === 'margin') {
+      const {
+        margin = 0,
+        marginVertical = margin,
+        marginHorizontal = margin,
+        marginTop = marginVertical,
+        marginRight = marginHorizontal,
+        marginBottom = marginVertical,
+        marginLeft = marginHorizontal,
+      } = flatStyle;
+
+      const marginStyle = {
+        marginTop: getEdgeValue(insets.top, marginTop, edgesRecord.top),
+        marginRight: getEdgeValue(insets.right, marginRight, edgesRecord.right),
+        marginBottom: getEdgeValue(
+          insets.bottom,
+          marginBottom,
+          edgesRecord.bottom,
+        ),
+        marginLeft: getEdgeValue(insets.left, marginLeft, edgesRecord.left),
+      };
+
+      return [style, marginStyle];
+    } else {
+      const {
+        padding = 0,
+        paddingVertical = padding,
+        paddingHorizontal = padding,
+        paddingTop = paddingVertical,
+        paddingRight = paddingHorizontal,
+        paddingBottom = paddingVertical,
+        paddingLeft = paddingHorizontal,
+      } = flatStyle;
+
+      const paddingStyle = {
+        paddingTop: getEdgeValue(insets.top, paddingTop, edgesRecord.top),
+        paddingRight: getEdgeValue(
+          insets.right,
+          paddingRight,
+          edgesRecord.right,
+        ),
+        paddingBottom: getEdgeValue(
+          insets.bottom,
+          paddingBottom,
+          edgesRecord.bottom,
+        ),
+        paddingLeft: getEdgeValue(insets.left, paddingLeft, edgesRecord.left),
+      };
+
+      return [style, paddingStyle];
+    }
+  }, [
+    edgesRecord.bottom,
+    edgesRecord.left,
+    edgesRecord.right,
+    edgesRecord.top,
+    insets.bottom,
+    insets.left,
+    insets.right,
+    insets.top,
+    mode,
+    style,
+  ]);
+
+  return <View style={appliedStyle} {...rest} ref={ref} />;
+});

src/NativeSafeAreaProvider.tsx

@@ -1,3 +1,24 @@
-import NativeSafeAreaProvider from './specs/NativeSafeAreaProvider';
+import * as React from 'react';
+import type { NativeSafeAreaProviderProps } from './SafeArea.types';
+import {
+  InsetsView,
+  SUPPORTS_CORE_SAFE_AREA_INSETS,
+} from './coreSafeAreaInsets';
+import NativeSafeAreaProviderComponent from './specs/NativeSafeAreaProvider';
 
-export { NativeSafeAreaProvider };
+function CoreNativeSafeAreaProvider({
+  children,
+  style,
+  onInsetsChange,
+  ...rest
+}: NativeSafeAreaProviderProps) {
+  return (
+    <InsetsView {...rest} style={style} onSafeAreaInsetsChange={onInsetsChange}>
+      {children}
+    </InsetsView>
+  );
+}
+
+export const NativeSafeAreaProvider = SUPPORTS_CORE_SAFE_AREA_INSETS
+  ? CoreNativeSafeAreaProvider
+  : NativeSafeAreaProviderComponent;

src/SafeAreaView.tsx

@@ -6,6 +6,8 @@ import type {
   NativeSafeAreaViewInstance,
   NativeSafeAreaViewProps,
 } from './SafeArea.types';
+import { JSSafeAreaView } from './JSSafeAreaView';
+import { SUPPORTS_CORE_SAFE_AREA_INSETS } from './coreSafeAreaInsets';
 import NativeSafeAreaView from './specs/NativeSafeAreaView';
 import { useMemo } from 'react';
 
@@ -18,7 +20,7 @@ const defaultEdges: Record<Edge, EdgeMode> = {
 
 export type SafeAreaViewProps = NativeSafeAreaViewProps;
 
-export const SafeAreaView = React.forwardRef<
+const NativeBackedSafeAreaView = React.forwardRef<
   NativeSafeAreaViewInstance,
   SafeAreaViewProps
 >(({ edges, ...props }, ref) => {
@@ -48,3 +50,12 @@ export const SafeAreaView = React.forwardRef<
 
   return <NativeSafeAreaView {...props} edges={nativeEdges} ref={ref} />;
 });
+
+// When core reports safe area insets itself (see ./coreSafeAreaInsets), the
+// JS implementation the library already uses on web works on every platform:
+// the provider distributes insets through context and this component applies
+// them per-edge as padding or margin. Sync dispatch in core keeps the
+// same-frame behavior the native shadow node implementation had.
+export const SafeAreaView = SUPPORTS_CORE_SAFE_AREA_INSETS
+  ? (JSSafeAreaView as typeof NativeBackedSafeAreaView)
+  : NativeBackedSafeAreaView;

src/SafeAreaView.web.tsx

@@ -1,123 +1 @@
-import * as React from 'react';
-import { StyleSheet, View } from 'react-native';
-import {
-  Edge,
-  EdgeMode,
-  EdgeRecord,
-  NativeSafeAreaViewInstance,
-  NativeSafeAreaViewProps,
-} from './SafeArea.types';
-import { useSafeAreaInsets } from './SafeAreaContext';
-
-const defaultEdges: Record<Edge, EdgeMode> = {
-  top: 'additive',
-  left: 'additive',
-  bottom: 'additive',
-  right: 'additive',
-};
-
-function getEdgeValue(
-  inset: number,
-  current: number,
-  mode: EdgeMode | undefined,
-) {
-  switch (mode) {
-    case 'maximum':
-      return Math.max(current, inset);
-    case 'additive':
-      return current + inset;
-    case 'off':
-    default:
-      return current;
-  }
-}
-
-export const SafeAreaView = React.forwardRef<
-  NativeSafeAreaViewInstance,
-  NativeSafeAreaViewProps
->(({ style = {}, mode, edges, ...rest }, ref) => {
-  const insets = useSafeAreaInsets();
-
-  const edgesRecord = React.useMemo(() => {
-    if (edges == null) {
-      return defaultEdges;
-    }
-
-    return Array.isArray(edges)
-      ? edges.reduce<EdgeRecord>((acc, edge: Edge) => {
-          acc[edge] = 'additive';
-          return acc;
-        }, {})
-      : // ts has trouble with refining readonly arrays.
-        (edges as EdgeRecord);
-  }, [edges]);
-
-  const appliedStyle = React.useMemo(() => {
-    const flatStyle = StyleSheet.flatten(style) as Record<string, number>;
-
-    if (mode === 'margin') {
-      const {
-        margin = 0,
-        marginVertical = margin,
-        marginHorizontal = margin,
-        marginTop = marginVertical,
-        marginRight = marginHorizontal,
-        marginBottom = marginVertical,
-        marginLeft = marginHorizontal,
-      } = flatStyle;
-
-      const marginStyle = {
-        marginTop: getEdgeValue(insets.top, marginTop, edgesRecord.top),
-        marginRight: getEdgeValue(insets.right, marginRight, edgesRecord.right),
-        marginBottom: getEdgeValue(
-          insets.bottom,
-          marginBottom,
-          edgesRecord.bottom,
-        ),
-        marginLeft: getEdgeValue(insets.left, marginLeft, edgesRecord.left),
-      };
-
-      return [style, marginStyle];
-    } else {
-      const {
-        padding = 0,
-        paddingVertical = padding,
-        paddingHorizontal = padding,
-        paddingTop = paddingVertical,
-        paddingRight = paddingHorizontal,
-        paddingBottom = paddingVertical,
-        paddingLeft = paddingHorizontal,
-      } = flatStyle;
-
-      const paddingStyle = {
-        paddingTop: getEdgeValue(insets.top, paddingTop, edgesRecord.top),
-        paddingRight: getEdgeValue(
-          insets.right,
-          paddingRight,
-          edgesRecord.right,
-        ),
-        paddingBottom: getEdgeValue(
-          insets.bottom,
-          paddingBottom,
-          edgesRecord.bottom,
-        ),
-        paddingLeft: getEdgeValue(insets.left, paddingLeft, edgesRecord.left),
-      };
-
-      return [style, paddingStyle];
-    }
-  }, [
-    edgesRecord.bottom,
-    edgesRecord.left,
-    edgesRecord.right,
-    edgesRecord.top,
-    insets.bottom,
-    insets.left,
-    insets.right,
-    insets.top,
-    mode,
-    style,
-  ]);
-
-  return <View style={appliedStyle} {...rest} ref={ref} />;
-});
+export { JSSafeAreaView as SafeAreaView } from './JSSafeAreaView';

src/__tests__/InitialWindow-test.tsx

@@ -3,13 +3,34 @@
 
 describe('InitialWindow', () => {
   describe('initialWindowMetrics', () => {
-    it('is null when no view config is available', () => {
+    it('is null when the window safe area insets are not available', () => {
       jest.resetModules();
       expect(require('../InitialWindow').initialWindowMetrics).toBe(null);
     });
 
-    it('it uses the constant provided by the view config', () => {
+    it('uses the window metrics from the Dimensions module', () => {
       jest.resetModules();
+      const { Dimensions } = require('react-native');
+      jest.spyOn(Dimensions, 'get').mockReturnValue({
+        width: 100,
+        height: 100,
+        scale: 2,
+        fontScale: 1,
+        safeAreaInsets: { top: 20, right: 0, bottom: 0, left: 0 },
+      });
+
+      expect(require('../InitialWindow').initialWindowMetrics).toEqual({
+        insets: { top: 20, right: 0, bottom: 0, left: 0 },
+        frame: { x: 0, y: 0, width: 100, height: 100 },
+      });
+    });
+
+    it('uses the constant provided by the native module on older React Native', () => {
+      jest.resetModules();
+      jest.doMock('../coreSafeAreaInsets', () => ({
+        ...jest.requireActual<object>('../coreSafeAreaInsets'),
+        SUPPORTS_CORE_SAFE_AREA_INSETS: false,
+      }));
       const testMetrics: Metrics = {
         insets: {
           top: 20,
@@ -24,7 +45,7 @@
           width: 100,
         },
       };
       const TurboModuleRegistry = require('react-native/Libraries/TurboModule/TurboModuleRegistry');
       TurboModuleRegistry.get = jest.fn((name) => {
         if (name === 'RNCSafeAreaContext') {
           return {
@@ -42,6 +63,7 @@
         testMetrics,
       );
       expect(TurboModuleRegistry.get).toBeCalledWith('RNCSafeAreaContext');
+      jest.dontMock('../coreSafeAreaInsets');
     });
   });
 });