[Android] Handle hover in Touchable

[m-bert]

Description

This PR brings hover effects for the Touchable component on Android. Previously, animations based on hover were possible only on web.

Hovering out is handled in post-frame callback. This is due to the fact that on Android ACTION_HOVER_EXIT is dispatched right before ACTION_DOWN, so without delaying hover out effect we would be left with flickers.

Test plan

Tested on existing Touchable example and on the code below:

import * as React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {
  GestureHandlerRootView,
  Touchable as GHTouchable,
} from 'react-native-gesture-handler';

const SLOW = 700;

export default function App() {
  const [pressCount, setPressCount] = React.useState(0);
  const [disabled, setDisabled] = React.useState(false);

  // Auto-toggle `disabled` every 2s so hover mask/resume can be tested with a
  // mouse held still over the button — tapping a separate control would move
  // the pointer off first. Hover and watch: the visual masks to default while
  // disabled and resumes the hover look when re-enabled, pointer unmoved.
  React.useEffect(() => {
    const id = setInterval(() => setDisabled((d) => !d), 2000);
    return () => clearInterval(id);
  }, []);

  return (
    <GestureHandlerRootView style={styles.root}>
      <Text style={styles.title}>Slow hover + press</Text>
      <Text style={styles.hint}>
        Use a mouse / stylus. Hover to grow & fade, press to shrink & fade more.
        Transitions should never flicker through the default state.
      </Text>

      <View style={styles.stage}>
        <GHTouchable
          // Press (active) visuals
          defaultOpacity={1}
          defaultScale={1}
          activeOpacity={0.3}
          activeScale={0.8}
          // Hover visuals
          hoverOpacity={0.6}
          hoverScale={1.2}
          // Underlay so the change is extra visible
          underlayColor="black"
          defaultUnderlayOpacity={0}
          hoverUnderlayOpacity={0.15}
          activeUnderlayOpacity={0.35}
          // Slow everything down: in/out for both tap and hover
          animationDuration={{
            tap: { in: SLOW, out: SLOW },
            hover: { in: SLOW, out: SLOW },
          }}
          disabled={disabled}
          style={styles.button}
          onPress={() => setPressCount((c) => c + 1)}>
          <Text style={styles.buttonText}>Hover / Press me</Text>
        </GHTouchable>
      </View>

      <Text style={styles.counter}>
        {disabled ? 'DISABLED' : 'enabled'} · Presses: {pressCount}
      </Text>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
    backgroundColor: '#ecf0f1',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 24,
  },
  title: {
    fontSize: 22,
    fontWeight: 'bold',
    color: '#2c3e50',
    marginBottom: 8,
  },
  hint: {
    fontSize: 14,
    color: '#7f8c8d',
    textAlign: 'center',
    marginBottom: 40,
  },
  stage: {
    width: 260,
    height: 260,
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    width: 180,
    height: 180,
    borderRadius: 24,
    backgroundColor: '#8e44ad',
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonText: {
    color: 'white',
    fontSize: 18,
    fontWeight: 'bold',
  },
  counter: {
    marginTop: 40,
    fontSize: 16,
    color: '#2c3e50',
    fontWeight: 'bold',
  },
});

[Copilot]

Pull request overview

This PR adds Android hover animations to Touchable by extending the native RNGestureHandlerButton implementation to react to hover enter/exit, aligning behavior with the existing web hover support and avoiding hover→press flicker via a post-frame hover-out.

Changes:

• Extend the codegen native component spec to include hover-related props (opacity/scale/underlay + hover in/out durations).
• Update Android RNGestureHandlerButtonViewManager to animate hover in/out and to let press-out settle on hover values when appropriate.
• Update JS/TS docs for GestureHandlerButton hover props to indicate Android support.

Reviewed changes

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

File	Description
packages/react-native-gesture-handler/src/specs/RNGestureHandlerButtonNativeComponent.ts	Adds hover props to the native component spec (including sentinel defaults for hover values).
packages/react-native-gesture-handler/src/components/GestureHandlerButton.tsx	Updates prop docs to reflect hover support on Android.
packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerButtonViewManager.kt	Implements Android hover handling, delayed hover-out to avoid flicker, and press-out targeting logic.

---

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

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

[j-piasecki]

What about styluses without hover support?

[m-bert]

Stylus w/o hover

[j-piasecki]

Same as on iOS - do we need to schedule this to the next frame? Aren't hover-out and press-down happening at the same time?

[m-bert]

do we need to schedule this to the next frame?

Unfortunately yes 😞 While those events have the same timestamp, Android dispatches hover event first. That results in first running hover out animation and then going to pressed state - flickers are visible (presented offline).