Change components implementation

apps/common-app/src/components/flatlist/index.tsx

@@ -4,7 +4,6 @@ import {
   FlatList,
   RefreshControl,
   GestureHandlerRootView,
-  GHFlatListRef,
 } from 'react-native-gesture-handler';
 
 const DATA = Array.from({ length: 20 }, (_, i) => ({
@@ -21,7 +20,7 @@ const Item = ({ title }: { title: string }) => (
 export default function FlatListExample() {
   const [refreshing, setRefreshing] = useState(false);
 
-  const ref = useRef<GHFlatListRef>(null);
+  const ref = useRef<FlatList>(null);
 
   const onRefresh = () => {
     setRefreshing(true);

apps/common-app/src/components/scrollview/index.tsx

@@ -1,10 +1,6 @@
 import React, { useRef, useState } from 'react';
 import { Text, StyleSheet, View } from 'react-native';
-import {
-  ScrollView,
-  RefreshControl,
-  GHScrollViewRef,
-} from 'react-native-gesture-handler';
+import { ScrollView, RefreshControl } from 'react-native-gesture-handler';
 
 const DATA = Array.from({ length: 20 }, (_, i) => ({
   id: i.toString(),
@@ -20,7 +16,7 @@ const Item = ({ title }: { title: string }) => (
 export default function ScrollViewExample() {
   const [refreshing, setRefreshing] = useState(false);
 
-  const ref = useRef<GHScrollViewRef>(null);
+  const ref = useRef<ScrollView>(null);
 
   const onRefresh = () => {
     setRefreshing(true);

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

@@ -1,8 +1,6 @@
 import React, {
   PropsWithChildren,
   ReactElement,
-  useRef,
-  useImperativeHandle,
   useState,
   RefObject,
 } from 'react';
@@ -16,22 +14,15 @@ import {
   FlatList as RNFlatList,
   FlatListProps as RNFlatListProps,
   RefreshControl as RNRefreshControl,
-  RefreshControlProps as RNRefreshControlProps,
 } from 'react-native';
 
-import createNativeWrapper, {
-  ComponentWrapperRef,
-} from '../createNativeWrapper';
+import createNativeWrapper from '../createNativeWrapper';
 
 import { NativeWrapperProperties } from '../types/NativeWrapperType';
 import { NativeWrapperProps } from '../hooks/utils';
 import { DetectorType } from '../detectors';
 import { NativeGesture } from '../hooks/gestures/native/useNativeGesture';
-
-export type ImperativeRefreshControlRef = ComponentWrapperRef<
-  RNRefreshControlProps,
-  RNRefreshControl
-> | null;
+import { ghQueueMicrotask } from '../../ghQueueMicrotask';
 
 export const RefreshControl = createNativeWrapper(
   RNRefreshControl,
@@ -43,12 +34,7 @@ export const RefreshControl = createNativeWrapper(
 );
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
-export type RefreshControl = typeof RefreshControl;
-
-export type ImperativeScrollViewRef = ComponentWrapperRef<
-  RNScrollViewProps,
-  RNScrollView
-> | null;
+export type RefreshControl = typeof RefreshControl & RNRefreshControl;
 
 const GHScrollView = createNativeWrapper<PropsWithChildren<RNScrollViewProps>>(
   RNScrollView,
@@ -62,33 +48,33 @@ const GHScrollView = createNativeWrapper<PropsWithChildren<RNScrollViewProps>>(
 export const ScrollView = (
   props: RNScrollViewProps &
     NativeWrapperProperties & {
-      ref?: React.RefObject<ImperativeScrollViewRef>;
-      // This prop exists because using `ref` in `renderScrollComponent` doesn't work (it is overwritten by RN internals).
-      innerRef?: (node: ImperativeScrollViewRef) => void;
+      ref?: React.RefObject<RNScrollView | null>;
+      updateGesture_CAN_CAUSE_INFINITE_RERENDER?: (
+        gesture: NativeGesture
+      ) => void;
     }
 ) => {
-  const { refreshControl, innerRef, ref, ...rest } = props;
+  const { refreshControl, updateGesture_CAN_CAUSE_INFINITE_RERENDER, ...rest } =
+    props;
 
   const [scrollGesture, setScrollGesture] = useState<NativeGesture | null>(
     null
   );
 
-  const wrapperRef = useRef<ImperativeScrollViewRef>(null);
-
-  useImperativeHandle<ImperativeScrollViewRef, ImperativeScrollViewRef>(
-    ref,
-    () => wrapperRef.current
-  );
+  const updateGesture = (gesture: NativeGesture) => {
+    ghQueueMicrotask(() => {
+      if (!scrollGesture || scrollGesture.tag !== gesture.tag) {
+        setScrollGesture(gesture);
+        updateGesture_CAN_CAUSE_INFINITE_RERENDER?.(gesture);
+      }
+    });
+  };
 
   return (
     <GHScrollView
       {...rest}
-      // @ts-ignore `ref` exists on `GHScrollView`
-      ref={(node: ImperativeScrollViewRef) => {
-        setScrollGesture(node?.gestureRef ?? null);
-        wrapperRef.current = node;
-        innerRef?.(node);
-      }}
+      ref={props.ref}
+      updateGesture_CAN_CAUSE_INFINITE_RERENDER={updateGesture}
       // @ts-ignore we don't pass `refreshing` prop as we only want to override the ref
       refreshControl={
         refreshControl
@@ -104,12 +90,7 @@ export const ScrollView = (
 };
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
-export type ScrollView = typeof ScrollView;
-
-export type ImperativeSwitchRef = ComponentWrapperRef<
-  RNSwitchProps,
-  RNSwitch
-> | null;
+export type ScrollView = typeof ScrollView & RNScrollView;
 
 export const Switch = createNativeWrapper<RNSwitchProps>(RNSwitch, {
   shouldCancelWhenOutside: false,
@@ -118,33 +99,33 @@ export const Switch = createNativeWrapper<RNSwitchProps>(RNSwitch, {
 });
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
-export type Switch = typeof Switch;
-
-export type ImperativeTextInputRef = ComponentWrapperRef<
-  RNTextInputProps,
-  RNTextInput
-> | null;
+export type Switch = typeof Switch & RNSwitch;
 
 export const TextInput = createNativeWrapper<RNTextInputProps>(RNTextInput);
 
-export type ImperativeFlatListRef<T = any> =
-  | (ComponentWrapperRef<RNScrollViewProps, RNScrollView> & {
-      flatListRef: RNFlatList<T> | null;
-    })
-  | null;
-
 // eslint-disable-next-line @typescript-eslint/no-redeclare
-export type TextInput = typeof TextInput;
+export type TextInput = typeof TextInput & RNTextInput;
 
 export const FlatList = ((props) => {
-  const { refreshControl, ref, ...rest } = props;
+  const {
+    refreshControl,
+    ref,
+    updateGesture_CAN_CAUSE_INFINITE_RERENDER,
+    ...rest
+  } = props;
 
   const [scrollGesture, setScrollGesture] = useState<NativeGesture | null>(
     null
   );
 
-  const wrapperRef = useRef<ImperativeScrollViewRef>(null);
-  const flatListRef = useRef<RNFlatList<any>>(null);
+  const updateGesture = (gesture: NativeGesture) => {
+    ghQueueMicrotask(() => {
+      if (!scrollGesture || scrollGesture.tag !== gesture.tag) {
+        setScrollGesture(gesture);
+        updateGesture_CAN_CAUSE_INFINITE_RERENDER?.(gesture);
+      }
+    });
+  };
 
   const flatListProps = {};
   const scrollViewProps = {};
@@ -162,28 +143,14 @@ export const FlatList = ((props) => {
     }
   }
 
-  useImperativeHandle<ImperativeFlatListRef, ImperativeFlatListRef>(
-    // @ts-ignore We want to override ref
-    ref,
-    () => {
-      return {
-        ...wrapperRef.current,
-        flatListRef: flatListRef.current,
-      };
-    }
-  );
-
   return (
     // @ts-ignore - this function cannot have generic type so we have to ignore this error
     <RNFlatList
-      ref={flatListRef}
+      ref={ref}
       {...flatListProps}
       renderScrollComponent={(scrollProps) => (
         <ScrollView
-          innerRef={(node: ImperativeScrollViewRef) => {
-            setScrollGesture(node?.gestureRef ?? null);
-            wrapperRef.current = node;
-          }}
+          updateGesture_CAN_CAUSE_INFINITE_RERENDER={updateGesture}
           {...{
             ...scrollProps,
             ...scrollViewProps,
@@ -206,10 +173,13 @@ export const FlatList = ((props) => {
   props: PropsWithChildren<
     Omit<RNFlatListProps<ItemT>, 'renderScrollComponent' | 'ref'> &
       NativeWrapperProperties & {
-        ref?: RefObject<ImperativeFlatListRef<ItemT>>;
+        ref?: RefObject<RNFlatList<ItemT> | null>;
+        updateGesture_CAN_CAUSE_INFINITE_RERENDER?: (
+          gesture: NativeGesture
+        ) => void;
       }
   >
 ) => ReactElement | null;
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
-export type FlatList = typeof FlatList;
+export type FlatList = typeof FlatList & RNFlatList;

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

@@ -20,11 +20,3 @@ export {
   FlatList,
   RefreshControl,
 } from './GestureComponents';
-
-export type {
-  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

@@ -1,4 +1,4 @@
-import React, { useImperativeHandle, useRef } from 'react';
+import React from 'react';
 
 import { NativeWrapperProps } from './hooks/utils';
 import { useNativeGesture } from './hooks/gestures';
@@ -8,21 +8,24 @@ import { NativeGesture } from './hooks/gestures/native/useNativeGesture';
 import { DetectorType, InterceptingGestureDetector } from './detectors';
 import { VirtualDetector } from './detectors/VirtualDetector/VirtualDetector';
 
-export type ComponentWrapperRef<P, T> = {
-  componentRef?: React.ComponentType<P> & T;
-  gestureRef?: NativeGesture;
-};
-
 export default function createNativeWrapper<P>(
   Component: React.ComponentType<P>,
   config: Readonly<NativeWrapperProperties> = {},
   detectorType: DetectorType = DetectorType.Native
 ) {
   const ComponentWrapper = (
-    props: P & NativeWrapperProperties & { ref?: React.RefObject<unknown> }
+    props: P &
+      NativeWrapperProperties & {
+        ref?: React.RefObject<unknown>;
+        updateGesture_CAN_CAUSE_INFINITE_RERENDER?: (
+          gesture: NativeGesture
+        ) => void;
+      }
   ) => {
+    const { ref, updateGesture_CAN_CAUSE_INFINITE_RERENDER, ...restProps } =
+      props;
     // Filter out props that should be passed to gesture handler wrapper
-    const { gestureHandlerProps, childProps } = Object.keys(props).reduce(
+    const { gestureHandlerProps, childProps } = Object.keys(restProps).reduce(
       (res, key) => {
         // @ts-ignore TS being overly protective with it's types, see https://github.com/microsoft/TypeScript/issues/26255#issuecomment-458013731 for more info
         if (NativeWrapperProps.has(key)) {
@@ -48,14 +51,7 @@ export default function createNativeWrapper<P>(
     }
 
     const native = useNativeGesture(gestureHandlerProps);
-
-    const componentRef = useRef<React.ComponentType<P>>(null);
-    const gestureRef = useRef<NativeGesture>(native);
-
-    useImperativeHandle(props.ref, () => ({
-      componentRef: componentRef.current,
-      gestureRef: gestureRef.current,
-    }));
+    updateGesture_CAN_CAUSE_INFINITE_RERENDER?.(native);
 
     const DetectorComponent =
       detectorType === DetectorType.Intercepting
@@ -66,7 +62,7 @@ export default function createNativeWrapper<P>(
 
     return (
       <DetectorComponent gesture={native}>
-        <Component {...childProps} ref={componentRef} />
+        <Component {...childProps} ref={ref} />
       </DetectorComponent>
     );
   };