Add ref types

Author: m-bert

apps/common-app/src/release_tests/combo/index.tsx

@@ -11,7 +11,7 @@ import {
 
 import {
   NativeViewGestureHandler,
-  ScrollView as GHScroll,
+  LegacyScrollView as GHScroll,
   State,
   TapGestureHandler,
   TextInput,

packages/react-native-gesture-handler/src/v3/components/GestureComponents.tsx

@@ -16,6 +16,7 @@ import {
   FlatList as RNFlatList,
   FlatListProps as RNFlatListProps,
   RefreshControl as RNRefreshControl,
+  RefreshControlProps as RNRefreshControlProps,
 } from 'react-native';
 
 import createNativeWrapper, {
@@ -27,6 +28,11 @@ import { NativeWrapperProps } from '../hooks/utils';
 import { DetectorType } from '../detectors';
 import { NativeGesture } from '../hooks/gestures/native/useNativeGesture';
 
+export type ImperativeRefreshControlRef = ComponentWrapperRef<
+  RNRefreshControlProps,
+  RNRefreshControl
+> | null;
+
 export const RefreshControl = createNativeWrapper(
   RNRefreshControl,
   {
@@ -37,7 +43,12 @@ export const RefreshControl = createNativeWrapper(
 );
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
-export type RefreshControl = typeof RefreshControl & RNRefreshControl;
+export type RefreshControl = RNRefreshControlProps;
+
+export type ImperativeScrollViewRef = ComponentWrapperRef<
+  RNScrollViewProps,
+  RNScrollView
+> | null;
 
 const GHScrollView = createNativeWrapper<PropsWithChildren<RNScrollViewProps>>(
   RNScrollView,
@@ -48,9 +59,6 @@ const GHScrollView = createNativeWrapper<PropsWithChildren<RNScrollViewProps>>(
   DetectorType.Intercepting
 );
 
-export type ImperativeScrollViewRef =
-  ComponentWrapperRef<RNScrollViewProps> | null;
-
 export const ScrollView = (
   props: RNScrollViewProps &
     NativeWrapperProperties & {
@@ -65,7 +73,7 @@ export const ScrollView = (
     null
   );
 
-  const wrapperRef = useRef<ComponentWrapperRef<RNScrollViewProps>>(null);
+  const wrapperRef = useRef<ImperativeScrollViewRef>(null);
 
   useImperativeHandle<ImperativeScrollViewRef, ImperativeScrollViewRef>(
     ref,
@@ -94,29 +102,40 @@ export const ScrollView = (
     />
   );
 };
-// Backward type compatibility with https://github.com/software-mansion/react-native-gesture-handler/blob/db78d3ca7d48e8ba57482d3fe9b0a15aa79d9932/react-native-gesture-handler.d.ts#L440-L457
-// include methods of wrapped components by creating an intersection type with the RN component instead of duplicating them.
+
 // eslint-disable-next-line @typescript-eslint/no-redeclare
-export type ScrollView = typeof GHScrollView & RNScrollView;
+export type ScrollView = typeof ScrollView;
+
+export type ImperativeSwitchRef = ComponentWrapperRef<
+  RNSwitchProps,
+  RNSwitch
+> | null;
 
 export const Switch = createNativeWrapper<RNSwitchProps>(RNSwitch, {
   shouldCancelWhenOutside: false,
   shouldActivateOnStart: true,
   disallowInterruption: true,
 });
+
 // eslint-disable-next-line @typescript-eslint/no-redeclare
-export type Switch = typeof Switch & RNSwitch;
+export type Switch = typeof Switch;
+
+export type ImperativeTextInputRef = ComponentWrapperRef<
+  RNTextInputProps,
+  RNTextInput
+> | null;
 
 export const TextInput = createNativeWrapper<RNTextInputProps>(RNTextInput);
-// eslint-disable-next-line @typescript-eslint/no-redeclare
-export type TextInput = typeof TextInput & RNTextInput;
 
 export type ImperativeFlatListRef<T = any> =
-  | (ComponentWrapperRef<RNScrollViewProps> & {
-      flatListRef: FlatList<T> | null;
+  | (ComponentWrapperRef<RNScrollViewProps, RNScrollView> & {
+      flatListRef: RNFlatList<T> | null;
     })
   | null;
 
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export type TextInput = typeof TextInput;
+
 export const FlatList = ((props) => {
   const { refreshControl, ref, ...rest } = props;
 
@@ -125,7 +144,7 @@ export const FlatList = ((props) => {
   );
 
   const wrapperRef = useRef<ImperativeScrollViewRef>(null);
-  const flatListRef = useRef<FlatList<any>>(null);
+  const flatListRef = useRef<RNFlatList<any>>(null);
 
   const flatListProps = {};
   const scrollViewProps = {};
@@ -191,5 +210,6 @@ export const FlatList = ((props) => {
       }
   >
 ) => ReactElement | null;
+
 // eslint-disable-next-line @typescript-eslint/no-redeclare
-export type FlatList<ItemT = any> = typeof FlatList & RNFlatList<ItemT>;
+export type FlatList = typeof FlatList;

packages/react-native-gesture-handler/src/v3/components/index.ts

@@ -22,6 +22,9 @@ export {
 } from './GestureComponents';
 
 export type {
-  ImperativeScrollViewRef as GHScrollViewRef,
   ImperativeFlatListRef as GHFlatListRef,
+  ImperativeRefreshControlRef as GHRefreshControlRef,
+  ImperativeScrollViewRef as GHScrollViewRef,
+  ImperativeSwitchRef as GHSwitchRef,
+  ImperativeTextInputRef as GHTextInputRef,
 } from './GestureComponents';

packages/react-native-gesture-handler/src/v3/createNativeWrapper.tsx

@@ -8,8 +8,8 @@ import { NativeGesture } from './hooks/gestures/native/useNativeGesture';
 import { DetectorType, InterceptingGestureDetector } from './detectors';
 import { VirtualDetector } from './detectors/VirtualDetector/VirtualDetector';
 
-export type ComponentWrapperRef<P> = {
-  componentRef?: React.ComponentType<P>;
+export type ComponentWrapperRef<P, T> = {
+  componentRef?: React.ComponentType<P> & T;
   gestureRef?: NativeGesture;
 };
 
@@ -52,14 +52,10 @@ export default function createNativeWrapper<P>(
     const componentRef = useRef<React.ComponentType<P>>(null);
     const gestureRef = useRef<NativeGesture>(native);
 
-    useImperativeHandle(
-      props.ref,
-      () =>
-        ({
-          componentRef: componentRef.current,
-          gestureRef: gestureRef.current,
-        }) as ComponentWrapperRef<P>
-    );
+    useImperativeHandle(props.ref, () => ({
+      componentRef: componentRef.current,
+      gestureRef: gestureRef.current,
+    }));
 
     const DetectorComponent =
       detectorType === DetectorType.Intercepting