feat: implement animations

Author: kacperkapusciak

README.md

@@ -1 +1,68 @@
-# react-native-css-animations
+# React Native CSS Animations
+
+Ready-to-use CSS Animation presets for React Native Reanimated.
+
+## Installation
+
+```
+yarn add [react-native-reanimated@next](https://github.com/software-mansion/react-native-reanimated)
+yarn add react-native-css-animations
+```
+
+## Usage
+
+### Spin
+
+```typescript
+import { spin } from 'react-native-css-animations';
+import Animated from 'react-native-reanimated';
+
+function App() {
+  return (
+    <Animated.View style={[styles.box, spin]}/>
+  )
+}
+```
+
+### Ping
+
+```typescript
+import { ping } from 'react-native-css-animations';
+import Animated from 'react-native-reanimated';
+
+function App() {
+  return (
+    <Animated.View style={[styles.notification, ping]}/>
+  )
+}
+```
+
+### Pulse
+
+```typescript
+import { pulse } from 'react-native-css-animations';
+import Animated from 'react-native-reanimated';
+
+function App() {
+  return (
+    <Animated.View style={[styles.skeleton, pulse]}/>
+  )
+}
+```
+
+### Bounce
+
+```typescript
+import { bounce } from 'react-native-css-animations';
+import Animated from 'react-native-reanimated';
+
+function App() {
+  return (
+    <Animated.View style={[styles.arrow, bounce]}/>
+  )
+}
+```
+
+## Credits
+
+- The examples and animations were adopted from [Tailwind CSS](https://tailwindcss.com/docs/animation).

example/.gitignore

@@ -0,0 +1,2 @@
+ios/
+android/

example/package.json

@@ -4,8 +4,8 @@
   "main": "index.js",
   "scripts": {
     "start": "expo start",
-    "android": "expo start --android",
-    "ios": "expo start --ios",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
     "web": "expo start --web"
   },
   "dependencies": {
@@ -15,6 +15,7 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-native": "0.76.6",
+    "react-native-reanimated": "../react-native-reanimated-4.0.0-beta.3.1.tgz",
     "react-native-web": "~0.19.13"
   },
   "devDependencies": {

example/src/App.tsx

@@ -1,3 +1,119 @@
+import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
+import Animated from 'react-native-reanimated';
+import Fontisto from '@expo/vector-icons/Fontisto';
+import Entypo from '@expo/vector-icons/Entypo';
+import EvilIcons from '@expo/vector-icons/EvilIcons';
+import { bounce, ping, pulse, spin } from 'react-native-css-animations';
+
 export default function App() {
-  return null;
+  return (
+    <SafeAreaView style={styles.container}>
+      <Text style={styles.label}>Spin</Text>
+      <View style={styles.button}>
+        {/* Spin animation ⬇️ */}
+        <Animated.View style={spin}>
+          <EvilIcons name="spinner-3" size={24} color="white" />
+        </Animated.View>
+        <Text style={styles.buttonText}>Loading...</Text>
+      </View>
+
+      <Text style={styles.label}>Ping</Text>
+      <View style={styles.recording}>
+        <Fontisto name="camera" size={18} color="black" />
+        <View style={styles.notification} />
+        {/* Ping animation ⬇️ */}
+        <Animated.View style={[styles.notification, ping]} />
+      </View>
+
+      <Text style={styles.label}>Pulse</Text>
+      <View style={styles.skeletonContainer}>
+        <Animated.View style={[styles.skeletonAvatar, pulse]} />
+        <Animated.View style={[styles.skeletonText, pulse]} />
+      </View>
+
+      <Text style={styles.label}>Bounce</Text>
+      <Animated.View style={[styles.arrow, bounce]}>
+        <Entypo name="chevron-down" size={24} color="black" />
+      </Animated.View>
+    </SafeAreaView>
+  );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    padding: 24,
+    margin: 24,
+  },
+  label: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 18,
+    marginTop: 24,
+  },
+  box: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'red',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+    backgroundColor: '#3b82f6',
+    borderRadius: 8,
+    gap: 8,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  recording: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    borderWidth: 2,
+    borderColor: '#e2e8f0',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  notification: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    width: 10,
+    height: 10,
+    borderRadius: 10,
+    backgroundColor: 'red',
+  },
+  skeletonContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  skeletonAvatar: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    backgroundColor: '#e2e8f0',
+    marginRight: 12,
+  },
+  skeletonText: {
+    height: 24,
+    width: 150,
+    borderRadius: 8,
+    backgroundColor: '#e2e8f0',
+  },
+  arrow: {
+    width: 50,
+    height: 50,
+    borderRadius: 25,
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderColor: '#e2e8f0',
+  },
+});

package.json

@@ -80,6 +80,7 @@
     "react": "18.3.1",
     "react-native": "0.76.6",
     "react-native-builder-bob": "^0.35.2",
+    "react-native-reanimated": "./react-native-reanimated-4.0.0-beta.3.1.tgz",
     "release-it": "^17.10.0",
     "typescript": "^5.2.2"
   },
@@ -88,7 +89,8 @@
   },
   "peerDependencies": {
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-reanimated": ">=4.0.0"
   },
   "workspaces": [
     "example"

react-native-reanimated-4.0.0-beta.3.1.tgz

@@ -1 +1,73 @@
-export function noop() {}
+// MIT License
+
+// Copyright (c) Tailwind Labs, Inc.
+
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+import { cubicBezier } from 'react-native-reanimated';
+import type { CSSStyleDeclaration } from 'react-native-reanimated/lib/typescript/css/types';
+
+export const spin: CSSStyleDeclaration = {
+  animationName: {
+    to: {
+      transform: [{ rotate: '360deg' }],
+    },
+  },
+  animationDuration: '1s',
+  animationTimingFunction: 'linear',
+  animationIterationCount: 'infinite',
+};
+
+export const ping: CSSStyleDeclaration = {
+  animationName: {
+    '75%, 100%': {
+      transform: [{ scale: 2 }],
+      opacity: 0,
+    },
+  },
+  animationDuration: '1s',
+  animationTimingFunction: cubicBezier(0, 0, 0.2, 1),
+  animationIterationCount: 'infinite',
+};
+
+export const pulse: CSSStyleDeclaration = {
+  animationName: {
+    '50%': {
+      opacity: 0.5,
+    },
+  },
+  animationDuration: '2s',
+  animationTimingFunction: cubicBezier(0.4, 0, 0.6, 1),
+  animationIterationCount: 'infinite',
+};
+
+export const bounce: CSSStyleDeclaration = {
+  animationName: {
+    '0%, 100%': {
+      transform: [{ translateY: '-25%' }],
+      animationTimingFunction: cubicBezier(0.8, 0, 1, 1),
+    },
+    '50%': {
+      transform: [{ translateY: '0%' }],
+      animationTimingFunction: cubicBezier(0, 0, 0.2, 1),
+    },
+  },
+  animationDuration: '1s',
+  animationIterationCount: 'infinite',
+};