[General] Implement basic button interactions using native primitives (#4032)

## Description

Implements basic button interactions (scale, opacity, underlay) using
the native primitives and animations instead of relying on JS:
- `ObjectAnimator` and `Drawable` on Android
- CoreAnimation and `CALayer` on iOS/macOS
- CSS transitions on web

## Test plan

<details>
<summary>Tested on this</summary>

```jsx
import React from 'react';
import { ScrollView, StyleSheet, Text, View } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import GestureHandlerButton from 'react-native-gesture-handler/src/components/GestureHandlerButton';
import createNativeWrapper from 'react-native-gesture-handler/src/v3/createNativeWrapper';

const RawButton = createNativeWrapper(GestureHandlerButton, {
  shouldCancelWhenOutside: false,
  shouldActivateOnStart: false,
});

function ButtonRow({
  label,
  children,
}: {
  label: string;
  children: React.ReactNode;
}) {
  return (
    <View style={styles.row}>
      <Text style={styles.label}>{label}</Text>
      {children}
    </View>
  );
}

export default function EmptyExample() {
  return (
    <GestureHandlerRootView>
      <ScrollView contentContainerStyle={styles.container}>
        {/* ── Opacity ─────────────────────────────────────────── */}
        <ButtonRow label="Opacity: defaultOpacity=1 → activeOpacity=0.2 (strong fade)">
          <RawButton
            style={[
              styles.button,
              { transform: [{ rotate: '5deg' }, { scale: 0.75 }] },
            ]}
            defaultOpacity={1}
            activeOpacity={0.2}
            animationDuration={600}
            rippleColor="transparent">
            <Text style={styles.text}>Press me</Text>
          </RawButton>
        </ButtonRow>

        <ButtonRow label="Opacity: defaultOpacity=0.5 → activeOpacity=1 (fade in on press)">
          <RawButton
            style={styles.button}
            defaultOpacity={0.5}
            activeOpacity={1}
            animationDuration={200}>
            <Text style={styles.text}>Press me</Text>
          </RawButton>
        </ButtonRow>

        <ButtonRow label="Opacity: defaultOpacity=1 → activeOpacity=0 (disappears on press)">
          <RawButton
            style={styles.button}
            defaultOpacity={1}
            activeOpacity={0}
            animationDuration={150}>
            <Text style={styles.text}>Press me</Text>
          </RawButton>
        </ButtonRow>

        {/* ── Scale ───────────────────────────────────────────── */}
        <ButtonRow label="Scale: defaultScale=1 → activeScale=0.85 (shrink, fast)">
          <RawButton
            style={[styles.button, { opacity: 0.5 }]}
            defaultScale={1}
            activeScale={0.85}
            animationDuration={150}>
            <Text style={styles.text}>Press me</Text>
          </RawButton>
        </ButtonRow>

        <ButtonRow label="Scale: defaultScale=0.9 → activeScale=1.05 (grow on press)">
          <RawButton
            style={styles.button}
            defaultScale={0.9}
            activeScale={1.05}
            animationDuration={200}>
            <Text style={styles.text}>Press me</Text>
          </RawButton>
        </ButtonRow>

        <ButtonRow label="Scale: defaultScale=1 → activeScale=0.7 (heavy squish, slow)">
          <RawButton
            style={styles.button}
            defaultScale={1}
            activeScale={0.7}
            animationDuration={500}>
            <Text style={styles.text}>Press me</Text>
          </RawButton>
        </ButtonRow>

        {/* ── Underlay ────────────────────────────────────────── */}
        <ButtonRow label="Underlay: royalblue, defaultUnderlayOpacity=0 → activeUnderlayOpacity=0.4">
          <RawButton
            style={styles.button}
            underlayColor="royalblue"
            defaultUnderlayOpacity={0}
            activeUnderlayOpacity={0.4}
            animationDuration={200}>
            <Text style={styles.text}>Press me</Text>
          </RawButton>
        </ButtonRow>

        <ButtonRow label="Underlay: gold, defaultUnderlayOpacity=0.1 → activeUnderlayOpacity=0.9">
          <RawButton
            style={styles.button}
            underlayColor="gold"
            defaultUnderlayOpacity={0.1}
            activeUnderlayOpacity={0.9}
            animationDuration={300}>
            <Text style={styles.text}>Press me</Text>
          </RawButton>
        </ButtonRow>

        <ButtonRow label="Underlay: limegreen, defaultUnderlayOpacity=0.3 → activeUnderlayOpacity=0.3 (static)">
          <RawButton
            style={styles.button}
            underlayColor="limegreen"
            defaultUnderlayOpacity={0.3}
            activeUnderlayOpacity={0.3}
            animationDuration={200}>
            <Text style={styles.text}>Press me</Text>
          </RawButton>
        </ButtonRow>

        {/* ── Opacity + Scale ─────────────────────────────────── */}
        <ButtonRow label="Opacity + Scale: fade out while shrinking (slow)">
          <RawButton
            style={styles.button}
            defaultOpacity={1}
            activeOpacity={0.4}
            defaultScale={1}
            activeScale={0.9}
            animationDuration={600}>
            <Text style={styles.text}>Press me</Text>
          </RawButton>
        </ButtonRow>

        <ButtonRow label="Opacity + Scale: already dim, grows and brightens on press">
          <RawButton
            style={styles.button}
            defaultOpacity={0.4}
            activeOpacity={1}
            defaultScale={0.95}
            activeScale={1.05}
            animationDuration={200}>
            <Text style={styles.text}>Press me</Text>
          </RawButton>
        </ButtonRow>

        {/* ── Opacity + Underlay ──────────────────────────────── */}
        <ButtonRow label="Opacity + Underlay: fades while tomato underlay sweeps in">
          <RawButton
            style={styles.button}
            defaultOpacity={1}
            activeOpacity={0.6}
            underlayColor="tomato"
            defaultUnderlayOpacity={0}
            activeUnderlayOpacity={0.5}
            animationDuration={250}>
            <Text style={styles.text}>Press me</Text>
          </RawButton>
        </ButtonRow>

        {/* ── Scale + Underlay ────────────────────────────────── */}
        <ButtonRow label="Scale + Underlay: shrinks and mediumpurple underlay appears">
          <RawButton
            style={styles.button}
            defaultScale={1}
            activeScale={0.9}
            underlayColor="mediumpurple"
            defaultUnderlayOpacity={0}
            activeUnderlayOpacity={0.45}
            animationDuration={200}>
            <Text style={styles.text}>Press me</Text>
          </RawButton>
        </ButtonRow>

        {/* ── All props combined ──────────────────────────────── */}
        <ButtonRow label="All props: subtle feedback (opacity + scale + tomato underlay)">
          <RawButton
            style={styles.button}
            defaultOpacity={1}
            activeOpacity={0.6}
            defaultScale={1}
            activeScale={0.92}
            underlayColor="tomato"
            defaultUnderlayOpacity={0}
            activeUnderlayOpacity={0.35}
            animationDuration={250}>
            <Text style={styles.text}>Press me</Text>
          </RawButton>
        </ButtonRow>

        <ButtonRow label="All props: non-default start state (dim + small, active is full)">
          <RawButton
            style={styles.button}
            defaultOpacity={0.5}
            activeOpacity={1}
            defaultScale={0.85}
            activeScale={1}
            underlayColor="deepskyblue"
            defaultUnderlayOpacity={0.2}
            activeUnderlayOpacity={0.6}
            animationDuration={300}>
            <Text style={styles.text}>Press me</Text>
          </RawButton>
        </ButtonRow>

        <ButtonRow label="All props: bouncy grow + teal underlay + instant (duration=80)">
          <RawButton
            style={styles.button}
            defaultOpacity={1}
            activeOpacity={0.8}
            defaultScale={1}
            activeScale={1.08}
            underlayColor="teal"
            defaultUnderlayOpacity={0}
            activeUnderlayOpacity={0.5}
            animationDuration={80}>
            <Text style={styles.text}>Press me</Text>
          </RawButton>
        </ButtonRow>

        <ButtonRow label="All props: start dim+large, active invisible+tiny (extreme)">
          <RawButton
            style={styles.button}
            defaultOpacity={0.5}
            activeOpacity={0}
            defaultScale={0.8}
            activeScale={0.92}
            underlayColor="tomato"
            defaultUnderlayOpacity={0}
            activeUnderlayOpacity={0.35}
            animationDuration={250}>
            <Text style={styles.text}>Press me</Text>
          </RawButton>
        </ButtonRow>
      </ScrollView>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 24,
    gap: 24,
    paddingTop: 100,
  },
  row: {
    gap: 8,
  },
  label: {
    fontSize: 12,
    color: '#666',
    fontWeight: '500',
  },
  button: {
    backgroundColor: '#e0e0e0',
    borderRadius: 8,
    padding: 16,
    alignItems: 'center',
  },
  text: {
    fontSize: 16,
    fontWeight: '600',
  },
});

```

</details>

Author: j-piasecki

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

@@ -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/react-native-gesture-handler/apple/RNGHUIKit.h

@@ -7,6 +7,7 @@ typedef UIWindow RNGHWindow;
 typedef UIScrollView RNGHScrollView;
 typedef UITouch RNGHUITouch;
 typedef UIScrollView RNGHUIScrollView;
+typedef UIColor RNGHColor;
 
 #define RNGHGestureRecognizerStateFailed UIGestureRecognizerStateFailed;
 #define RNGHGestureRecognizerStatePossible UIGestureRecognizerStatePossible;
@@ -23,6 +24,7 @@ typedef NSWindow RNGHWindow;
 typedef NSScrollView RNGHScrollView;
 typedef RCTUITouch RNGHUITouch;
 typedef NSScrollView RNGHUIScrollView;
+typedef NSColor RNGHColor;
 
 #define RNGHGestureRecognizerStateFailed NSGestureRecognizerStateFailed;
 #define RNGHGestureRecognizerStatePossible NSGestureRecognizerStatePossible;

packages/react-native-gesture-handler/apple/RNGestureHandlerButton.h

@@ -28,6 +28,27 @@
 @property (nonatomic) BOOL userEnabled;
 @property (nonatomic, assign) RNGestureHandlerPointerEvents pointerEvents;
 
+@property (nonatomic, assign) NSInteger animationDuration;
+@property (nonatomic, assign) CGFloat activeOpacity;
+@property (nonatomic, assign) CGFloat defaultOpacity;
+@property (nonatomic, assign) CGFloat activeScale;
+@property (nonatomic, assign) CGFloat defaultScale;
+@property (nonatomic, assign) CGFloat defaultUnderlayOpacity;
+@property (nonatomic, assign) CGFloat activeUnderlayOpacity;
+@property (nonatomic, strong, nullable) RNGHColor *underlayColor;
+
+/**
+ * The view that press animations are applied to. Defaults to self; set by the
+ * Fabric component view to its own instance so animations affect the full wrapper.
+ */
+@property (nonatomic, weak, nullable) RNGHUIView *animationTarget;
+
+/**
+ * Immediately applies the start* values to the animation target and underlay layer.
+ * Call after props are updated to ensure the idle visual state is correct.
+ */
+- (void)applyStartAnimationState;
+
 #if TARGET_OS_OSX
 - (void)mountChildComponentView:(RNGHUIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index;
 - (void)unmountChildComponentView:(RNGHUIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index;