Motion

usePressAnimation

A Reanimated hook that returns an animated style and press handlers for scale + opacity feedback. Reads the current interaction intensity from InteractionProvider and respects the OS reduced-motion setting.

Import

typescript

import { usePressAnimation } from 'reactnatively';
// or
import { usePressAnimation } from 'reactnatively/animations';

Signature

typescript

function usePressAnimation(config?: PressAnimationConfig): PressAnimationResult

interface PressAnimationConfig {
  pressedScale?:   number;  // default 0.96 — target scale on press
  pressedOpacity?: number;  // default 0.88 — target opacity on press
  disabled?:       boolean; // default false — skip animation when true
}

interface PressAnimationResult {
  animatedStyle: AnimatedStyle<ViewStyle>;
  handlers: {
    onPressIn:  () => void;
    onPressOut: () => void;
  };
}

Basic usage

ActionButton.tsx

1import { usePressAnimation } from 'reactnatively';2import Animated from 'react-native-reanimated';3import { Pressable, Text, StyleSheet } from 'react-native';45export function ActionButton({ label, onPress }: { label: string; onPress: () => void }) {6  const { animatedStyle, handlers } = usePressAnimation();78  return (9    <Animated.View style={animatedStyle}>10      <Pressable11        onPress={onPress}12        onPressIn={handlers.onPressIn}13        onPressOut={handlers.onPressOut}14        style={styles.button}15      >16        <Text style={styles.label}>{label}</Text>17      </Pressable>18    </Animated.View>19  );20}2122const styles = StyleSheet.create({23  button: {24    paddingHorizontal: 24,25    paddingVertical: 14,26    borderRadius: 14,27    backgroundColor: '#6366f1',28    alignItems: 'center',29  },30  label: { color: '#fff', fontWeight: '600', fontSize: 15 },31});

Custom config

SoftPressable.tsx

const { animatedStyle, handlers } = usePressAnimation({
  pressedScale:   0.98,   // subtler scale — good for large surfaces
  pressedOpacity: 0.92,   // subtler opacity reduction
});

// Disable animation entirely (e.g. when disabled prop is true)
const { animatedStyle } = usePressAnimation({ disabled: true });

InteractionProvider influence

The hook reads the intensity from the nearest InteractionProvider and scales the press values accordingly:

Intensity	Scale scalar	Effect
subtle	0.5×	Minimal motion. Press is barely noticeable.
standard	1.0×	Default. Your pressedScale value is used as-is.
expressive	1.25×	Amplified. Scale delta is 25% larger.

Combined with glass surfaces

GlassCard.tsx

1import { usePressAnimation } from 'reactnatively';2import { GlassView } from 'reactnatively';3import Animated from 'react-native-reanimated';4import { Pressable, Text } from 'react-native';56export function GlassCard({ title, onPress }: { title: string; onPress: () => void }) {7  const { animatedStyle, handlers } = usePressAnimation({ pressedScale: 0.97 });89  return (10    <Animated.View style={animatedStyle}>11      <Pressable12        onPress={onPress}13        onPressIn={handlers.onPressIn}14        onPressOut={handlers.onPressOut}15      >16        <GlassView17          elevation={2}18          borderRadius={20}19          contentStyle={{ padding: 20 }}20        >21          <Text style={{ color: '#fff', fontWeight: '600', fontSize: 17 }}>{title}</Text>22        </GlassView>23      </Pressable>24    </Animated.View>25  );26}