react-native-ease-plugins

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. [email protected]

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:

1. Scan your project for Reanimated/Animated code
2. Classify which animations can be migrated (and which can't, with reasons)
3. Show a migration report with before/after details
4. Let you select which components to migrate
5. 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