react-native-gesture-handler 2.3.2 → 2.4.2

package/lib/typescript/handlers/gestureHandlerCommon.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { State } from '../State';
-import { EventType } from '../EventType';
+import { TouchEventType } from '../TouchEventType';
 import { ValueOf } from '../typeUtils';
-export declare const baseGestureHandlerProps: readonly ["id", "enabled", "shouldCancelWhenOutside", "hitSlop", "waitFor", "simultaneousHandlers", "onBegan", "onFailed", "onCancelled", "onActivated", "onEnded", "onGestureEvent", "onHandlerStateChange"];
+export declare const baseGestureHandlerProps: readonly ["id", "enabled", "shouldCancelWhenOutside", "hitSlop", "cancelsTouchesInView", "waitFor", "simultaneousHandlers", "onBegan", "onFailed", "onCancelled", "onActivated", "onEnded", "onGestureEvent", "onHandlerStateChange"];
 export declare const baseGestureHandlerWithMonitorProps: string[];
 export interface GestureEventPayload {
     handlerTag: number;
@@ -30,7 +30,7 @@ export declare type GestureTouchEvent = {
     handlerTag: number;
     numberOfTouches: number;
     state: ValueOf<typeof State>;
-    eventType: EventType;
+    eventType: TouchEventType;
     allTouches: TouchData[];
     changedTouches: TouchData[];
 };
@@ -46,6 +46,7 @@ export declare type BaseGestureHandlerProps<ExtraEventPayloadT extends Record<st
     waitFor?: React.Ref<unknown> | React.Ref<unknown>[];
     simultaneousHandlers?: React.Ref<unknown> | React.Ref<unknown>[];
     testID?: string;
+    cancelsTouchesInView?: boolean;
     onBegan?: (event: HandlerStateChangeEvent) => void;
     onFailed?: (event: HandlerStateChangeEvent) => void;
     onCancelled?: (event: HandlerStateChangeEvent) => void;
@@ -53,8 +54,10 @@ export declare type BaseGestureHandlerProps<ExtraEventPayloadT extends Record<st
     onEnded?: (event: HandlerStateChangeEvent) => void;
     onGestureEvent?: (event: GestureEvent<ExtraEventPayloadT>) => void;
     onHandlerStateChange?: (event: HandlerStateChangeEvent<ExtraEventPayloadT>) => void;
+    children?: React.ReactNode;
 };
 export declare function filterConfig(props: Record<string, unknown>, validProps: string[], defaults?: Record<string, unknown>): {
     [x: string]: unknown;
 };
 export declare function findNodeHandle(node: null | number | React.Component<any, any> | React.ComponentClass<any>): null | number | React.Component<any, any> | React.ComponentClass<any>;
+export declare function scheduleFlushOperations(): void;

package/lib/typescript/handlers/gestures/GestureDetector.d.ts

@@ -2,9 +2,6 @@ import React from 'react';
 import { GestureType, HandlerCallbacks } from './gesture';
 import { SharedValue } from './reanimatedWrapper';
 import { ComposedGesture } from './gestureComposition';
