react-native-css-animations

Ready-to-use CSS Animation presets for React Native Reanimated

[!TIP] Since version 4.0, React Native Reanimated comes with a native support for CSS Animations and Transitions. Read the full announcement to learn more.

Installation

yarn add react-native-reanimated@next
yarn add react-native-css-animations

Usage

Spin

Add spin style object to an Animated component add a linear spinning animation. Great for loaders.

import { spin } from 'react-native-css-animations';
import Animated from 'react-native-reanimated';

function App() {
  return <Animated.View style={[styles.spinner, spin]} />;
}

Ping

Add ping style object to an Animated component to make the element scale and fade. Great for attention grabbing elements like notifications.

import { ping } from 'react-native-css-animations';
import Animated from 'react-native-reanimated';

function App() {
  return <Animated.View style={[styles.notification, ping]} />;
}

Pulse

Add pulse style object to an Animated component to make it fade in and out. Great for skeleton loaders.

import { pulse } from 'react-native-css-animations';
import Animated from 'react-native-reanimated';

function App() {
  return <Animated.View style={[styles.skeleton, pulse]} />;
}

Bounce

Add bounce style object to an Animated component to make it bounce up and down. Great for scroll down indicators.

import { bounce } from 'react-native-css-animations';
import Animated from 'react-native-reanimated';

function App() {
  return <Animated.View style={[styles.arrow, bounce]} />;
}

Shimmer

Add shimmer style object to an Animated component to make it animate from left to right indefinitely. Great for shimmer loading effect.

[!NOTE] The example video on the right uses @react-native-masked-view/masked-view and expo-linear-gradient, and thus doesn't work on the Web.

import { shimmer } from 'react-native-css-animations';
import Animated from 'react-native-reanimated';

function App() {
  return <Animated.View style={[styles.gradient, shimmer]} />;
}

Alternative API

The following animations are also available in a form of React Native components.

import {
  Spin,
  Ping,
  Pulse,
  Bounce,
  Shimmer,
} from 'react-native-css-animations';

function App() {
  return (
    <Bounce>
      <ArrowIcon />
    </Bounce>
  );
}

Customizing animation presets

You can customize the animation style objects by overriding the styles like so:

import { shimmer } from 'react-native-css-animations';
import Animated from 'react-native-reanimated';

function App() {
  return <Animated.View
    style={[
      styles.gradient,
      shimmer,
+      {
+        animationName: {
+          to: { transform: [{ translateX: '100%' }] },
+        },
+      },
    ]}
  >
}

Credits

The examples and animations were adopted from Tailwind CSS.