react-native-gesture-handler 3.0.0-beta.3 → 3.0.0-beta.5

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

@@ -23,12 +23,12 @@ import android.view.View
 import android.view.ViewGroup
 import android.view.accessibility.AccessibilityNodeInfo
 import androidx.core.view.children
-import androidx.interpolator.view.animation.LinearOutSlowInInterpolator
+import androidx.interpolator.view.animation.FastOutSlowInInterpolator
 import com.facebook.react.R
+import com.facebook.react.bridge.Dynamic
 import com.facebook.react.module.annotations.ReactModule
 import com.facebook.react.uimanager.BackgroundStyleApplicator
 import com.facebook.react.uimanager.LengthPercentage
-import com.facebook.react.uimanager.LengthPercentageType
 import com.facebook.react.uimanager.PixelUtil
 import com.facebook.react.uimanager.PointerEvents
 import com.facebook.react.uimanager.ReactPointerEventsView
@@ -42,6 +42,8 @@ import com.facebook.react.uimanager.style.BorderStyle
 import com.facebook.react.uimanager.style.LogicalEdge
 import com.facebook.react.viewmanagers.RNGestureHandlerButtonManagerDelegate
 import com.facebook.react.viewmanagers.RNGestureHandlerButtonManagerInterface
+import com.swmansion.gesturehandler.core.GestureHandler
+import com.swmansion.gesturehandler.core.HoverGestureHandler
 import com.swmansion.gesturehandler.core.NativeViewGestureHandler
 import com.swmansion.gesturehandler.react.RNGestureHandlerButtonViewManager.ButtonViewGroup
 
@@ -176,74 +178,76 @@ class RNGestureHandlerButtonViewManager :
     view.setOverflow(overflow)
   }
 
