Allow web's SafeAreaView to forward ref to its underlying view

src/SafeArea.types.ts

@@ -1,5 +1,6 @@
 import type * as React from 'react';
 import type { NativeSyntheticEvent, ViewProps } from 'react-native';
+import NativeSafeAreaView from './specs/NativeSafeAreaView';
 
 export type Edge = 'top' | 'right' | 'bottom' | 'left';
 
@@ -36,3 +37,7 @@ export interface NativeSafeAreaViewProps extends ViewProps {
   mode?: 'padding' | 'margin';
   edges?: ReadonlyArray<Edge>;
 }
+
+export type NativeSafeAreaViewInstance = InstanceType<
+  typeof NativeSafeAreaView
+>;

src/SafeAreaView.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import type { NativeSafeAreaViewProps } from './SafeArea.types';
+import type {
+  NativeSafeAreaViewInstance,
+  NativeSafeAreaViewProps,
+} from './SafeArea.types';
 import NativeSafeAreaView from './specs/NativeSafeAreaView';
 
-type NativeSafeAreaViewInstance = InstanceType<typeof NativeSafeAreaView>;
-
 export type SafeAreaViewProps = NativeSafeAreaViewProps;
 
 export const SafeAreaView: React.ForwardRefExoticComponent<

src/SafeAreaView.web.tsx

@@ -1,7 +1,11 @@
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 import { useSafeAreaInsets } from './SafeAreaContext';
-import type { Edge, NativeSafeAreaViewProps } from './SafeArea.types';
+import type {
+  Edge,
+  NativeSafeAreaViewInstance,
+  NativeSafeAreaViewProps,
+} from './SafeArea.types';
 
 // prettier-ignore
 const TOP    = 0b1000,
@@ -19,67 +23,66 @@ const edgeBitmaskMap: Record<Edge, number> = {
   left: LEFT,
 };
 
-export function SafeAreaView({
-  style = {},
-  mode,
-  edges,
-  ...rest
-}: NativeSafeAreaViewProps) {
-  const insets = useSafeAreaInsets();
+export const SafeAreaView: React.ForwardRefExoticComponent<
+  NativeSafeAreaViewProps & React.RefAttributes<NativeSafeAreaViewInstance>
+> = React.forwardRef<NativeSafeAreaViewInstance, NativeSafeAreaViewProps>(
+  ({ style = {}, mode, edges, ...rest }, ref) => {
+    const insets = useSafeAreaInsets();
 
-  const edgeBitmask =
-    edges != null
-      ? edges.reduce((accum, edge) => accum | edgeBitmaskMap[edge], 0)
-      : ALL;
+    const edgeBitmask =
+      edges != null
+        ? edges.reduce((accum, edge) => accum | edgeBitmaskMap[edge], 0)
+        : ALL;
 
-  const appliedStyle = React.useMemo(() => {
-    const insetTop = edgeBitmask & TOP ? insets.top : 0;
-    const insetRight = edgeBitmask & RIGHT ? insets.right : 0;
-    const insetBottom = edgeBitmask & BOTTOM ? insets.bottom : 0;
-    const insetLeft = edgeBitmask & LEFT ? insets.left : 0;
+    const appliedStyle = React.useMemo(() => {
+      const insetTop = edgeBitmask & TOP ? insets.top : 0;
+      const insetRight = edgeBitmask & RIGHT ? insets.right : 0;
+      const insetBottom = edgeBitmask & BOTTOM ? insets.bottom : 0;
+      const insetLeft = edgeBitmask & LEFT ? insets.left : 0;
 
-    const flatStyle = StyleSheet.flatten(style) as Record<string, number>;
+      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;
+      if (mode === 'margin') {
+        const {
+          margin = 0,
+          marginVertical = margin,
+          marginHorizontal = margin,
+          marginTop = marginVertical,
+          marginRight = marginHorizontal,
+          marginBottom = marginVertical,
+          marginLeft = marginHorizontal,
+        } = flatStyle;
 
-      const marginStyle = {
-        marginTop: marginTop + insetTop,
-        marginRight: marginRight + insetRight,
-        marginBottom: marginBottom + insetBottom,
-        marginLeft: marginLeft + insetLeft,
-      };
+        const marginStyle = {
+          marginTop: marginTop + insetTop,
+          marginRight: marginRight + insetRight,
+          marginBottom: marginBottom + insetBottom,
+          marginLeft: marginLeft + insetLeft,
+        };
 
-      return [style, marginStyle];
-    } else {
-      const {
-        padding = 0,
-        paddingVertical = padding,
-        paddingHorizontal = padding,
-        paddingTop = paddingVertical,
-        paddingRight = paddingHorizontal,
-        paddingBottom = paddingVertical,
-        paddingLeft = paddingHorizontal,
-      } = flatStyle;
+        return [style, marginStyle];
+      } else {
+        const {
+          padding = 0,
+          paddingVertical = padding,
+          paddingHorizontal = padding,
+          paddingTop = paddingVertical,
+          paddingRight = paddingHorizontal,
+          paddingBottom = paddingVertical,
+          paddingLeft = paddingHorizontal,
+        } = flatStyle;
 
-      const paddingStyle = {
-        paddingTop: paddingTop + insetTop,
-        paddingRight: paddingRight + insetRight,
-        paddingBottom: paddingBottom + insetBottom,
-        paddingLeft: paddingLeft + insetLeft,
-      };
+        const paddingStyle = {
+          paddingTop: paddingTop + insetTop,
+          paddingRight: paddingRight + insetRight,
+          paddingBottom: paddingBottom + insetBottom,
+          paddingLeft: paddingLeft + insetLeft,
+        };
 
-      return [style, paddingStyle];
-    }
-  }, [style, insets, mode, edgeBitmask]);
+        return [style, paddingStyle];
+      }
+    }, [style, insets, mode, edgeBitmask]);
 
-  return <View style={appliedStyle} {...rest} />;
-}
+    return <View style={appliedStyle} {...rest} ref={ref} />;
+  },
+);