animated-react-native

A lightweight and flexible animation library for React Native, inspired by react-native-reanimated.

Features

• Create smooth and high-performance animations using React Native's native driver.
• Support for timing, spring, and decay animations.
• Simple hooks to manage animations declaratively.
• Fully compatible with functional components.
• Includes comprehensive unit tests with coverage.

Installation

Step 1: Install the Package

npm install animated-react-native

Step 2: Compile TypeScript Files (For Development)

If you're working on this library or testing locally, make sure to compile TypeScript files into JavaScript:

npx tsc

This will generate JavaScript files in the dist/ directory (or the output directory specified in tsconfig.json).

Getting Started

Here’s a simple example to get you started:

Example Usage

import React from 'react';
import { View, Button, StyleSheet } from 'react-native';
import { useAnimatedValue, useTiming } from 'animated-react-native';

const App = () => {
  const opacity = useAnimatedValue(0);

  const toggleAnimation = () => {
    useTiming(opacity, opacity._value === 0 ? 1 : 0, 1000);
  };

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.box, { opacity }]} />
      <Button title="Toggle Animation" onPress={toggleAnimation} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  box: { width: 100, height: 100, backgroundColor: 'blue' },
});

export default App;

API Reference

AnimatedAPI

AnimatedAPI.Value(initialValue: number)

Creates a new animated value.

const value = AnimatedAPI.Value(0);

AnimatedAPI.timing(value: Animated.Value, config: Animated.TimingAnimationConfig)

Performs a timing animation.

AnimatedAPI.timing(value, {
  toValue: 1,
  duration: 1000,
  useNativeDriver: true,
}).start();

AnimatedAPI.spring(value: Animated.Value, config: Animated.SpringAnimationConfig)

Performs a spring animation.

AnimatedAPI.spring(value, {
  toValue: 1,
  useNativeDriver: true,
}).start();

AnimatedAPI.interpolate(value: Animated.Value, inputRange: number[], outputRange: number[])

Interpolates an animated value.

const interpolated = AnimatedAPI.interpolate(value, [0, 1], [0, 100]);

Hooks

useAnimatedValue(initialValue: number)

A hook for creating animated values.

const value = useAnimatedValue(0);

useTiming(value: Animated.Value, toValue: number, duration: number)

A hook for performing timing animations.

useTiming(value, 1, 1000);

useSpring(value: Animated.Value, toValue: number)

A hook for performing spring animations.

useSpring(value, 1);

Testing

Running Unit Tests

All test files are located in the tests/ directory. To run the tests:

1. Clone the repository.

2. Install dependencies:

   npm install

3. Run the tests:

   npm test

This will execute all test cases and display the results in the console.

Test Coverage Report

To generate a test coverage report, run:

npm test -- --coverage

This will create a coverage summary and detailed files in the coverage/ directory.

Example Output

 PASS  src/Animated.test.ts
  AnimatedAPI
    ✓ should create an animated value with an initial value (3ms)
    ✓ should interpolate values correctly (2ms)
    ✓ should perform a timing animation (3ms)
    ✓ should perform a spring animation (2ms)

 PASS  src/useAnimatedValue.test.ts
  useAnimatedValue
    ✓ should create an animated value (2ms)
    ✓ should allow updates to the animated value (1ms)

-------------------------|---------|----------|---------|---------|-------------------
File                     | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
-------------------------|---------|----------|---------|---------|-------------------
All files                |   100%  |    100%  |   100%  |   100%  |
 src                     |   100%  |    100%  |   100%  |   100%  |
  Animated.ts            |   100%  |    100%  |   100%  |   100%  |
  useAnimations.ts       |   100%  |    100%  |   100%  |   100%  |
-------------------------|---------|----------|---------|---------|-------------------

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository.

2. Create a new branch for your feature or bug fix.

3. Add your changes, including unit tests if applicable.

4. Run tests to ensure everything works:

   npm test

5. Submit a pull request with a detailed description of your changes.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Acknowledgments

This library is inspired by the amazing react-native-reanimated library. If you need advanced features like worklets or shared values, we recommend using it.