useScaleAnimation

A hook for adding scale animations to pressable components in React Native applications.

Features

Support for spring and timing animations
Customizable animation configurations
Easy integration with pressable components
Smooth and performant animations using Reanimated

Installation

npx shadcn@latest add "https://frappe-ui-react.tmls.dev/registry/use-scale-animation"

Usage

Basic Usage

import { useScaleAnimation } from "@/hooks/use-scale-animation";
import { Pressable } from "react-native";
import Animated from "react-native-reanimated";

export function ScaleAnimationDemo() {
const { handlers, animatedStyle } = useScaleAnimation();

return (
  <Pressable {...handlers}>
    <Animated.View style={animatedStyle}>
      <Text>Press me!</Text>
    </Animated.View>
  </Pressable>
);
}

Custom Spring Animation

import { useScaleAnimation } from "@/hooks/use-scale-animation";
import { Pressable } from "react-native";
import Animated from "react-native-reanimated";

export function CustomSpringDemo() {
const { handlers, animatedStyle } = useScaleAnimation({
  type: "spring",
  value: 0.8,
  config: {
    mass: 1,
    damping: 15,
    stiffness: 200
  }
});

return (
  <Pressable {...handlers}>
    <Animated.View style={animatedStyle}>
      <Text>Spring Animation</Text>
    </Animated.View>
  </Pressable>
);
}

Timing Animation

import { useScaleAnimation } from "@/hooks/use-scale-animation";
import { Pressable } from "react-native";
import Animated from "react-native-reanimated";

export function TimingDemo() {
const { handlers, animatedStyle } = useScaleAnimation({
  type: "timing",
  value: 0.9,
  config: {
    duration: 100
  }
});

return (
  <Pressable {...handlers}>
    <Animated.View style={animatedStyle}>
      <Text>Timing Animation</Text>
    </Animated.View>
  </Pressable>
);
}