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

$3

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

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

function App() {
return ;
}
`

$3

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

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

function App() {
return ;
}
`

$3

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

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

function App() {
return ;
}
`

$3

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

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

function App() {
return ;
}
`

$3

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.

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

function App() {
return ;
}
`

Alternative API

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

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

function App() {
return (



);
}
`

Customizing animation presets

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

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

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

Credits

- The examples and animations were adopted from Tailwind CSS.