react-native-gesture-handler 3.1.0 → 3.2.0-nightly-20260720-9c6135950

package/src/v3/components/GestureComponents.tsx

@@ -23,8 +23,11 @@ import { NativeWrapperProps } from '../hooks/utils';
 import type { NativeWrapperProperties } from '../types/NativeWrapperType';
 import ScrollViewResponderInterceptor from './ScrollViewResponderInterceptor';
 
-export const RefreshControl = createNativeWrapper<
-  RNRefreshControl,
+export const RefreshControl: React.ComponentType<
+  RNRefreshControlProps &
+    NativeWrapperProperties<React.ComponentRef<typeof RNRefreshControl> | null>
+> = createNativeWrapper<
+  React.ComponentRef<typeof RNRefreshControl>,
   RNRefreshControlProps
 >(
   RNRefreshControl,
@@ -39,7 +42,7 @@ export const RefreshControl = createNativeWrapper<
 export type RefreshControl = typeof RefreshControl & RNRefreshControl;
 
 const GHScrollView = createNativeWrapper<
-  RNScrollView,
+  React.ComponentRef<typeof RNScrollView>,
   PropsWithChildren<RNScrollViewProps>
 >(
   RNScrollView,
@@ -51,7 +54,8 @@ const GHScrollView = createNativeWrapper<
 );
 
 export const ScrollView = (
-  props: RNScrollViewProps & NativeWrapperProperties<RNScrollView | null>
+  props: RNScrollViewProps &
+    NativeWrapperProperties<React.ComponentRef<typeof RNScrollView> | null>
 ) => {
   const {
     children,
@@ -101,18 +105,28 @@ export const ScrollView = (
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export type ScrollView = typeof ScrollView & RNScrollView;
 
-export const Switch = createNativeWrapper<RNSwitch, RNSwitchProps>(RNSwitch, {
-  shouldCancelWhenOutside: false,
-  shouldActivateOnStart: true,
-  disallowInterruption: true,
-});
+export const Switch: React.ComponentType<
+  RNSwitchProps &
+    NativeWrapperProperties<React.ComponentRef<typeof RNSwitch> | null>
+> = createNativeWrapper<React.ComponentRef<typeof RNSwitch>, RNSwitchProps>(
+  RNSwitch,
+  {
+    shouldCancelWhenOutside: false,
+    shouldActivateOnStart: true,
+    disallowInterruption: true,
+  }
+);
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export type Switch = typeof Switch & RNSwitch;
 
-export const TextInput = createNativeWrapper<RNTextInput, RNTextInputProps>(
-  RNTextInput
-);
+export const TextInput: React.ComponentType<
+  RNTextInputProps &
+    NativeWrapperProperties<React.ComponentRef<typeof RNTextInput> | null>
+> = createNativeWrapper<
+  React.ComponentRef<typeof RNTextInput>,
+  RNTextInputProps
+>(RNTextInput);
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export type TextInput = typeof TextInput & RNTextInput;

package/src/v3/components/Pressable.tsx

@@ -77,6 +77,7 @@ const Pressable = (props: PressableProps) => {
     simultaneousWith,
     requireToFail,
     block,
+    ref,
     ...remainingProps
   } = props;
 
@@ -426,6 +427,7 @@ const Pressable = (props: PressableProps) => {
     <GestureDetector gesture={gesture}>
       <PureNativeButton
         {...remainingProps}
+        ref={ref as React.Ref<React.ComponentRef<typeof PureNativeButton>>}
         {...tvProps}
         onLayout={setDimensions}
         accessible={accessible !== false}

package/src/v3/detectors/HostGestureDetector.web.tsx

@@ -349,7 +349,9 @@ const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
   }, [refs]);
 
   return (
-    <View style={{ display: 'contents' }} ref={viewRef as Ref<View>}>
+    <View
+      style={{ display: 'contents' }}
+      ref={viewRef as Ref<React.ComponentRef<typeof View>>}>
       {children}
     </View>
   );

package/src/v3/detectors/NativeDetector.tsx

@@ -5,7 +5,9 @@ import { useJSResponderHandler } from '../hooks/useJSResponderHandler';
 import { isComposedGesture } from '../hooks/utils/relationUtils';
 import type { NativeDetectorProps } from './common';
 import { AnimatedNativeDetector, nativeDetectorStyles } from './common';
-import HostGestureDetector from './HostGestureDetector';
+import HostGestureDetector, {
+  type RNGestureHandlerDetectorNativeComponentProps,
+} from './HostGestureDetector';
 import { ReanimatedNativeDetector } from './ReanimatedNativeDetector';
 import { useDetectorAttachmentGuard } from './useDetectorAttachmentGuard';
 import { useGestureRelationsUpdater } from './useGestureRelationsUpdater';
@@ -24,11 +26,13 @@ export function NativeDetector<
 }: NativeDetectorProps<TConfig, THandlerData, TExtendedHandlerData>) {
   const { handleStartShouldSetResponder } = useJSResponderHandler(gesture);
 
-  const NativeDetectorComponent = gesture.config.dispatchesAnimatedEvents
-    ? AnimatedNativeDetector
-    : gesture.config.shouldUseReanimatedDetector
-      ? ReanimatedNativeDetector
-      : HostGestureDetector;
+  const NativeDetectorComponent = (
+    gesture.config.dispatchesAnimatedEvents
+      ? AnimatedNativeDetector
+      : gesture.config.shouldUseReanimatedDetector
+        ? ReanimatedNativeDetector
+        : HostGestureDetector
+  ) as React.FunctionComponent<RNGestureHandlerDetectorNativeComponentProps>;
 
   ensureNativeDetectorComponent(NativeDetectorComponent);
   useGestureRelationsUpdater(gesture);

package/src/v3/detectors/VirtualDetector/InterceptingGestureDetector.tsx

@@ -15,7 +15,9 @@ import type {
 } from '../../types';
 import type { InterceptingGestureDetectorProps } from '../common';
 import { AnimatedNativeDetector, nativeDetectorStyles } from '../common';
-import HostGestureDetector from '../HostGestureDetector';
+import HostGestureDetector, {
+  type RNGestureHandlerDetectorNativeComponentProps,
+} from '../HostGestureDetector';
 import { ReanimatedNativeDetector } from '../ReanimatedNativeDetector';
 import { useDetectorAttachmentGuard } from '../useDetectorAttachmentGuard';
 import { useEnsureGestureHandlerRootView } from '../useEnsureGestureHandlerRootView';
@@ -85,11 +87,13 @@ export function InterceptingGestureDetector<
     mode === InterceptingDetectorMode.REANIMATED;
   const dispatchesAnimatedEvents = mode === InterceptingDetectorMode.ANIMATED;
 
-  const NativeDetectorComponent = dispatchesAnimatedEvents
-    ? AnimatedNativeDetector
-    : shouldUseReanimatedDetector
-      ? ReanimatedNativeDetector
-      : HostGestureDetector;
+  const NativeDetectorComponent = (
+    dispatchesAnimatedEvents
+      ? AnimatedNativeDetector
+      : shouldUseReanimatedDetector
+        ? ReanimatedNativeDetector
+        : HostGestureDetector
+  ) as React.FunctionComponent<RNGestureHandlerDetectorNativeComponentProps>;
 
   const register = useCallback((child: VirtualChild) => {
     setVirtualChildren((prev) => {

package/src/v3/detectors/common.ts

@@ -7,7 +7,9 @@ import type {
 } from '../../handlers/gestureHandlerCommon';
 import type { GestureDetectorProps as LegacyDetectorProps } from '../../handlers/gestures/GestureDetector';
 import type { Gesture } from '../types';
-import HostGestureDetector from './HostGestureDetector';
+import HostGestureDetector, {
+  type RNGestureHandlerDetectorNativeComponentProps,
+} from './HostGestureDetector';
 
 export enum GestureDetectorType {
   Native,
@@ -59,7 +61,7 @@ export type GestureDetectorProps<
     >
   | LegacyDetectorProps;
 
-export const AnimatedNativeDetector =
+export const AnimatedNativeDetector: React.ComponentType<RNGestureHandlerDetectorNativeComponentProps> =
   Animated.createAnimatedComponent(HostGestureDetector);
 
 export const nativeDetectorStyles = StyleSheet.create({

package/src/v3/types/EventTypes.ts

@@ -71,8 +71,10 @@ export type UnpackedGestureHandlerEvent<THandlerData> =
 // This is not how Animated.event is typed in React Native. We add _argMapping in order to
 // have access to the _argMapping property to check for usage of `change*` callbacks.
 // It's also not typed as a function, which is breaking Gesture Handler type definitions.
+type AnimatedMapping = { [key: string]: AnimatedMapping } | Animated.Value;
+
 export type AnimatedEvent = {
-  _argMapping: (Animated.Mapping | null)[];
+  _argMapping: (AnimatedMapping | null)[];
 };
 
 export type ChangeCalculatorType<TExtendedHandlerData> = (