react-native-gesture-handler: [Android] IllegalArgumentException crash with 0.64-rc.2

@rennehir @vilindberg it happened after updating to RN-0.64.0 for me

This link has video explanation of what UIManager is in React Native https://youtu.be/QwoQgzBgJu8?t=883

RNGestureHandlerEnabledRootView inherits from ReactRootView

https://github.com/software-mansion/react-native-gesture-handler/blob/4d598c173587ba1f080a1de106c5d798fbbf59aa/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerEnabledRootView.java#L34-L40

The android ViewGroup calls onInterceptTouchEvent a method overridden by ReactRootView

https://github.com/aosp-mirror/platform_frameworks_base/blob/1ac46f932ef88a8f96d652580d8105e361ffc842/core/java/android/view/ViewGroup.java#L2664

intercepted = onInterceptTouchEvent(ev);

https://github.com/facebook/react-native/blob/eacc94005b1b1d33d47b3bea88a6fd242560dafb/ReactAndroid/src/main/java/com/facebook/react/ReactRootView.java#L204-L207

  public boolean onInterceptTouchEvent(MotionEvent ev) {
    dispatchJSTouchEvent(ev);
    return super.onInterceptTouchEvent(ev);
  }

The error is casued by the UIManager trying to dispatch this event to JavaScript via the bridge. The UIManager tries to retrieve the JavaScript Module responsible for handling this event, but no module is found and the consequent runtime is triggered.

https://github.com/facebook/react-native/blob/eacc94005b1b1d33d47b3bea88a6fd242560dafb/ReactAndroid/src/main/java/com/facebook/react/uimanager/JSTouchDispatcher.java#L64-L95

  /**
   * Main catalyst view is responsible for collecting and sending touch events to JS. This method
   * reacts for an incoming android native touch events ({@link MotionEvent}) and calls into {@link
   * com.facebook.react.uimanager.events.EventDispatcher} when appropriate. It uses {@link
   * com.facebook.react.uimanager.TouchTargetHelper#findTouchTargetView} helper method for figuring
   * out a react view ID in the case of ACTION_DOWN event (when the gesture starts).
   */
  public void handleTouchEvent(MotionEvent ev, EventDispatcher eventDispatcher) {
    int action = ev.getAction() & MotionEvent.ACTION_MASK;
    if (action == MotionEvent.ACTION_DOWN) {
      if (mTargetTag != -1) {
        FLog.e(
            ReactConstants.TAG, "Got DOWN touch before receiving UP or CANCEL from last gesture");
      }


      // First event for this gesture. We expect tag to be set to -1, and we use helper method
      // {@link #findTargetTagForTouch} to find react view ID that will be responsible for handling
      // this gesture
      mChildIsHandlingNativeGesture = false;
      mGestureStartTime = ev.getEventTime();


      mTargetTag = findTargetTagAndSetCoordinates(ev);
      eventDispatcher.dispatchEvent(
          TouchEvent.obtain(
              getSurfaceId(),
              mTargetTag,
              TouchEventType.START,
              ev,
              mGestureStartTime,
              mTargetCoordinates[0],
              mTargetCoordinates[1],
              mTouchEventCoalescingKeyHelper));

/**
 * Class responsible for dispatching UI events to JS. The main purpose of this class is to act as an
 * intermediary between UI code generating events and JS, making sure we don't send more events than
 * JS can process.
 *
 * <p>To use it, create a subclass of {@link Event} and call {@link #dispatchEvent(Event)} whenever
 * there's a UI event to dispatch.
 *
 * <p>This class works by installing a Choreographer frame callback on the main thread. This
 * callback then enqueues a runnable on the JS thread (if one is not already pending) that is
 * responsible for actually dispatch events to JS. This implementation depends on the properties
 * that 1) FrameCallbacks run after UI events have been processed in Choreographer.java 2) when we
 * enqueue a runnable on the JS queue thread, it won't be called until after any previously enqueued
 * JS jobs have finished processing
 **/
  /** Sends the given Event to JS, coalescing eligible events if JS is backed up. */
  public void dispatchEvent(Event event) {
    Assertions.assertCondition(event.isInitialized(), "Dispatched event hasn't been initialized");


    for (EventDispatcherListener listener : mListeners) {
      listener.onEventDispatch(event);
    }


    synchronized (mEventsStagingLock) {
      mEventStaging.add(event);
      Systrace.startAsyncFlow(
          Systrace.TRACE_TAG_REACT_JAVA_BRIDGE, event.getEventName(), event.getUniqueID());
    }
    maybePostFrameCallbackFromNonUI();
  }

The JavaScript module is not found and triggers the above error

  public <T extends JavaScriptModule> T getJSModule(Class<T> jsInterface) {
    return mJSModuleRegistry.getJavaScriptModule(this, jsInterface);
  }

would be interesting adding some debug statements in this react native source and see the different variables when using RNGestureHandlerEnabledRootView and normal React Native without Gesture Handler, to better understand the reason for this error. Thanks 🙏 ☮

I reproduced, minimal repro here: https://github.com/Bardiamist/jsimodule

I went through many options before I figured out that crash happening on react-native-camera view port press only when PanGestureHandler exist.

This crash happens for me when trying to scroll our date picker: https://github.com/henninghall/react-native-date-picker

I can’t see how this is a gesture handler problem. Looks like gesture handler is just tickling a react-native issue based on the stack. How is gesture handler responsible for react-native’s UIManagerHelper finding the JSIModule for it’s own UIManager? 🤔

Also seeing this crash with react-native-camera. Tapping on the view port will cause this.

Thanks for bringing up this issue. This is likely a compatibility issue as you mentioned. Is this crash deterministic and happens on every startup? Could you please provide some repro repository?

@tomasswood @rennehir I have the same issue. Downgrading react-native-gesture-handler to 1.9.0 did not help.