react-native-ease skill
A skill that finds Reanimated and Animated code in a project and migrates it to native EaseView components from react-native-ease
- 994 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The skill rewrites component sources with animations and adds imports, so review the changes in git
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/react-native-easeDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The skill rewrites component sources with animations and adds imports, so review the changes in git
This is third-party code. Review the repository files before installing.
What it does
react-native-ease is a declarative animation library for React Native that uses Core Animation on iOS and Animator on Android instead of a JS loop. The repository holds a react-native-ease-refactor skill that migrates existing code to it. It is called as /react-native-ease-refactor in Claude Code and follows six phases strictly. First the skill scans the project for react-native-reanimated and built-in Animated code and detects the Reanimated version and the presence of NativeWind. Then it sorts animations into migratable and not migratable. The latter include Pan and Pinch gestures, worklets, withSequence, complex withDelay chains and animations driven by scroll rather than React state. The report gives the reason for each. After a dry-run report with before-and-after examples you pick the components to migrate. The skill replaces them with EaseView and keeps the rest of the logic, adding the needed import when NativeWind is present. The component takes target values in animate and settings in transition: timing with a duration and bezier curve, spring with stiffness and damping, and repeat and reverse loops. Changing a value mid-animation smoothly redirects it to the new target.
Who it is for. React Native developers whose simple fade, appear and slide animations are written in Reanimated or Animated and drag extra code along.
Good fit when
- A project has dozens of appear, fade and scale animations in Reanimated and you want to drop worklets and shared values
- Before migrating you want a report on which animations move and which do not, with reasons
- The project uses NativeWind and classes must work on animated components
- You want animations on the platform's native APIs without a JS loop
- Animations should move in stages, with components chosen by hand after the report
Not a fit when
- Animations are driven by gestures: pan and pinch stay on Reanimated
- Width, height or layout change: the library does not support layout animations
- You need shared element transitions between screens: the authors point to Reanimated or React Navigation
- The app runs on the old architecture: the library needs the new one, Fabric
Example request
/react-native-ease-refactor Find all Reanimated animations, show a report with reasons for the ones that cannot move, and start migrating after I choose the componentsLimitations
The library works only on the React Native new architecture (Fabric) and cannot animate layout, gestures or shared transitions. The skill migrates only animations that depend on React state and marks the rest as not migratable. The result needs a check in the app: the README has you review the before-and-after examples before applying. The skill installs with the generic npx skills add appandflow/react-native-ease command, and the README has no separate instruction for installing the skill itself.
How to disable. Delete the skill from .claude/skills or .agents/skills. If you no longer want the migration, remove the library with npm uninstall react-native-ease and restore the components through git.
FAQ
How do I install the migration skill?
Run npx skills add appandflow/react-native-ease. Then call it in the agent, for example /react-native-ease-refactor in Claude Code. The library itself installs with npm install react-native-ease.
What does the skill do to my code without my consent?
Nothing. First it prints a dry-run report with before-and-after for each animation and then asks you to pick components. Changes land only in the chosen files.
Which animations will the skill not migrate?
Those driven by gestures (Pan, Pinch, Rotation), using worklets and runOnUI, with withSequence, with a complex withDelay chain, and tied to scroll rather than state. The report gives the reason for each refusal.
How is EaseView different from Reanimated?
EaseView runs an animation on the platform's native APIs when the values in animate change, like a CSS transition. Reanimated is still needed for gestures, layout animation and complex chains.
How do I enable NativeWind?
Add import 'react-native-ease/nativewind' once to the app entry point. The skill detects NativeWind itself and adds this import. For Uniwind import EaseView from react-native-ease/uniwind.
Discussion
No questions or reviews yet.
Related
SkillsAnimations, gestures, on-device AI, audio and live video: 10 Software Mansion skills teach the agent React Native patterns.
Callstack agent skills for React Native
Callstack Agent Skills
Callstack's React Native skills: performance, version upgrades, native app migration, testing and CI
Two skills from the React Navigation team move navigators to static config and upgrade the library to version 7 or 8
Uniwind skills
Uniwind
Two skills for React Native with Tailwind v4: Uniwind styling rules and a step-by-step move of a project off NativeWind
Three skills for Claude Code and Cursor: add Storybook v10 to React Native, write CSF stories and upgrade one version step at a time
A skill for designing mobile app screens: five steps, the 60/30/10 rule, an 8-pixel grid and industry conventions
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| react-native-ease (this card) | no | 994 | |
| React Native Unistyles v3 skill | no | 2,973 | teaches React Native styling through Unistyles, while this skill moves animations to native APIs |
| Motion Design Skill | no | 2,828 | gives general motion-design principles, while this one performs a concrete migration of animation code in React Native |
README in short
The README explains that the library is lightweight and uses platform APIs without a JS loop. Getting started covers installation, the migration skill, NativeWind and Uniwind support and an example. The Why section lists goals and non-goals, and a table shows when to pick Ease and when Reanimated. A guide to timing and spring animations follows.
README badge
Original SKILL.md
---
name: react-native-ease-refactor
description: Scan for Animated/Reanimated code and migrate to EaseView
user-invocable: true
---
# react-native-ease refactor
You are a migration assistant that converts `react-native-reanimated` and React Native's built-in `Animated` API code to `react-native-ease` `EaseView` components.
Follow these 6 phases exactly. Do not skip phases or reorder them.
---
## Phase 1: Discovery
Scan the user's project for animation code:
1. Use Grep to detect if the project uses NativeWind:
- Pattern: `from ['"]nativewind['"]` in `**/*.{ts,tsx,js,jsx}`
- Also check `package.json` for `"nativewind"` in dependencies
- If NativeWind is detected, set a flag `usesNativeWind = true` for use in Phase 5
2. Detect the Reanimated version (needed for default value mapping in Phase 2):
- Read `package.json` and check the `react-native-reanimated` version in `dependencies` or `devDependencies`
- If the version is `^4` or `>=4.0.0`, set `reanimatedVersion = 4`
- Otherwise set `reanimatedVersion = 3` (covers v2/v3 which share the same defaults)
3. Use Grep to find all files importing from `react-native-reanimated`:
- Pattern: `from ['"]react-native-reanimated['"]`
- Search in `**/*.{ts,tsx,js,jsx}`
4. Use Grep to find all files using React Native's built-in `Animated` API:
- Pattern: `from ['"]react-native['"]` that also use `Animated`
- Pattern: `Animated\.View|Animated\.Text|Animated\.Image|Animated\.Value|Animated\.timing|Animated\.spring`
3. Use Grep to find files already using `react-native-ease` (to avoid re-migrating):
- Pattern: `from ['"]react-native-ease['"]`
4. Read each file that contains animation code. Build a list of components with their animation patterns.