@umituz/react-native-animation

Universal animation system for React Native with react-native-reanimated. Provides declarative animations, gesture handling, and preset configurations.

Installation

npm install @umituz/react-native-animation

Peer Dependencies

• react >= 18.2.0
• react-native >= 0.74.0
• react-native-reanimated >= 3.10.0
• react-native-gesture-handler >= 2.16.0

Features

• ✅ Declarative animations (fade, slide, scale, bounce, shake)
• ✅ Spring physics animations
• ✅ Gesture handling (tap, pan, pinch, long press)
• ✅ Preset animation configs
• ✅ TypeScript type safety
• ✅ Zero backend dependencies

Usage

Basic Animation

import { useAnimation } from '@umituz/react-native-animation';
import Animated from 'react-native-reanimated';

const MyComponent = () => {
  const { fadeIn, animatedStyle } = useAnimation();

  useEffect(() => {
    fadeIn();
  }, []);

  return <Animated.View style={animatedStyle}>Content</Animated.View>;
};

Gesture Handling

import { useGesture } from '@umituz/react-native-animation';

const MyComponent = () => {
  const { createPanGesture, animatedStyle, GestureDetector } = useGesture();

  const panGesture = createPanGesture({
    onEnd: (x, y) => console.log('Dragged to:', x, y),
  });

  return (
    <GestureDetector gesture={panGesture}>
      <Animated.View style={animatedStyle}>Draggable</Animated.View>
    </GestureDetector>
  );
};

Available Animations

• fadeIn() / fadeOut() - Opacity animations
• slideInUp() / slideInDown() / slideInLeft() / slideInRight() - Slide animations
• scaleIn() / scaleOut() - Scale animations
• bounce() - Bounce animation
• shake() - Shake animation
• pulse() - Pulse animation
• spin() - Spin animation

Available Gestures

• createTapGesture() - Tap gesture
• createPanGesture() - Pan/drag gesture
• createPinchGesture() - Pinch/zoom gesture
• createLongPressGesture() - Long press gesture

Reanimated Ready Check

import { useReanimatedReady } from '@umituz/react-native-animation';

const MyComponent = () => {
  const isReady = useReanimatedReady();

  if (!isReady) {
    return null; // Don't render Reanimated components until ready
  }

  return <Animated.View>...</Animated.View>;
};

API

Hooks

• useAnimation(): Hook for declarative animations
• useGesture(): Hook for gesture handling
• useReanimatedReady(): Hook to check if Reanimated is fully initialized

Types

• AnimationPreset: Animation preset enum
• GestureType: Gesture type enum
• AnimationTimingConfig: Timing configuration
• AnimationSpringConfig: Spring configuration

License

MIT