Merge branch '@akwasniewski/native-detector-web' into @akwasniewski/v3-web-typing

Author: akwasniewski

apps/basic-example/src/NativeDetector.tsx

@@ -18,9 +18,7 @@ export default function App() {
   );
 
   const gesture = useGesture('PanGestureHandler', {
-    onGestureHandlerAnimatedEvent: event,
-    onGestureHandlerEvent: (e: any) =>
-      console.log('onGestureHandlerEvent', e.nativeEvent),
+    onUpdate: event,
   });
 
   return (

packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/core/GestureHandler.kt

@@ -18,6 +18,7 @@ import com.facebook.react.bridge.WritableArray
 import com.facebook.react.uimanager.PixelUtil
 import com.swmansion.gesturehandler.BuildConfig
 import com.swmansion.gesturehandler.RNSVGHitTester
+import com.swmansion.gesturehandler.react.RNGestureHandlerDetectorView
 import com.swmansion.gesturehandler.react.RNGestureHandlerTouchEvent
 import com.swmansion.gesturehandler.react.eventbuilders.GestureHandlerEventDataBuilder
 import java.lang.IllegalStateException
@@ -30,6 +31,22 @@ open class GestureHandler {
   var tag = 0
   var view: View? = null
     private set
+  val viewForEvents: RNGestureHandlerDetectorView
+    get() {
+      assert(actionType == ACTION_TYPE_NATIVE_DETECTOR) {
+        "[react-native-gesture-handler] `viewForEvents` can only be used with NativeDetector."
+      }
+
+      val detector = if (this is NativeViewGestureHandler) this.view?.parent else view
+
+      if (detector !is RNGestureHandlerDetectorView) {
+        throw Error(
+          "[react-native-gesture-handler] Expected RNGestureHandlerDetectorView to be the target for the event.",
+        )
+      }
+
+      return detector
+    }
   var state = STATE_UNDETERMINED
     private set
   var x = 0f
@@ -823,6 +840,8 @@ open class GestureHandler {
     }
   }
 
+  open fun wantsToAttachDirectlyToView() = false
+
   override fun toString(): String {
     val viewString = if (view == null) null else view!!.javaClass.simpleName
     return this.javaClass.simpleName + "@[" + tag + "]:" + viewString

packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/core/NativeViewGestureHandler.kt

@@ -167,6 +167,8 @@ class NativeViewGestureHandler : GestureHandler() {
     this.hook = defaultHook
   }
 
+  override fun wantsToAttachDirectlyToView() = true
+
   class Factory : GestureHandler.Factory<NativeViewGestureHandler>() {
     override val type = NativeViewGestureHandler::class.java
     override val name = "NativeViewGestureHandler"

packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerDetectorView.kt

@@ -1,6 +1,7 @@
 package com.swmansion.gesturehandler.react
 
 import android.content.Context
+import android.view.View
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.UIManagerHelper
@@ -12,9 +13,9 @@ class RNGestureHandlerDetectorView(context: Context) : ReactViewGroup(context) {
   private val reactContext: ThemedReactContext
     get() = context as ThemedReactContext
   private var handlersToAttach: List<Int>? = null
-  private var attachedHandlers = listOf<Int>()
+  private var nativeHandlersToAttach: MutableSet<Int> = mutableSetOf()
+  private var attachedHandlers: MutableSet<Int> = mutableSetOf()
   private var moduleId: Int = -1
-  private var dispatchesAnimatedEvents: Boolean = false
 
   fun setHandlerTags(handlerTags: ReadableArray?) {
     val newHandlers = handlerTags?.toArrayList()?.map { (it as Double).toInt() } ?: emptyList()
@@ -36,8 +37,24 @@ class RNGestureHandlerDetectorView(context: Context) : ReactViewGroup(context) {
     handlersToAttach = null
   }
 
-  fun setDispatchesAnimatedEvents(dispatchesAnimatedEvents: Boolean) {
-    this.dispatchesAnimatedEvents = dispatchesAnimatedEvents
+  private fun shouldAttachGestureToChildView(tag: Int): Boolean {
+    val registry = RNGestureHandlerModule.registries[moduleId]
+      ?: throw Exception("Tried to access a non-existent registry")
+
+    return registry.getHandler(tag)?.wantsToAttachDirectlyToView() ?: false
+  }
+
+  // We override this `addView` because it is called inside `addView(child: View?, index: Int)`
+  override fun addView(child: View, index: Int, params: LayoutParams?) {
+    super.addView(child, index, params)
+
+    tryAttachHandlerToChildView(child.id)
+  }
+
+  override fun removeViewAt(index: Int) {
+    detachNativeGestureHandlers()
+
+    super.removeViewAt(index)
   }
 
   private fun attachHandlers(newHandlers: List<Int>) {
@@ -55,15 +72,53 @@ class RNGestureHandlerDetectorView(context: Context) : ReactViewGroup(context) {
     }
 
     for (entry in changes) {
+      val tag = entry.key
+
       if (entry.value == GestureHandlerMutation.Attach) {
-        // TODO: Attach to the child when attached gesture is a NativeGestureHandler, track children changes then
-        registry.attachHandlerToView(
-          entry.key,
-          this.id,
-          GestureHandler.ACTION_TYPE_NATIVE_DETECTOR,
-        )
+        // It might happen that `attachHandlers` will be called before children are added into view hierarchy. In that case we cannot
+        // attach `NativeViewGestureHandlers` here and we have to do it in `addView` method.
+        if (shouldAttachGestureToChildView(tag)) {
+          nativeHandlersToAttach.add(tag)
+        } else {
+          registry.attachHandlerToView(tag, this.id, GestureHandler.ACTION_TYPE_NATIVE_DETECTOR)
+
+          attachedHandlers.add(tag)
+        }
       } else if (entry.value == GestureHandlerMutation.Detach) {
-        registry.detachHandler(entry.key)
+        registry.detachHandler(tag)
+        attachedHandlers.remove(tag)
+      }
+    }
+
+    // This covers the case where `NativeViewGestureHandlers` are attached after child views were created.
+    val child = getChildAt(0)
+
+    if (child != null) {
+      tryAttachHandlerToChildView(child.id)
+    }
+  }
+
+  private fun tryAttachHandlerToChildView(childId: Int) {
+    val registry = RNGestureHandlerModule.registries[moduleId]
+      ?: throw Exception("Tried to access a non-existent registry")
+
+    for (tag in nativeHandlersToAttach) {
+      registry.attachHandlerToView(tag, childId, GestureHandler.ACTION_TYPE_NATIVE_DETECTOR)
+
+      attachedHandlers.add(tag)
+    }
+
+    nativeHandlersToAttach.clear()
+  }
+
+  private fun detachNativeGestureHandlers() {
+    val registry = RNGestureHandlerModule.registries[moduleId]
+      ?: throw Exception("Tried to access a non-existent registry")
+
+    for (tag in attachedHandlers) {
+      if (shouldAttachGestureToChildView(tag)) {
+        registry.detachHandler(tag)
+        attachedHandlers.remove(tag)
       }
     }
   }

packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerDetectorViewManager.kt

@@ -36,8 +36,4 @@ class RNGestureHandlerDetectorViewManager :
   override fun setModuleId(view: RNGestureHandlerDetectorView, value: Int) {
     view.setModuleId(value)
   }
-
-  override fun setDispatchesAnimatedEvents(view: RNGestureHandlerDetectorView, value: Boolean) {
-    view.setDispatchesAnimatedEvents(value)
-  }
 }

packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerEvent.kt

@@ -33,8 +33,14 @@ class RNGestureHandlerEvent private constructor() : Event<RNGestureHandlerEvent>
     dataBuilder: GestureHandlerEventDataBuilder<T>,
     useNativeAnimatedName: Boolean,
   ) {
-    val view = handler.view!!
+    val view = if (handler.actionType == GestureHandler.ACTION_TYPE_NATIVE_DETECTOR) {
+      handler.viewForEvents!!
+    } else {
+      handler.view!!
+    }
+
     super.init(UIManagerHelper.getSurfaceId(view), view.id)
+
     this.actionType = actionType
     this.dataBuilder = dataBuilder
     this.useTopPrefixedName = useNativeAnimatedName

packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerEventDispatcher.kt

@@ -78,26 +78,23 @@ class RNGestureHandlerEventDispatcher(private val reactApplicationContext: React
         sendEventForDeviceEvent(RNGestureHandlerEvent.EVENT_NAME, data)
       }
       GestureHandler.ACTION_TYPE_NATIVE_DETECTOR -> {
-        val view = handler.view
-
-        if (view is RNGestureHandlerDetectorView) {
-          if (handler.dispatchesAnimatedEvents) {
-            val animatedEvent = RNGestureHandlerEvent.obtain(
-              handler,
-              handler.actionType,
-              handlerFactory.createEventBuilder(handler),
-              true,
-            )
-            view.dispatchEvent(animatedEvent)
-          }
-
-          val event = RNGestureHandlerEvent.obtain(
+        if (handler.dispatchesAnimatedEvents) {
+          val animatedEvent = RNGestureHandlerEvent.obtain(
             handler,
             handler.actionType,
             handlerFactory.createEventBuilder(handler),
+            true,
           )
-          view.dispatchEvent(event)
+          handler.viewForEvents!!.dispatchEvent(animatedEvent)
         }
+
+        val event = RNGestureHandlerEvent.obtain(
+          handler,
+          handler.actionType,
+          handlerFactory.createEventBuilder(handler),
+        )
+
+        handler.viewForEvents!!.dispatchEvent(event)
       }
     }
   }
@@ -156,17 +153,15 @@ class RNGestureHandlerEventDispatcher(private val reactApplicationContext: React
       }
 
       GestureHandler.ACTION_TYPE_NATIVE_DETECTOR -> {
-        val view = handler.view
-        if (view is RNGestureHandlerDetectorView) {
-          val event = RNGestureHandlerStateChangeEvent.obtain(
-            handler,
-            newState,
-            oldState,
-            handler.actionType,
-            handlerFactory.createEventBuilder(handler),
-          )
-          view.dispatchEvent(event)
-        }
+        val event = RNGestureHandlerStateChangeEvent.obtain(
+          handler,
+          newState,
+          oldState,
+          handler.actionType,
+          handlerFactory.createEventBuilder(handler),
+        )
+
+        handler.viewForEvents!!.dispatchEvent(event)
       }
     }
   }
@@ -199,11 +194,9 @@ class RNGestureHandlerEventDispatcher(private val reactApplicationContext: React
         sendEventForDeviceEvent(RNGestureHandlerEvent.EVENT_NAME, data)
       }
       GestureHandler.ACTION_TYPE_NATIVE_DETECTOR -> {
-        val view = handler.view
-        if (view is RNGestureHandlerDetectorView) {
-          val event = RNGestureHandlerTouchEvent.obtain(handler, handler.actionType)
-          view.dispatchEvent(event)
-        }
+        val event = RNGestureHandlerTouchEvent.obtain(handler, handler.actionType)
+
+        handler.viewForEvents!!.dispatchEvent(event)
       }
     }
   }

packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerStateChangeEvent.kt

@@ -27,8 +27,14 @@ class RNGestureHandlerStateChangeEvent private constructor() : Event<RNGestureHa
     actionType: Int,
     dataBuilder: GestureHandlerEventDataBuilder<T>,
   ) {
-    val view = handler.view!!
+    val view = if (handler.actionType == GestureHandler.ACTION_TYPE_NATIVE_DETECTOR) {
+      handler.viewForEvents!!
+    } else {
+      handler.view!!
+    }
+
     super.init(UIManagerHelper.getSurfaceId(view), view.id)
+
     this.dataBuilder = dataBuilder
     this.newState = newState
     this.oldState = oldState

packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerTouchEvent.kt

@@ -13,8 +13,14 @@ class RNGestureHandlerTouchEvent private constructor() : Event<RNGestureHandlerT
   private var actionType = GestureHandler.ACTION_TYPE_JS_FUNCTION_NEW_API
 
   private fun <T : GestureHandler> init(handler: T, actionType: Int) {
-    val view = handler.view!!
+    val view = if (handler.actionType == GestureHandler.ACTION_TYPE_NATIVE_DETECTOR) {
+      handler.viewForEvents!!
+    } else {
+      handler.view!!
+    }
+
     super.init(UIManagerHelper.getSurfaceId(view), view.id)
+
     extraData = createEventData(handler)
     coalescingKey = handler.eventCoalescingKey
     this.actionType = actionType

packages/react-native-gesture-handler/apple/Handlers/RNNativeViewHandler.mm

@@ -229,6 +229,11 @@ - (void)handleTouchCancel:(UIView *)sender forEvent:(UIEvent *)event
             withExtraData:[RNGestureHandlerEventExtraData forPointerInside:NO withPointerType:_pointerType]];
 }
 
+- (BOOL)wantsToAttachDirectlyToView
+{
+  return YES;
+}
+
 #else
 
 - (RNGestureHandlerEventExtraData *)eventExtraData:(RNDummyGestureRecognizer *)recognizer