Documentation Index
Fetch the complete documentation index at: https://mintlify.com/AppAndFlow/react-native-ease/llms.txt
Use this file to discover all available pages before exploring further.
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. Install the skill
npx skills add appandflow/react-native-ease
Invoke the skill in your agent
Run the following slash command in Claude Code (or your configured agent):/react-native-ease-refactor
Review the migration report
The skill scans your project and classifies every animation it finds:
- Scans your project for Reanimated and
Animated API usage
- Classifies which animations can be migrated (and which can’t, with reasons)
- Shows a migration report with before/after details for each component
- Lets you select which components to migrate
- Applies the changes, preserving all non-animation logic
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>
);
}
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>
);
}
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>
);
}
import { EaseView } from 'react-native-ease';
function SlideCard({ isOpen, children }) {
return (
<EaseView
animate={{ translateX: isOpen ? 200 : 0 }}
transition={{ type: 'spring', damping: 15, stiffness: 120, mass: 1 }}
style={styles.card}
>
{children}
</EaseView>
);
}
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>
);
}
import { EaseView } from 'react-native-ease';
function FadeInCard({ children }) {
return (
<EaseView
initialAnimate={{ opacity: 0, translateY: 20 }}
animate={{ opacity: 1, translateY: 0 }}
transition={{ type: 'spring', damping: 15, stiffness: 120, mass: 1 }}
style={styles.card}
>
{children}
</EaseView>
);
}
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
