AgentToolHub
Skill

react-native-ease-refactor

react-native-ease-refactor — a Claude Code skill from appandflow/react-native-ease

Features

  • ✓Lightweight animations with zero JS overhead
  • ✓Core Animation on iOS and Animator on Android
  • ✓Automatic migration from Reanimated/Animated APIs
  • ✓NativeWind and Uniwind integration support
  • ✓Curated by App & Flow, recommended by Expo

Installation Guide

Installation

bash
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.

bash
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):

    tsx
    import 'react-native-ease/nativewind';

    This registers EaseView with NativeWind's cssInterop so className is properly converted to styles:

    tsx
    <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](#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:

    tsx
    import { EaseView } from 'react-native-ease/uniwind';

    This wraps EaseView with Uniwind's withUniwind(...) so className is converted to styles:

    tsx
    <EaseView
  className="flex-1 bg-white rounded-2xl p-4"
  animate={{ opacity: visible ? 1 : 0 }}
  transition={{ type: 'timing', duration: 300 }}
>
  {children}
</EaseView>

    Example

    tsx
    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.

    Reviews