@amazon-devices/react-native-gesture-handler 2.0.9000000000 → 4.0.0-rn-83

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

@@ -5,6 +5,9 @@ import android.annotation.TargetApi
 import android.content.Context
 import android.content.res.ColorStateList
 import android.graphics.Color
+import android.graphics.DashPathEffect
+import android.graphics.Paint
+import android.graphics.PathEffect
 import android.graphics.drawable.Drawable
 import android.graphics.drawable.LayerDrawable
 import android.graphics.drawable.PaintDrawable
@@ -19,7 +22,9 @@ import android.view.View
 import android.view.View.OnClickListener
 import android.view.ViewGroup
 import android.view.ViewParent
+import android.view.accessibility.AccessibilityNodeInfo
 import androidx.core.view.children
+import com.facebook.react.R
 import com.facebook.react.module.annotations.ReactModule
 import com.facebook.react.uimanager.PixelUtil
 import com.facebook.react.uimanager.ThemedReactContext
@@ -33,7 +38,9 @@ import com.swmansion.gesturehandler.core.NativeViewGestureHandler
 import com.swmansion.gesturehandler.react.RNGestureHandlerButtonViewManager.ButtonViewGroup
 
 @ReactModule(name = RNGestureHandlerButtonViewManager.REACT_CLASS)
