1- # React Native CSS Animations
21
3- Ready-to-use CSS Animation presets for React Native Reanimated.
2+ <img width =" 1100 " alt =" header " src =" https://github.com/user-attachments/assets/f007398e-68f6-446a-8580-8a0fb3fab57a " />
3+
4+ Ready-to-use CSS Animation presets for React Native Reanimated
45
56## Installation
67
7- ```
8- yarn add [react-native-reanimated@next]( https://github.com/software-mansion/react-native-reanimated)
8+ < pre >
9+ yarn add < a href = " https://github.com/software-mansion/react-native-reanimated " target = " _blank " >react-native-reanimated@next</ a >
910yarn add react-native-css-animations
10- ```
11+ </ pre >
1112
1213## Usage
1314
1415### Spin
1516
17+ Add ` spin ` style object to an ` Animated ` component add a linear spinning animation. Great for loaders.
18+
19+ <img src =" https://github.com/user-attachments/assets/d3a87650-83f4-476b-bf85-832a3a2d0fea " alt =" Spin animation demo " align =" right " width =" 350 " />
20+
1621``` typescript
1722import { spin } from ' react-native-css-animations' ;
1823import Animated from ' react-native-reanimated' ;
1924
2025function App() {
2126 return (
22- < Animated .View style = {[styles .box , spin ]}/>
27+ < Animated .View style = {[styles .spinner , spin ]}/>
2328 )
2429}
2530```
2631
2732### Ping
2833
34+ Add `ping` style object to an `Animated` component to make the element scale and fade. Great for attention grabbing elements like notifications.
35+
36+ <img src="https:// github.com/user-attachments/assets/51c604b4-621b-4821-ab9a-f289f15e07ae" alt="Ping animation demo" align="right" width="350" />
37+
2938` ` ` typescript
3039import { ping } from 'react-native-css-animations';
3140import Animated from 'react-native-reanimated';
@@ -39,6 +48,10 @@ function App() {
3948
4049### Pulse
4150
51+ Add ` pulse ` style object to an ` Animated ` component to make it fade in and out . Great for skeleton loaders .
52+
53+ < img src = " https://github.com/user-attachments/assets/d36924b1-f4f8-4bd4-b3dd-a298d3b2f4b6" alt = " Pulse animation demo" align = " right" width = " 350" / >
54+
4255` ` ` typescript
4356import { pulse } from 'react-native-css-animations';
4457import Animated from 'react-native-reanimated';
@@ -52,6 +65,10 @@ function App() {
5265
5366### Bounce
5467
68+ Add ` bounce ` style object to an ` Animated ` component to make it bounce up and down . Great for scroll down indicators .
69+
70+ < img src = " https://github.com/user-attachments/assets/81e75ed0-b7ec-4f56-a06a-c593a626cb39" alt = " Bounce animation demo" align = " right" width = " 350" / >
71+
5572` ` ` typescript
5673import { bounce } from 'react-native-css-animations';
5774import Animated from 'react-native-reanimated';
0 commit comments