Replace React.Ref with React.RefSetter in react-native (facebook#46488)

Summary: Pull Request resolved: facebook#46488 React.Ref includes string | number to support legacy string ref, which will be killed in React 19. Therefore, the type is deprecated in Flow. This diff changes the type to use React.RefSetter instead. Changelog: [Internal] Reviewed By: NickGerleman Differential Revision: D62649800 fbshipit-source-id: 81bcfbb052e2039b23829dac8de242bfb0fdca3a
callstack · Sep 16, 2024 · 68a92aa · 68a92aa
1 parent 7bd4a54
commit 68a92aa
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 16 deletions.
diff --git a/packages/react-native-codegen/src/parsers/flow/components/__test_fixtures__/failures.js b/packages/react-native-codegen/src/parsers/flow/components/__test_fixtures__/failures.js
@@ -38,7 +38,7 @@ export type ModuleProps = $ReadOnly<{|
 |}>;
 
 export const Commands = codegenNativeCommands<{
-  +hotspotUpdate: (ref: React.Ref<'RCTView'>, x: Int32, y: Int32) => void,
+  +hotspotUpdate: (ref: React.RefSetter<'RCTView'>, x: Int32, y: Int32) => void,
 }>({
   supportedCommands: ['hotspotUpdate'],
 });
@@ -69,7 +69,7 @@ import type {ViewProps} from 'ViewPropTypes';
 import type {HostComponent} from 'react-native';
 
 interface NativeCommands {
-  +hotspotUpdate: (viewRef: React.Ref<'RCTView'>, x: Int32, y: Int32) => void;
+  +hotspotUpdate: (viewRef: React.RefSetter<'RCTView'>, x: Int32, y: Int32) => void;
 }
 
 export type ModuleProps = $ReadOnly<{|
@@ -148,7 +148,7 @@ import type {ViewProps} from 'ViewPropTypes';
 import type {HostComponent} from 'react-native';
 
 interface NativeCommands {
-  +hotspotUpdate: (viewRef: ?React.Ref<'RCTView'>, x: Int32, y: Int32) => void;
+  +hotspotUpdate: (viewRef: ?React.RefSetter<'RCTView'>, x: Int32, y: Int32) => void;
 }
 
 export type ModuleProps = $ReadOnly<{|
@@ -186,9 +186,9 @@ import type {ViewProps} from 'ViewPropTypes';
 import type {HostComponent} from 'react-native';
 
 interface NativeCommands {
-  +hotspotUpdate: (viewRef: React.Ref<'RCTView'>, x: Int32, y: Int32) => void;
+  +hotspotUpdate: (viewRef: React.RefSetter<'RCTView'>, x: Int32, y: Int32) => void;
   +scrollTo: (
-    viewRef: React.Ref<'RCTView'>,
+    viewRef: React.RefSetter<'RCTView'>,
     y: Int32,
     animated: boolean,
   ) => void;
@@ -229,9 +229,9 @@ import type {ViewProps} from 'ViewPropTypes';
 import type {HostComponent} from 'react-native';
 
 interface NativeCommands {
-  +hotspotUpdate: (viewRef: React.Ref<'RCTView'>, x: Int32, y: Int32) => void;
+  +hotspotUpdate: (viewRef: React.RefSetter<'RCTView'>, x: Int32, y: Int32) => void;
   +scrollTo: (
-    viewRef: React.Ref<'RCTView'>,
+    viewRef: React.RefSetter<'RCTView'>,
     y: Int32,
     animated: boolean,
   ) => void;

diff --git a/packages/react-native/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.android.js b/packages/react-native/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.android.js
@@ -85,7 +85,9 @@ const ProgressBarAndroid = (
     animating = true,
     ...restProps
   }: ProgressBarAndroidProps,
-  forwardedRef: ?React.Ref<typeof ProgressBarAndroidNativeComponent>,
+  forwardedRef: ?React.RefSetter<
+    React.ElementRef<typeof ProgressBarAndroidNativeComponent>,
+  >,
 ) => {
   return (
     <ProgressBarAndroidNativeComponent

diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableBounce.js b/packages/react-native/Libraries/Components/Touchable/TouchableBounce.js
@@ -28,7 +28,7 @@ type Props = $ReadOnly<{|
   releaseVelocity?: ?number,
   style?: ?ViewStyleProp,
 
-  hostRef: React.Ref<typeof Animated.View>,
+  hostRef: React.RefSetter<React.ElementRef<typeof Animated.View>>,
 |}>;
 
 type State = $ReadOnly<{|

diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js b/packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js
@@ -44,7 +44,7 @@ type Props = $ReadOnly<{|
   onHideUnderlay?: ?() => void,
   testOnly_pressed?: ?boolean,
 
-  hostRef: React.Ref<typeof View>,
+  hostRef: React.RefSetter<React.ElementRef<typeof View>>,
 |}>;
 
 type ExtraStyles = $ReadOnly<{|
@@ -382,7 +382,7 @@ class TouchableHighlight extends React.Component<Props, State> {
 }
 
 const Touchable: React.AbstractComponent<
-  $ReadOnly<$Diff<Props, {|hostRef: React.Ref<typeof View>|}>>,
+  $ReadOnly<$Diff<Props, {|+hostRef: mixed|}>>,
   React.ElementRef<typeof View>,
 > = React.forwardRef((props, hostRef) => (
   <TouchableHighlight {...props} hostRef={hostRef} />

diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js b/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js
@@ -37,7 +37,7 @@ type Props = $ReadOnly<{|
   activeOpacity?: ?number,
   style?: ?ViewStyleProp,
 
-  hostRef?: ?React.Ref<typeof Animated.View>,
+  hostRef?: ?React.RefSetter<React.ElementRef<typeof Animated.View>>,
 |}>;
 
 type State = $ReadOnly<{|

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
@@ -3647,7 +3647,7 @@ exports[`public API should not change unintentionally Libraries/Components/Touch
   releaseBounciness?: ?number,
   releaseVelocity?: ?number,
   style?: ?ViewStyleProp,
-  hostRef: React.Ref<typeof Animated.View>,
+  hostRef: React.RefSetter<React.ElementRef<typeof Animated.View>>,
 |}>;
 declare module.exports: React.AbstractComponent<
   $ReadOnly<$Diff<Props, {| hostRef: mixed |}>>,
@@ -3676,10 +3676,10 @@ type Props = $ReadOnly<{|
   onShowUnderlay?: ?() => void,
   onHideUnderlay?: ?() => void,
   testOnly_pressed?: ?boolean,
-  hostRef: React.Ref<typeof View>,
+  hostRef: React.RefSetter<React.ElementRef<typeof View>>,
 |}>;
 declare const Touchable: React.AbstractComponent<
-  $ReadOnly<$Diff<Props, {| hostRef: React.Ref<typeof View> |}>>,
+  $ReadOnly<$Diff<Props, {| +hostRef: mixed |}>>,
   React.ElementRef<typeof View>,
 >;
 declare module.exports: Touchable;
@@ -3764,7 +3764,7 @@ type Props = $ReadOnly<{|
   ...TVProps,
   activeOpacity?: ?number,
   style?: ?ViewStyleProp,
-  hostRef?: ?React.Ref<typeof Animated.View>,
+  hostRef?: ?React.RefSetter<React.ElementRef<typeof Animated.View>>,
 |}>;
 declare const Touchable: React.AbstractComponent<
   Props,