usePressableInteraction

Add the same hover and press opacity feedback that the built-in interactive components use to any Pressable. On hover (web/desktop) the element fades to 0.85 opacity, on press it fades to 0.8, and it animates back to 1 on release — all with a smooth 150ms timing transition powered by Reanimated.

Usage

import { AnimatedPressable, usePressableInteraction } from '@multinaire/ui';

function MyButton({ onPress, children }) {
  const { animatedStyle, overrideProps } = usePressableInteraction();

  return (
    <AnimatedPressable style={animatedStyle} onPress={onPress} {...overrideProps}>
      {children}
    </AnimatedPressable>
  );
}

Spread overrideProps onto the Pressable to wire up the hover/press handlers, and apply animatedStyle to drive the opacity animation. Use AnimatedPressable (an Animated-wrapped Pressable, also exported from @multinaire/ui) so the animated style takes effect.

Return Value

Property	Type	Description
animatedStyle	AnimatedStyle	Reanimated style that animates opacity between 1, 0.85 (hover), and 0.8 (press).
overrideProps	Partial<PressableProps>	Memoised onHoverIn, onHoverOut, onPressIn, and onPressOut handlers that drive the animation.

Notes

• Must be called inside a MultinaireUI.

• When you want the feedback to be conditional (e.g. only when an onPress handler exists), gate both the style and the props:

  <AnimatedPressable
    disabled={!onPress}
    style={[style, !!onPress && animatedStyle]}
    onPress={onPress}
    {...(!!onPress && overrideProps)}
  />