Add SafeAreaView to buildTypes and align Flow with TS types (#49664)

Summary: Pull Request resolved: #49664 Changelog: [Internal] - Added SafeAreaView to buildTypes and aligned Flow with TS types Reviewed By: huntie Differential Revision: D70176107 fbshipit-source-id: 5da4ef4751c2d4a57b3ffd736294587836babecf
facebook · Feb 26, 2025 · dbbdb98 · dbbdb98
1 parent 9d92b27
commit dbbdb98
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 2 deletions.
diff --git a/packages/react-native/Libraries/Components/SafeAreaView/SafeAreaView.js b/packages/react-native/Libraries/Components/SafeAreaView/SafeAreaView.js
@@ -24,7 +24,7 @@ import * as React from 'react';
  * sensor housing area on iPhone X).
  */
 const exported: component(
-  ref: React.RefSetter<React.ElementRef<typeof View>>,
+  ref?: React.RefSetter<React.ElementRef<typeof View>>,
   ...props: ViewProps
 ) = Platform.select({
   ios: require('./RCTSafeAreaViewNativeComponent').default,

diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
@@ -1795,7 +1795,7 @@ declare export default typeof RCTSafeAreaViewNativeComponent;
 
 exports[`public API should not change unintentionally Libraries/Components/SafeAreaView/SafeAreaView.js 1`] = `
 "declare const exported: component(
-  ref: React.RefSetter<React.ElementRef<typeof View>>,
+  ref?: React.RefSetter<React.ElementRef<typeof View>>,
   ...props: ViewProps
 );
 declare export default typeof exported;

diff --git a/packages/react-native/types/__typetests__/index.tsx b/packages/react-native/types/__typetests__/index.tsx
@@ -110,6 +110,7 @@ import {
   UIManager,
   View,
   ViewStyle,
+  SafeAreaView,
   VirtualizedList,
   findNodeHandle,
   requireNativeComponent,
@@ -1568,6 +1569,31 @@ class BridgedComponentTest extends React.Component {
   }
 }
 
+const SafeAreaViewTest = () => {
+  const viewRef = React.createRef<React.ElementRef<typeof View>>();
+
+  return (
+    <>
+      <SafeAreaView />;
+      <SafeAreaView ref={viewRef} />;
+      <SafeAreaView
+        ref={ref => {
+          ref?.focus();
+          ref?.blur();
+          ref?.measure(
+            (x, y, width, height, pageX, pageY): number =>
+              x + y + width + height + pageX + pageY,
+          );
+          ref?.measureInWindow(
+            (x, y, width, height): number => x + y + width + height,
+          );
+          ref?.setNativeProps({focusable: false});
+        }}
+      />
+    </>
+  );
+};
+
 const SwitchRefTest = () => {
   const switchRef = React.createRef<React.ElementRef<typeof Switch>>();
 

diff --git a/scripts/build/build-types/buildTypes.js b/scripts/build/build-types/buildTypes.js
@@ -82,6 +82,7 @@ const ENTRY_POINTS = [
   'packages/react-native/Libraries/Components/RefreshControl/RefreshControl.js',
   'packages/react-native/Libraries/Image/Image.js.flow',
   'packages/react-native/Libraries/Image/ImageBackground.js',
+  'packages/react-native/Libraries/Components/SafeAreaView/SafeAreaView.js',
 ];
 
 /**