react-native-gesture-handler 2.8.0 → 2.9.0

package/lib/typescript/components/Swipeable.d.ts

@@ -3,6 +3,7 @@ import { Component } from 'react';
 import { Animated, StyleProp, ViewStyle } from 'react-native';
 import { PanGestureHandlerProps } from '../handlers/PanGestureHandler';
 declare type SwipeableExcludes = Exclude<keyof PanGestureHandlerProps, 'onGestureEvent' | 'onHandlerStateChange'>;
+declare type AnimatedInterpolation = ReturnType<Animated.Value['interpolate']>;
 export interface SwipeableProps extends Pick<PanGestureHandlerProps, SwipeableExcludes> {
     /**
      * Enables two-finger gestures on supported devices, for example iPads with
@@ -97,7 +98,7 @@ export interface SwipeableProps extends Pick<PanGestureHandlerProps, SwipeableEx
      *
      * To support `rtl` flexbox layouts use `flexDirection` styling.
      * */
-    renderLeftActions?: (progressAnimatedValue: Animated.AnimatedInterpolation, dragAnimatedValue: Animated.AnimatedInterpolation) => React.ReactNode;
+    renderLeftActions?: (progressAnimatedValue: AnimatedInterpolation, dragAnimatedValue: AnimatedInterpolation) => React.ReactNode;
     /**
      *
      * This map describes the values to use as inputRange for extra interpolation:
@@ -107,7 +108,7 @@ export interface SwipeableProps extends Pick<PanGestureHandlerProps, SwipeableEx
      *
      * To support `rtl` flexbox layouts use `flexDirection` styling.
      * */
-    renderRightActions?: (progressAnimatedValue: Animated.AnimatedInterpolation, dragAnimatedValue: Animated.AnimatedInterpolation, swipeable: Swipeable) => React.ReactNode;
+    renderRightActions?: (progressAnimatedValue: AnimatedInterpolation, dragAnimatedValue: AnimatedInterpolation, swipeable: Swipeable) => React.ReactNode;
     useNativeAnimations?: boolean;
     animationOptions?: Record<string, unknown>;
     /**

package/lib/typescript/fabric/RNGestureHandlerButtonNativeComponent.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react-native/codegen" />
+/// <reference types="react-native/types/modules/codegen" />
 import type { Int32, WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
 import type { ViewProps, ColorValue } from 'react-native';
 interface NativeProps extends ViewProps {

package/lib/typescript/fabric/RNGestureHandlerRootViewNativeComponent.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react-native/codegen" />
+/// <reference types="react-native/types/modules/codegen" />
 import type { ViewProps } from 'react-native';
 interface NativeProps extends ViewProps {
 }

package/lib/typescript/gestureHandlerRootHOC.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
-export default function gestureHandlerRootHOC<P>(Component: React.ComponentType<P>, containerStyles?: StyleProp<ViewStyle>): React.ComponentType<P>;
+export default function gestureHandlerRootHOC<P extends JSX.IntrinsicAttributes>(Component: React.ComponentType<P>, containerStyles?: StyleProp<ViewStyle>): React.ComponentType<P>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gesture-handler",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "description": "Experimental implementation of a new declarative API for gesture handling in react-native",
   "scripts": {
     "prepare": "bob build && husky install",
@@ -82,8 +82,7 @@
     "@types/hammerjs": "^2.0.38",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/jest": "^27.0.3",
-    "@types/react": "^17.0.0",
-    "@types/react-native": "^0.69.6",
+    "@types/react": "^18.0.24",
     "@types/react-test-renderer": "^17.0.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
@@ -100,9 +99,9 @@
     "lint-staged": "^12.3.2",
     "metro-react-native-babel-preset": "^0.64.0",
     "prettier": "^2.7.1",
-    "react": "^16.8.6",
+    "react": "18.2.0",
     "react-dom": "^16.12.0",
-    "react-native": "^0.64.0",
+    "react-native": "0.71.0",
     "react-native-builder-bob": "^0.17.1",
     "react-native-reanimated": "^2.3.1",
     "react-native-web": "^0.11.7",

package/src/components/DrawerLayout.tsx

@@ -54,6 +54,10 @@ export type DrawerLockMode = 'unlocked' | 'locked-closed' | 'locked-open';
 
 export type DrawerKeyboardDismissMode = 'none' | 'on-drag';
 
+// Animated.AnimatedInterpolation has been converted to a generic type
+// in @types/react-native 0.70. This way we can maintain compatibility
+// with all versions of @types/react-native`
+type AnimatedInterpolation = ReturnType<Animated.Value['interpolate']>;
 export interface DrawerLayoutProps {
   /**
    * This attribute is present in the standard implementation already and is one
@@ -153,7 +157,7 @@ export interface DrawerLayoutProps {
   // implicit `children` prop has been removed in @types/react^18.0.0
   children?:
     | React.ReactNode
-    | ((openValue?: Animated.AnimatedInterpolation) => React.ReactNode);
+    | ((openValue?: AnimatedInterpolation) => React.ReactNode);
 
   /**
    * @default 'none'
@@ -224,7 +228,7 @@ export default class DrawerLayout extends Component<
     return true;
   }
 
-  private openValue?: Animated.AnimatedInterpolation;
+  private openValue?: AnimatedInterpolation;
   private onGestureEvent?: (
     event: GestureEvent<PanGestureHandlerEventPayload>
   ) => void;
@@ -603,7 +607,7 @@ export default class DrawerLayout extends Component<
       };
     }
 
-    let drawerTranslateX: number | Animated.AnimatedInterpolation = 0;
+    let drawerTranslateX: number | AnimatedInterpolation = 0;
     if (drawerSlide) {
       const closedDrawerOffset = fromLeft ? -drawerWidth! : drawerWidth!;
       if (this.state.drawerState !== IDLE) {
@@ -617,7 +621,7 @@ export default class DrawerLayout extends Component<
       }
     }
     const drawerStyles: {
-      transform: { translateX: number | Animated.AnimatedInterpolation }[];
+      transform: { translateX: number | AnimatedInterpolation }[];
       flexDirection: 'row-reverse' | 'row';
     } = {
       transform: [{ translateX: drawerTranslateX }],

package/src/components/Swipeable.tsx

@@ -36,6 +36,11 @@ type SwipeableExcludes = Exclude<
   'onGestureEvent' | 'onHandlerStateChange'
 >;
 
+// Animated.AnimatedInterpolation has been converted to a generic type
+// in @types/react-native 0.70. This way we can maintain compatibility
+// with all versions of @types/react-native
+type AnimatedInterpolation = ReturnType<Animated.Value['interpolate']>;
+
 export interface SwipeableProps
   extends Pick<PanGestureHandlerProps, SwipeableExcludes> {
   /**
@@ -150,8 +155,8 @@ export interface SwipeableProps
    * To support `rtl` flexbox layouts use `flexDirection` styling.
    * */
   renderLeftActions?: (
-    progressAnimatedValue: Animated.AnimatedInterpolation,
-    dragAnimatedValue: Animated.AnimatedInterpolation
+    progressAnimatedValue: AnimatedInterpolation,
+    dragAnimatedValue: AnimatedInterpolation
   ) => React.ReactNode;
   /**
    *
@@ -163,8 +168,8 @@ export interface SwipeableProps
    * To support `rtl` flexbox layouts use `flexDirection` styling.
    * */
   renderRightActions?: (
-    progressAnimatedValue: Animated.AnimatedInterpolation,
-    dragAnimatedValue: Animated.AnimatedInterpolation,
+    progressAnimatedValue: AnimatedInterpolation,
+    dragAnimatedValue: AnimatedInterpolation,
     swipeable: Swipeable
   ) => React.ReactNode;
 
@@ -242,11 +247,11 @@ export default class Swipeable extends Component<
   private onGestureEvent?: (
     event: GestureEvent<PanGestureHandlerEventPayload>
   ) => void;
-  private transX?: Animated.AnimatedInterpolation;
-  private showLeftAction?: Animated.AnimatedInterpolation | Animated.Value;
-  private leftActionTranslate?: Animated.AnimatedInterpolation;
-  private showRightAction?: Animated.AnimatedInterpolation | Animated.Value;
-  private rightActionTranslate?: Animated.AnimatedInterpolation;
+  private transX?: AnimatedInterpolation;
+  private showLeftAction?: AnimatedInterpolation | Animated.Value;
+  private leftActionTranslate?: AnimatedInterpolation;
+  private showRightAction?: AnimatedInterpolation | Animated.Value;
+  private rightActionTranslate?: AnimatedInterpolation;
 
   private updateAnimatedEvent = (
     props: SwipeableProps,

package/src/gestureHandlerRootHOC.tsx

@@ -3,7 +3,9 @@ import { StyleSheet, StyleProp, ViewStyle } from 'react-native';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import GestureHandlerRootView from './GestureHandlerRootView';
 
-export default function gestureHandlerRootHOC<P>(
+export default function gestureHandlerRootHOC<
+  P extends JSX.IntrinsicAttributes
+>(
   Component: React.ComponentType<P>,
   containerStyles?: StyleProp<ViewStyle>
 ): React.ComponentType<P> {
@@ -19,6 +21,7 @@ export default function gestureHandlerRootHOC<P>(
     Component.displayName || Component.name
   })`;
 
+  // @ts-ignore - hoistNonReactStatics uses old version of @types/react
   hoistNonReactStatics(Wrapper, Component);
 
   return Wrapper;

package/src/handlers/LongPressGestureHandler.ts

@@ -82,5 +82,7 @@ export const LongPressGestureHandler = createHandler<
     ...baseGestureHandlerProps,
     ...longPressGestureHandlerProps,
   ] as const,
-  config: {},
+  config: {
+    shouldCancelWhenOutside: true,
+  },
 });

package/src/handlers/TapGestureHandler.ts

@@ -88,5 +88,7 @@ export const TapGestureHandler = createHandler<
     ...baseGestureHandlerProps,
     ...tapGestureHandlerProps,
   ] as const,
-  config: {},
+  config: {
+    shouldCancelWhenOutside: true,
+  },
 });

package/src/handlers/gestures/GestureDetector.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, RefObject } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
   GestureType,
   HandlerCallbacks,
@@ -130,6 +130,7 @@ interface AttachHandlersConfig {
   gesture: GestureType[];
   viewTag: number;
   webEventHandlersRef: React.RefObject<WebEventHandler>;
+  mountedRef: React.RefObject<boolean>;
 }
 
 function attachHandlers({
@@ -138,6 +139,7 @@ function attachHandlers({
   gesture,
   viewTag,
   webEventHandlersRef,
+  mountedRef,
 }: AttachHandlersConfig) {
   if (!preparedGesture.firstExecution) {
     gestureConfig.initialize();
@@ -148,6 +150,9 @@ function attachHandlers({
   // use setImmediate to extract handlerTags, because all refs should be initialized
   // when it's ran
   setImmediate(() => {
+    if (!mountedRef.current) {
+      return;
+    }
     gestureConfig.prepare();
   });
 
@@ -165,6 +170,9 @@ function attachHandlers({
   // use setImmediate to extract handlerTags, because all refs should be initialized
   // when it's ran
   setImmediate(() => {
+    if (!mountedRef.current) {
+      return;
+    }
     for (const handler of gesture) {
       let requireToFail: number[] = [];
       if (handler.config.requireToFail) {
@@ -230,7 +238,7 @@ function updateHandlers(
   preparedGesture: GestureConfigReference,
   gestureConfig: ComposedGesture | GestureType,
   gesture: GestureType[],
-  mountedRef: RefObject<boolean>
+  mountedRef: React.RefObject<boolean>
 ) {
   gestureConfig.prepare();
 
@@ -588,6 +596,12 @@ interface GestureDetectorProps {
   userSelect?: UserSelect;
   children?: React.ReactNode;
 }
+interface GestureDetectorState {
+  firstRender: boolean;
+  viewRef: React.Component | null;
+  previousViewTag: number;
+  forceReattach: boolean;
+}
 export const GestureDetector = (props: GestureDetectorProps) => {
   const gestureConfig = props.gesture;
 
@@ -597,8 +611,14 @@ export const GestureDetector = (props: GestureDetectorProps) => {
 
   const gesture = gestureConfig.toGestureArray();
   const useReanimatedHook = gesture.some((g) => g.shouldUseReanimated);
-  const viewRef = useRef(null);
-  const firstRenderRef = useRef(true);
+
+  // store state in ref to prevent unnecessary renders
+  const state = useRef<GestureDetectorState>({
+    firstRender: true,
+    viewRef: null,
+    previousViewTag: -1,
+    forceReattach: false,
+  }).current;
   const mountedRef = useRef(false);
   const webEventHandlersRef = useRef<WebEventHandler>({
     onGestureHandlerEvent: (e: HandlerStateChangeEvent<unknown>) => {
@@ -611,6 +631,11 @@ export const GestureDetector = (props: GestureDetectorProps) => {
       : undefined,
   });
 
+  const [renderState, setRenderState] = useState(false);
+  function forceRender() {
+    setRenderState(!renderState);
+  }
+
   const preparedGesture = React.useRef<GestureConfigReference>({
     config: gesture,
     animatedEventHandler: null,
@@ -627,10 +652,41 @@ export const GestureDetector = (props: GestureDetectorProps) => {
     );
   }
 
+  function onHandlersUpdate(skipConfigUpdate?: boolean) {
+    // if the underlying view has changed we need to reattach handlers to the new view
+    const viewTag = findNodeHandle(state.viewRef) as number;
+    const forceReattach = viewTag !== state.previousViewTag;
+
+    if (forceReattach || needsToReattach(preparedGesture, gesture)) {
+      validateDetectorChildren(state.viewRef);
+      dropHandlers(preparedGesture);
+      attachHandlers({
+        preparedGesture,
+        gestureConfig,
+        gesture,
+        webEventHandlersRef,
+        viewTag,
+        mountedRef,
+      });
+
+      state.previousViewTag = viewTag;
+      state.forceReattach = forceReattach;
+      if (forceReattach) {
+        forceRender();
+      }
+    } else if (!skipConfigUpdate) {
+      updateHandlers(preparedGesture, gestureConfig, gesture, mountedRef);
+    }
+  }
+
   // Reanimated event should be rebuilt only when gestures are reattached, otherwise
   // config update will be enough as all necessary items are stored in shared values anyway
   const needsToRebuildReanimatedEvent =
-    preparedGesture.firstExecution || needsToReattach(preparedGesture, gesture);
+    preparedGesture.firstExecution ||
+    needsToReattach(preparedGesture, gesture) ||
+    state.forceReattach;
+
+  state.forceReattach = false;
 
   if (preparedGesture.firstExecution) {
     gestureConfig.initialize();
@@ -643,17 +699,19 @@ export const GestureDetector = (props: GestureDetectorProps) => {
   }
 
   useEffect(() => {
-    firstRenderRef.current = true;
+    const viewTag = findNodeHandle(state.viewRef) as number;
+    state.firstRender = true;
     mountedRef.current = true;
-    const viewTag = findNodeHandle(viewRef.current) as number;
 
-    validateDetectorChildren(viewRef.current);
+    validateDetectorChildren(state.viewRef);
+
     attachHandlers({
       preparedGesture,
       gestureConfig,
       gesture,
-      viewTag,
       webEventHandlersRef,
+      viewTag,
+      mountedRef,
     });
 
     return () => {
@@ -663,31 +721,26 @@ export const GestureDetector = (props: GestureDetectorProps) => {
   }, []);
 
   useEffect(() => {
-    if (!firstRenderRef.current) {
-      const viewTag = findNodeHandle(viewRef.current) as number;
-
-      if (needsToReattach(preparedGesture, gesture)) {
-        validateDetectorChildren(viewRef.current);
-        dropHandlers(preparedGesture);
-        attachHandlers({
-          preparedGesture,
-          gestureConfig,
-          gesture,
-          viewTag,
-          webEventHandlersRef,
-        });
-      } else {
-        updateHandlers(preparedGesture, gestureConfig, gesture, mountedRef);
-      }
+    if (!state.firstRender) {
+      onHandlersUpdate();
     } else {
-      firstRenderRef.current = false;
+      state.firstRender = false;
     }
   }, [props]);
 
   const refFunction = (ref: unknown) => {
     if (ref !== null) {
-      //@ts-ignore Just setting the ref
-      viewRef.current = ref;
+      // @ts-ignore Just setting the view ref
+      state.viewRef = ref;
+
+      // if it's the first render, also set the previousViewTag to prevent reattaching gestures when not needed
+      if (state.previousViewTag === -1) {
+        state.previousViewTag = findNodeHandle(state.viewRef) as number;
+      }
+
+      // pass true as `skipConfigUpdate`, here we only want to trigger the eventual reattaching of handlers
+      // in case the view has changed, while config update would be handled be the `useEffect` above
+      onHandlersUpdate(true);
 
       if (isFabric()) {
         const node = getShadowNodeFromRef(ref);

package/src/handlers/gestures/longPressGesture.ts

@@ -11,6 +11,7 @@ export class LongPressGesture extends BaseGesture<LongPressGestureHandlerEventPa
     super();
 
     this.handlerName = 'LongPressGestureHandler';
+    this.shouldCancelWhenOutside(true);
   }
 
   minDuration(duration: number) {

package/src/handlers/gestures/tapGesture.ts

@@ -11,6 +11,7 @@ export class TapGesture extends BaseGesture<TapGestureHandlerEventPayload> {
     super();
 
     this.handlerName = 'TapGestureHandler';
+    this.shouldCancelWhenOutside(true);
   }
 
   minPointers(minPointers: number) {

package/src/web/handlers/LongPressGestureHandler.ts

@@ -22,7 +22,6 @@ export default class LongPressGestureHandler extends GestureHandler {
 
   public init(ref: number, propsRef: React.RefObject<unknown>) {
     super.init(ref, propsRef);
-    this.setShouldCancelWhenOutside(true);
 
     this.view.oncontextmenu = () => false;
   }

package/src/web/handlers/TapGestureHandler.ts

@@ -33,7 +33,6 @@ export default class TapGestureHandler extends GestureHandler {
 
   public init(ref: number, propsRef: React.RefObject<unknown>): void {
     super.init(ref, propsRef);
-    this.setShouldCancelWhenOutside(true);
   }
 
   public updateGestureConfig({ enabled = true, ...props }: Config): void {