Skip to content

Commit 0247b5d

Browse files
docs(skill): version-aware Reanimated default mapping (v2/v3 vs v4) (#39)
Reanimated v4 changed spring defaults significantly (damping 120, stiffness 900, mass 4 β€” critically damped). The skill now detects the Reanimated version from package.json in Phase 1 and uses the correct default table for migration.
1 parent 1392190 commit 0247b5d

1 file changed

Lines changed: 28 additions & 5 deletions

File tree

  • skills/react-native-ease-refactor

β€Žskills/react-native-ease-refactor/SKILL.mdβ€Ž

Lines changed: 28 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,18 @@ Scan the user's project for animation code:
2222
- Also check `package.json` for `"nativewind"` in dependencies
2323
- If NativeWind is detected, set a flag `usesNativeWind = true` for use in Phase 5
2424

25-
2. Use Grep to find all files importing from `react-native-reanimated`:
25+
2. Detect the Reanimated version (needed for default value mapping in Phase 2):
26+
27+
- Read `package.json` and check the `react-native-reanimated` version in `dependencies` or `devDependencies`
28+
- If the version is `^4` or `>=4.0.0`, set `reanimatedVersion = 4`
29+
- Otherwise set `reanimatedVersion = 3` (covers v2/v3 which share the same defaults)
30+
31+
3. Use Grep to find all files importing from `react-native-reanimated`:
2632

2733
- Pattern: `from ['"]react-native-reanimated['"]`
2834
- Search in `**/*.{ts,tsx,js,jsx}`
2935

30-
2. Use Grep to find all files using React Native's built-in `Animated` API:
36+
4. Use Grep to find all files using React Native's built-in `Animated` API:
3137

3238
- Pattern: `from ['"]react-native['"]` that also use `Animated`
3339
- Pattern: `Animated\.View|Animated\.Text|Animated\.Image|Animated\.Value|Animated\.timing|Animated\.spring`
@@ -99,26 +105,43 @@ Use this table to convert Reanimated/Animated patterns to EaseView:
99105

100106
**CRITICAL: Reanimated and EaseView have different defaults. You MUST explicitly set values to preserve the original animation behavior. Do not rely on EaseView defaults matching Reanimated defaults.**
101107

108+
**Use `reanimatedVersion` from Phase 1 to select the correct defaults.**
109+
102110
#### `withSpring` β†’ EaseView spring
103111

104-
| Parameter | Reanimated default | EaseView default | Action |
112+
**Reanimated v2/v3 defaults:**
113+
114+
| Parameter | Reanimated v2/v3 | EaseView default | Action |
105115
|---|---|---|---|
106116
| `damping` | `10` | `15` | **Must set `damping: 10`** |
107117
| `stiffness` | `100` | `120` | **Must set `stiffness: 100`** |
108118
| `mass` | `1` | `1` | Same β€” omit |
109119

120+
**Reanimated v4 defaults:**
121+
122+
| Parameter | Reanimated v4 | EaseView default | Action |
123+
|---|---|---|---|
124+
| `damping` | `120` | `15` | **Must set `damping: 120`** |
125+
| `stiffness` | `900` | `120` | **Must set `stiffness: 900`** |
126+
| `mass` | `4` | `1` | **Must set `mass: 4`** |
127+
128+
Reanimated v4 changed to a critically damped, snappy spring (no bounce) as the default. The rationale was that the old physics-based defaults were too sensitive to start/end conditions. v4 recommends using `duration` + `dampingRatio` instead of raw physics params.
129+
110130
If the source code explicitly sets any of these values, carry them over as-is. If the source relies on Reanimated defaults (no explicit value), set the Reanimated default explicitly on the EaseView transition.
111131

112132
Example β€” bare `withSpring(1)` with no config:
113133
```typescript
114134
// Before (Reanimated)
115135
scale.value = withSpring(1);
116136

117-
// After (EaseView) β€” must set damping: 10, stiffness: 100 to match
137+
// After (EaseView) β€” v2/v3: set damping: 10, stiffness: 100
118138
transition={{ type: 'spring', damping: 10, stiffness: 100 }}
139+
140+
// After (EaseView) β€” v4: set damping: 120, stiffness: 900, mass: 4
141+
transition={{ type: 'spring', damping: 120, stiffness: 900, mass: 4 }}
119142
```
120143

121-
**Note:** Reanimated v3+ uses duration-based spring by default (`duration: 550`, `dampingRatio: 1`) when no physics params are set. If migrating code that uses `withSpring` without any config, use `damping: 10, stiffness: 100` which matches the physics-based fallback. If the code explicitly sets `dampingRatio`/`duration`, convert using: `damping = dampingRatio * 2 * sqrt(stiffness * mass)`.
144+
**Duration-based spring:** Reanimated v3+ also supports `withSpring(target, { duration, dampingRatio })`. If the code explicitly sets `dampingRatio`/`duration`, convert using: `damping = dampingRatio * 2 * sqrt(stiffness * mass)`.
122145

123146
#### `withTiming` β†’ EaseView timing
124147

0 commit comments

Comments
Β (0)