[General] Implement basic button interactions using native primitives by j-piasecki · Pull Request #4032 · software-mansion/react-native-gesture-handler

j-piasecki · 2026-03-18T12:04:11Z

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

Tested on this

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',
  },
});

Copilot

Pull request overview

This PR adds configurable “pressed” interactions (opacity, scale, underlay) to GestureHandlerButton implemented with platform-native animation primitives (Android ObjectAnimator, Apple CoreAnimation/layer animation, web CSS transitions), and adjusts web pointer-capture behavior for button-role views.

Changes:

Introduces new button interaction props (animationDuration, activeOpacity/Scale/UnderlayOpacity, startOpacity/Scale/UnderlayOpacity, underlayColor) in the JS types and native codegen spec.
Implements press-in / press-out animations natively on Android and Apple (including an underlay layer/drawable).
Implements web press visuals via pointer events + CSS transitions, and updates pointer-capture logic to treat role="button" differently.

Reviewed changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
packages/react-native-gesture-handler/src/web/tools/PointerEventManager.ts	Skips pointer capture when the managed view is role="button".
packages/react-native-gesture-handler/src/specs/RNGestureHandlerButtonNativeComponent.ts	Adds codegen props for interaction animations and underlay.
packages/react-native-gesture-handler/src/components/GestureHandlerButton.web.tsx	Adds pressed state handling + CSS transitions + underlay rendering on web.
packages/react-native-gesture-handler/src/components/GestureHandlerButton.tsx	Exposes new interaction props on the public ButtonProps interface.
packages/react-native-gesture-handler/apple/RNGestureHandlerButtonManager.mm	Removes legacy iOS view manager implementation.
packages/react-native-gesture-handler/apple/RNGestureHandlerButtonManager.h	Removes legacy iOS view manager header.
packages/react-native-gesture-handler/apple/RNGestureHandlerButtonComponentView.mm	Wires new props into the Fabric component view and applies initial animation state.
packages/react-native-gesture-handler/apple/RNGestureHandlerButton.mm	Implements Apple-side press animations and underlay layer handling.
packages/react-native-gesture-handler/apple/RNGestureHandlerButton.h	Declares new interaction/underlay properties and helpers.
packages/react-native-gesture-handler/apple/RNGHUIKit.h	Adds a cross-platform RNGHColor typedef for UIColor/NSColor.
packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerButtonViewManager.kt	Implements Android-side press animations and underlay drawable layering.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/react-native-gesture-handler/src/specs/RNGestureHandlerButtonNativeComponent.ts

...ndroid/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerButtonViewManager.kt

packages/react-native-gesture-handler/apple/RNGestureHandlerButtonComponentView.mm

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

packages/react-native-gesture-handler/src/web/tools/PointerEventManager.ts

packages/react-native-gesture-handler/src/components/GestureHandlerButton.web.tsx

Copilot

Pull request overview

This PR adds native-driven (or platform-primitive) press feedback for GestureHandlerButton by introducing new animation/underlay props and implementing the corresponding behavior on Android, Apple platforms, and web, along with a small web pointer-capture adjustment to support button-like interactions.

Changes:

Add new press-animation props (animationDuration, active*, start*, underlayColor) to the button spec/types and propagate them into native implementations.
Implement press animations using native primitives (Android ObjectAnimator/Drawable, Apple CALayer/CoreAnimation, web CSS transitions).
Adjust web pointer-capture behavior to avoid capturing pointers for elements with role="button".

Reviewed changes

