Skip to main content
If your project already uses react-native-reanimated or the built-in Animated API, you can migrate compatible animations to react-native-ease for simpler code and lower overhead.

​
Automatic migration skill

The fastest way to migrate is with the official Agent Skill. It scans your codebase, classifies which animations can be migrated, and applies changes automatically.
The migration skill is built on Agent Skills. It runs inside your AI coding agent (Claude Code, Cursor, etc.) and modifies your source files directly.
1

Install the skill

npx skills add appandflow/react-native-ease
2

Invoke the skill in your agent

Run the following slash command in Claude Code (or your configured agent):
/react-native-ease-refactor
3

Review the migration report

The skill scans your project and classifies every animation it finds:
  1. Scans your project for Reanimated and Animated API usage
  2. Classifies which animations can be migrated (and which can’t, with reasons)
  3. Shows a migration report with before/after details for each component
  4. Lets you select which components to migrate
  5. Applies the changes, preserving all non-animation logic
4

Verify the changes

Run your app on both platforms and confirm the animations behave as expected.

​
Manual migration examples

For targeted changes or when migrating without the skill, use these patterns.

​
From React Native Animated

import { useRef, useEffect } from 'react';
import { Animated } from 'react-native';

function FadeCard({ visible, children }) {
  const opacity = useRef(new Animated.Value(visible ? 1 : 0)).current;

  useEffect(() => {
    Animated.timing(opacity, {
      toValue: visible ? 1 : 0,
      duration: 300,
      useNativeDriver: true,
    }).start();
  }, [visible]);

  return (
    <Animated.View style={[styles.card, { opacity }]}>
      {children}
    </Animated.View>
  );
}

​
From Reanimated useSharedValue / useAnimatedStyle

import { useEffect } from 'react';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
} from 'react-native-reanimated';

function SlideCard({ isOpen, children }) {
  const translateX = useSharedValue(0);

  useEffect(() => {
    translateX.value = withSpring(isOpen ? 200 : 0, {
      damping: 15,
      stiffness: 120,
      mass: 1,
    });
  }, [isOpen]);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: translateX.value }],
  }));

  return (
    <Animated.View style={[styles.card, animatedStyle]}>
      {children}
    </Animated.View>
  );
}

​
From Reanimated enter animation

import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  runOnJS,
} from 'react-native-reanimated';
import { useEffect } from 'react';

function FadeInCard({ children }) {
  const opacity = useSharedValue(0);
  const translateY = useSharedValue(20);

  useEffect(() => {
    opacity.value = withTiming(1, { duration: 300 });
    translateY.value = withTiming(0, { duration: 300 });
  }, []);

  const animatedStyle = useAnimatedStyle(() => ({
    opacity: opacity.value,
    transform: [{ translateY: translateY.value }],
  }));

  return (
    <Animated.View style={[styles.card, animatedStyle]}>
      {children}
    </Animated.View>
  );
}

​
What cannot be migrated

Not every animation is a candidate for migration. The skill will flag these automatically, but it’s worth knowing the boundaries upfront.
The following animation types cannot be migrated to react-native-ease and must remain on Reanimated or the Animated API:
  • Gesture-driven animations — Pan responders, pinch/zoom, velocity-based interactions powered by react-native-gesture-handler
  • Layout animations — Animating width, height, flex, or any property that triggers a layout recalculation pass
  • Shared element transitions — Cross-screen element continuity (Reanimated shared elements, React Navigation transitions)
  • Complex interpolations — Multi-step sequences with withSequence, withDelay, or derived animated values
  • Cross-component shared values — Animations coordinated across multiple components via useSharedValue

​
Installing react-native-ease

If you haven’t installed the library yet, add it before running the migration: 
npm install react-native-ease
# or
yarn add react-native-ease
React Native 0.76+ with the new architecture (Fabric) is required. See Installation for full setup instructions.

Build docs developers (and LLMs) love

Get started for freeTalk to us