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

Summary:
Pull Request resolved: #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

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;

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

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<{|

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} />

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<{|

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,