Copilot reviewed 13 out of 13 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/react-native-gesture-handler/src/web/tools/PointerEventManager.ts	Skip pointer capture when the managed view has `role="button"`.
packages/react-native-gesture-handler/src/v3/components/GestureButtonsProps.ts	Update v3 `RawButtonProps` typing to omit new animation props.
packages/react-native-gesture-handler/src/v3/components/GestureButtons.tsx	Type `RawButton` wrapper with `RawButtonProps`.
packages/react-native-gesture-handler/src/specs/RNGestureHandlerButtonNativeComponent.ts	Add new codegen props with defaults for native button interactions.
packages/react-native-gesture-handler/src/components/GestureHandlerButton.web.tsx	Implement pressed-state visuals via CSS transitions + optional underlay.
packages/react-native-gesture-handler/src/components/GestureHandlerButton.tsx	Add wrapper “resting” style derived from `startOpacity/startScale`.
packages/react-native-gesture-handler/apple/RNGestureHandlerButtonManager.mm	Remove legacy view manager implementation (file deleted).
packages/react-native-gesture-handler/apple/RNGestureHandlerButtonManager.h	Remove legacy view manager header (file deleted).
packages/react-native-gesture-handler/apple/RNGestureHandlerButtonComponentView.mm	Wire new props into the native button view and apply initial state.
packages/react-native-gesture-handler/apple/RNGestureHandlerButton.mm	Implement underlay + press animations using CoreAnimation/UIView/NSAnimationContext.
packages/react-native-gesture-handler/apple/RNGestureHandlerButton.h	Declare new animation/underlay properties and `applyStartAnimationState`.
packages/react-native-gesture-handler/apple/RNGHUIKit.h	Add cross-platform `RNGHColor` typedef (UIColor/NSColor).
packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerButtonViewManager.kt	Add animation/underlay props + implement press animations with animators/drawables.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/react-native-gesture-handler/src/v3/components/GestureButtonsProps.ts

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

...ndroid/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerButtonViewManager.kt

packages/react-native-gesture-handler/src/v3/components/GestureButtons.tsx

packages/react-native-gesture-handler/src/components/GestureButtons.tsx

...ndroid/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerButtonViewManager.kt

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

m-bert

❤️

j-piasecki added 6 commits March 18, 2026 09:54

Remove legacy view manager

3872ac1

Update native button spec

cdd3681

Implement ios

fb3693a

Implement android

8018824

Implement web

145117a

Update props definition

875a454

Copilot AI review requested due to automatic review settings March 18, 2026 12:04

Copilot started reviewing on behalf of j-piasecki March 18, 2026 12:04 View session

Copilot AI reviewed Mar 18, 2026

View reviewed changes

j-piasecki added 9 commits March 18, 2026 15:56

Use nil as default background color

52443ed

Fix pointer release

3d28579

Fix layer size

de8a29b

Use layer transform

be8bff4

Don't animate when not set

46f95c5

Apply resting styles in React

9ec7832

Omit the new props from existing buttons

cce5ca1

Align interpolation function

0adf9da

Keep underlay layer at the bottom

71e8692

j-piasecki requested a review from Copilot March 19, 2026 11:14

Copilot AI reviewed Mar 19, 2026

View reviewed changes

j-piasecki added 4 commits March 19, 2026 12:28

Change order

f202327

Update background on start opacity change

89eaa20

Update legacy types

e10e612

Don't pass activeOpacity to native view

5a1423e

j-piasecki marked this pull request as ready for review March 19, 2026 11:52

j-piasecki requested review from akwasniewski, m-bert and tomekzaw March 19, 2026 11:52

start* -> default*

8681383

m-bert reviewed Mar 20, 2026

View reviewed changes

j-piasecki added 5 commits March 20, 2026 10:02

Don't pass activeOpacity in legacy rect button

4de84a7

Wrap return in curly braces

5be1308

Use aliased color

df6fde7

Move self assignment to the if expressions

2efcfb6

Animate out when dragged outside

d01547e

m-bert approved these changes Mar 20, 2026

View reviewed changes

Update ref type

e5db0f9

j-piasecki merged commit 4a7639d into main Mar 23, 2026
9 checks passed

j-piasecki deleted the @jpiasecki/native-button-interactions branch March 23, 2026 08:48

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

[General] Implement basic button interactions using native primitives#4032
j-piasecki merged 26 commits intomainfrom
@jpiasecki/native-button-interactions

j-piasecki commented Mar 18, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

m-bert left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

j-piasecki commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Test plan

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

m-bert left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

j-piasecki commented Mar 18, 2026 •

edited

Loading