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.