react-native-fast-animated

🌀 useAnimatedValue Hook for React Native

A powerful and lightweight custom hook that wraps the React Native Animated API for easy usage.
Supports timing, spring, decay, and composition functions like sequence, parallel, and loop.

Installation

npm install react-native-fast-animated

Usage

import React from 'react';
import { View, Button, Animated } from 'react-native';
import { useAnimatedValue } from './useAnimatedValue';

export default function ExampleAnimation() {
  const { value, timing, interpolate, loop, stop } = useAnimatedValue(0);

  // Interpolations
  const rotate = interpolate([0, 1], ['0deg', '360deg']);
  const translateY = interpolate([0, 1], [0, -120]);
  const opacity = interpolate([0, 1], [1, 0.5]);

  const runAnimation = () => {
    loop(() => timing(1, 1000, () => timing(0, 1000)), -1, true);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Animated.View
        style={{
          width: 100,
          height: 100,
          borderRadius: 20,
          backgroundColor: '#007AFF',
          transform: [{ rotate }, { translateY }],
          opacity,
        }}
      />
      <View style={{ marginTop: 20 }}>
        <Button title="Start Loop" onPress={runAnimation} />
        <Button title="Stop" onPress={stop} />
      </View>
    </View>
  );
}

🧠 API Reference

Method Description

timing(toValue, duration?, callback?) Simple easing-based animation

spring(toValue, config?, callback?) Spring animation using physics

decay(velocity, deceleration?, callback?) Momentum-based decay animation

interpolate(inputRange, outputRange, extrapolate?) Map animated values to different output ranges

sequence(animations, callback?) Run animations sequentially

parallel(animations, callback?) Run animations in parallel

loop(factory, iterations?, reverse?) Loop any animation infinitely or fixed times

stop() Stop any running animation

🛠 Example with Sequence & Parallel

const fadeAndMove = sequence([
  timing(1, 500),
  parallel([timing(0, 500), spring(0)]),
]);
fadeAndMove.start();

🧩 Hook Return Object

{
  value: Animated.Value,
  timing,
  spring,
  decay,
  interpolate,
  sequence,
  parallel,
  loop,
  stop
}

💡 Notes

• Always use useNativeDriver: true for best performance.
• Works great with React Native Reanimated 2 as a fallback helper.
• Designed for simple declarative animation control.

Contributing

• Development workflow
• Sending a pull request
• Code of conduct

License

MIT