Fixes

Author: m-bert

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

@@ -76,26 +76,15 @@ export type {
   LegacyRectButtonProps,
   LegacyBorderlessButtonProps,
 } from './components/GestureButtonsProps';
-export type {
-  RawButtonProps,
-  BaseButtonProps,
-  RectButtonProps,
-  BorderlessButtonProps,
-} from './v3/components/GestureButtonsProps';
+
 export {
   LegacyRawButton,
   LegacyBaseButton,
   LegacyRectButton,
   LegacyBorderlessButton,
   LegacyPureNativeButton,
 } from './components/GestureButtons';
-export {
-  RawButton,
-  BaseButton,
-  RectButton,
-  BorderlessButton,
-  PureNativeButton,
-} from './v3/components/GestureButtons';
+
 export type {
   TouchableHighlightProps,
   TouchableOpacityProps,
@@ -115,13 +104,7 @@ export {
   LegacyFlatList,
   LegacyRefreshControl,
 } from './components/GestureComponents';
-export {
-  ScrollView,
-  Switch,
-  TextInput,
-  FlatList,
-  RefreshControl,
-} from './v3/components/GestureComponents';
+
 export { Text } from './components/Text';
 export { HoverEffect } from './handlers/gestures/hoverGesture';
 export type {
@@ -184,4 +167,6 @@ export type { GestureTouchEvent as SingleGestureTouchEvent } from './handlers/ge
 
 export * from './v3/hooks/gestures';
 
+export * from './v3/components';
+
 initialize();

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

@@ -1,11 +1,10 @@
 import React, {
   PropsWithChildren,
-  ForwardedRef,
-  RefAttributes,
   ReactElement,
   useRef,
   useImperativeHandle,
   useState,
+  RefObject,
 } from 'react';
 import {
   ScrollView as RNScrollView,
@@ -111,9 +110,9 @@ export const TextInput = createNativeWrapper<RNTextInputProps>(RNTextInput);
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export type TextInput = typeof TextInput & RNTextInput;
 
-type ImperativeFlatListRef =
+export type ImperativeFlatListRef<T = any> =
   | (ComponentWrapperRef<RNScrollViewProps> & {
-      flatListRef: React.RefObject<FlatList<unknown>>;
+      flatListRef: FlatList<T> | null;
     })
   | null;
 
@@ -125,7 +124,7 @@ export const FlatList = ((props) => {
   );
 
   const wrapperRef = useRef<ImperativeScrollViewRef>(null);
-  const flatListRef = useRef<FlatList<unknown>>(null);
+  const flatListRef = useRef<FlatList<any>>(null);
 
   const flatListProps = {};
   const scrollViewProps = {};
@@ -185,11 +184,11 @@ export const FlatList = ((props) => {
   );
 }) as <ItemT = any>(
   props: PropsWithChildren<
-    Omit<RNFlatListProps<ItemT>, 'renderScrollComponent'> &
-      RefAttributes<FlatList<ItemT>> &
-      NativeWrapperProperties
-  >,
-  ref?: ForwardedRef<FlatList<ItemT>>
+    Omit<RNFlatListProps<ItemT>, 'renderScrollComponent' | 'ref'> &
+      NativeWrapperProperties & {
+        ref?: RefObject<ImperativeFlatListRef<ItemT>>;
+      }
+  >
 ) => ReactElement | null;
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export type FlatList<ItemT = any> = typeof FlatList & RNFlatList<ItemT>;

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

@@ -0,0 +1,24 @@
+export type {
+  RawButtonProps,
+  BaseButtonProps,
+  RectButtonProps,
+  BorderlessButtonProps,
+} from './GestureButtonsProps';
+
+export {
+  RawButton,
+  BaseButton,
+  RectButton,
+  BorderlessButton,
+  PureNativeButton,
+} from './GestureButtons';
+
+export {
+  ScrollView,
+  Switch,
+  TextInput,
+  FlatList,
+  RefreshControl,
+} from './GestureComponents';
+
+export type { ImperativeFlatListRef as GHFlatListRef } from './GestureComponents';

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

@@ -9,8 +9,8 @@ import { DetectorType, InterceptingGestureDetector } from './detectors';
 import { VirtualDetector } from './detectors/VirtualDetector/VirtualDetector';
 
 export type ComponentWrapperRef<P> = {
-  componentRef: React.ComponentType<P>;
-  gestureRef: NativeGesture;
+  componentRef?: React.ComponentType<P>;
+  gestureRef?: NativeGesture;
 };
 
 export default function createNativeWrapper<P>(
@@ -47,13 +47,14 @@ 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: native,
+          gestureRef: gestureRef.current,
         }) as ComponentWrapperRef<P>
     );