Merge branch 'main' into @jpiasecki/fix-borderless-ripple-animation

Author: j-piasecki

.yarn/releases/yarn-4.13.0.cjs

@@ -1,2 +1,3 @@
-yarnPath: .yarn/releases/yarn-4.7.0.cjs
 nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.13.0.cjs

.yarn/releases/yarn-4.7.0.cjs

@@ -33,5 +33,5 @@
     "prettier": "3.3.3",
     "typescript": "~5.8.3"
   },
-  "packageManager": "yarn@4.7.0"
+  "packageManager": "yarn@4.13.0"
 }

.yarnrc.yml

@@ -70,6 +70,10 @@ const styles = StyleSheet.create({
 
 If you want to control gesture lifecycle outside of it, you can use `handlerTag` from created gesture object.
 
+:::note 
+The gestures can only be activated after it has begun, that is, after it has received received touch events.
+:::
+
 <CollapsibleCode
 label="Show full example"
 expandedLabel="Hide full example"
@@ -179,14 +183,6 @@ const styles = {
 
 `GestureStateManager` provides methods to manipulate gesture's state imperatively.
 
-### begin
-
-```tsx
-begin: (handlerTag: number) => void;
-```
-
-Triggers [`onBegin`](/docs/fundamentals/callbacks-events#onbegin) callback on gesture with specified `handlerTag`.
-
 ### activate
 
 ```tsx

package.json

@@ -34,21 +34,6 @@ const PROMOS: readonly Promo[] = [
       </>
     ),
   },
-  {
-    key: 'paradise',
-    href: 'https://paradise.swmansion.com?origin=swmansion_bar',
-    bg: '#FFF4C0',
-    buttonLabel: 'Learn more',
-    label: (
-      <>
-        <strong>React Native Paradise</strong>
-        <span className={styles.hiddenOnMobile}>
-          {' '}
-          - a week of advanced RN workshops in Croatia!
-        </span>
-      </>
-    ),
-  },
 ];
 
 // bump when adding promos so users who dismissed banner see the new one
@@ -72,13 +57,16 @@ export default function TopPromoRotator({ onClose }: Props) {
       'script[src*="www.googletagmanager.com/gtm.js?id=GTM-WV2G3SQL"]'
     );
 
-    if (existingScript) return;
+    if (existingScript) {
+      return;
+    }
 
     (function (w: Window, d: Document, s: string, l: string, i: string) {
       w.dataLayer = w.dataLayer || [];
+      // prettier-ignore
       w.dataLayer.push({
         'gtm.start': new Date().getTime(),
-        event: 'gtm.js',
+        'event': 'gtm.js',
       });
       const f = d.getElementsByTagName(s)[0] as HTMLScriptElement;
       const j = d.createElement(s) as HTMLScriptElement;
@@ -91,7 +79,7 @@ export default function TopPromoRotator({ onClose }: Props) {
 
   useEffect(() => {
     const id = window.setInterval(() => {
-      setIndex(i => (i + 1) % promos.length);
+      setIndex((i) => (i + 1) % promos.length);
     }, 5_000);
 
     return () => window.clearInterval(id);
@@ -115,7 +103,7 @@ export default function TopPromoRotator({ onClose }: Props) {
           transform: translateY,
           transition: 'transform 700ms cubic-bezier(0.22, 1, 0.36, 1)',
         }}>
-        {promos.map(p => (
+        {promos.map((p) => (
           <a
             key={p.key}
             href={p.href}

packages/docs-gesture-handler/docs/fundamentals/state-manager.mdx

@@ -1,5 +1,8 @@
 package com.swmansion.gesturehandler.react
 
+import android.animation.Animator
+import android.animation.AnimatorSet
+import android.animation.ObjectAnimator
 import android.annotation.SuppressLint
 import android.annotation.TargetApi
 import android.content.Context
@@ -19,10 +22,10 @@ import android.util.TypedValue
 import android.view.KeyEvent
 import android.view.MotionEvent
 import android.view.View
-import android.view.View.OnClickListener
 import android.view.ViewGroup
 import android.view.accessibility.AccessibilityNodeInfo
 import androidx.core.view.children
+import androidx.interpolator.view.animation.LinearOutSlowInInterpolator
 import com.facebook.react.R
 import com.facebook.react.module.annotations.ReactModule
 import com.facebook.react.uimanager.PixelUtil
@@ -133,6 +136,46 @@ class RNGestureHandlerButtonViewManager :
     view.isSoundEffectsEnabled = !touchSoundDisabled
   }
 
+  @ReactProp(name = "animationDuration")
+  override fun setAnimationDuration(view: ButtonViewGroup, animationDuration: Int) {
+    view.animationDuration = animationDuration
+  }
+
+  @ReactProp(name = "defaultOpacity")
+  override fun setDefaultOpacity(view: ButtonViewGroup, defaultOpacity: Float) {
+    view.defaultOpacity = defaultOpacity
+  }
+
+  @ReactProp(name = "activeOpacity")
+  override fun setActiveOpacity(view: ButtonViewGroup, targetOpacity: Float) {
+    view.activeOpacity = targetOpacity
+  }
+
+  @ReactProp(name = "defaultScale")
+  override fun setDefaultScale(view: ButtonViewGroup, defaultScale: Float) {
+    view.defaultScale = defaultScale
+  }
+
+  @ReactProp(name = "activeScale")
+  override fun setActiveScale(view: ButtonViewGroup, activeScale: Float) {
+    view.activeScale = activeScale
+  }
+
+  @ReactProp(name = "underlayColor")
+  override fun setUnderlayColor(view: ButtonViewGroup, underlayColor: Int?) {
+    view.underlayColor = underlayColor
+  }
+
+  @ReactProp(name = "defaultUnderlayOpacity")
+  override fun setDefaultUnderlayOpacity(view: ButtonViewGroup, defaultUnderlayOpacity: Float) {
+    view.defaultUnderlayOpacity = defaultUnderlayOpacity
+  }
+
+  @ReactProp(name = "activeUnderlayOpacity")
+  override fun setActiveUnderlayOpacity(view: ButtonViewGroup, activeUnderlayOpacity: Float) {
+    view.activeUnderlayOpacity = activeUnderlayOpacity
+  }
+
   @ReactProp(name = ViewProps.POINTER_EVENTS)
   override fun setPointerEvents(view: ButtonViewGroup, pointerEvents: String?) {
     view.pointerEvents = when (pointerEvents) {
@@ -212,6 +255,20 @@ class RNGestureHandlerButtonViewManager :
         borderBottomRightRadius != 0f
 
     var exclusive = true
+    var animationDuration: Int = 100
+    var activeOpacity: Float = 1.0f
+    var defaultOpacity: Float = 1.0f
+    var activeScale: Float = 1.0f
+    var defaultScale: Float = 1.0f
+    var underlayColor: Int? = null
+      set(color) = withBackgroundUpdate {
+        field = color
+      }
+    var activeUnderlayOpacity: Float = 0f
+    var defaultUnderlayOpacity: Float = 0f
+      set(value) = withBackgroundUpdate {
+        field = value
+      }
 
     override var pointerEvents: PointerEvents = PointerEvents.AUTO
 
@@ -220,6 +277,8 @@ class RNGestureHandlerButtonViewManager :
     private var lastEventTime = -1L
     private var lastAction = -1
     private var receivedKeyEvent = false
+    private var currentAnimator: AnimatorSet? = null
+    private var underlayDrawable: PaintDrawable? = null
 
     var isTouched = false
 
@@ -331,7 +390,73 @@ class RNGestureHandlerButtonViewManager :
       return false
     }
 
-    private fun updateBackgroundColor(backgroundColor: Int, borderDrawable: Drawable, selectable: Drawable?) {
+    private fun applyStartAnimationState() {
+      (parent as? ViewGroup)?.let {
+        if (activeOpacity != 1.0f || defaultOpacity != 1.0f) {
+          it.alpha = defaultOpacity
+        }
+        if (activeScale != 1.0f || defaultScale != 1.0f) {
+          it.scaleX = defaultScale
+          it.scaleY = defaultScale
+        }
+      }
+      underlayDrawable?.alpha = (defaultUnderlayOpacity * 255).toInt()
+    }
+
+    private fun animateTo(opacity: Float, scale: Float, underlayOpacity: Float) {
+      val hasOpacity = activeOpacity != 1.0f || defaultOpacity != 1.0f
+      val hasScale = activeScale != 1.0f || defaultScale != 1.0f
+      val hasUnderlay = activeUnderlayOpacity != defaultUnderlayOpacity && underlayDrawable != null
+      if (!hasOpacity && !hasScale && !hasUnderlay) {
+        return
+      }
+
+      currentAnimator?.cancel()
+      val animators = ArrayList<Animator>()
+      if (hasOpacity || hasScale) {
+        val parent = this.parent as? ViewGroup ?: return
+        if (hasOpacity) {
+          animators.add(ObjectAnimator.ofFloat(parent, "alpha", opacity))
+        }
+        if (hasScale) {
+          animators.add(ObjectAnimator.ofFloat(parent, "scaleX", scale))
+          animators.add(ObjectAnimator.ofFloat(parent, "scaleY", scale))
+        }
+      }
+      if (hasUnderlay) {
+        animators.add(ObjectAnimator.ofInt(underlayDrawable!!, "alpha", (underlayOpacity * 255).toInt()))
+      }
+      currentAnimator = AnimatorSet().apply {
+        playTogether(animators)
+        duration = animationDuration.toLong()
+        interpolator = LinearOutSlowInInterpolator()
+        start()
+      }
+    }
+
+    private fun animatePressIn() {
+      animateTo(activeOpacity, activeScale, activeUnderlayOpacity)
+    }
+
+    private fun animatePressOut() {
+      animateTo(defaultOpacity, defaultScale, defaultUnderlayOpacity)
+    }
+
+    private fun createUnderlayDrawable(): PaintDrawable {
+      val drawable = PaintDrawable(underlayColor ?: Color.BLACK)
+      if (hasBorderRadii) {
+        drawable.setCornerRadii(buildBorderRadii())
+      }
+      drawable.alpha = (defaultUnderlayOpacity * 255).toInt()
+      return drawable
+    }
+
+    private fun updateBackgroundColor(
+      backgroundColor: Int,
+      underlay: Drawable,
+      borderDrawable: Drawable,
+      selectable: Drawable?,
+    ) {
       val colorDrawable = PaintDrawable(backgroundColor)
 
       if (hasBorderRadii) {
@@ -340,9 +465,9 @@ class RNGestureHandlerButtonViewManager :
 
       val layerDrawable = LayerDrawable(
         if (selectable != null) {
-          arrayOf(colorDrawable, selectable, borderDrawable)
+          arrayOf(colorDrawable, underlay, selectable, borderDrawable)
         } else {
-          arrayOf(colorDrawable, borderDrawable)
+          arrayOf(colorDrawable, underlay, borderDrawable)
         },
       )
       background = layerDrawable
@@ -365,6 +490,8 @@ class RNGestureHandlerButtonViewManager :
 
       val selectable = createSelectableDrawable()
       val borderDrawable = createBorderDrawable()
+      val underlay = createUnderlayDrawable()
+      underlayDrawable = underlay
 
       if (hasBorderRadii && selectable is RippleDrawable) {
         val mask = PaintDrawable(Color.WHITE)
@@ -375,13 +502,15 @@ class RNGestureHandlerButtonViewManager :
       if (useDrawableOnForeground && Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
         foreground = selectable
         if (buttonBackgroundColor != Color.TRANSPARENT) {
-          updateBackgroundColor(buttonBackgroundColor, borderDrawable, null)
+          updateBackgroundColor(buttonBackgroundColor, underlay, borderDrawable, null)
         }
       } else if (buttonBackgroundColor == Color.TRANSPARENT && rippleColor == null) {
-        background = LayerDrawable(arrayOf(selectable, borderDrawable))
+        background = LayerDrawable(arrayOf(underlay, selectable, borderDrawable))
       } else {
-        updateBackgroundColor(buttonBackgroundColor, borderDrawable, selectable)
+        updateBackgroundColor(buttonBackgroundColor, underlay, borderDrawable, selectable)
       }
+
+      applyStartAnimationState()
     }
 
     private fun createBorderDrawable(): Drawable {
@@ -540,6 +669,12 @@ class RNGestureHandlerButtonViewManager :
         // is null or non-exclusive, assuming it doesn't have pressed children
         isTouched = pressed
         super.setPressed(pressed)
+
+        if (pressed) {
+          animatePressIn()
+        } else {
+          animatePressOut()
+        }
       }
 
       if (!pressed && touchResponder === this) {

packages/docs-gesture-handler/src/components/TopPromoRotator/index.tsx

@@ -145,17 +145,11 @@ class RNGestureHandlerModule(reactContext: ReactApplicationContext?) :
     UiThreadUtil.assertOnUiThread()
 
     registry.getHandler(handlerTag)?.let { handler ->
-      if (handler.state == GestureHandler.STATE_UNDETERMINED) {
-        handler.forceReinitializeDuringOnHandle = true
-
-        // When going from UNDETERMINED to ACTIVE, force going through BEGAN to preserve
-        // the correct state flow
-        if (newState == GestureHandler.STATE_ACTIVE) {
-          handler.begin()
+      if (newState == GestureHandler.STATE_ACTIVE) {
+        if (handler.state != GestureHandler.STATE_BEGAN) {
+          // We don't allow activation of gestures which haven't received any touches
+          return
         }
-      }
-
-      if (newState == GestureHandler.STATE_ACTIVE || newState == GestureHandler.STATE_BEGAN) {
         handler.recordHandlerIfNotPresent()
       }
 

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

@@ -220,21 +220,29 @@ - (void)mouseEntered:(NSEvent *)event
 {
   [self sendEventsInState:RNGestureHandlerStateBegan
            forViewWithTag:_view.reactTag
-            withExtraData:[RNGestureHandlerEventExtraData forPointerInside:YES withPointerType:_pointerType]];
+            withExtraData:[RNGestureHandlerEventExtraData forPointerInside:YES
+                                                       withNumberOfTouches:1
+                                                           withPointerType:_pointerType]];
   [self sendEventsInState:RNGestureHandlerStateActive
            forViewWithTag:_view.reactTag
-            withExtraData:[RNGestureHandlerEventExtraData forPointerInside:YES withPointerType:_pointerType]];
+            withExtraData:[RNGestureHandlerEventExtraData forPointerInside:YES
+                                                       withNumberOfTouches:1
+                                                           withPointerType:_pointerType]];
 }
 
 - (void)mouseExited:(NSEvent *)theEvent
 {
   [self sendEventsInState:RNGestureHandlerStateEnd
            forViewWithTag:_view.reactTag
-            withExtraData:[RNGestureHandlerEventExtraData forPointerInside:YES withPointerType:_pointerType]];
+            withExtraData:[RNGestureHandlerEventExtraData forPointerInside:NO
+                                                       withNumberOfTouches:1
+                                                           withPointerType:_pointerType]];
 
   [self sendEventsInState:RNGestureHandlerStateUndetermined
            forViewWithTag:_view.reactTag
-            withExtraData:[RNGestureHandlerEventExtraData forPointerInside:YES withPointerType:_pointerType]];
+            withExtraData:[RNGestureHandlerEventExtraData forPointerInside:NO
+                                                       withNumberOfTouches:1
+                                                           withPointerType:_pointerType]];
 }
 
 @end