software-mansion-labs/react-native-css-animations

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

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.

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 style={styles.arrow}>
      <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%' }] },
+        },
+      },
    ]}
  >
}

Examples

See how the examples where implemented in our Example app.

Credits

Most of the examples and animations were adopted from Tailwind CSS.

React Native CSS Animations were brought to you by Software Mansion

We are a software agency with experience in building web and mobile apps. Core React Native Contributors and experts in dealing with all kinds of React Native issues. We can help you build your next dream product – Hire us.