Lightweight declarative animations powered by platform APIs. Uses Core Animation on iOS and Animator on Android — zero JS overhead.
About
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. Need a hand? Let’s build together. team@appandflow.com
Demo

Getting started
Installation
npm install react-native-ease
# or
yarn add react-native-ease
Migration Skill
If you're already using react-native-reanimated or React Native's Animated API, this project includes an Agent Skill that scans your codebase for animations that can be replaced with react-native-ease and migrates them automatically.
npx skills add appandflow/react-native-ease
Then invoke the skill in your agent (e.g., /react-native-ease-refactor in Claude Code).
The skill will:
- Scan your project for Reanimated/Animated code
- Classify which animations can be migrated (and which can't, with reasons)
- Show a migration report with before/after details
- Let you select which components to migrate
- Apply the changes, preserving all non-animation logic
NativeWind Support
If you're using NativeWind (v4+), add this import once in your app's entry point (e.g., _layout.tsx or App.tsx):
import 'react-native-ease/nativewind';
This registers EaseView with NativeWind's cssInterop so className is properly converted to styles:
<EaseView
className="flex-1 bg-white rounded-2xl p-4"
animate={{ opacity: visible ? 1 : 0 }}
transition={{ type: 'timing', duration: 300 }}
>
{children}
</EaseView>
Tip: If you use the migration skill, it detects NativeWind automatically and adds this import for you.
Uniwind Support
If you're using Uniwind, first follow the
Uniwind quickstart to install and
configure Uniwind in your app. That setup includes the required CSS entry file,
app-root CSS import, and bundler configuration.
Once Uniwind is set up, import EaseView from the Uniwind entry point:
import { EaseView } from 'react-native-ease/uniwind';
This wraps EaseView with Uniwind's withUniwind(...) so className is converted to styles:
<EaseView
className="flex-1 bg-white rounded-2xl p-4"
animate={{ opacity: visible ? 1 : 0 }}
transition={{ type: 'timing', duration: 300 }}
>
{children}
</EaseView>
Example
import { EaseView } from 'react-native-ease';
function FadeCard({ visible, children }) {
return (
<EaseView
animate={{ opacity: visible ? 1 : 0 }}
transition={{ type: 'timing', duration: 300 }}
style={styles.card}
>
{children}
</EaseView>
);
}
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.
Why
Goals
- Fast — Animations run entirely on native platform APIs (CAAnimation, ObjectAnimator/SpringAnimation). No JS animation loop, no worklets, no shared values.
- Simple — CSS-transition-like API. Set target values, get smooth animations. One component, a few props.
- Lightweight — Minimal native code, no C++ runtime, no custom animation engine. Just a thin declarative wrapper around what the OS already provides.
- Interruptible — Changing values mid-animation smoothly redirects to the new target. No jumps.
Non-Goals
- Complex gesture-driven animations — If you need pan/pinch-driven animations, animation worklets, or shared values across components, use react-native-reanimated.
- Layout animations — Animating width/height/layout changes is not supported.
- Shared element transitions — Use Reanimated or React Navigation's shared element transitions.
- Old architecture — Fabric (new architecture) only.
When to use this vs Reanimated
| Use case | Ease | Reanimated |
|---|
| Fade/slide/scale on state change | ✅ | |
| Enter/exit animations | ✅ | |
| Gesture-driven animations (pan, pinch) | | ✅ |
| Layout animations (width, height) | | ✅ |
| Complex interpolations & chaining | | ✅ |
Guide
Timing Animations