react-native-reanimated

React Native Reanimated is a powerful animation library that provides a more performant and flexible alternative to React Native's Animated API. It allows you to create smooth, complex animations that run on the UI thread, ensuring 60fps performance even when the JavaScript thread is busy.

Features

• 🚀 High Performance: Animations run on the UI thread, independent of the JavaScript thread
• 🎨 Rich Animation API: Support for timing, spring, decay, and custom animations
• 👆 Gesture Integration: Seamless integration with react-native-gesture-handler
• 📐 Layout Animations: Automatic animations for layout changes
• 🧵 Worklets: Write JavaScript functions that run on the UI thread
• 🔄 Shared Values: Reactive values that can be used across components
• 📱 Cross-Platform: Works on iOS, Android, and Web
• 💪 TypeScript Support: Full TypeScript definitions included

Installation

npm install react-native-reanimated
# or
yarn add react-native-reanimated

iOS

cd ios && pod install && cd ..

Android

No additional steps required.

Babel Configuration

Add the Reanimated plugin to your babel.config.js:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-reanimated/plugin'],
};

Important: The Reanimated plugin must be listed last in the plugins array.

Quick Start

Basic Animation

import Animated, {
  useSharedValue,
  withTiming,
  useAnimatedStyle,
  Easing,
} from 'react-native-reanimated';

function App() {
  const width = useSharedValue(100);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      width: withTiming(width.value, {
        duration: 500,
        easing: Easing.bezier(0.25, 0.1, 0.25, 1),
      }),
    };
  });

  return (
    <Animated.View style={[{ height: 100, backgroundColor: 'blue' }, animatedStyle]} />
  );
}

Gesture Handler Integration

import { GestureDetector, Gesture } from 'react-native-gesture-handler';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
} from 'react-native-reanimated';

function DraggableBox() {
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);

  const pan = Gesture.Pan()
    .onUpdate((e) => {
      translateX.value = e.translationX;
      translateY.value = e.translationY;
    })
    .onEnd(() => {
      translateX.value = withSpring(0);
      translateY.value = withSpring(0);
    });

  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [
        { translateX: translateX.value },
        { translateY: translateY.value },
      ],
    };
  });

  return (
    <GestureDetector gesture={pan}>
      <Animated.View style={[styles.box, animatedStyle]} />
    </GestureDetector>
  );
}

Layout Animations

import Animated, { FadeIn, FadeOut, Layout } from 'react-native-reanimated';

function AnimatedList({ items }) {
  return (
    <FlatList
      data={items}
      renderItem={({ item }) => (
        <Animated.View
          entering={FadeIn}
          exiting={FadeOut}
          layout={Layout.springify()}
        >
          <Text>{item.title}</Text>
        </Animated.View>
      )}
    />
  );
}

Documentation

For detailed documentation, examples, and tutorials, visit:

• Official Documentation
• API Reference
• Fundamentals
• Tutorials

Examples

Check out the Example directory for comprehensive examples demonstrating various features and use cases.

Requirements

• React Native >= 0.64
• react-native-gesture-handler (peer dependency)

Contributing

Contributions are welcome! Please read our contributing guidelines and code of conduct before submitting pull requests.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development

Setup

yarn setup

This will install dependencies and set up the example app.

Running Tests

yarn test

Building

yarn type:check

License

MIT

Authors

• Krzysztof Magiera
• Software Mansion

Support

• GitHub Issues
• Discord Community

---

Made with ❤️ by Software Mansion