-  private fun setBorderRadiusInternal(view: ButtonViewGroup, prop: BorderRadiusProp, value: Float) {
-    val isUnset = value.isNaN() || value < 0f
-    val lp = if (isUnset) null else LengthPercentage(value, LengthPercentageType.POINT)
+  private fun setBorderRadiusInternal(view: ButtonViewGroup, prop: BorderRadiusProp, value: Dynamic) {
+    // setFromDynamic returns null for null Dynamics, negative numbers, and
+    // unparseable strings — which is what we want for "unset" so that
+    // general / physical radii continue to cascade.
+    val lp = LengthPercentage.setFromDynamic(value)
     BackgroundStyleApplicator.setBorderRadius(view, prop, lp)
   }
 
   @ReactProp(name = ViewProps.BORDER_RADIUS)
-  override fun setBorderRadius(view: ButtonViewGroup, borderRadius: Float) {
-    setBorderRadiusInternal(view, BorderRadiusProp.BORDER_RADIUS, borderRadius)
+  override fun setBorderRadius(view: ButtonViewGroup, value: Dynamic) {
+    setBorderRadiusInternal(view, BorderRadiusProp.BORDER_RADIUS, value)
   }
 
   @ReactProp(name = "borderTopLeftRadius")
-  override fun setBorderTopLeftRadius(view: ButtonViewGroup, value: Float) {
+  override fun setBorderTopLeftRadius(view: ButtonViewGroup, value: Dynamic) {
     setBorderRadiusInternal(view, BorderRadiusProp.BORDER_TOP_LEFT_RADIUS, value)
   }
 
   @ReactProp(name = "borderTopRightRadius")
-  override fun setBorderTopRightRadius(view: ButtonViewGroup, value: Float) {
+  override fun setBorderTopRightRadius(view: ButtonViewGroup, value: Dynamic) {
     setBorderRadiusInternal(view, BorderRadiusProp.BORDER_TOP_RIGHT_RADIUS, value)
   }
 
   @ReactProp(name = "borderBottomRightRadius")
-  override fun setBorderBottomRightRadius(view: ButtonViewGroup, value: Float) {
+  override fun setBorderBottomRightRadius(view: ButtonViewGroup, value: Dynamic) {
     setBorderRadiusInternal(view, BorderRadiusProp.BORDER_BOTTOM_RIGHT_RADIUS, value)
   }
 
   @ReactProp(name = "borderBottomLeftRadius")
-  override fun setBorderBottomLeftRadius(view: ButtonViewGroup, value: Float) {
+  override fun setBorderBottomLeftRadius(view: ButtonViewGroup, value: Dynamic) {
     setBorderRadiusInternal(view, BorderRadiusProp.BORDER_BOTTOM_LEFT_RADIUS, value)
   }
 
   @ReactProp(name = "borderTopStartRadius")
-  override fun setBorderTopStartRadius(view: ButtonViewGroup, value: Float) {
+  override fun setBorderTopStartRadius(view: ButtonViewGroup, value: Dynamic) {
     setBorderRadiusInternal(view, BorderRadiusProp.BORDER_TOP_START_RADIUS, value)
   }
 
   @ReactProp(name = "borderTopEndRadius")
-  override fun setBorderTopEndRadius(view: ButtonViewGroup, value: Float) {
+  override fun setBorderTopEndRadius(view: ButtonViewGroup, value: Dynamic) {
     setBorderRadiusInternal(view, BorderRadiusProp.BORDER_TOP_END_RADIUS, value)
   }
 
   @ReactProp(name = "borderBottomStartRadius")
-  override fun setBorderBottomStartRadius(view: ButtonViewGroup, value: Float) {
+  override fun setBorderBottomStartRadius(view: ButtonViewGroup, value: Dynamic) {
     setBorderRadiusInternal(view, BorderRadiusProp.BORDER_BOTTOM_START_RADIUS, value)
   }
 
   @ReactProp(name = "borderBottomEndRadius")
-  override fun setBorderBottomEndRadius(view: ButtonViewGroup, value: Float) {
+  override fun setBorderBottomEndRadius(view: ButtonViewGroup, value: Dynamic) {
     setBorderRadiusInternal(view, BorderRadiusProp.BORDER_BOTTOM_END_RADIUS, value)
   }
 
   @ReactProp(name = "borderEndEndRadius")
-  override fun setBorderEndEndRadius(view: ButtonViewGroup, value: Float) {
+  override fun setBorderEndEndRadius(view: ButtonViewGroup, value: Dynamic) {
     setBorderRadiusInternal(view, BorderRadiusProp.BORDER_END_END_RADIUS, value)
   }
 
   @ReactProp(name = "borderEndStartRadius")
-  override fun setBorderEndStartRadius(view: ButtonViewGroup, value: Float) {
+  override fun setBorderEndStartRadius(view: ButtonViewGroup, value: Dynamic) {
     setBorderRadiusInternal(view, BorderRadiusProp.BORDER_END_START_RADIUS, value)
   }
 
   @ReactProp(name = "borderStartEndRadius")
-  override fun setBorderStartEndRadius(view: ButtonViewGroup, value: Float) {
+  override fun setBorderStartEndRadius(view: ButtonViewGroup, value: Dynamic) {
     setBorderRadiusInternal(view, BorderRadiusProp.BORDER_START_END_RADIUS, value)
   }
 
   @ReactProp(name = "borderStartStartRadius")
-  override fun setBorderStartStartRadius(view: ButtonViewGroup, value: Float) {
+  override fun setBorderStartStartRadius(view: ButtonViewGroup, value: Dynamic) {
     setBorderRadiusInternal(view, BorderRadiusProp.BORDER_START_START_RADIUS, value)
   }
 
@@ -267,14 +271,29 @@ class RNGestureHandlerButtonViewManager :
     view.isSoundEffectsEnabled = !touchSoundDisabled
   }
 
-  @ReactProp(name = "pressAndHoldAnimationDuration")
-  override fun setPressAndHoldAnimationDuration(view: ButtonViewGroup, pressAndHoldAnimationDuration: Int) {
-    view.pressAndHoldAnimationDuration = pressAndHoldAnimationDuration
+  @ReactProp(name = "tapAnimationInDuration")
+  override fun setTapAnimationInDuration(view: ButtonViewGroup, value: Int) {
+    view.tapAnimationInDuration = if (value > 0) value else 0
   }
 
-  @ReactProp(name = "tapAnimationDuration")
-  override fun setTapAnimationDuration(view: ButtonViewGroup, tapAnimationDuration: Int) {
-    view.tapAnimationDuration = if (tapAnimationDuration > 0) tapAnimationDuration else 0
+  @ReactProp(name = "tapAnimationOutDuration")
+  override fun setTapAnimationOutDuration(view: ButtonViewGroup, value: Int) {
+    view.tapAnimationOutDuration = if (value > 0) value else 0
+  }
+
+  @ReactProp(name = "longPressDuration")
+  override fun setLongPressDuration(view: ButtonViewGroup, value: Int) {
+    view.longPressDuration = value
+  }
+
+  @ReactProp(name = "longPressAnimationOutDuration")
+  override fun setLongPressAnimationOutDuration(view: ButtonViewGroup, value: Int) {
+    view.longPressAnimationOutDuration = value
+  }
+
+  @ReactProp(name = "needsOffscreenAlphaCompositing")
+  override fun setNeedsOffscreenAlphaCompositing(view: ButtonViewGroup, value: Boolean) {
+    view.needsOffscreenAlphaCompositing = value
   }
 
   @ReactProp(name = "defaultOpacity")
@@ -352,9 +371,11 @@ class RNGestureHandlerButtonViewManager :
     var useBorderlessDrawable = false
 
     var exclusive = true
-    var tapAnimationDuration: Int = 100
-    var pressAndHoldAnimationDuration: Int = -1
-      get() = if (field < 0) tapAnimationDuration else field
+    var tapAnimationInDuration: Int = 50
+    var tapAnimationOutDuration: Int = 100
+    var longPressDuration: Int = -1
+    var longPressAnimationOutDuration: Int = -1
+      get() = if (field < 0) tapAnimationOutDuration else field
     var activeOpacity: Float = 1.0f
     var defaultOpacity: Float = 1.0f
     var activeScale: Float = 1.0f
@@ -368,6 +389,7 @@ class RNGestureHandlerButtonViewManager :
       set(value) = withBackgroundUpdate {
         field = value
       }
+    var needsOffscreenAlphaCompositing = false
 
     override var pointerEvents: PointerEvents = PointerEvents.AUTO
 
@@ -379,11 +401,17 @@ class RNGestureHandlerButtonViewManager :
     private var underlayDrawable: PaintDrawable? = null
     private var pressInTimestamp = 0L
     private var pendingPressOut: Runnable? = null
+    private var isPointerInsideBounds = false
 
     // When non-null the ripple is drawn in dispatchDraw (above background, below children).
     // When null the ripple lives on the foreground drawable instead.
     private var selectableDrawable: Drawable? = null
 
+    // When true, dispatchDraw clips children to the resolved border-radius shape
+    // (overflow: hidden). ViewGroup's clipChildren is only a rectangular clip and
+    // wouldn't respect rounded corners.
+    private var clipChildrenToShape = false
+
     var isTouched = false
 
     init {
@@ -401,16 +429,7 @@ class RNGestureHandlerButtonViewManager :
     }
 
     fun setOverflow(overflow: String?) {
-      when (overflow) {
-        "hidden" -> {
-          clipChildren = true
-          clipToPadding = true
-        }
-        else -> {
-          clipChildren = false
-          clipToPadding = false
-        }
-      }
+      clipChildrenToShape = overflow == "hidden"
       invalidate()
     }
 
@@ -481,7 +500,32 @@ class RNGestureHandlerButtonViewManager :
       if (lastEventTime != eventTime || lastAction != action || action == MotionEvent.ACTION_CANCEL) {
         lastEventTime = eventTime
         lastAction = action
-        return super.onTouchEvent(event)
+        val handled = super.onTouchEvent(event)
+
+        // Replay press-in / press-out animations across drag transitions.
+        if (handled && canRespondToTouches()) {
+          when (event.actionMasked) {
+            MotionEvent.ACTION_DOWN, MotionEvent.ACTION_POINTER_DOWN -> isPointerInsideBounds = true
+            MotionEvent.ACTION_MOVE -> {
+              val inside = event.x >= 0 && event.y >= 0 && event.x < width && event.y < height
+              if (inside != isPointerInsideBounds) {
+                isPointerInsideBounds = inside
+                if (inside) {
+                  // Re-establish View's pressed flag to restore ripple and the
+                  // UP handler runs its normal release cleanup.
+                  setPressed(true)
+                } else {
+                  animatePressOut()
+                }
+              }
+            }
+            MotionEvent.ACTION_UP, MotionEvent.ACTION_POINTER_UP, MotionEvent.ACTION_CANCEL ->
+              isPointerInsideBounds =
+                false
+          }
+        }
+
+        return handled
       }
       return false
     }
@@ -506,6 +550,28 @@ class RNGestureHandlerButtonViewManager :
       }
 
       currentAnimator?.cancel()
+      currentAnimator = null
+
+      // Sub-frame durations: snap directly. ObjectAnimator with duration 0
+      // still defers its property write to the next frame callback, so if a
+      // follow-up animateTo() cancels it in the same frame the property never
+      // lands on its target and the next animator captures a stale starting
+      // value (e.g. an instant press-in followed by press-out in the same
+      // frame, leaving the press-out to animate default → default).
+      if (durationMs < (display?.minimumFrameTime ?: 16f)) {
+        if (hasOpacity) {
+          alpha = opacity
+        }
+        if (hasScale) {
+          scaleX = scale
+          scaleY = scale
+        }
+        if (hasUnderlay) {
+          underlayDrawable!!.alpha = (underlayOpacity * 255).toInt()
+        }
+        return
+      }
+
       val animators = ArrayList<Animator>()
       if (hasOpacity) {
         animators.add(ObjectAnimator.ofFloat(this, "alpha", opacity))
@@ -520,7 +586,7 @@ class RNGestureHandlerButtonViewManager :
       currentAnimator = AnimatorSet().apply {
         playTogether(animators)
         duration = durationMs
-        interpolator = LinearOutSlowInInterpolator()
+        interpolator = FastOutSlowInInterpolator()
         start()
       }
     }
@@ -531,27 +597,33 @@ class RNGestureHandlerButtonViewManager :
         pendingPressOut = null
       }
       pressInTimestamp = SystemClock.uptimeMillis()
-      animateTo(activeOpacity, activeScale, activeUnderlayOpacity, pressAndHoldAnimationDuration.toLong())
+      animateTo(activeOpacity, activeScale, activeUnderlayOpacity, tapAnimationInDuration.toLong())
     }
 
     private fun animatePressOut() {
       pendingPressOut?.let { handler.removeCallbacks(it) }
-      val pressAndHoldMs = pressAndHoldAnimationDuration.toLong()
-      val tapMs = tapAnimationDuration.toLong()
+      val tapInMs = tapAnimationInDuration.toLong()
+      val tapOutMs = tapAnimationOutDuration.toLong()
+      val longPressMs = longPressDuration.toLong()
+      val longPressOutMs = longPressAnimationOutDuration.toLong()
       val elapsed = SystemClock.uptimeMillis() - pressInTimestamp
 
-      if (elapsed >= pressAndHoldMs) {
-        animateTo(defaultOpacity, defaultScale, defaultUnderlayOpacity, pressAndHoldMs)
-        // elapsed * 2 to ensure there is at least half of the tapAnimationDuration left for the animation to play
-      } else if (elapsed * 2 >= tapMs) {
+      if (longPressMs >= 0 && elapsed >= longPressMs) {
+        // Long-press release - use the configured long-press out duration.
+        animateTo(defaultOpacity, defaultScale, defaultUnderlayOpacity, longPressOutMs)
+      } else if (elapsed >= tapInMs) {
+        // Press-in animation fully finished — release with the configured out duration.
+        animateTo(defaultOpacity, defaultScale, defaultUnderlayOpacity, tapOutMs)
+        // elapsed * 2 to ensure there is at least half of the tapAnimationOutDuration left for the animation to play
+      } else if (elapsed * 2 >= tapOutMs) {
         animateTo(defaultOpacity, defaultScale, defaultUnderlayOpacity, elapsed)
       } else {
-        val remaining = tapMs - elapsed
+        val remaining = tapInMs - elapsed
         animateTo(activeOpacity, activeScale, activeUnderlayOpacity, remaining)
 
         val runnable = Runnable {
           pendingPressOut = null
-          animateTo(defaultOpacity, defaultScale, defaultUnderlayOpacity, tapMs)
+          animateTo(defaultOpacity, defaultScale, defaultUnderlayOpacity, tapOutMs)
         }
         pendingPressOut = runnable
         handler.postDelayed(runnable, remaining)
@@ -618,7 +690,14 @@ class RNGestureHandlerButtonViewManager :
           canvas.restore()
         }
       }
-      super.dispatchDraw(canvas)
+      if (clipChildrenToShape) {
+        canvas.save()
+        BackgroundStyleApplicator.clipToPaddingBox(this, canvas)
+        super.dispatchDraw(canvas)
+        canvas.restore()
+      } else {
+        super.dispatchDraw(canvas)
+      }
     }
 
     override fun verifyDrawable(who: Drawable): Boolean =
@@ -671,6 +750,14 @@ class RNGestureHandlerButtonViewManager :
       pendingPressOut = null
       currentAnimator?.cancel()
       currentAnimator = null
+      applyStartAnimationState()
+
+      if (touchResponder === this) {
+        touchResponder = null
+      }
+      if (soundResponder === this) {
+        soundResponder = null
+      }
     }
 
     override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
@@ -712,6 +799,16 @@ class RNGestureHandlerButtonViewManager :
       isTouched = false
     }
 
+    override fun shouldBeginWithRecordedHandlers(
+      recorded: List<GestureHandler>,
+      handler: NativeViewGestureHandler,
+    ): Boolean = recorded.all {
+      it.shouldRecognizeSimultaneously(handler) ||
+        handler.shouldRecognizeSimultaneously(it) ||
+        it.view == this ||
+        it is HoverGestureHandler
+    }
+
     private fun tryFreeingResponder() {
       if (touchResponder === this) {
         touchResponder = null
@@ -719,6 +816,12 @@ class RNGestureHandlerButtonViewManager :
       }
     }
 
+    private fun canRespondToTouches(): Boolean = if (exclusive) {
+      touchResponder === this
+    } else {
+      !(touchResponder?.exclusive ?: false)
+    }
+
     private fun tryGrabbingResponder(): Boolean {
       if (isChildTouched()) {
         return false
@@ -728,11 +831,8 @@ class RNGestureHandlerButtonViewManager :
         touchResponder = this
         return true
       }
-      return if (exclusive) {
-        touchResponder === this
-      } else {
-        !(touchResponder?.exclusive ?: false)
-      }
+
+      return canRespondToTouches()
     }
 
     private fun isChildTouched(children: Sequence<View> = this.children): Boolean {
@@ -806,6 +906,11 @@ class RNGestureHandlerButtonViewManager :
       // by default Viewgroup would pass hotspot change events
     }
 
+    // Default to skipping the offscreen buffer so children's border anti-aliasing
+    // at the view edge isn't clipped by the layer bounds when alpha != 1.
+    // `needsOffscreenAlphaCompositing` opts back into the standard View behavior.
+    override fun hasOverlappingRendering(): Boolean = needsOffscreenAlphaCompositing
+
     companion object {
       var resolveOutValue = TypedValue()
       var touchResponder: ButtonViewGroup? = null