You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+26-15Lines changed: 26 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,30 +1,25 @@
1
-
# 🍃 react-native-ease
1
+
<imgwidth="100%"height="auto"alt="react-native-ease by App & Flow"src="https://github.com/user-attachments/assets/8006ed51-d373-4c97-9e80-9937eb9a569e" />
2
2
3
3
Lightweight declarative animations powered by platform APIs. Uses Core Animation on iOS and Animator on Android — zero JS overhead.
4
4
5
-
## Goals
5
+
## About
6
+
App & Flow is a Montreal-based React Native engineering and consulting studio. We partner with the world’s top companies and are recommended by [Expo](https://expo.dev/consultants). Need a hand? Let’s build together. team@appandflow.com
6
7
7
-
-**Fast** — Animations run entirely on native platform APIs (CAAnimation, ObjectAnimator/SpringAnimation). No JS animation loop, no worklets, no shared values.
8
-
-**Simple** — CSS-transition-like API. Set target values, get smooth animations. One component, a few props.
9
-
-**Lightweight** — Minimal native code, no C++ runtime, no custom animation engine. Just a thin declarative wrapper around what the OS already provides.
10
-
-**Interruptible** — Changing values mid-animation smoothly redirects to the new target. No jumps.
-**Complex gesture-driven animations** — If you need pan/pinch-driven animations, animation worklets, or shared values across components, use [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated).
15
-
-**Layout animations** — Animating width/height/layout changes is not supported.
16
-
-**Shared element transitions** — Use Reanimated or React Navigation's shared element transitions.
17
-
-**Old architecture** — Fabric (new architecture) only.
12
+
## Getting started
18
13
19
-
## Installation
14
+
###Installation
20
15
21
16
```bash
22
17
npm install react-native-ease
23
18
# or
24
19
yarn add react-native-ease
25
20
```
26
21
27
-
## Migration Skill
22
+
###Migration Skill
28
23
29
24
If you're already using `react-native-reanimated` or React Native's `Animated` API, this project includes an [Agent Skill](https://agentskills.io) that scans your codebase for animations that can be replaced with `react-native-ease` and migrates them automatically.
30
25
@@ -42,7 +37,7 @@ The skill will:
42
37
4. Let you select which components to migrate
43
38
5. Apply the changes, preserving all non-animation logic
44
39
45
-
##Quick Start
40
+
### Example
46
41
47
42
```tsx
48
43
import { EaseView } from'react-native-ease';
@@ -62,7 +57,23 @@ function FadeCard({ visible, children }) {
62
57
63
58
`EaseView` works like a regular `View` — it accepts children, styles, and all standard view props. When values in `animate` change, it smoothly transitions to the new values using native platform animations.
64
59
65
-
## When to use this vs Reanimated
60
+
## Why
61
+
62
+
### Goals
63
+
64
+
-**Fast** — Animations run entirely on native platform APIs (CAAnimation, ObjectAnimator/SpringAnimation). No JS animation loop, no worklets, no shared values.
65
+
-**Simple** — CSS-transition-like API. Set target values, get smooth animations. One component, a few props.
66
+
-**Lightweight** — Minimal native code, no C++ runtime, no custom animation engine. Just a thin declarative wrapper around what the OS already provides.
67
+
-**Interruptible** — Changing values mid-animation smoothly redirects to the new target. No jumps.
68
+
69
+
### Non-Goals
70
+
71
+
-**Complex gesture-driven animations** — If you need pan/pinch-driven animations, animation worklets, or shared values across components, use [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated).
72
+
-**Layout animations** — Animating width/height/layout changes is not supported.
73
+
-**Shared element transitions** — Use Reanimated or React Navigation's shared element transitions.
74
+
-**Old architecture** — Fabric (new architecture) only.
0 commit comments