Skip to content

Commit 78f9763

Browse files
Update README.md
1 parent eae4dd6 commit 78f9763

1 file changed

Lines changed: 26 additions & 15 deletions

File tree

README.md

Lines changed: 26 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,25 @@
1-
# 🍃 react-native-ease
1+
<img width="100%" height="auto" alt="react-native-ease by App & Flow" src="https://github.com/user-attachments/assets/8006ed51-d373-4c97-9e80-9937eb9a569e" />
22

33
Lightweight declarative animations powered by platform APIs. Uses Core Animation on iOS and Animator on Android — zero JS overhead.
44

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
67

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.
8+
## Demo
119

12-
## Non-Goals
10+
![ease-demo](https://github.com/user-attachments/assets/09658b07-803e-4b7e-a23c-831a6c63df84)
1311

14-
- **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
1813

19-
## Installation
14+
### Installation
2015

2116
```bash
2217
npm install react-native-ease
2318
# or
2419
yarn add react-native-ease
2520
```
2621

27-
## Migration Skill
22+
### Migration Skill
2823

2924
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.
3025

@@ -42,7 +37,7 @@ The skill will:
4237
4. Let you select which components to migrate
4338
5. Apply the changes, preserving all non-animation logic
4439

45-
## Quick Start
40+
### Example
4641

4742
```tsx
4843
import { EaseView } from 'react-native-ease';
@@ -62,7 +57,23 @@ function FadeCard({ visible, children }) {
6257

6358
`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.
6459

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.
75+
76+
### When to use this vs Reanimated
6677

6778
| Use case | Ease | Reanimated |
6879
| -------------------------------------- | ---- | ---------- |

0 commit comments

Comments
 (0)