react-native-gesture-handler 2.1.2 → 2.3.0

package/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerButtonViewManager.kt

@@ -17,32 +17,43 @@ import android.view.View.OnClickListener
 import android.view.ViewGroup
 import androidx.core.view.children
 import com.facebook.react.bridge.SoftAssertions
+import com.facebook.react.module.annotations.ReactModule
 import com.facebook.react.uimanager.PixelUtil
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.ViewManagerDelegate
 import com.facebook.react.uimanager.ViewProps
 import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.viewmanagers.RNGestureHandlerButtonManagerDelegate
+import com.facebook.react.viewmanagers.RNGestureHandlerButtonManagerInterface
 import com.swmansion.gesturehandler.NativeViewGestureHandler
 import com.swmansion.gesturehandler.react.RNGestureHandlerButtonViewManager.ButtonViewGroup
 
-class RNGestureHandlerButtonViewManager : ViewGroupManager<ButtonViewGroup>() {
-  override fun getName() = "RNGestureHandlerButton"
+@ReactModule(name = RNGestureHandlerButtonViewManager.REACT_CLASS)
+class RNGestureHandlerButtonViewManager : ViewGroupManager<ButtonViewGroup>(), RNGestureHandlerButtonManagerInterface<ButtonViewGroup> {
+  private val mDelegate: ViewManagerDelegate<ButtonViewGroup>
+
+  init {
+      mDelegate = RNGestureHandlerButtonManagerDelegate<ButtonViewGroup, RNGestureHandlerButtonViewManager>(this)
+  }
+
+  override fun getName() = REACT_CLASS
 
   public override fun createViewInstance(context: ThemedReactContext) = ButtonViewGroup(context)
 
   @TargetApi(Build.VERSION_CODES.M)
   @ReactProp(name = "foreground")
-  fun setForeground(view: ButtonViewGroup, useDrawableOnForeground: Boolean) {
+  override fun setForeground(view: ButtonViewGroup, useDrawableOnForeground: Boolean) {
     view.useDrawableOnForeground = useDrawableOnForeground
   }
 
   @ReactProp(name = "borderless")
-  fun setBorderless(view: ButtonViewGroup, useBorderlessDrawable: Boolean) {
+  override fun setBorderless(view: ButtonViewGroup, useBorderlessDrawable: Boolean) {
     view.useBorderlessDrawable = useBorderlessDrawable
   }
 
   @ReactProp(name = "enabled")
-  fun setEnabled(view: ButtonViewGroup, enabled: Boolean) {
+  override fun setEnabled(view: ButtonViewGroup, enabled: Boolean) {
     view.isEnabled = enabled
   }
 
@@ -52,17 +63,17 @@ class RNGestureHandlerButtonViewManager : ViewGroupManager<ButtonViewGroup>() {
   }
 
   @ReactProp(name = "rippleColor")
-  fun setRippleColor(view: ButtonViewGroup, rippleColor: Int?) {
+  override fun setRippleColor(view: ButtonViewGroup, rippleColor: Int?) {
     view.rippleColor = rippleColor
   }
 
   @ReactProp(name = "rippleRadius")
-  fun setRippleRadius(view: ButtonViewGroup, rippleRadius: Int?) {
+  override fun setRippleRadius(view: ButtonViewGroup, rippleRadius: Int) {
     view.rippleRadius = rippleRadius
   }
 
   @ReactProp(name = "exclusive")
-  fun setExclusive(view: ButtonViewGroup, exclusive: Boolean = true) {
+  override fun setExclusive(view: ButtonViewGroup, exclusive: Boolean) {
     view.exclusive = exclusive
   }
 
@@ -70,6 +81,10 @@ class RNGestureHandlerButtonViewManager : ViewGroupManager<ButtonViewGroup>() {
     view.updateBackground()
   }
 
+  override fun getDelegate(): ViewManagerDelegate<ButtonViewGroup>? {
+    return mDelegate
+  }
+
   class ButtonViewGroup(context: Context?) : ViewGroup(context),
     NativeViewGestureHandler.StateChangeHook {
     // Using object because of handling null representing no value set.
@@ -333,10 +348,10 @@ class RNGestureHandlerButtonViewManager : ViewGroupManager<ButtonViewGroup>() {
         SoftAssertions.assertNotNull(attr)
         return when (attr) {
           SELECTABLE_ITEM_BACKGROUND -> {
-            R.attr.selectableItemBackground
+            android.R.attr.selectableItemBackground
           }
           SELECTABLE_ITEM_BACKGROUND_BORDERLESS -> {
-            R.attr.selectableItemBackgroundBorderless
+            android.R.attr.selectableItemBackgroundBorderless
           }
           else -> {
             context.resources.getIdentifier(attr, "attr", "android")
@@ -345,4 +360,8 @@ class RNGestureHandlerButtonViewManager : ViewGroupManager<ButtonViewGroup>() {
       }
     }
   }
+
+  companion object {
+    const val REACT_CLASS = "RNGestureHandlerButton"
+  }
 }

package/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerModule.kt

@@ -1,6 +1,7 @@
 package com.swmansion.gesturehandler.react
 
 import android.content.Context
+import android.util.Log
 import android.view.MotionEvent
 import android.view.ViewGroup
 import com.facebook.react.ReactRootView
@@ -8,6 +9,8 @@ import com.facebook.react.bridge.*
 import com.facebook.react.module.annotations.ReactModule
 import com.facebook.react.uimanager.PixelUtil
 import com.facebook.react.uimanager.UIBlock
+import com.facebook.react.uimanager.events.Event
+import com.facebook.soloader.SoLoader
 import com.swmansion.common.GestureHandlerStateManager
 import com.swmansion.gesturehandler.*
 import java.util.*
@@ -106,8 +109,8 @@ class RNGestureHandlerModule(reactContext: ReactApplicationContext?)
       with(eventData) {
         putDouble("x", PixelUtil.toDIPFromPixel(handler.lastRelativePositionX).toDouble())
         putDouble("y", PixelUtil.toDIPFromPixel(handler.lastRelativePositionY).toDouble())
-        putDouble("absoluteX", PixelUtil.toDIPFromPixel(handler.lastAbsolutePositionX).toDouble())
-        putDouble("absoluteY", PixelUtil.toDIPFromPixel(handler.lastAbsolutePositionY).toDouble())
+        putDouble("absoluteX", PixelUtil.toDIPFromPixel(handler.lastPositionInWindowX).toDouble())
+        putDouble("absoluteY", PixelUtil.toDIPFromPixel(handler.lastPositionInWindowY).toDouble())
       }
     }
   }
@@ -135,8 +138,8 @@ class RNGestureHandlerModule(reactContext: ReactApplicationContext?)
       with(eventData) {
         putDouble("x", PixelUtil.toDIPFromPixel(handler.lastRelativePositionX).toDouble())
         putDouble("y", PixelUtil.toDIPFromPixel(handler.lastRelativePositionY).toDouble())
-        putDouble("absoluteX", PixelUtil.toDIPFromPixel(handler.lastAbsolutePositionX).toDouble())
-        putDouble("absoluteY", PixelUtil.toDIPFromPixel(handler.lastAbsolutePositionY).toDouble())
+        putDouble("absoluteX", PixelUtil.toDIPFromPixel(handler.lastPositionInWindowX).toDouble())
+        putDouble("absoluteY", PixelUtil.toDIPFromPixel(handler.lastPositionInWindowY).toDouble())
         putInt("duration", handler.duration)
       }
     }
@@ -223,8 +226,8 @@ class RNGestureHandlerModule(reactContext: ReactApplicationContext?)
       with(eventData) {
         putDouble("x", PixelUtil.toDIPFromPixel(handler.lastRelativePositionX).toDouble())
         putDouble("y", PixelUtil.toDIPFromPixel(handler.lastRelativePositionY).toDouble())
-        putDouble("absoluteX", PixelUtil.toDIPFromPixel(handler.lastAbsolutePositionX).toDouble())
-        putDouble("absoluteY", PixelUtil.toDIPFromPixel(handler.lastAbsolutePositionY).toDouble())
+        putDouble("absoluteX", PixelUtil.toDIPFromPixel(handler.lastPositionInWindowX).toDouble())
+        putDouble("absoluteY", PixelUtil.toDIPFromPixel(handler.lastPositionInWindowY).toDouble())
         putDouble("translationX", PixelUtil.toDIPFromPixel(handler.translationX).toDouble())
         putDouble("translationY", PixelUtil.toDIPFromPixel(handler.translationY).toDouble())
         putDouble("velocityX", PixelUtil.toDIPFromPixel(handler.velocityX).toDouble())
@@ -275,8 +278,8 @@ class RNGestureHandlerModule(reactContext: ReactApplicationContext?)
       with(eventData) {
         putDouble("x", PixelUtil.toDIPFromPixel(handler.lastRelativePositionX).toDouble())
         putDouble("y", PixelUtil.toDIPFromPixel(handler.lastRelativePositionY).toDouble())
-        putDouble("absoluteX", PixelUtil.toDIPFromPixel(handler.lastAbsolutePositionX).toDouble())
-        putDouble("absoluteY", PixelUtil.toDIPFromPixel(handler.lastAbsolutePositionY).toDouble())
+        putDouble("absoluteX", PixelUtil.toDIPFromPixel(handler.lastPositionInWindowX).toDouble())
+        putDouble("absoluteY", PixelUtil.toDIPFromPixel(handler.lastPositionInWindowY).toDouble())
       }
     }
   }
@@ -359,10 +362,16 @@ class RNGestureHandlerModule(reactContext: ReactApplicationContext?)
   }
 
   @ReactMethod
-  fun attachGestureHandler(handlerTag: Int, viewTag: Int, useDeviceEvents: Boolean) {
-    tryInitializeHandlerForReactRootView(viewTag)
+  fun attachGestureHandler(handlerTag: Int, viewTag: Int, actionType: Int) {
+    if (!BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+      tryInitializeHandlerForReactRootView(viewTag)
+    }
 
-    if (!registry.attachHandlerToView(handlerTag, viewTag, useDeviceEvents)) {
+    // We don't have to handle view flattening in any special way since handlers are stored as
+    // a map: viewTag -> [handler]. If the view with attached handlers was to be flattened
+    // then that viewTag simply wouldn't be visited when traversing the view hierarchy in the
+    // Orchestrator effectively ignoring all handlers attached to flattened views.
+    if (!registry.attachHandlerToView(handlerTag, viewTag, actionType)) {
       throw JSApplicationIllegalArgumentException("Handler with tag $handlerTag does not exists")
     }
   }
@@ -409,6 +418,21 @@ class RNGestureHandlerModule(reactContext: ReactApplicationContext?)
     }
   }
 
+  @ReactMethod(isBlockingSynchronousMethod = true)
+  fun install(): Boolean {
+    return try {
+      SoLoader.loadLibrary("rngesturehandler_modules")
+      val jsContext = reactApplicationContext.javaScriptContextHolder
+      decorateRuntime(jsContext.get())
+      true
+    } catch (exception: Exception) {
+      Log.w("[RNGestureHandler]", "Could not install JSI bindings.")
+      false
+    }
+  }
+
+  private external fun decorateRuntime(jsiPtr: Long)
+
   override fun getConstants(): Map<String, Any> {
     return mapOf(
       "State" to mapOf(
@@ -501,6 +525,7 @@ class RNGestureHandlerModule(reactContext: ReactApplicationContext?)
   }
 
   private fun findRootHelperForViewAncestor(viewTag: Int): RNGestureHandlerRootHelper? {
+    // TODO: remove resolveRootTagFromReactTag as it's deprecated and unavailable on FabricUIManager
     val uiManager = reactApplicationContext.UIManager
     val rootViewTag = uiManager.resolveRootTagFromReactTag(viewTag)
     if (rootViewTag < 1) {
@@ -518,6 +543,8 @@ class RNGestureHandlerModule(reactContext: ReactApplicationContext?)
     handlerFactories.firstOrNull { it.type == handler.javaClass } as HandlerFactory<T>?
 
   private fun <T : GestureHandler<T>> onHandlerUpdate(handler: T, motionEvent: MotionEvent) {
+    // triggers onUpdate and onChange callbacks on the JS side
+
     if (handler.tag < 0) {
       // root containers use negative tags, we don't need to dispatch events for them to the JS
       return
@@ -525,76 +552,113 @@ class RNGestureHandlerModule(reactContext: ReactApplicationContext?)
     if (handler.state == GestureHandler.STATE_ACTIVE) {
       val handlerFactory = findFactoryForHandler(handler)
 
-      if (handler.usesDeviceEvents) {
+      if (handler.actionType == GestureHandler.ACTION_TYPE_REANIMATED_WORKLET) {
+        // Reanimated worklet
+        val event = RNGestureHandlerEvent.obtain(handler, handlerFactory)
+        sendEventForReanimated(event)
+      } else if (handler.actionType == GestureHandler.ACTION_TYPE_NATIVE_ANIMATED_EVENT) {
+        // Animated with useNativeDriver: true
+        val event = RNGestureHandlerEvent.obtain(handler, handlerFactory)
+        sendEventForNativeAnimatedEvent(event)
+      } else if (handler.actionType == GestureHandler.ACTION_TYPE_JS_FUNCTION_OLD_API) {
+        // JS function, Animated.event with useNativeDriver: false using old API
+        if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+          val data = RNGestureHandlerEvent.createEventData(handler, handlerFactory)
+          sendEventForDeviceEvent(RNGestureHandlerEvent.EVENT_NAME, data)
+        } else {
+          val event = RNGestureHandlerEvent.obtain(handler, handlerFactory)
+          sendEventForDirectEvent(event)
+        }
+      } else if (handler.actionType == GestureHandler.ACTION_TYPE_JS_FUNCTION_NEW_API) {
+        // JS function, Animated.event with useNativeDriver: false using new API
         val data = RNGestureHandlerEvent.createEventData(handler, handlerFactory)
-
-        reactApplicationContext
-          .deviceEventEmitter
-          .emit(RNGestureHandlerEvent.EVENT_NAME, data)
-      } else {
-        reactApplicationContext
-          .UIManager
-          .eventDispatcher.let {
-            val event = RNGestureHandlerEvent.obtain(handler, handlerFactory)
-            it.dispatchEvent(event)
-          }
+        sendEventForDeviceEvent(RNGestureHandlerEvent.EVENT_NAME, data)
       }
     }
   }
 
   private fun <T : GestureHandler<T>> onStateChange(handler: T, newState: Int, oldState: Int) {
+    // triggers onBegin, onStart, onEnd, onFinalize callbacks on the JS side
+
     if (handler.tag < 0) {
       // root containers use negative tags, we don't need to dispatch events for them to the JS
       return
     }
     val handlerFactory = findFactoryForHandler(handler)
 
-    if (handler.usesDeviceEvents) {
-      val data = RNGestureHandlerStateChangeEvent.createEventData(
-        handler,
-        handlerFactory,
-        newState,
-        oldState,
-      )
-
-      reactApplicationContext
-        .deviceEventEmitter
-        .emit(RNGestureHandlerStateChangeEvent.EVENT_NAME, data)
-    } else {
-      reactApplicationContext
-        .UIManager
-        .eventDispatcher.let {
-          val event =
-            RNGestureHandlerStateChangeEvent.obtain(handler, newState, oldState, handlerFactory)
-          it.dispatchEvent(event)
-        }
+    if (handler.actionType == GestureHandler.ACTION_TYPE_REANIMATED_WORKLET) {
+      // Reanimated worklet
+      val event = RNGestureHandlerStateChangeEvent.obtain(handler, newState, oldState, handlerFactory)
+      sendEventForReanimated(event)
+    } else if (handler.actionType == GestureHandler.ACTION_TYPE_NATIVE_ANIMATED_EVENT
+            || handler.actionType == GestureHandler.ACTION_TYPE_JS_FUNCTION_OLD_API) {
+      // JS function or Animated.event with useNativeDriver: false with old API
+      if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+        val data = RNGestureHandlerStateChangeEvent.createEventData(handler, handlerFactory, newState, oldState)
+        sendEventForDeviceEvent(RNGestureHandlerStateChangeEvent.EVENT_NAME, data)
+      } else {
+        val event = RNGestureHandlerStateChangeEvent.obtain(handler, newState, oldState, handlerFactory)
+        sendEventForDirectEvent(event)
+      }
+    } else if (handler.actionType == GestureHandler.ACTION_TYPE_JS_FUNCTION_NEW_API) {
+      // JS function or Animated.event with useNativeDriver: false with new API
+      val data = RNGestureHandlerStateChangeEvent.createEventData(handler, handlerFactory, newState, oldState)
+      sendEventForDeviceEvent(RNGestureHandlerStateChangeEvent.EVENT_NAME, data)
     }
   }
 
   private fun <T : GestureHandler<T>> onTouchEvent(handler: T) {
+    // triggers onTouchesDown, onTouchesMove, onTouchesUp, onTouchesCancelled callbacks on the JS side
+    
     if (handler.tag < 0) {
       // root containers use negative tags, we don't need to dispatch events for them to the JS
       return
     }
     if (handler.state == GestureHandler.STATE_BEGAN || handler.state == GestureHandler.STATE_ACTIVE
-        || handler.state == GestureHandler.STATE_UNDETERMINED || handler.view != null) {
-      if (handler.usesDeviceEvents) {
+      || handler.state == GestureHandler.STATE_UNDETERMINED || handler.view != null) {
+      if (handler.actionType == GestureHandler.ACTION_TYPE_REANIMATED_WORKLET) {
+        // Reanimated worklet
+        val event = RNGestureHandlerTouchEvent.obtain(handler)
+        sendEventForReanimated(event)
+      } else if (handler.actionType == GestureHandler.ACTION_TYPE_JS_FUNCTION_NEW_API) {
+        // JS function, Animated.event with useNativeDriver: false with new API
         val data = RNGestureHandlerTouchEvent.createEventData(handler)
-
-        reactApplicationContext
-            .deviceEventEmitter
-            .emit(RNGestureHandlerTouchEvent.EVENT_NAME, data)
-      } else {
-        reactApplicationContext
-            .UIManager
-            .eventDispatcher.let {
-              val event = RNGestureHandlerTouchEvent.obtain(handler)
-              it.dispatchEvent(event)
-            }
+        sendEventForDeviceEvent(RNGestureHandlerEvent.EVENT_NAME, data)
       }
     }
   }
 
+  private fun <T : Event<T>>sendEventForReanimated(event: T) {
+    // Delivers the event to Reanimated.
+    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+      // TODO: send event directly to Reanimated
+      // This is already supported in Reanimated with Fabric but let's wait until the official release.
+      // val reanimatedModule = reactApplicationContext.getNativeModule(ReanimatedModule::class.java)
+      // reanimatedModule?.nodesManager?.onEventDispatch(event)
+    } else {
+      // In the old architecture, Reanimated subscribes for specific direct events.
+      sendEventForDirectEvent(event)
+    }
+  }
+
+  private fun sendEventForNativeAnimatedEvent(event: RNGestureHandlerEvent) {
+    // Delivers the event to NativeAnimatedModule.
+    // TODO: send event directly to NativeAnimated[Turbo]Module
+    // ReactContext.dispatchEvent is an extension function, depending on the architecture it will
+    // dispatch event using UIManagerModule or FabricUIManager.
+    reactApplicationContext.dispatchEvent(event)
+  }
+
+  private fun <T : Event<T>>sendEventForDirectEvent(event: T) {
+    // Delivers the event to JS as a direct event. This method is called only on Paper.
+    reactApplicationContext.dispatchEvent(event)
+  }
+
+  private fun sendEventForDeviceEvent(eventName: String, data: WritableMap) {
+    // Delivers the event to JS as a device event.
+    reactApplicationContext.deviceEventEmitter.emit(eventName, data)
+  }
+
   companion object {
     const val MODULE_NAME = "RNGestureHandlerModule"
     private const val KEY_SHOULD_CANCEL_WHEN_OUTSIDE = "shouldCancelWhenOutside"

package/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerRegistry.kt

@@ -23,11 +23,11 @@ class RNGestureHandlerRegistry : GestureHandlerRegistry {
   }
 
   @Synchronized
-  fun attachHandlerToView(handlerTag: Int, viewTag: Int, useDeviceEvents: Boolean = false): Boolean {
+  fun attachHandlerToView(handlerTag: Int, viewTag: Int, actionType: Int): Boolean {
     val handler = handlers[handlerTag]
     return handler?.let {
       detachHandler(handler)
-      handler.usesDeviceEvents = useDeviceEvents
+      handler.actionType = actionType
       registerHandlerForViewWithTag(viewTag, handler)
       true
     } ?: false
@@ -43,7 +43,9 @@ class RNGestureHandlerRegistry : GestureHandlerRegistry {
       listToAdd.add(handler)
       handlersForView.put(viewTag, listToAdd)
     } else {
-      listToAdd.add(handler)
+      synchronized(listToAdd) {
+        listToAdd.add(handler)
+      }
     }
   }
 
@@ -54,7 +56,10 @@ class RNGestureHandlerRegistry : GestureHandlerRegistry {
       attachedTo.remove(handler.tag)
       val attachedHandlers = handlersForView[attachedToView]
       if (attachedHandlers != null) {
-        attachedHandlers.remove(handler)
+        synchronized(attachedHandlers) {
+          attachedHandlers.remove(handler)
+        }
+
         if (attachedHandlers.size == 0) {
           handlersForView.remove(attachedToView)
         }

package/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerRootHelper.kt

@@ -37,7 +37,7 @@ class RNGestureHandlerRootHelper(private val context: ReactContext, wrappedView:
     jsGestureHandler = RootViewGestureHandler().apply { tag = -wrappedViewTag }
     with(registry) {
       registerHandler(jsGestureHandler)
-      attachHandlerToView(jsGestureHandler.tag, wrappedViewTag)
+      attachHandlerToView(jsGestureHandler.tag, wrappedViewTag, GestureHandler.ACTION_TYPE_JS_FUNCTION_OLD_API)
     }
     module.registerRootHelper(this)
   }

package/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerRootViewManager.kt

@@ -3,6 +3,9 @@ package com.swmansion.gesturehandler.react
 import com.facebook.react.module.annotations.ReactModule
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.viewmanagers.RNGestureHandlerRootViewManagerDelegate
+import com.facebook.react.viewmanagers.RNGestureHandlerRootViewManagerInterface
 
 /**
  * React native's view manager used for creating instances of []RNGestureHandlerRootView}. It
@@ -10,8 +13,20 @@ import com.facebook.react.uimanager.ViewGroupManager
  * to be provided.
  */
 @ReactModule(name = RNGestureHandlerRootViewManager.REACT_CLASS)
-class RNGestureHandlerRootViewManager : ViewGroupManager<RNGestureHandlerRootView>() {
+class RNGestureHandlerRootViewManager : ViewGroupManager<RNGestureHandlerRootView>(),
+  RNGestureHandlerRootViewManagerInterface<RNGestureHandlerRootView> {
+  private val mDelegate: ViewManagerDelegate<RNGestureHandlerRootView>
+
+  init {
+    mDelegate = RNGestureHandlerRootViewManagerDelegate<RNGestureHandlerRootView, RNGestureHandlerRootViewManager>(this)
+  }
+
+  override fun getDelegate(): ViewManagerDelegate<RNGestureHandlerRootView> {
+    return mDelegate
+  }
+
   override fun getName() = REACT_CLASS
+
   override fun createViewInstance(reactContext: ThemedReactContext) = RNGestureHandlerRootView(reactContext)
 
   override fun onDropViewInstance(view: RNGestureHandlerRootView) {
@@ -29,6 +44,6 @@ class RNGestureHandlerRootViewManager : ViewGroupManager<RNGestureHandlerRootVie
       mutableMapOf("registrationName" to RNGestureHandlerStateChangeEvent.EVENT_NAME))
 
   companion object {
-    const val REACT_CLASS = "GestureHandlerRootView"
+    const val REACT_CLASS = "RNGestureHandlerRootView"
   }
 }

package/android/src/main/jni/Android.mk

@@ -0,0 +1,53 @@
+GESTURE_HANDLER_MAIN_THIS_DIR := $(call my-dir)
+
+include $(REACT_ANDROID_DIR)/Android-prebuilt.mk
+
+# libreact_render_uimanager
+include $(CLEAR_VARS)
+LOCAL_MODULE := libreact_render_uimanager
+LOCAL_SRC_FILES := $(REACT_NDK_EXPORT_DIR)/$(TARGET_ARCH_ABI)/libreact_render_uimanager.so
+LOCAL_EXPORT_C_INCLUDES := \
+  $(REACT_COMMON_DIR)/react/renderer/uimanager
+include $(PREBUILT_SHARED_LIBRARY)
+# end libreact_render_uimanager
+
+include $(GESTURE_HANDLER_MAIN_THIS_DIR)/../../../build/generated/source/codegen/jni/Android.mk
+
+include $(CLEAR_VARS)
+
+LOCAL_PATH := $(GESTURE_HANDLER_MAIN_THIS_DIR)
+LOCAL_MODULE := rngesturehandler_modules
+
+LOCAL_C_INCLUDES := $(LOCAL_PATH) $(GENERATED_SRC_DIR)/codegen/jni
+LOCAL_SRC_FILES := $(wildcard $(LOCAL_PATH)/*.cpp) $(wildcard $(GENERATED_SRC_DIR)/codegen/jni/*.cpp)
+LOCAL_EXPORT_C_INCLUDES := $(LOCAL_PATH) $(GENERATED_SRC_DIR)/codegen/jni
+
+# Please note as one of the library listed is libreact_codegen_samplelibrary
+# This name will be generated as libreact_codegen_<library-name>
+# where <library-name> is the one you specified in the Gradle configuration
+LOCAL_SHARED_LIBRARIES := libjsi \
+    libfbjni \
+    libglog \
+    libfolly_json \
+    libyoga \
+    libreact_nativemodule_core \
+    libturbomodulejsijni \
+    librrc_view \
+    libreact_render_core \
+    libreact_render_graphics \
+    libfabricjni \
+    libfolly_futures \
+    libreact_debug \
+    libreact_render_componentregistry \
+    libreact_render_debug \
+    libruntimeexecutor \
+    libreact_render_mapbuffer \
+    libreact_render_uimanager \
+    libreact_codegen_rncore \
+    libreact_codegen_rngesturehandler
+
+LOCAL_CFLAGS := \
+    -DLOG_TAG=\"ReactNative\"
+LOCAL_CFLAGS += -fexceptions -frtti -std=c++17 -Wall
+
+include $(BUILD_SHARED_LIBRARY)

package/android/src/main/jni/OnLoad.cpp

@@ -0,0 +1,9 @@
+#include <fbjni/fbjni.h>
+
+#include "RNGestureHandlerComponentsRegistry.h"
+
+JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM *vm, void *) {
+  return facebook::jni::initialize(vm, [] {
+    facebook::react::RNGestureHandlerComponentsRegistry::registerNatives();
+  });
+}

package/android/src/main/jni/RNGestureHandlerComponentsRegistry.cpp

@@ -0,0 +1,71 @@
+#include "RNGestureHandlerComponentsRegistry.h"
+
+#include <CoreComponentsRegistry.h>
+#include <fbjni/fbjni.h>
+#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
+#include <react/renderer/components/rncore/ComponentDescriptors.h>
+#include <react/renderer/components/rngesturehandler/ComponentDescriptors.h>
+
+namespace facebook {
+namespace react {
+
+RNGestureHandlerComponentsRegistry::RNGestureHandlerComponentsRegistry(
+    ComponentFactory *delegate)
+    : delegate_(delegate) {}
+
+std::shared_ptr<ComponentDescriptorProviderRegistry const>
+RNGestureHandlerComponentsRegistry::sharedProviderRegistry() {
+  auto providerRegistry = CoreComponentsRegistry::sharedProviderRegistry();
+
+  // Gesture Handler
+  providerRegistry->add(concreteComponentDescriptorProvider<RNGestureHandlerRootViewComponentDescriptor>());
+  providerRegistry->add(concreteComponentDescriptorProvider<RNGestureHandlerButtonComponentDescriptor>());
+
+  return providerRegistry;
+}
+
+jni::local_ref<RNGestureHandlerComponentsRegistry::jhybriddata>
+RNGestureHandlerComponentsRegistry::initHybrid(
+    jni::alias_ref<jclass>,
+    ComponentFactory *delegate) {
+  auto instance = makeCxxInstance(delegate);
+
+  auto buildRegistryFunction =
+      [](EventDispatcher::Weak const &eventDispatcher,
+         ContextContainer::Shared const &contextContainer)
+      -> ComponentDescriptorRegistry::Shared {
+    auto registry = RNGestureHandlerComponentsRegistry::sharedProviderRegistry()
+                        ->createComponentDescriptorRegistry(
+                            {eventDispatcher, contextContainer});
+
+    auto mutableRegistry =
+        std::const_pointer_cast<ComponentDescriptorRegistry>(registry);
+
+    mutableRegistry->setFallbackComponentDescriptor(
+        std::make_shared<UnimplementedNativeViewComponentDescriptor>(
+            ComponentDescriptorParameters{
+                eventDispatcher, contextContainer, nullptr}));
+
+    return registry;
+  };
+
+  delegate->buildRegistryFunction = buildRegistryFunction;
+  return instance;
+}
+
+void RNGestureHandlerComponentsRegistry::registerNatives() {
+  registerHybrid({
+      makeNativeMethod("initHybrid", RNGestureHandlerComponentsRegistry::initHybrid),
+  });
+  
+  // This is a temporary solution that allows components exported by gesture-handler
+  // library to be added to the main component registry. This code is triggered
+  // when c++ gesture-handler library is initialized and is needed because RN's autolinking
+  // does not currently support Fabric components. As a consequence, users would need
+  // to manually put library initialization calls in their ReactNativeHost implementation
+  // which is undesirable.
+  sharedProviderRegistry();
+}
+
+} // namespace react
+} // namespace facebook

package/android/src/main/jni/RNGestureHandlerComponentsRegistry.h

@@ -0,0 +1,34 @@
+#pragma once
+
+#include <ComponentFactory.h>
+#include <fbjni/fbjni.h>
+#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
+#include <react/renderer/componentregistry/ComponentDescriptorRegistry.h>
+
+namespace facebook {
+namespace react {
+
+class RNGestureHandlerComponentsRegistry
+    : public facebook::jni::HybridClass<RNGestureHandlerComponentsRegistry> {
+ public:
+  constexpr static auto kJavaDescriptor =
+      "Lcom/swmansion/gesturehandler/react/RNGestureHandlerComponentsRegistry;";
+
+  static void registerNatives();
+
+  RNGestureHandlerComponentsRegistry(ComponentFactory *delegate);
+
+ private:
+  friend HybridBase;
+
+  static std::shared_ptr<ComponentDescriptorProviderRegistry const> sharedProviderRegistry();
+
+  const ComponentFactory *delegate_;
+
+  static jni::local_ref<jhybriddata> initHybrid(
+      jni::alias_ref<jclass>,
+      ComponentFactory *delegate);
+};
+
+} // namespace react
+} // namespace facebook