### Install Dependencies and Start Local Development
Source: https://github.com/appandflow/react-native-ease/blob/main/docs/README.md
Run these commands to install project dependencies and start the local development server.
```bash
yarn
yarn start
```
--------------------------------
### Set Up Local Docs Development
Source: https://github.com/appandflow/react-native-ease/blob/main/docs/docs/contributing.mdx
Navigate to the docs directory, install dependencies with yarn, and start the local development server.
```bash
cd docs
yarn
yarn start
```
--------------------------------
### Start Example App Packager
Source: https://github.com/appandflow/react-native-ease/blob/main/CONTRIBUTING.md
Starts the Metro server for the example application. Changes to JavaScript code in the library will be reflected without a rebuild.
```sh
yarn example start
```
--------------------------------
### Start Metro Bundler for Example App
Source: https://github.com/appandflow/react-native-ease/blob/main/CLAUDE.md
Start the Metro bundler to run the example application. This is necessary for developing and testing the app on simulators or devices.
```sh
yarn example start
```
--------------------------------
### Run Example App on iOS
Source: https://github.com/appandflow/react-native-ease/blob/main/CONTRIBUTING.md
Builds and runs the example application on an iOS simulator or device.
```sh
yarn example ios
```
--------------------------------
### Build and Run Example App on iOS
Source: https://github.com/appandflow/react-native-ease/blob/main/CLAUDE.md
Build and run the example application on an iOS simulator or device. This command compiles the native iOS code and launches the app.
```sh
yarn example ios
```
--------------------------------
### Install Dependencies with Yarn
Source: https://github.com/appandflow/react-native-ease/blob/main/CLAUDE.md
Use this command to install all project dependencies. Ensure you have Yarn installed.
```sh
yarn
```
--------------------------------
### Run Example App on Android
Source: https://github.com/appandflow/react-native-ease/blob/main/CONTRIBUTING.md
Builds and runs the example application on an Android device or emulator.
```sh
yarn example android
```
--------------------------------
### Build and Run Example App on Android
Source: https://github.com/appandflow/react-native-ease/blob/main/CLAUDE.md
Build and run the example application on an Android emulator or device. This command compiles the native Android code and launches the app.
```sh
yarn example android
```
--------------------------------
### Install Dependencies with Yarn Workspaces
Source: https://github.com/appandflow/react-native-ease/blob/main/CONTRIBUTING.md
Run this command in the root directory to install all project dependencies, leveraging Yarn workspaces.
```sh
yarn
```
--------------------------------
### Start Metro Bundler
Source: https://github.com/appandflow/react-native-ease/blob/main/example/README.md
Run this command from the root of your React Native project to start the Metro bundler, which is essential for building and running your app.
```sh
# Using npm
npm start
# OR using Yarn
yarn start
```
--------------------------------
### Install react-native-ease
Source: https://github.com/appandflow/react-native-ease/blob/main/docs/docs/getting-started.mdx
Use npm or yarn to add react-native-ease to your project dependencies.
```bash
npm install react-native-ease
# or
yarn add react-native-ease
```
--------------------------------
### Install CocoaPods Dependencies
Source: https://github.com/appandflow/react-native-ease/blob/main/example/README.md
Before running the iOS app, install CocoaPods dependencies. Run 'bundle install' once to install the bundler, and 'bundle exec pod install' every time native dependencies are updated.
```sh
bundle install
```
```sh
bundle exec pod install
```
--------------------------------
### Project Structure of react-native-ease
Source: https://github.com/appandflow/react-native-ease/blob/main/AGENTS.md
Illustrates the directory and file organization for the react-native-ease library and its example application.
```plaintext
src/ # TypeScript source (library)
EaseView.tsx # React component — flattens props to native
EaseViewNativeComponent.ts # Codegen spec — defines native props/events
types.ts # Public TypeScript types
index.tsx # Public exports
__tests__/ # Jest tests
ios/
EaseView.h # Native view header (ObjC++)
EaseView.mm # Native view implementation (Core Animation)
android/src/main/java/com/ease/
EaseView.kt # Native view (ObjectAnimator/SpringAnimation)
EaseViewManager.kt # ViewManager with @ReactProp setters
EasePackage.kt # Package registration
example/ # Demo app (separate workspace)
src/App.tsx # Main demo screen with animation examples
src/ComparisonScreen.tsx # Comparison with Reanimated
src/components/ # Shared demo components (Section, Button, TabBar)
```
--------------------------------
### Install Agent Skill for Migration
Source: https://github.com/appandflow/react-native-ease/blob/main/docs/docs/getting-started.mdx
Use npx to add the react-native-ease Agent Skill to your project for automatic migration of animations.
```bash
npx skills add appandflow/react-native-ease
```
--------------------------------
### Enter Animations with EaseView
Source: https://github.com/appandflow/react-native-ease/blob/main/README.md
Use 'initialAnimate' to set starting values for animations that occur on mount. The view animates from 'initialAnimate' to 'animate' values. Without 'initialAnimate', the view renders immediately at 'animate' values.
```tsx
// Fade in and slide up on mount
```
--------------------------------
### Install Dependencies and Run Tests
Source: https://github.com/appandflow/react-native-ease/blob/main/AGENTS.md
Use these yarn commands to manage project dependencies, run tests, and perform code quality checks. Ensure formatting is fixed before linting.
```sh
yarn # Install dependencies
yarn test # Jest tests (JS layer)
yarn lint # ESLint + TypeScript check
yarn format:check # Prettier + clang-format check
yarn format:write # Auto-fix formatting
yarn prepare # Build JS module (bob build)
yarn example start # Start Metro for example app
yarn example ios # Build and run example on iOS
yarn example android # Build and run example on Android
```
```sh
yarn format:write && yarn lint && yarn test
```
--------------------------------
### User Confirmation for Component Migration
Source: https://github.com/appandflow/react-native-ease/blob/main/skills/react-native-ease-refactor/SKILL.md
Use the AskUserQuestion tool to get user confirmation on which components to migrate. Ensure multiSelect is true and provide a clear question with options.
```json
{
"questions": [
{
"header": "Migrate",
"question": "Which components should be migrated to EaseView? All are selected — deselect any to skip.",
"multiSelect": true,
"options": [
{
"label": "AnimatedButton",
"description": "src/components/simple/animated-button.tsx — spring scale on press"
},
{
"label": "Collapsible",
"description": "src/components/ui/collapsible.tsx — fade-in entering animation"
}
]
}
]
}
```
--------------------------------
### Enter Animations with EaseView
Source: https://github.com/appandflow/react-native-ease/blob/main/docs/docs/usage.mdx
Applies enter animations to EaseView using spring physics for a smooth transition. This example animates opacity and translateY.
```tsx
```
--------------------------------
### Looping Animations with EaseView
Source: https://github.com/appandflow/react-native-ease/blob/main/docs/docs/usage.mdx
Configures EaseView to loop animations. Requires `initialAnimate` to set the starting value. Looping is not supported for spring animations.
```tsx
```
--------------------------------
### Run Linting and Type Checks
Source: https://github.com/appandflow/react-native-ease/blob/main/CONTRIBUTING.md
Executes ESLint and TypeScript checks for both the library and the example app to ensure code quality.
```sh
yarn lint
```
--------------------------------
### Looping Animations with EaseView
Source: https://github.com/appandflow/react-native-ease/blob/main/README.md
Implement looping animations using the 'loop' property in the transition config. Use 'repeat' to restart from the beginning or 'reverse' to alternate direction. Requires 'initialAnimate' to define the starting value. Spring animations do not support looping.
```tsx
// Pulsing opacity
```
```tsx
// Marquee-style scroll
```
--------------------------------
### Build and Run iOS App
Source: https://github.com/appandflow/react-native-ease/blob/main/example/README.md
Use this command to build and run your React Native application on an iOS simulator or device after installing CocoaPods dependencies.
```sh
# Using npm
npm run ios
# OR using Yarn
yarn ios
```
--------------------------------
### Prop Flattening Example in react-native-ease
Source: https://github.com/appandflow/react-native-ease/blob/main/AGENTS.md
Shows how structured animation and transition props are flattened into individual native props for the EaseView component.
```javascript
animate={{ opacity: 0.5, scale: 1.2 }} → animateOpacity=0.5, animateScale=1.2
transition={{ type: 'spring', damping: 10 }} → transitionType="spring", transitionDamping=10
```
--------------------------------
### Border Animation
Source: https://github.com/appandflow/react-native-ease/blob/main/docs/docs/usage.mdx
Animate border properties like `borderWidth` and `borderColor`. This example uses a spring transition for the border.
```tsx
```
--------------------------------
### Transform Origin Configuration for EaseView
Source: https://github.com/appandflow/react-native-ease/blob/main/docs/docs/usage.mdx
Sets the transform origin for animations in EaseView. This example rotates an element around its top-left corner when a state variable `isOpen` changes.
```tsx
```
--------------------------------
### Staggered Enter Animations with Delay
Source: https://github.com/appandflow/react-native-ease/blob/main/README.md
Utilize the 'delay' property in the transition config to postpone animation starts, ideal for staggering enter animations across multiple elements. Works with both timing and spring transitions.
```tsx
// Staggered fade-in list
{items.map((item, i) => (
{item.label}
))}
```
--------------------------------
### Delaying Entering Animations in Reanimated
Source: https://github.com/appandflow/react-native-ease/blob/main/skills/react-native-ease-refactor/SKILL.md
Use the `.delay()` method on Reanimated entering presets to introduce a delay before an animation starts. This is useful for sequencing animations.
```javascript
entering={FadeIn.delay(ms)}
```
--------------------------------
### Build Project
Source: https://github.com/appandflow/react-native-ease/blob/main/docs/README.md
Execute this command to build the project for production.
```bash
yarn build
```
--------------------------------
### EaseView with Style and Animation
Source: https://github.com/appandflow/react-native-ease/blob/main/README.md
Demonstrates using EaseView with both 'style' for static properties like background and padding, and 'animate' for dynamic properties like translateY. Opacity in 'style' works correctly here as it's not animated.
```tsx
// opacity in style works because only translateY is animated
Notification card
```
--------------------------------
### EaseView Spring Transition Configuration
Source: https://github.com/appandflow/react-native-ease/blob/main/skills/react-native-ease-refactor/SKILL.md
Configure spring-based transitions for EaseView. Adjust damping, stiffness, mass, and delay for dynamic animations.
```typescript
transition={
type: 'spring',
damping: 15, // default 15
stiffness: 120, // default 120
mass: 1, // default 1
delay: 0, // ms, default 0
}
```
--------------------------------
### EaseView Timing Transition Configuration
Source: https://github.com/appandflow/react-native-ease/blob/main/skills/react-native-ease-refactor/SKILL.md
Configure timing-based transitions for EaseView. Specify duration, easing function, delay, and loop behavior.
```typescript
transition={
type: 'timing',
duration: 300, // ms, default 300
easing: 'easeInOut', // 'linear' | 'easeIn' | 'easeOut' | 'easeInOut' | [x1,y1,x2,y2]
delay: 0, // ms, default 0
loop: 'repeat', // 'repeat' | 'reverse' — requires initialAnimate
}
```
--------------------------------
### Build JavaScript Module
Source: https://github.com/appandflow/react-native-ease/blob/main/CLAUDE.md
Build the JavaScript module using bob. This command is typically run before publishing or testing.
```sh
yarn prepare
```
--------------------------------
### EaseView None Transition Configuration
Source: https://github.com/appandflow/react-native-ease/blob/main/skills/react-native-ease-refactor/SKILL.md
Configure an instant transition for EaseView by setting the type to 'none'.
```typescript
transition={{ type: 'none' }}
```
--------------------------------
### Spring Transition Configuration
Source: https://github.com/appandflow/react-native-ease/blob/main/README.md
Configure spring physics-based animations with damping, stiffness, mass, and delay. Default values are specified for each parameter.
```typescript
{
type: 'spring';
damping?: number; // default: 15
stiffness?: number; // default: 120
mass?: number; // default: 1
delay?: number; // default: 0 (ms)
}
```
--------------------------------
### Timing Transition Configuration
Source: https://github.com/appandflow/react-native-ease/blob/main/README.md
Configure timing-based animations with duration, easing, delay, and looping options. Defaults are provided for each property.
```typescript
{
type: 'timing';
duration?: number; // default: 300 (ms)
easing?: EasingType; // default: 'easeInOut' — preset name or [x1, y1, x2, y2]
delay?: number; // default: 0 (ms)
loop?: 'repeat' | 'reverse'; // default: none
}
```
--------------------------------
### Basic CSS Styling for Ease App
Source: https://github.com/appandflow/react-native-ease/blob/main/example/public/index.html
Applies full height to html and body, hides overflow, sets background color, and configures the root element for flex display.
```css
Ease html, body { height: 100%; }
body { overflow: hidden; background-color: #1a1a2e; }
#root { display: flex; height: 100%; flex: 1; }
```
--------------------------------
### Pre-commit Checklist Execution
Source: https://github.com/appandflow/react-native-ease/blob/main/CLAUDE.md
Run this command before committing to ensure code formatting and linting checks pass. It's recommended to run `yarn format:write` first.
```sh
yarn format:write && yarn lint && yarn test
```
--------------------------------
### Handle Entering Animations with EaseView
Source: https://github.com/appandflow/react-native-ease/blob/main/skills/react-native-ease-refactor/SKILL.md
Convert 'entering' animations like FadeIn to initial and animate opacity props on EaseView.
```typescript
// entering={FadeIn} → initialAnimate={{ opacity: 0 }} on the EaseView + animate={{ opacity: 1 }}
```
--------------------------------
### Common Scripts in package.json
Source: https://github.com/appandflow/react-native-ease/blob/main/CONTRIBUTING.md
Overview of frequently used scripts defined in the root package.json for managing dependencies, code quality, testing, and building.
```json
- yarn: install dependencies for the workspace.
- yarn format:check: check Prettier and clang-format.
- yarn format:write: write Prettier and clang-format fixes.
- yarn lint: run ESLint and TypeScript checks for the library and example app.
- yarn test: run the Jest test suite.
- yarn prepare: build the library with `react-native-builder-bob`.
- yarn example start: start the Metro server for the example app.
- yarn example ios: run the example app on iOS.
- yarn example android: run the example app on Android.
```
--------------------------------
### Print Migration Progress
Source: https://github.com/appandflow/react-native-ease/blob/main/skills/react-native-ease-refactor/SKILL.md
Provide feedback on the migration progress by printing the status for each component.
```text
[1/N] Migrated ComponentName in path/to/file.tsx
```
--------------------------------
### TimingTransition Configuration
Source: https://github.com/appandflow/react-native-ease/blob/main/docs/docs/api-reference.mdx
Configure a timing transition with duration, easing, delay, and loop options. Use this for animations with a fixed duration.
```tsx
{
type: 'timing';
duration?: number;
easing?: EasingType;
delay?: number;
loop?: 'repeat' | 'reverse';
}
```
--------------------------------
### Migrate Legacy RN `Animated.spring` to EaseView
Source: https://github.com/appandflow/react-native-ease/blob/main/skills/react-native-ease-refactor/SKILL.md
When migrating from the legacy `Animated.spring` to EaseView, map `friction` to `damping` and `tension` to `stiffness`. Set `stiffness: 40` and `damping: 7` to match the default RN Animated parameters.
```typescript
// After (EaseView) — must set stiffness: 40, damping: 7
transition={{ type: 'spring', stiffness: 40, damping: 7 }}
```
--------------------------------
### Migrate Reanimated `withSpring` to EaseView (v4)
Source: https://github.com/appandflow/react-native-ease/blob/main/skills/react-native-ease-refactor/SKILL.md
For Reanimated v4's `withSpring`, explicitly set `damping: 120`, `stiffness: 900`, and `mass: 4` on EaseView to match the new default physics parameters.
```typescript
// After (EaseView) — v4: set damping: 120, stiffness: 900, mass: 4
transition={{ type: 'spring', damping: 120, stiffness: 900, mass: 4 }}
```
--------------------------------
### Style Handling and Animation Priority in EaseView
Source: https://github.com/appandflow/react-native-ease/blob/main/docs/docs/usage.mdx
Demonstrates how EaseView handles style properties. If a property exists in both `style` and `animate`, the animated value takes precedence, and the style value is ignored.
```tsx
Notification card
```
--------------------------------
### Migrate Reanimated `withSpring` to EaseView (v2/v3)
Source: https://github.com/appandflow/react-native-ease/blob/main/skills/react-native-ease-refactor/SKILL.md
When migrating from Reanimated v2/v3's `withSpring` to EaseView, explicitly set `damping: 10` and `stiffness: 100` to match Reanimated's defaults if no configuration was provided in the source.
```typescript
// Before (Reanimated)
scale.value = withSpring(1);
// After (EaseView) — v2/v3: set damping: 10, stiffness: 100
transition={{ type: 'spring', damping: 10, stiffness: 100 }}
```
--------------------------------
### Basic Fade Animation with EaseView
Source: https://github.com/appandflow/react-native-ease/blob/main/docs/docs/getting-started.mdx
Use EaseView to create fade-in/fade-out animations by changing the opacity prop. Animations are controlled by the `animate` and `transition` props.
```tsx
import { EaseView } from 'react-native-ease';
function FadeCard({ visible, children }) {
return (
{children}
);
}
```
--------------------------------
### Per-Property Transitions with Default Fallback
Source: https://github.com/appandflow/react-native-ease/blob/main/README.md
Define a default transition for properties not explicitly listed, and specify custom transitions for others like opacity. The 'default' key acts as a fallback.
```tsx
```
--------------------------------
### EaseView with Hardware Layer (Android)
Source: https://github.com/appandflow/react-native-ease/blob/main/docs/docs/api-reference.mdx
Enable hardware acceleration for animations on Android by setting `useHardwareLayer`. This can improve performance for opacity, scale, and rotation animations but uses more GPU memory.
```tsx
```
--------------------------------
### Hardware Layers (Android)
Source: https://github.com/appandflow/react-native-ease/blob/main/docs/docs/api-reference.mdx
Explains the use of hardware layers for optimizing animations on Android.
```APIDOC
## Hardware layers (Android)
Setting `useHardwareLayer` rasterizes the view into a GPU texture for the duration of the animation.
```tsx
```
**Trade-offs:**
- Faster rendering for opacity, scale, and rotation animations.
- Uses additional GPU memory for the off-screen texture.
- Overflowing children are clipped by the texture.
```
--------------------------------
### Check Code Formatting
Source: https://github.com/appandflow/react-native-ease/blob/main/CONTRIBUTING.md
Verifies that the code adheres to the project's formatting standards using Prettier and clang-format.
```sh
yarn format:check
```
--------------------------------
### TransitionMap
Source: https://github.com/appandflow/react-native-ease/blob/main/docs/docs/api-reference.mdx
A map that allows applying different transition configurations to specific property categories.
```APIDOC
## TransitionMap
A per-property map that applies different transition configs to different property categories.
### Categories
- **`default`** - Fallback for categories not explicitly listed.
- **`transform`** - `translateX`, `translateY`, `scaleX`, `scaleY`, `rotate`, `rotateX`, `rotateY`.
- **`opacity`** - `opacity`.
- **`borderRadius`** - `borderRadius`.
- **`backgroundColor`** - `backgroundColor`.
- **`border`** - `borderWidth`, `borderColor`.
- **`shadow`** - `shadowOpacity`, `shadowRadius`, `shadowColor`, `shadowOffset`, `elevation`.
```
--------------------------------
### EaseView Transition Types
Source: https://github.com/appandflow/react-native-ease/blob/main/skills/react-native-ease-refactor/SKILL.md
Details the available transition types for animations in EaseView: Timing, Spring, and None.
```APIDOC
## EaseView Transition Types
**Timing:**
```typescript
transition={{
type: 'timing',
duration: 300, // ms, default 300
easing: 'easeInOut', // 'linear' | 'easeIn' | 'easeOut' | 'easeInOut' | [x1,y1,x2,y2]
delay: 0, // ms, default 0
loop: 'repeat', // 'repeat' | 'reverse' — requires initialAnimate
}}
```
**Spring:**
```typescript
transition={{
type: 'spring',
damping: 15, // default 15
stiffness: 120, // default 120
mass: 1, // default 1
delay: 0, // ms, default 0
}}
```
**None (instant):**
```typescript
transition={{ type: 'none' }}
```
```
--------------------------------
### EaseView with Conflicting Style and Animation Properties
Source: https://github.com/appandflow/react-native-ease/blob/main/README.md
Illustrates a scenario where 'opacity' is defined in both 'animate' and 'style'. The 'animate' value takes priority, and the 'opacity' from 'style' is stripped, triggering a development warning.
```tsx
// ⚠️ opacity is in both — animate wins, style opacity is stripped, dev warning logged
```
--------------------------------
### Replace Animated.View with EaseView
Source: https://github.com/appandflow/react-native-ease/blob/main/skills/react-native-ease-refactor/SKILL.md
Substitute 'Animated.View' with 'EaseView' and adapt the style and animation props.
```typescript
```
--------------------------------
### NoneTransition Configuration
Source: https://github.com/appandflow/react-native-ease/blob/main/docs/docs/api-reference.mdx
Apply values instantly with no animation. Use this for immediate state changes.
```tsx
{
type: 'none';
}
```
--------------------------------
### SpringTransition Configuration
Source: https://github.com/appandflow/react-native-ease/blob/main/docs/docs/api-reference.mdx
Configure a spring transition with damping, stiffness, mass, and delay. Ideal for natural-feeling, bouncy animations.
```tsx
{
type: 'spring';
damping?: number;
stiffness?: number;
mass?: number;
delay?: number;
}
```
--------------------------------
### TransitionMap
Source: https://github.com/appandflow/react-native-ease/blob/main/README.md
A map that allows specifying different transition configurations for different categories of properties. This enables fine-grained control over how various visual elements animate.
```APIDOC
## TransitionMap
### Description
A per-property map that applies different transition configs to different property categories.
### Categories
| Key | Properties |
| ----------------- | ---------------------------------------------------------------- |
| `default` | Fallback for categories not explicitly listed |
| `transform` | translateX, translateY, scaleX, scaleY, rotate, rotateX, rotateY |
| `opacity` | opacity |
| `borderRadius` | borderRadius |
| `backgroundColor` | backgroundColor |
| `border` | borderWidth, borderColor |
| `shadow` | shadowOpacity, shadowRadius, shadowColor, shadowOffset, elevation |
```
--------------------------------
### Delayed Animations in a List with EaseView
Source: https://github.com/appandflow/react-native-ease/blob/main/docs/docs/usage.mdx
Implements staggered animations for a list of items using EaseView. Each item's animation is delayed based on its index, creating a sequential entry effect.
```tsx
{item.label}
```
--------------------------------
###
Source: https://github.com/appandflow/react-native-ease/blob/main/README.md
EaseView is a View component that animates property changes using native platform APIs. It accepts standard ViewStyle properties and allows for animated values to take precedence over style values.
```APIDOC
##
### Description
A View that animates property changes using native platform APIs.
### Props
- **`animate`** (AnimateProps) - Target values for animated properties.
- **`initialAnimate`** (AnimateProps) - Starting values for enter animations (animates to `animate` on mount).
- **`transition`** (Transition) - Animation configuration — a single config (timing, spring, or none) or a [per-property map](#per-property-transitions).
- **`onTransitionEnd`** ((event) => void) - Called when all animations complete with `{ finished: boolean }`.
- **`transformOrigin`** ({ x?: number; y?: number }) - Pivot point for scale/rotation as 0–1 fractions. Default: `{ x: 0.5, y: 0.5 }` (center).
- **`transformPerspective`** (number) - Camera distance for 3D transforms (`rotateX`, `rotateY`). See [Transform Perspective](#transform-perspective). Default: `1280`.
- **`useHardwareLayer`** (boolean) - Android only — rasterize to GPU texture during animations. See [Hardware Layers](#hardware-layers-android). Default: `false`.
- **`className`** (string) - NativeWind / Uniwind / Tailwind CSS class string. Requires NativeWind or Uniwind in your project.
- **`style`** (ViewStyle) - Non-animated styles (layout, colors, borders, etc.).
- **`children`** (ReactNode) - Child elements.
- **`...rest`** (ViewProps) - All other standard View props.
```
--------------------------------
### Run Jest Tests
Source: https://github.com/appandflow/react-native-ease/blob/main/CLAUDE.md
Execute the JavaScript layer unit tests using Jest. This command runs tests located in the `src/__tests__/` directory.
```sh
yarn test
```
--------------------------------
### Spring Animation Configuration
Source: https://github.com/appandflow/react-native-ease/blob/main/README.md
Implement physics-based spring animations for natural motion. Parameters like 'damping', 'stiffness', and 'mass' control the friction, spring constant, and momentum, respectively.
```tsx
```
```javascript
// Snappy (no bounce)
{ type: 'spring', damping: 20, stiffness: 300, mass: 1 }
```
```javascript
// Gentle bounce
{ type: 'spring', damping: 12, stiffness: 120, mass: 1 }
```
```javascript
// Bouncy
{ type: 'spring', damping: 8, stiffness: 200, mass: 1 }
```
```javascript
// Slow and heavy
{ type: 'spring', damping: 20, stiffness: 60, mass: 2 }
```
--------------------------------
### Migrate Legacy RN `Animated.timing` to EaseView
Source: https://github.com/appandflow/react-native-ease/blob/main/skills/react-native-ease-refactor/SKILL.md
To migrate from the legacy `Animated.timing` to EaseView, set `duration: 500` to match the default duration. The default easing curves are the same, so no explicit `easing` parameter is needed.
```typescript
// After (EaseView) — must set duration: 500
transition={{ type: 'timing', duration: 500 }}
```
--------------------------------
### Migrate Reanimated `withTiming` to EaseView
Source: https://github.com/appandflow/react-native-ease/blob/main/skills/react-native-ease-refactor/SKILL.md
When migrating from Reanimated's `withTiming` to EaseView, explicitly set the `easing` to `[0.455, 0.03, 0.515, 0.955]` to match Reanimated's default quadratic ease-in-out curve if no easing was specified.
```typescript
// Before (Reanimated)
opacity.value = withTiming(1);
// After (EaseView) — must set quad easing to match
transition={{ type: 'timing', duration: 300, easing: [0.455, 0.03, 0.515, 0.955] }}
```
--------------------------------
### Handle Exiting Animations with EaseView
Source: https://github.com/appandflow/react-native-ease/blob/main/skills/react-native-ease-refactor/SKILL.md
Implement exiting animations using state variables, onTransitionEnd, and conditional rendering with EaseView.
```typescript
const [visible, setVisible] = useState(true);
const [mounted, setMounted] = useState(true);
// When triggering exit:
setVisible(false);
// On the EaseView:
{
mounted && (
{
if (finished && !visible) setMounted(false);
}}>
...
);
}
```
--------------------------------
### EaseView Animatable Properties
Source: https://github.com/appandflow/react-native-ease/blob/main/skills/react-native-ease-refactor/SKILL.md
Lists all properties supported for animation within the `animate` prop of EaseView, along with their types, defaults, and notes.
```APIDOC
## EaseView Animatable Properties
All properties in the `animate` prop:
| Property | Type | Default | Notes |
| ----------------- | ------------ | --------------- | ------------------------------------ |
| `opacity` | `number` | `1` | 0–1 range |
| `translateX` | `number` | `0` | In DIPs (density-independent pixels) |
| `translateY` | `number` | `0` | In DIPs |
| `scale` | `number` | `1` | Shorthand for scaleX + scaleY |
| `scaleX` | `number` | `1` | Overrides scale for X axis |
| `scaleY` | `number` | `1` | Overrides scale for Y axis |
| `rotate` | `number` | `0` | Z-axis rotation in degrees |
| `rotateX` | `number` | `0` | X-axis rotation in degrees (3D) |
| `rotateY` | `number` | `0` | Y-axis rotation in degrees (3D) |
| `borderRadius` | `number` | `0` | In pixels |
| `backgroundColor` | `ColorValue` | `'transparent'` | Any RN color value |
| `borderWidth` | `number` | `0` | In pixels |
| `borderColor` | `ColorValue` | `'black'` | Any RN color value |
| `shadowOpacity` | `number` | `0` | 0–1 (iOS only) |
| `shadowRadius` | `number` | `0` | In pixels (iOS only) |
| `shadowColor` | `ColorValue` | `'black'` | Any RN color value (iOS only) |
| `shadowOffset` | `object` | `{width:0,height:0}` | `{ width, height }` (iOS only) |
| `elevation` | `number` | `0` | Android material shadow |
```
--------------------------------
### Auto-fix Code Formatting
Source: https://github.com/appandflow/react-native-ease/blob/main/CLAUDE.md
Automatically fix code formatting issues using Prettier and clang-format. Run this before linting to resolve style conflicts.
```sh
yarn format:write
```
--------------------------------
### Migration Complete Report Format
Source: https://github.com/appandflow/react-native-ease/blob/main/skills/react-native-ease-refactor/SKILL.md
This is the expected format for the final migration report, detailing changed and unchanged components, along with next steps.
```markdown
## Migration Complete
### Changed (X components)
- `path/to/file.tsx` — ComponentName: brief description of what was migrated
### Unchanged (Y components)
- `path/to/file.tsx` — ComponentName: reason skipped
### Next Steps
- Run your app and verify animations visually
- Run your test suite to check for regressions
- If no Reanimated code remains, consider removing `react-native-reanimated` from dependencies
```
--------------------------------
### Spring Animation
Source: https://github.com/appandflow/react-native-ease/blob/main/docs/docs/usage.mdx
Implement spring animations for a more natural, bouncy effect. Parameters like 'damping', 'stiffness', and 'mass' control the physics of the spring.
```tsx
```
--------------------------------
### Add EaseView Import
Source: https://github.com/appandflow/react-native-ease/blob/main/skills/react-native-ease-refactor/SKILL.md
Import EaseView from 'react-native-ease' into your component files when migrating.
```typescript
import { EaseView } from 'react-native-ease';
```
--------------------------------
### Check Code Formatting with Prettier and clang-format
Source: https://github.com/appandflow/react-native-ease/blob/main/CLAUDE.md
Verify code formatting using Prettier for JS/TS and clang-format for other languages. This command checks for style consistency.
```sh
yarn format:check
```
--------------------------------
### Build and Run Android App
Source: https://github.com/appandflow/react-native-ease/blob/main/example/README.md
Execute this command in a separate terminal to build and run your React Native application on an Android device or emulator.
```sh
# Using npm
npm run android
# OR using Yarn
yarn android
```
--------------------------------
### Transition Types
Source: https://github.com/appandflow/react-native-ease/blob/main/docs/docs/api-reference.mdx
Defines different types of transitions that can be applied to animations.
```APIDOC
## Transition Types
### TimingTransition
```tsx
{
type: 'timing';
duration?: number;
easing?: EasingType;
delay?: number;
loop?: 'repeat' | 'reverse';
}
```
### SpringTransition
```tsx
{
type: 'spring';
damping?: number;
stiffness?: number;
mass?: number;
delay?: number;
}
```
### NoneTransition
```tsx
{
type: 'none';
}
```
Applies values instantly with no animation.
```
--------------------------------
### Add NativeWind Import if Needed
Source: https://github.com/appandflow/react-native-ease/blob/main/skills/react-native-ease-refactor/SKILL.md
If 'usesNativeWind' is true, ensure 'react-native-ease/nativewind' is imported once in your project's root entry point.
```typescript
import 'react-native-ease/nativewind'
```