-class RNGestureHandlerButtonViewManager : ViewGroupManager<ButtonViewGroup>(), RNGestureHandlerButtonManagerInterface<ButtonViewGroup> {
+class RNGestureHandlerButtonViewManager :
+  ViewGroupManager<ButtonViewGroup>(),
+  RNGestureHandlerButtonManagerInterface<ButtonViewGroup> {
   private val mDelegate: ViewManagerDelegate<ButtonViewGroup>
 
   init {
@@ -50,6 +57,11 @@ class RNGestureHandlerButtonViewManager : ViewGroupManager<ButtonViewGroup>(), R
     view.useDrawableOnForeground = useDrawableOnForeground
   }
 
+  @ReactProp(name = "backgroundColor")
+  override fun setBackgroundColor(view: ButtonViewGroup, backgroundColor: Int) {
+    view.setBackgroundColor(backgroundColor)
+  }
+
   @ReactProp(name = "borderless")
   override fun setBorderless(view: ButtonViewGroup, useBorderlessDrawable: Boolean) {
     view.useBorderlessDrawable = useBorderlessDrawable
@@ -65,6 +77,41 @@ class RNGestureHandlerButtonViewManager : ViewGroupManager<ButtonViewGroup>(), R
     view.borderRadius = borderRadius
   }
 
+  @ReactProp(name = "borderTopLeftRadius")
+  override fun setBorderTopLeftRadius(view: ButtonViewGroup, borderTopLeftRadius: Float) {
+    view.borderTopLeftRadius = borderTopLeftRadius
+  }
+
+  @ReactProp(name = "borderTopRightRadius")
+  override fun setBorderTopRightRadius(view: ButtonViewGroup, borderTopRightRadius: Float) {
+    view.borderTopRightRadius = borderTopRightRadius
+  }
+
+  @ReactProp(name = "borderBottomLeftRadius")
+  override fun setBorderBottomLeftRadius(view: ButtonViewGroup, borderBottomLeftRadius: Float) {
+    view.borderBottomLeftRadius = borderBottomLeftRadius
+  }
+
+  @ReactProp(name = "borderBottomRightRadius")
+  override fun setBorderBottomRightRadius(view: ButtonViewGroup, borderBottomRightRadius: Float) {
+    view.borderBottomRightRadius = borderBottomRightRadius
+  }
+
+  @ReactProp(name = "borderWidth")
+  override fun setBorderWidth(view: ButtonViewGroup, borderWidth: Float) {
+    view.borderWidth = borderWidth
+  }
+
+  @ReactProp(name = "borderColor")
+  override fun setBorderColor(view: ButtonViewGroup, borderColor: Int?) {
+    view.borderColor = borderColor
+  }
+
+  @ReactProp(name = "borderStyle")
+  override fun setBorderStyle(view: ButtonViewGroup, borderStyle: String?) {
+    view.borderStyle = borderStyle
+  }
+
   @ReactProp(name = "rippleColor")
   override fun setRippleColor(view: ButtonViewGroup, rippleColor: Int?) {
     view.rippleColor = rippleColor
@@ -86,12 +133,12 @@ class RNGestureHandlerButtonViewManager : ViewGroupManager<ButtonViewGroup>(), R
   }
 
   override fun onAfterUpdateTransaction(view: ButtonViewGroup) {
+    super.onAfterUpdateTransaction(view)
+
     view.updateBackground()
   }
 
-  override fun getDelegate(): ViewManagerDelegate<ButtonViewGroup>? {
-    return mDelegate
-  }
+  override fun getDelegate(): ViewManagerDelegate<ButtonViewGroup>? = mDelegate
 
   class ButtonViewGroup(context: Context?) :
     ViewGroup(context),
@@ -115,9 +162,45 @@ class RNGestureHandlerButtonViewManager : ViewGroupManager<ButtonViewGroup>(), R
       set(radius) = withBackgroundUpdate {
         field = radius * resources.displayMetrics.density
       }
+    var borderTopLeftRadius = 0f
+      set(radius) = withBackgroundUpdate {
+        field = radius * resources.displayMetrics.density
+      }
+    var borderTopRightRadius = 0f
+      set(radius) = withBackgroundUpdate {
+        field = radius * resources.displayMetrics.density
+      }
+    var borderBottomLeftRadius = 0f
+      set(radius) = withBackgroundUpdate {
+        field = radius * resources.displayMetrics.density
+      }
+    var borderBottomRightRadius = 0f
+      set(radius) = withBackgroundUpdate {
+        field = radius * resources.displayMetrics.density
+      }
+    var borderWidth = 0f
+      set(width) = withBackgroundUpdate {
+        field = width * resources.displayMetrics.density
+      }
+    var borderColor: Int? = null
+      set(color) = withBackgroundUpdate {
+        field = color
+      }
+    var borderStyle: String? = "solid"
+      set(style) = withBackgroundUpdate {
+        field = style
+      }
+
+    private val hasBorderRadii: Boolean
+      get() = borderRadius != 0f ||
+        borderTopLeftRadius != 0f ||
+        borderTopRightRadius != 0f ||
+        borderBottomLeftRadius != 0f ||
+        borderBottomRightRadius != 0f
+
     var exclusive = true
 
-    private var _backgroundColor = Color.TRANSPARENT
+    private var buttonBackgroundColor = Color.TRANSPARENT
     private var needBackgroundUpdate = false
     private var lastEventTime = -1L
     private var lastAction = -1
@@ -139,17 +222,53 @@ class RNGestureHandlerButtonViewManager : ViewGroupManager<ButtonViewGroup>(), R
       needBackgroundUpdate = true
     }
 
+    private fun buildBorderRadii(): FloatArray {
+      // duplicate radius for each corner, as setCornerRadii expects X radius and Y radius for each
+      return floatArrayOf(
+        borderTopLeftRadius,
+        borderTopLeftRadius,
+        borderTopRightRadius,
+        borderTopRightRadius,
+        borderBottomRightRadius,
+        borderBottomRightRadius,
+        borderBottomLeftRadius,
+        borderBottomLeftRadius,
+      )
+        .map { if (it != 0f) it else borderRadius }
+        .toFloatArray()
+    }
+
+    private fun buildBorderStyle(): PathEffect? = when (borderStyle) {
+      "dotted" -> DashPathEffect(floatArrayOf(borderWidth, borderWidth, borderWidth, borderWidth), 0f)
+      "dashed" -> DashPathEffect(floatArrayOf(borderWidth * 3, borderWidth * 3, borderWidth * 3, borderWidth * 3), 0f)
+      else -> null
+    }
+
     override fun setBackgroundColor(color: Int) = withBackgroundUpdate {
-      _backgroundColor = color
+      buttonBackgroundColor = color
+    }
+
+    override fun onInitializeAccessibilityNodeInfo(info: AccessibilityNodeInfo) {
+      super.onInitializeAccessibilityNodeInfo(info)
+
+      // Expose the testID prop as the resource-id name of the view. Black-box E2E/UI testing
+      // frameworks, which interact with the UI through the accessibility framework, do not have
+      // access to view tags. This allows developers/testers to avoid polluting the
+      // content-description with test identifiers.
+      val testId = super.getTag(R.id.react_test_id)
+
+      if (testId is String) {
+        info.setViewIdResourceName(testId)
+      }
     }
 
-    override fun onInterceptTouchEvent(ev: MotionEvent): Boolean {
-      if (super.onInterceptTouchEvent(ev)) {
+    override fun onInterceptTouchEvent(event: MotionEvent): Boolean {
+      if (super.onInterceptTouchEvent(event)) {
         return true
       }
       // We call `onTouchEvent` and wait until button changes state to `pressed`, if it's pressed
       // we return true so that the gesture handler can activate.
-      onTouchEvent(ev)
+      onTouchEvent(event)
       return isPressed
     }
 
@@ -172,15 +291,24 @@ class RNGestureHandlerButtonViewManager : ViewGroupManager<ButtonViewGroup>(), R
      * [com.swmansion.gesturehandler.NativeViewGestureHandler.onHandle]  */
     @SuppressLint("ClickableViewAccessibility")
     override fun onTouchEvent(event: MotionEvent): Boolean {
+      val eventTime = event.eventTime
+      val action = event.action
+
+      if (touchResponder != null && touchResponder !== this && touchResponder!!.exclusive) {
+        if (isPressed) {
+          setPressed(false)
+        }
+        lastEventTime = eventTime
+        lastAction = action
+        return false
+      }
+
       if (event.action == MotionEvent.ACTION_CANCEL) {
         tryFreeingResponder()
-        return super.onTouchEvent(event)
       }
 
-      val eventTime = event.eventTime
-      val action = event.action
       // always true when lastEventTime or lastAction have default value (-1)
-      if (lastEventTime != eventTime || lastAction != action) {
+      if (lastEventTime != eventTime || lastAction != action || action == MotionEvent.ACTION_CANCEL) {
         lastEventTime = eventTime
         lastAction = action
         return super.onTouchEvent(event)
@@ -188,13 +316,30 @@ class RNGestureHandlerButtonViewManager : ViewGroupManager<ButtonViewGroup>(), R
       return false
     }
 
+    private fun updateBackgroundColor(backgroundColor: Int, borderDrawable: Drawable, selectable: Drawable?) {
+      val colorDrawable = PaintDrawable(backgroundColor)
+
+      if (hasBorderRadii) {
+        colorDrawable.setCornerRadii(buildBorderRadii())
+      }
+
+      val layerDrawable = LayerDrawable(
+        if (selectable != null) {
+          arrayOf(colorDrawable, selectable, borderDrawable)
+        } else {
+          arrayOf(colorDrawable, borderDrawable)
+        },
+      )
+      background = layerDrawable
+    }
+
     fun updateBackground() {
       if (!needBackgroundUpdate) {
         return
       }
       needBackgroundUpdate = false
 
-      if (_backgroundColor == Color.TRANSPARENT) {
+      if (buttonBackgroundColor == Color.TRANSPARENT) {
         // reset background
         background = null
       }
@@ -204,39 +349,43 @@ class RNGestureHandlerButtonViewManager : ViewGroupManager<ButtonViewGroup>(), R
       }
 
       val selectable = createSelectableDrawable()
+      val borderDrawable = createBorderDrawable()
 
-      if (borderRadius != 0f) {
-        // Radius-connected lines below ought to be considered
-        // as a temporary solution. It do not allow to set
-        // different radius on each corner. However, I suppose it's fairly
-        // fine for button-related use cases.
-        // Therefore it might be used as long as:
-        // 1. ReactViewManager is not a generic class with a possibility to handle another ViewGroup
-        // 2. There's no way to force native behavior of ReactViewGroup's superclass's onTouchEvent
-        if (selectable is RippleDrawable) {
-          val mask = PaintDrawable(Color.WHITE)
-          mask.setCornerRadius(borderRadius)
-          selectable.setDrawableByLayerId(android.R.id.mask, mask)
-        }
+      if (hasBorderRadii && selectable is RippleDrawable) {
+        val mask = PaintDrawable(Color.WHITE)
+        mask.setCornerRadii(buildBorderRadii())
+        selectable.setDrawableByLayerId(android.R.id.mask, mask)
       }
 
       if (useDrawableOnForeground && Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
         foreground = selectable
-        if (_backgroundColor != Color.TRANSPARENT) {
-          setBackgroundColor(_backgroundColor)
+        if (buttonBackgroundColor != Color.TRANSPARENT) {
+          updateBackgroundColor(buttonBackgroundColor, borderDrawable, null)
         }
-      } else if (_backgroundColor == Color.TRANSPARENT && rippleColor == null) {
-        background = selectable
+      } else if (buttonBackgroundColor == Color.TRANSPARENT && rippleColor == null) {
+        background = LayerDrawable(arrayOf(selectable, borderDrawable))
       } else {
-        val colorDrawable = PaintDrawable(_backgroundColor)
+        updateBackgroundColor(buttonBackgroundColor, borderDrawable, selectable)
+      }
+    }
 
-        if (borderRadius != 0f) {
-          colorDrawable.setCornerRadius(borderRadius)
-        }
+    private fun createBorderDrawable(): Drawable {
+      val borderDrawable = PaintDrawable(Color.TRANSPARENT)
+
+      if (hasBorderRadii) {
+        borderDrawable.setCornerRadii(buildBorderRadii())
+      }
 
-        val layerDrawable = LayerDrawable(if (selectable != null) arrayOf(colorDrawable, selectable) else arrayOf(colorDrawable))
-        background = layerDrawable
+      if (borderWidth > 0f) {
+        borderDrawable.paint.apply {
+          style = Paint.Style.STROKE
+          strokeWidth = borderWidth
+          color = borderColor ?: Color.BLACK
+          pathEffect = buildBorderStyle()
+        }
       }
+
+      return borderDrawable
     }
 
     private fun createSelectableDrawable(): Drawable? {
@@ -260,7 +409,7 @@ class RNGestureHandlerButtonViewManager : ViewGroupManager<ButtonViewGroup>(), R
       val drawable = RippleDrawable(
         colorStateList,
         null,
-        if (useBorderlessDrawable) null else ShapeDrawable(RectShape())
+        if (useBorderlessDrawable) null else ShapeDrawable(RectShape()),
       )
 
       if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M && rippleRadius != null) {
@@ -280,11 +429,22 @@ class RNGestureHandlerButtonViewManager : ViewGroupManager<ButtonViewGroup>(), R
       }
     }
 
-    override fun canBegin(): Boolean {
+    override fun canBegin(event: MotionEvent): Boolean {
+      if (event.action == MotionEvent.ACTION_CANCEL ||
+        event.action == MotionEvent.ACTION_UP ||
+        event.actionMasked == MotionEvent.ACTION_POINTER_UP
+      ) {
+        return false
+      }
+
       val isResponder = tryGrabbingResponder()
       if (isResponder) {
         isTouched = true
+        // when setPressed(true) is called before canBegin it will not call super.setPressed
+        // in this case we call it here
+        setPressed(true)
       }
+
       return isResponder
     }
 
@@ -339,7 +499,6 @@ class RNGestureHandlerButtonViewManager : ViewGroupManager<ButtonViewGroup>(), R
       // don't preform click when a child button is pressed (mainly to prevent sound effect of
       // a parent button from playing)
       return if (!isChildTouched()) {
-
         if (context.isScreenReaderOn()) {
           findGestureHandlerRootView()?.activateNativeHandlers(this)
         } else if (receivedKeyEvent) {
@@ -360,16 +519,6 @@ class RNGestureHandlerButtonViewManager : ViewGroupManager<ButtonViewGroup>(), R
     }
 
     override fun setPressed(pressed: Boolean) {
-      // there is a possibility of this method being called before NativeViewGestureHandler has
-      // opportunity to call canStart, in that case we need to grab responder in case the gesture
-      // will activate
-      // when canStart is called eventually, tryGrabbingResponder will return true if the button
-      // already is a responder
-      if (pressed) {
-        if (tryGrabbingResponder()) {
-          soundResponder = this
-        }
-      }
       // button can be pressed alongside other button if both are non-exclusive and it doesn't have
       // any pressed children (to prevent pressing the parent when children is pressed).
       val canBePressedAlongsideOther = !exclusive && touchResponder?.exclusive != true && !isChildTouched()
@@ -380,6 +529,7 @@ class RNGestureHandlerButtonViewManager : ViewGroupManager<ButtonViewGroup>(), R
         isTouched = pressed
         super.setPressed(pressed)
       }
+
       if (!pressed && touchResponder === this) {
         // if the responder is no longer pressed we release button responder
         isTouched = false

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

@@ -4,12 +4,17 @@ import android.content.Context
 import android.util.AttributeSet
 import com.facebook.react.ReactRootView
 
-@Deprecated(message = "Use <GestureHandlerRootView /> component instead. Check gesture handler installation instructions in documentation for more information.")
+@Deprecated(
+  message = "Use <GestureHandlerRootView /> component instead." +
+    "Check gesture handler installation instructions in documentation for more information.",
+)
 class RNGestureHandlerEnabledRootView : ReactRootView {
-  constructor(context: Context?) : super(context) {}
-  constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs) {}
+  constructor(context: Context?) : super(context)
+  constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)
 
   init {
-    throw UnsupportedOperationException("Your application is configured to use RNGestureHandlerEnabledRootView which is no longer supported. You can see how to migrate to <GestureHandlerRootView /> here: https://docs.swmansion.com/react-native-gesture-handler/docs/guides/migrating-off-rnghenabledroot")
+    throw UnsupportedOperationException(
+      "Your application is configured to use RNGestureHandlerEnabledRootView which is no longer supported. You can see how to migrate to <GestureHandlerRootView /> here: https://docs.swmansion.com/react-native-gesture-handler/docs/guides/migrating-off-rnghenabledroot",
+    )
   }
 }

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

@@ -9,12 +9,13 @@ package com.swmansion.gesturehandler.react
 import androidx.core.util.Pools
 import com.facebook.react.bridge.Arguments
 import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.UIManagerHelper
 import com.facebook.react.uimanager.events.Event
-import com.facebook.react.uimanager.events.RCTEventEmitter
 import com.swmansion.gesturehandler.core.GestureHandler
+import com.swmansion.gesturehandler.react.eventbuilders.GestureHandlerEventDataBuilder
 
 class RNGestureHandlerEvent private constructor() : Event<RNGestureHandlerEvent>() {
-  private var extraData: WritableMap? = null
+  private var dataBuilder: GestureHandlerEventDataBuilder<*>? = null
   private var coalescingKey: Short = 0
 
   // On the new architecture, native animated expects event names prefixed with `top` instead of `on`,
@@ -24,31 +25,34 @@ class RNGestureHandlerEvent private constructor() : Event<RNGestureHandlerEvent>
   // how GH sends events (which needs to be done, but maybe wait until the RN's apis stop changing)
   private var useTopPrefixedName: Boolean = false
 
-  private fun <T : GestureHandler<T>> init(
+  private fun <T : GestureHandler> init(
     handler: T,
-    dataExtractor: RNGestureHandlerEventDataExtractor<T>?,
-    useNativeAnimatedName: Boolean
+    dataBuilder: GestureHandlerEventDataBuilder<T>,
+    useNativeAnimatedName: Boolean,
   ) {
-    super.init(handler.view!!.id)
-    extraData = createEventData(handler, dataExtractor)
-    coalescingKey = handler.eventCoalescingKey
+    val view = handler.view!!
+    super.init(UIManagerHelper.getSurfaceId(view), view.id)
+    this.dataBuilder = dataBuilder
     this.useTopPrefixedName = useNativeAnimatedName
+    coalescingKey = handler.eventCoalescingKey
   }
 
   override fun onDispose() {
-    extraData = null
+    dataBuilder = null
     EVENTS_POOL.release(this)
   }
 
-  override fun getEventName() = if (useTopPrefixedName) NATIVE_ANIMATED_EVENT_NAME else EVENT_NAME
+  override fun getEventName() = if (useTopPrefixedName) {
+    NATIVE_ANIMATED_EVENT_NAME
+  } else {
+    EVENT_NAME
+  }
 
   override fun canCoalesce() = true
 
   override fun getCoalescingKey() = coalescingKey
 
-  override fun dispatch(rctEventEmitter: RCTEventEmitter) {
-    rctEventEmitter.receiveEvent(viewTag, EVENT_NAME, extraData)
-  }
+  override fun getEventData(): WritableMap = createEventData(dataBuilder!!)
 
   companion object {
     const val EVENT_NAME = "onGestureHandlerEvent"
@@ -56,22 +60,16 @@ class RNGestureHandlerEvent private constructor() : Event<RNGestureHandlerEvent>
     private const val TOUCH_EVENTS_POOL_SIZE = 7 // magic
     private val EVENTS_POOL = Pools.SynchronizedPool<RNGestureHandlerEvent>(TOUCH_EVENTS_POOL_SIZE)
 
-    fun <T : GestureHandler<T>> obtain(
+    fun <T : GestureHandler> obtain(
       handler: T,
-      dataExtractor: RNGestureHandlerEventDataExtractor<T>?,
-      useTopPrefixedName: Boolean = false
-    ): RNGestureHandlerEvent =
-      (EVENTS_POOL.acquire() ?: RNGestureHandlerEvent()).apply {
-        init(handler, dataExtractor, useTopPrefixedName)
-      }
+      dataBuilder: GestureHandlerEventDataBuilder<T>,
+      useTopPrefixedName: Boolean = false,
+    ): RNGestureHandlerEvent = (EVENTS_POOL.acquire() ?: RNGestureHandlerEvent()).apply {
+      init(handler, dataBuilder, useTopPrefixedName)
+    }
 
-    fun <T : GestureHandler<T>> createEventData(
-      handler: T,
-      dataExtractor: RNGestureHandlerEventDataExtractor<T>?
-    ): WritableMap = Arguments.createMap().apply {
-      dataExtractor?.extractEventData(handler, this)
-      putInt("handlerTag", handler.tag)
-      putInt("state", handler.state)
+    fun createEventData(dataBuilder: GestureHandlerEventDataBuilder<*>): WritableMap = Arguments.createMap().apply {
+      dataBuilder.buildEventData(this)
     }
   }
 }