From ceb5e57ff6b2727b4272edf3196ab5fdd4286127 Mon Sep 17 00:00:00 2001
From: Antoine Cottineau <61667876+antoine-cottineau@users.noreply.github.com>
Date: Sat, 29 Apr 2023 04:25:14 +0200
Subject: [PATCH] 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    |  5 +++++
 src/SafeAreaView.tsx     | 36 ++++++++++++++++++------------------
 src/SafeAreaView.web.tsx | 20 +++++++++++---------
 3 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/src/SafeArea.types.ts b/src/SafeArea.types.ts
index 6def7b2..7895e74 100644
--- a/src/SafeArea.types.ts
+++ b/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
+>;
diff --git a/src/SafeAreaView.tsx b/src/SafeAreaView.tsx
index 1ac620d..ee03b88 100644
--- a/src/SafeAreaView.tsx
+++ b/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}
+    />
+  );
+});
diff --git a/src/SafeAreaView.web.tsx b/src/SafeAreaView.web.tsx
index 37f44bb..9304dd7 100644
--- a/src/SafeAreaView.web.tsx
+++ b/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} />;
+});