Fix type definition of useMergeRefs

Summary: The type definition of `useMergeRefs` is incorrect, which forces all callsites to use `$FlowFixMe`. This fixes the definition and removes all the `$FlowFixMe`s caused by it. Changelog: [internal] Differential Revision: D51660716
rubennorte · Nov 29, 2023 · 27bf325 · 27bf325
1 parent a04bc20
commit 27bf325
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 14 deletions.
diff --git a/packages/react-native/Libraries/Animated/createAnimatedComponent.js b/packages/react-native/Libraries/Animated/createAnimatedComponent.js
@@ -35,7 +35,6 @@ export default function createAnimatedComponent<TProps: {...}, TInstance>(
         // $FlowFixMe[incompatible-call]
         props,
       );
-      // $FlowFixMe[incompatible-call]
       const ref = useMergeRefs<TInstance | null>(callbackRef, forwardedRef);
 
       // Some components require explicit passthrough values for animation

diff --git a/packages/react-native/Libraries/Components/ScrollView/ScrollViewStickyHeader.js b/packages/react-native/Libraries/Components/ScrollView/ScrollViewStickyHeader.js
@@ -67,7 +67,6 @@ const ScrollViewStickyHeaderWithForwardedRef: React.AbstractComponent<
   }, []);
   const ref: (React.ElementRef<typeof Animated.View> | null) => void =
     // $FlowFixMe[incompatible-type] - Ref is mutated by `callbackRef`.
-    // $FlowFixMe[incompatible-call]
     useMergeRefs<Instance | null>(callbackRef, forwardedRef);
 
   const offset = useMemo(

diff --git a/packages/react-native/Libraries/Components/Switch/Switch.js b/packages/react-native/Libraries/Components/Switch/Switch.js
@@ -155,7 +155,6 @@ const SwitchWithForwardedRef: React.AbstractComponent<
     typeof SwitchNativeComponent | typeof AndroidSwitchNativeComponent,
   > | null>(null);
 
-  // $FlowFixMe[incompatible-call]
   const ref = useMergeRefs(nativeSwitchRef, forwardedRef);
 
   const [native, setNative] = React.useState({value: (null: ?boolean)});

diff --git a/packages/react-native/Libraries/Image/ImageInjection.js b/packages/react-native/Libraries/Image/ImageInjection.js
@@ -81,9 +81,7 @@ export function useWrapRefWithImageAttachedCallbacks(
 
   // `useMergeRefs` returns a stable ref if its arguments don't change.
   return useMergeRefs<React.ElementRef<AbstractImageAndroid> | null>(
-    // $FlowFixMe[incompatible-call]
     forwardedRef,
-    // $FlowFixMe[incompatible-call]
     imageAttachedCallbacksRef.current,
   );
 }
diff --git a/packages/react-native/Libraries/Utilities/useMergeRefs.js b/packages/react-native/Libraries/Utilities/useMergeRefs.js
@@ -8,13 +8,9 @@
  * @format
  */
 
+import * as React from 'react';
 import {useCallback} from 'react';
 
-type CallbackRef<T> = T => mixed;
-type ObjectRef<T> = {current: T, ...};
-
-type Ref<T> = CallbackRef<T> | ObjectRef<T>;
-
 /**
  * Constructs a new ref that forwards new values to each of the given refs. The
  * given refs will always be invoked in the order that they are supplied.
@@ -24,11 +20,11 @@ type Ref<T> = CallbackRef<T> | ObjectRef<T>;
  * the returned callback ref is supplied as a `ref` to a React element, this may
  * lead to problems with the given refs being invoked more times than desired.
  */
-export default function useMergeRefs<T>(
-  ...refs: $ReadOnlyArray<?Ref<T>>
-): CallbackRef<T> {
+export default function useMergeRefs<Instance>(
+  ...refs: $ReadOnlyArray<?React.RefSetter<Instance>>
+): (Instance | null) => void {
   return useCallback(
-    (current: T) => {
+    (current: Instance | null) => {
       for (const ref of refs) {
         if (ref != null) {
           if (typeof ref === 'function') {