-declare global {
-    function isFormsStackingContext(node: unknown): boolean | null;
-}
 export declare type GestureConfigReference = {
     config: GestureType[];
     animatedEventHandler: unknown;
@@ -14,6 +11,7 @@ export declare type GestureConfigReference = {
 };
 interface GestureDetectorProps {
     gesture?: ComposedGesture | GestureType;
+    children?: React.ReactNode;
 }
-export declare const GestureDetector: React.FunctionComponent<GestureDetectorProps>;
+export declare const GestureDetector: (props: GestureDetectorProps) => JSX.Element;
 export {};

package/lib/typescript/handlers/gestures/eventReceiver.d.ts

@@ -1,2 +1,4 @@
+import { GestureTouchEvent, GestureUpdateEvent, GestureStateChangeEvent } from '../gestureHandlerCommon';
+export declare function onGestureHandlerEvent(event: GestureUpdateEvent | GestureStateChangeEvent | GestureTouchEvent): void;
 export declare function startListening(): void;
 export declare function stopListening(): void;

package/lib/typescript/handlers/gestures/gesture.d.ts

@@ -18,9 +18,11 @@ export interface BaseGestureConfig extends CommonGestureConfig, Record<string, u
     manualActivation?: boolean;
     runOnJS?: boolean;
     testId?: string;
+    cancelsTouchesInView?: boolean;
 }
 declare type TouchEventHandlerType = (event: GestureTouchEvent, stateManager: GestureStateManagerType) => void;
 export declare type HandlerCallbacks<EventPayloadT extends Record<string, unknown>> = {
+    gestureId: number;
     handlerTag: number;
     onBegin?: (event: GestureStateChangeEvent<EventPayloadT>) => void;
     onStart?: (event: GestureStateChangeEvent<EventPayloadT>) => void;
@@ -67,10 +69,12 @@ export declare abstract class Gesture {
     abstract prepare(): void;
 }
 export declare abstract class BaseGesture<EventPayloadT extends Record<string, unknown>> extends Gesture {
+    private gestureId;
     handlerTag: number;
     handlerName: string;
     config: BaseGestureConfig;
     handlers: HandlerCallbacks<EventPayloadT>;
+    constructor();
     private addDependency;
     withRef(ref: React.MutableRefObject<GestureType | undefined>): this;
     protected isWorklet(callback: Function): boolean;
@@ -89,6 +93,7 @@ export declare abstract class BaseGesture<EventPayloadT extends Record<string, u
     simultaneousWithExternalGesture(...gestures: Exclude<GestureRef, number>[]): this;
     requireExternalGestureToFail(...gestures: Exclude<GestureRef, number>[]): this;
     withTestId(id: string): this;
+    cancelsTouchesInView(value: boolean): this;
     initialize(): void;
     toGestureArray(): GestureType[];
     prepare(): void;

package/lib/typescript/init.d.ts

@@ -1 +1,2 @@
 export declare function initialize(): void;
+export declare function maybeInitializeFabric(): void;

package/lib/typescript/mocks.d.ts

@@ -25,6 +25,7 @@ declare const _default: {
     readonly createGestureHandler: () => void;
     readonly dropGestureHandler: () => void;
     readonly updateGestureHandler: () => void;
+    readonly flushOperations: () => void;
     readonly Directions: {
         readonly RIGHT: 1;
         readonly LEFT: 2;

package/lib/typescript/utils.d.ts

@@ -5,3 +5,5 @@ export declare function hasProperty(object: object, key: string): boolean;
 export declare function isJestEnv(): boolean;
 export declare function tagMessage(msg: string): string;
 export declare function isFabric(): boolean;
+export declare function shouldUseCodegenNativeComponent(): boolean;
+export declare function isRemoteDebuggingEnabled(): boolean;

package/lib/typescript/web/GestureHandler.d.ts

@@ -109,7 +109,7 @@ declare abstract class GestureHandler {
         nativeEvent: {
             handlerTag: any;
             target: any;
-            oldState: State;
+            oldState: State | undefined;
             numberOfPointers: number;
             state: State;
             pointerInside: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gesture-handler",
-  "version": "2.3.2",
+  "version": "2.4.2",
   "description": "Experimental implementation of a new declarative API for gesture handling in react-native",
   "scripts": {
     "prepare": "bob build",
@@ -31,6 +31,8 @@
     "android/lib/build.gradle",
     "android/lib/src/main/java/",
     "android/common/src/main/java/",
+    "android/reanimated/src/main/java/",
+    "android/noreanimated/src/main/java/",
     "ios/",
     "Swipeable/",
     "jest-utils/",
@@ -109,7 +111,7 @@
     "react-native": "*"
   },
   "lint-staged": {
-    "*.{ts,tsx}": [
+    "./src/*.{ts,tsx}": [
       "prettier --write"
     ]
   },

package/src/GestureHandlerRootView.android.tsx

@@ -2,9 +2,10 @@
 import * as React from 'react';
 import { PropsWithChildren } from 'react';
 import { requireNativeComponent, ViewProps } from 'react-native';
-import { isFabric } from './utils';
+import { maybeInitializeFabric } from './init';
+import { shouldUseCodegenNativeComponent } from './utils';
 
-const GestureHandlerRootViewNativeComponent = isFabric()
+const GestureHandlerRootViewNativeComponent = shouldUseCodegenNativeComponent()
   ? require('./fabric/RNGestureHandlerRootViewNativeComponent').default
   : requireNativeComponent('RNGestureHandlerRootView');
 
@@ -14,5 +15,10 @@ export interface GestureHandlerRootViewProps
 export default function GestureHandlerRootView(
   props: GestureHandlerRootViewProps
 ) {
+  // try initialize fabric on the first render, at this point we can
+  // reliably check if fabric is enabled (the function contains a flag
+  // to make sure it's called only once)
+  maybeInitializeFabric();
+
   return <GestureHandlerRootViewNativeComponent {...props} />;
 }

package/src/GestureHandlerRootView.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { PropsWithChildren } from 'react';
 import { View, ViewProps } from 'react-native';
+import { maybeInitializeFabric } from './init';
 
 export interface GestureHandlerRootViewProps
   extends PropsWithChildren<ViewProps> {}
@@ -8,5 +9,10 @@ export interface GestureHandlerRootViewProps
 export default function GestureHandlerRootView(
   props: GestureHandlerRootViewProps
 ) {
+  // try initialize fabric on the first render, at this point we can
+  // reliably check if fabric is enabled (the function contains a flag
+  // to make sure it's called only once)
+  maybeInitializeFabric();
+
   return <View {...props} />;
 }

package/src/GestureHandlerRootView.web.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import { View, ViewProps } from 'react-native';
+
+export interface GestureHandlerRootViewProps
+  extends PropsWithChildren<ViewProps> {}
+
+export default function GestureHandlerRootView(
+  props: GestureHandlerRootViewProps
+) {
+  return <View {...props} />;
+}

package/src/RNGestureHandlerModule.ts

@@ -16,6 +16,12 @@ if (RNGestureHandlerModule == null) {
   );
 }
 
+if (RNGestureHandlerModule.flushOperations === undefined) {
+  RNGestureHandlerModule.flushOperations = () => {
+    // NO-OP if not defined
+  };
+}
+
 export type RNGestureHandlerModuleProps = {
   handleSetJSResponder: (tag: number, blockNativeResponder: boolean) => void;
   handleClearJSResponder: () => void;
@@ -35,6 +41,7 @@ export type RNGestureHandlerModuleProps = {
   ) => void;
   dropGestureHandler: (handlerTag: number) => void;
   install: () => void;
+  flushOperations: () => void;
 };
 
 export default RNGestureHandlerModule as RNGestureHandlerModuleProps;

package/src/RNGestureHandlerModule.web.ts

@@ -59,4 +59,6 @@ export default {
   dropGestureHandler(handlerTag: number) {
     NodeManager.dropGestureHandler(handlerTag);
   },
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  flushOperations() {},
 };

package/src/{EventType.ts → TouchEventType.ts}

@@ -1,4 +1,4 @@
-export const EventType = {
+export const TouchEventType = {
   UNDETERMINED: 0,
   TOUCHES_DOWN: 1,
   TOUCHES_MOVE: 2,
@@ -7,4 +7,4 @@ export const EventType = {
 } as const;
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; it can be used as a type and as a value
-export type EventType = typeof EventType[keyof typeof EventType];
+export type TouchEventType = typeof TouchEventType[keyof typeof TouchEventType];

package/src/components/DrawerLayout.tsx

@@ -148,6 +148,11 @@ export interface DrawerLayoutProps {
   onDrawerSlide?: (position: number) => void;
 
   onGestureRef?: (ref: PanGestureHandler) => void;
+
+  // implicit `children` prop has been removed in @types/react^18.0.0
+  children?:
+    | React.ReactNode
+    | ((openValue?: Animated.AnimatedInterpolation) => React.ReactNode);
 }
 
 export type DrawerLayoutState = {
@@ -155,6 +160,8 @@ export type DrawerLayoutState = {
   touchX: Animated.Value;
   drawerTranslation: Animated.Value;
   containerWidth: number;
+  drawerState: DrawerState;
+  drawerOpened: boolean;
 };
 
 export type DrawerMovementOption = {
@@ -189,6 +196,8 @@ export default class DrawerLayout extends Component<
       touchX,
       drawerTranslation,
       containerWidth: 0,
+      drawerState: IDLE,
+      drawerOpened: false,
     };
 
     this.updateAnimatedEvent(props, this.state);
@@ -349,6 +358,7 @@ export default class DrawerLayout extends Component<
       this.handleRelease({ nativeEvent });
     } else if (nativeEvent.state === State.ACTIVE) {
       this.emitStateChanged(DRAGGING, false);
+      this.setState({ drawerState: DRAGGING });
       if (this.props.keyboardDismissMode === 'on-drag') {
         Keyboard.dismiss();
       }
@@ -464,6 +474,7 @@ export default class DrawerLayout extends Component<
     const willShow = toValue !== 0;
     this.updateShowing(willShow);
     this.emitStateChanged(SETTLING, willShow);
+    this.setState({ drawerState: SETTLING });
     if (this.props.hideStatusBar) {
       StatusBar.setHidden(willShow, this.props.statusBarAnimation || 'slide');
     }
@@ -476,6 +487,12 @@ export default class DrawerLayout extends Component<
     }).start(({ finished }) => {
       if (finished) {
         this.emitStateChanged(IDLE, willShow);
+        this.setState({ drawerOpened: willShow });
+        if (this.state.drawerState !== DRAGGING) {
+          // it's possilbe that user started drag while the drawer
+          // was settling, don't override state in this case
+          this.setState({ drawerState: IDLE });
+        }
         if (willShow) {
           this.props.onDrawerOpen?.();
         } else {
@@ -516,11 +533,14 @@ export default class DrawerLayout extends Component<
   private renderOverlay = () => {
     /* Overlay styles */
     invariant(this.openValue, 'should be set');
-    const overlayOpacity = this.openValue.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, 1],
-      extrapolate: 'clamp',
-    });
+    let overlayOpacity;
+
+    if (this.state.drawerState !== IDLE) {
+      overlayOpacity = this.openValue;
+    } else {
+      overlayOpacity = this.state.drawerOpened ? 1 : 0;
+    }
+
     const dynamicOverlayStyles = {
       opacity: overlayOpacity,
       backgroundColor: this.props.overlayColor,
@@ -579,11 +599,15 @@ export default class DrawerLayout extends Component<
     let drawerTranslateX: number | Animated.AnimatedInterpolation = 0;
     if (drawerSlide) {
       const closedDrawerOffset = fromLeft ? -drawerWidth! : drawerWidth!;
-      drawerTranslateX = openValue.interpolate({
-        inputRange: [0, 1],
-        outputRange: [closedDrawerOffset, 0],
-        extrapolate: 'clamp',
-      });
+      if (this.state.drawerState !== IDLE) {
+        drawerTranslateX = openValue.interpolate({
+          inputRange: [0, 1],
+          outputRange: [closedDrawerOffset, 0],
+          extrapolate: 'clamp',
+        });
+      } else {
+        drawerTranslateX = this.state.drawerOpened ? 0 : closedDrawerOffset;
+      }
     }
     const drawerStyles: {
       transform: { translateX: number | Animated.AnimatedInterpolation }[];

package/src/components/GestureButtons.tsx

@@ -35,6 +35,27 @@ export interface RawButtonProps extends NativeViewGestureHandlerProps {
    * Defines color of native ripple animation used since API level 21.
    */
   rippleColor?: any; // it was present in BaseButtonProps before but is used here in code
+
+  /**
+   * Android only.
+   *
+   * Defines radius of native ripple animation used since API level 21.
+   */
+  rippleRadius?: number | null;
+
+  /**
+   * Android only.
+   *
+   * Set this to true if you want the ripple animation to render outside the view bounds.
+   */
+  borderless?: boolean;
+
+  /**
+   * Android only.
+   *
+   * Defines whether the ripple animation should be drawn on the foreground of the view.
+   */
+  foreground?: boolean;
 }
 
 export interface BaseButtonProps extends RawButtonProps {
@@ -69,13 +90,6 @@ export interface RectButtonProps extends BaseButtonProps {
 }
 
 export interface BorderlessButtonProps extends BaseButtonProps {
-  /**
-   * Android only.
-   *
-   * Set this to false if you want the ripple animation to render only within view bounds.
-   */
-  borderless?: boolean;
-
   /**
    * iOS only.
    *

package/src/components/GestureHandlerButton.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import { HostComponent, requireNativeComponent } from 'react-native';
 import { RawButtonProps } from './GestureButtons';
-import { isFabric } from '../utils';
+import { shouldUseCodegenNativeComponent } from '../utils';
 
-const RNGestureHandlerButtonNativeComponent = isFabric()
+const RNGestureHandlerButtonNativeComponent = shouldUseCodegenNativeComponent()
   ? require('../fabric/RNGestureHandlerButtonNativeComponent').default
   : requireNativeComponent('RNGestureHandlerButton');
 

package/src/components/touchables/GenericTouchable.tsx

@@ -258,6 +258,8 @@ export default class GenericTouchable extends Component<
       // TODO: check if changed to no 's' correctly, also removed 2 props that are no longer available: `accessibilityComponentType` and `accessibilityTraits`,
       // would be good to check if it is ok for sure, see: https://github.com/facebook/react-native/issues/24016
       accessibilityState: this.props.accessibilityState,
+      accessibilityActions: this.props.accessibilityActions,
+      onAccessibilityAction: this.props.onAccessibilityAction,
       nativeID: this.props.nativeID,
       onLayout: this.props.onLayout,
       hitSlop: this.props.hitSlop,

package/src/fabric/RNGestureHandlerButtonNativeComponent.ts

@@ -0,0 +1,27 @@
+// @ts-ignore TODO: remove once there is a .d.ts file with definitions
+import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent';
+// @ts-ignore TODO: remove once there is a .d.ts file with definitions
+import type {
+  Int32,
+  WithDefault,
+  // @ts-ignore TODO: remove once there is a .d.ts file with definitions
+} from 'react-native/Libraries/Types/CodegenTypes';
+import type { ViewProps, HostComponent } from 'react-native';
+// @ts-ignore TODO: remove once there is a .d.ts file with definitions
+import type { ColorValue } from 'react-native/Libraries/StyleSheet/StyleSheet';
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+const codegenNativeComponent = codegenNativeComponentUntyped as <T extends {}>(
+  name: string
+) => HostComponent<T>;
+
+interface NativeProps extends ViewProps {
+  exclusive?: WithDefault<boolean, true>;
+  foreground?: boolean;
+  borderless?: boolean;
+  enabled?: WithDefault<boolean, true>;
+  rippleColor?: ColorValue;
+  rippleRadius?: Int32;
+}
+
+export default codegenNativeComponent<NativeProps>('RNGestureHandlerButton');

package/src/fabric/RNGestureHandlerRootViewNativeComponent.ts

@@ -0,0 +1,12 @@
+// @ts-ignore TODO: remove once there is a .d.ts file with definitions
+import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ViewProps, HostComponent } from 'react-native';
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+const codegenNativeComponent = codegenNativeComponentUntyped as <T extends {}>(
+  name: string
+) => HostComponent<T>;
+
+interface NativeProps extends ViewProps {}
+
+export default codegenNativeComponent<NativeProps>('RNGestureHandlerRootView');

package/src/getShadowNodeFromRef.ts

@@ -2,17 +2,20 @@
 // attached view may get flattened on Fabric. This implementation causes errors
 // on web due to the static resolution of `require` statements by webpack breaking
 // the conditional importing. Solved by making .web file.
-let findHostInstance_DEPRECATED = (_ref: any) => null;
-
-try {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  findHostInstance_DEPRECATED = require('react-native/Libraries/Renderer/shims/ReactFabric')
-    .findHostInstance_DEPRECATED;
-} catch (e) {
-  // do nothing
-}
+let findHostInstance_DEPRECATED: (ref: any) => void;
 
 export function getShadowNodeFromRef(ref: any) {
+  // load findHostInstance_DEPRECATED lazily because it may not be available before render
+  if (findHostInstance_DEPRECATED === undefined) {
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      findHostInstance_DEPRECATED = require('react-native/Libraries/Renderer/shims/ReactFabric')
+        .findHostInstance_DEPRECATED;
+    } catch (e) {
+      findHostInstance_DEPRECATED = (_ref: any) => null;
+    }
+  }
+
   // @ts-ignore Fabric
   return findHostInstance_DEPRECATED(ref)._internalInstanceHandle.stateNode
     .node;

package/src/handlers/ForceTouchGestureHandler.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { tagMessage } from '../utils';
 import PlatformConstants from '../PlatformConstants';
 import createHandler from './createHandler';
@@ -13,7 +13,8 @@ export const forceTouchGestureHandlerProps = [
   'feedbackOnActivation',
 ] as const;
 
-class ForceTouchFallback extends React.Component {
+// implicit `children` prop has been removed in @types/react^18.0.0
+class ForceTouchFallback extends React.Component<PropsWithChildren<unknown>> {
   static forceTouchAvailable = false;
   componentDidMount() {
     console.warn(

package/src/handlers/createHandler.ts

@@ -23,9 +23,10 @@ import {
   GestureEvent,
   HandlerStateChangeEvent,
   findNodeHandle,
+  scheduleFlushOperations,
 } from './gestureHandlerCommon';
 import { ValueOf } from '../typeUtils';
-import { isFabric, isJestEnv, tagMessage } from '../utils';
+import { isFabric, isJestEnv } from '../utils';
 import { ActionType } from '../ActionType';
 
 const UIManagerAny = UIManager as any;
@@ -147,17 +148,7 @@ type InternalEventHandlers = {
   onGestureHandlerStateChange?: (event: any) => void;
 };
 
-let showedRngh2Notice = false;
-function showRngh2NoticeIfNeeded() {
-  if (!showedRngh2Notice) {
-    console.warn(
-      tagMessage(
-        "Seems like you're using an old API with gesture components, check out new Gestures system!"
-      )
-    );
-    showedRngh2Notice = true;
-  }
-}
+const UNRESOLVED_REFS_RETRY_LIMIT = 1;
 
 // TODO(TS) - make sure that BaseGestureHandlerProps doesn't need other generic parameter to work with custom properties.
 export default function createHandler<
@@ -199,9 +190,6 @@ export default function createHandler<
         }
         handlerIDToTag[props.id] = this.handlerTag;
       }
-      if (__DEV__ && !isJestEnv()) {
-        showRngh2NoticeIfNeeded();
-      }
     }
 
     componentDidMount() {
@@ -212,7 +200,7 @@ export default function createHandler<
           'toggleElementInspector',
           () => {
             this.setState((_) => ({ allowTouches }));
-            this.update();
+            this.update(UNRESOLVED_REFS_RETRY_LIMIT);
           }
         );
       }
@@ -225,7 +213,7 @@ export default function createHandler<
         // be resolved by then.
         this.updateEnqueued = setImmediate(() => {
           this.updateEnqueued = null;
-          this.update();
+          this.update(UNRESOLVED_REFS_RETRY_LIMIT);
         });
       }
 
@@ -245,12 +233,13 @@ export default function createHandler<
       if (this.viewTag !== viewTag) {
         this.attachGestureHandler(viewTag as number); // TODO(TS) - check interaction between _viewTag & findNodeHandle
       }
-      this.update();
+      this.update(UNRESOLVED_REFS_RETRY_LIMIT);
     }
 
     componentWillUnmount() {
       this.inspectorToggleListener?.remove();
       RNGestureHandlerModule.dropGestureHandler(this.handlerTag);
+      scheduleFlushOperations();
       if (this.updateEnqueued) {
         clearImmediate(this.updateEnqueued);
       }
@@ -361,6 +350,8 @@ export default function createHandler<
           actionType
         );
       }
+
+      scheduleFlushOperations();
     };
 
     private updateGestureHandler = (
@@ -369,16 +360,29 @@ export default function createHandler<
       this.config = newConfig;
 
       RNGestureHandlerModule.updateGestureHandler(this.handlerTag, newConfig);
+      scheduleFlushOperations();
     };
 
-    private update() {
-      const newConfig = filterConfig(
-        transformProps ? transformProps(this.props) : this.props,
-        [...allowedProps, ...customNativeProps],
-        config
-      );
-      if (!deepEqual(this.config, newConfig)) {
-        this.updateGestureHandler(newConfig);
+    private update(remainingTries: number) {
+      const props: HandlerProps<U> = this.props;
+
+      // When ref is set via a function i.e. `ref={(r) => refObject.current = r}` instead of
+      // `ref={refObject}` it's possible that it won't be resolved in time. Seems like trying
+      // again is easy enough fix.
+      if (hasUnresolvedRefs(props) && remainingTries > 0) {
+        this.updateEnqueued = setImmediate(() => {
+          this.updateEnqueued = null;
+          this.update(remainingTries - 1);
+        });
+      } else {
+        const newConfig = filterConfig(
+          transformProps ? transformProps(this.props) : this.props,
+          [...allowedProps, ...customNativeProps],
+          config
+        );
+        if (!deepEqual(this.config, newConfig)) {
+          this.updateGestureHandler(newConfig);
+        }
       }
     }