Allow web's SafeAreaView to forward ref to its underlying view (#383)

* feat: allow web's SafeAreaView to forward ref

* refactor: remove unnecessary return type

* refactor: remove return type for SafeAreaView

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,23 +1,23 @@
 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<
-  SafeAreaViewProps & React.RefAttributes<NativeSafeAreaViewInstance>
-> = React.forwardRef<NativeSafeAreaViewInstance, SafeAreaViewProps>(
-  ({ edges, ...props }, ref) => {
-    return (
-      <NativeSafeAreaView
-        {...props}
-        // Codegen doesn't support default values for array types so
-        // set it here.
-        edges={edges ?? ['bottom', 'left', 'right', 'top']}
-        ref={ref}
-      />
-    );
-  },
-);
+export const SafeAreaView = React.forwardRef<
+  NativeSafeAreaViewInstance,
+  SafeAreaViewProps
+>(({ edges, ...props }, ref) => {
+  return (
+    <NativeSafeAreaView
+      {...props}
+      // Codegen doesn't support default values for array types so
+      // set it here.
+      edges={edges ?? ['bottom', 'left', 'right', 'top']}
+      ref={ref}
+    />
+  );
+});

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,12 +23,10 @@ const edgeBitmaskMap: Record<Edge, number> = {
   left: LEFT,
 };
 
-export function SafeAreaView({
-  style = {},
-  mode,
-  edges,
-  ...rest
-}: NativeSafeAreaViewProps) {
+export const SafeAreaView = React.forwardRef<
+  NativeSafeAreaViewInstance,
+  NativeSafeAreaViewProps
+>(({ style = {}, mode, edges, ...rest }, ref) => {
   const insets = useSafeAreaInsets();
 
   const edgeBitmask =
@@ -81,5 +83,5 @@ export function SafeAreaView({
     }
   }, [style, insets, mode, edgeBitmask]);
 
-  return <View style={appliedStyle} {...rest} />;
-}
+  return <View style={appliedStyle} {...rest} ref={ref} />;
+});