react-native-ease 0.1.0-alpha.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude-plugin/marketplace.json +21 -0
- package/.claude-plugin/plugin.json +5 -0
- package/README.md +122 -74
- package/android/src/main/java/com/ease/EaseView.kt +111 -16
- package/android/src/main/java/com/ease/EaseViewManager.kt +18 -0
- package/ios/EaseView.mm +99 -2
- package/lib/module/EaseView.js +12 -1
- package/lib/module/EaseView.js.map +1 -1
- package/lib/module/EaseView.web.js +210 -0
- package/lib/module/EaseView.web.js.map +1 -0
- package/lib/module/EaseViewNativeComponent.ts +4 -0
- package/lib/module/index.js +1 -1
- package/lib/module/index.js.map +1 -1
- package/lib/module/types.js +2 -0
- package/lib/typescript/src/EaseView.d.ts.map +1 -1
- package/lib/typescript/src/EaseView.web.d.ts +16 -0
- package/lib/typescript/src/EaseView.web.d.ts.map +1 -0
- package/lib/typescript/src/EaseViewNativeComponent.d.ts +4 -1
- package/lib/typescript/src/EaseViewNativeComponent.d.ts.map +1 -1
- package/lib/typescript/src/types.d.ts +7 -0
- package/lib/typescript/src/types.d.ts.map +1 -1
- package/package.json +7 -5
- package/skills/react-native-ease-refactor/SKILL.md +399 -0
- package/src/EaseView.tsx +15 -0
- package/src/EaseView.web.tsx +295 -0
- package/src/EaseViewNativeComponent.ts +4 -0
- package/src/types.ts +8 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EaseViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/EaseViewNativeComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,SAAS,EACd,KAAK,aAAa,
|
|
1
|
+
{"version":3,"file":"EaseViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/EaseViewNativeComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,SAAS,EACd,KAAK,aAAa,EAClB,KAAK,UAAU,EAChB,MAAM,cAAc,CAAC;AAEtB,MAAM,WAAW,WAAY,SAAQ,SAAS;IAE5C,kBAAkB,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAGrE,cAAc,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IACnE,iBAAiB,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IACtE,iBAAiB,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IACtE,aAAa,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAClE,aAAa,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAClE,aAAa,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAClE,cAAc,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IACnE,cAAc,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IACnE,mBAAmB,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IACxE,sBAAsB,CAAC,EAAE,UAAU,CAAC;IAGpC,qBAAqB,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAC1E,wBAAwB,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAC7E,wBAAwB,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAC7E,oBAAoB,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IACzE,oBAAoB,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IACzE,oBAAoB,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IACzE,qBAAqB,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAC1E,qBAAqB,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAC1E,0BAA0B,CAAC,EAAE,YAAY,CAAC,WAAW,CACnD,YAAY,CAAC,KAAK,EAClB,GAAG,CACJ,CAAC;IACF,6BAA6B,CAAC,EAAE,UAAU,CAAC;IAG3C,cAAc,CAAC,EAAE,YAAY,CAAC,WAAW,CACvC,QAAQ,GAAG,QAAQ,GAAG,MAAM,EAC5B,QAAQ,CACT,CAAC;IACF,kBAAkB,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAEvE,sBAAsB,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IAC3D,iBAAiB,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;IACvE,mBAAmB,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAC1E,cAAc,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IACnE,cAAc,CAAC,EAAE,YAAY,CAAC,WAAW,CACvC,MAAM,GAAG,QAAQ,GAAG,SAAS,EAC7B,MAAM,CACP,CAAC;IACF,eAAe,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAGlE,gBAAgB,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IACrE,gBAAgB,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAGrE,eAAe,CAAC,EAAE,YAAY,CAAC,kBAAkB,CAC/C,QAAQ,CAAC;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC,CAChC,CAAC;IAGF,gBAAgB,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;CAC7D;wBAII,aAAa,CAAC,WAAW,CAAC;AAF/B,wBAEgC"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { ColorValue } from 'react-native';
|
|
1
2
|
/** Cubic bezier control points: [x1, y1, x2, y2]. */
|
|
2
3
|
export type CubicBezier = [number, number, number, number];
|
|
3
4
|
/** Easing curve for timing animations. */
|
|
@@ -11,6 +12,8 @@ export type TimingTransition = {
|
|
|
11
12
|
easing?: EasingType;
|
|
12
13
|
/** Loop mode — 'repeat' restarts from the beginning, 'reverse' alternates direction. */
|
|
13
14
|
loop?: 'repeat' | 'reverse';
|
|
15
|
+
/** Delay in milliseconds before the animation starts. @default 0 */
|
|
16
|
+
delay?: number;
|
|
14
17
|
};
|
|
15
18
|
/** Physics-based spring transition. */
|
|
16
19
|
export type SpringTransition = {
|
|
@@ -21,6 +24,8 @@ export type SpringTransition = {
|
|
|
21
24
|
stiffness?: number;
|
|
22
25
|
/** Mass of the object — higher values mean slower, more momentum. @default 1 */
|
|
23
26
|
mass?: number;
|
|
27
|
+
/** Delay in milliseconds before the animation starts. @default 0 */
|
|
28
|
+
delay?: number;
|
|
24
29
|
};
|
|
25
30
|
/** No transition — values are applied immediately without animation. */
|
|
26
31
|
export type NoneTransition = {
|
|
@@ -62,5 +67,7 @@ export type AnimateProps = {
|
|
|
62
67
|
rotateY?: number;
|
|
63
68
|
/** Border radius in pixels. Uses hardware-accelerated clipping (ViewOutlineProvider on Android, layer.cornerRadius on iOS). @default 0 */
|
|
64
69
|
borderRadius?: number;
|
|
70
|
+
/** Background color. Accepts any React Native color value. @default 'transparent' */
|
|
71
|
+
backgroundColor?: ColorValue;
|
|
65
72
|
};
|
|
66
73
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,qDAAqD;AACrD,MAAM,MAAM,WAAW,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAE3D,0CAA0C;AAC1C,MAAM,MAAM,UAAU,GAClB,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,WAAW,GACX,WAAW,CAAC;AAEhB,oEAAoE;AACpE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,QAAQ,CAAC;IACf,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yCAAyC;IACzC,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,wFAAwF;IACxF,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,qDAAqD;AACrD,MAAM,MAAM,WAAW,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAE3D,0CAA0C;AAC1C,MAAM,MAAM,UAAU,GAClB,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,WAAW,GACX,WAAW,CAAC;AAEhB,oEAAoE;AACpE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,QAAQ,CAAC;IACf,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yCAAyC;IACzC,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,wFAAwF;IACxF,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,uCAAuC;AACvC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,QAAQ,CAAC;IACf,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gFAAgF;IAChF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,wEAAwE;AACxE,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,0CAA0C;AAC1C,MAAM,MAAM,UAAU,GAAG,gBAAgB,GAAG,gBAAgB,GAAG,cAAc,CAAC;AAE9E,2CAA2C;AAC3C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,uEAAuE;IACvE,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,uEAAuE;AACvE,MAAM,MAAM,eAAe,GAAG;IAC5B,yEAAyE;IACzE,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,uEAAuE;IACvE,CAAC,CAAC,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,2FAA2F;AAC3F,MAAM,MAAM,YAAY,GAAG;IACzB,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mDAAmD;IACnD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iDAAiD;IACjD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0EAA0E;IAC1E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0IAA0I;IAC1I,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qFAAqF;IACrF,eAAe,CAAC,EAAE,UAAU,CAAC;CAC9B,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-ease",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "Lightweight declarative animations powered by platform APIs",
|
|
5
5
|
"main": "./lib/module/index.js",
|
|
6
6
|
"types": "./lib/typescript/src/index.d.ts",
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
"ios",
|
|
20
20
|
"cpp",
|
|
21
21
|
"*.podspec",
|
|
22
|
+
"skills",
|
|
22
23
|
"!ios/build",
|
|
23
24
|
"!android/build",
|
|
24
25
|
"!android/gradle",
|
|
@@ -28,7 +29,8 @@
|
|
|
28
29
|
"!**/__tests__",
|
|
29
30
|
"!**/__fixtures__",
|
|
30
31
|
"!**/__mocks__",
|
|
31
|
-
"!**/.*"
|
|
32
|
+
"!**/.*",
|
|
33
|
+
".claude-plugin"
|
|
32
34
|
],
|
|
33
35
|
"scripts": {
|
|
34
36
|
"example": "yarn workspace react-native-ease-example",
|
|
@@ -53,14 +55,14 @@
|
|
|
53
55
|
],
|
|
54
56
|
"repository": {
|
|
55
57
|
"type": "git",
|
|
56
|
-
"url": "git+https://github.com/
|
|
58
|
+
"url": "git+https://github.com/AppAndFlow/react-native-ease.git"
|
|
57
59
|
},
|
|
58
60
|
"author": "Janic Duplessis <janic@appandflow.com> (https://github.com/janicduplessis)",
|
|
59
61
|
"license": "MIT",
|
|
60
62
|
"bugs": {
|
|
61
|
-
"url": "https://github.com/
|
|
63
|
+
"url": "https://github.com/AppAndFlow/react-native-ease/issues"
|
|
62
64
|
},
|
|
63
|
-
"homepage": "https://github.com/
|
|
65
|
+
"homepage": "https://github.com/AppAndFlow/react-native-ease#readme",
|
|
64
66
|
"publishConfig": {
|
|
65
67
|
"registry": "https://registry.npmjs.org/"
|
|
66
68
|
},
|
|
@@ -0,0 +1,399 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: react-native-ease-refactor
|
|
3
|
+
description: Scan for Animated/Reanimated code and migrate to EaseView
|
|
4
|
+
user-invocable: true
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# react-native-ease refactor
|
|
8
|
+
|
|
9
|
+
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.
|
|
10
|
+
|
|
11
|
+
Follow these 6 phases exactly. Do not skip phases or reorder them.
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## Phase 1: Discovery
|
|
16
|
+
|
|
17
|
+
Scan the user's project for animation code:
|
|
18
|
+
|
|
19
|
+
1. Use Grep to find all files importing from `react-native-reanimated`:
|
|
20
|
+
|
|
21
|
+
- Pattern: `from ['"]react-native-reanimated['"]`
|
|
22
|
+
- Search in `**/*.{ts,tsx,js,jsx}`
|
|
23
|
+
|
|
24
|
+
2. Use Grep to find all files using React Native's built-in `Animated` API:
|
|
25
|
+
|
|
26
|
+
- Pattern: `from ['"]react-native['"]` that also use `Animated`
|
|
27
|
+
- Pattern: `Animated\.View|Animated\.Text|Animated\.Image|Animated\.Value|Animated\.timing|Animated\.spring`
|
|
28
|
+
|
|
29
|
+
3. Use Grep to find files already using `react-native-ease` (to avoid re-migrating):
|
|
30
|
+
|
|
31
|
+
- Pattern: `from ['"]react-native-ease['"]`
|
|
32
|
+
|
|
33
|
+
4. Read each file that contains animation code. Build a list of components with their animation patterns.
|
|
34
|
+
|
|
35
|
+
**Exclude** from scanning:
|
|
36
|
+
|
|
37
|
+
- `node_modules/`
|
|
38
|
+
- `*.test.*` and `*.spec.*` files
|
|
39
|
+
- Build output directories (`lib/`, `build/`, `dist/`)
|
|
40
|
+
|
|
41
|
+
---
|
|
42
|
+
|
|
43
|
+
## Phase 2: Classification
|
|
44
|
+
|
|
45
|
+
For each component found, classify as **migratable** or **not migratable**.
|
|
46
|
+
|
|
47
|
+
### Decision Tree
|
|
48
|
+
|
|
49
|
+
Apply these checks in order. The first match determines the result:
|
|
50
|
+
|
|
51
|
+
1. **Uses gesture APIs?** (`Gesture.Pan`, `Gesture.Pinch`, `Gesture.Rotation`, `useAnimatedGestureHandler`) → NOT migratable — "Gesture-driven animation"
|
|
52
|
+
2. **Uses scroll handler?** (`useAnimatedScrollHandler`, `onScroll` with `Animated.event`) → NOT migratable — "Scroll-driven animation"
|
|
53
|
+
3. **Uses shared element transitions?** (`sharedTransitionTag`) → NOT migratable — "Shared element transition"
|
|
54
|
+
4. **Uses `runOnUI` or worklet directives?** → NOT migratable — "Requires worklet runtime"
|
|
55
|
+
5. **Uses `withSequence` or `withDelay`?** → NOT migratable — "Animation sequencing not supported"
|
|
56
|
+
6. **Uses complex `interpolate()`?** (more than 2 input/output values) → NOT migratable — "Complex interpolation"
|
|
57
|
+
7. **Uses `layout={...}` prop?** → NOT migratable — "Layout animation"
|
|
58
|
+
8. **Animates unsupported properties?** (anything besides: opacity, translateX, translateY, scale, scaleX, scaleY, rotate, rotateX, rotateY, borderRadius, backgroundColor) → NOT migratable — "Animates unsupported property: `<prop>`"
|
|
59
|
+
9. **Uses different transition configs per property?** (e.g., opacity uses 200ms timing, scale uses spring) → NOT migratable — "Per-property transition configs"
|
|
60
|
+
10. **Not driven by state?** (animation triggered by gesture/scroll value, not React state) → NOT migratable — "Not state-driven"
|
|
61
|
+
11. **Otherwise** → MIGRATABLE
|
|
62
|
+
|
|
63
|
+
### Migratable Pattern Mapping
|
|
64
|
+
|
|
65
|
+
Use this table to convert Reanimated/Animated patterns to EaseView:
|
|
66
|
+
|
|
67
|
+
| Reanimated / Animated Pattern | EaseView Equivalent |
|
|
68
|
+
| ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
|
|
69
|
+
| `useSharedValue` + `useAnimatedStyle` + `withTiming` for opacity, translate, scale, rotate, borderRadius, backgroundColor | `animate={{ prop: value }}` + `transition={{ type: 'timing', duration, easing }}` |
|
|
70
|
+
| `withSpring` | `transition={{ type: 'spring', damping, stiffness, mass }}` |
|
|
71
|
+
| `entering={FadeIn}` / `FadeIn.duration(N)` | `initialAnimate={{ opacity: 0 }}` + `animate={{ opacity: 1 }}` + timing transition |
|
|
72
|
+
| `entering={FadeInDown}` / `FadeInUp` | `initialAnimate={{ opacity: 0, translateY: ±value }}` + `animate={{ opacity: 1, translateY: 0 }}` |
|
|
73
|
+
| `entering={SlideInLeft}` / `SlideInRight` | `initialAnimate={{ translateX: ±value }}` + `animate={{ translateX: 0 }}` |
|
|
74
|
+
| `entering={SlideInUp}` / `SlideInDown` | `initialAnimate={{ translateY: ±value }}` + `animate={{ translateY: 0 }}` |
|
|
75
|
+
| `entering={ZoomIn}` | `initialAnimate={{ scale: 0 }}` + `animate={{ scale: 1 }}` |
|
|
76
|
+
| `exiting={FadeOut}` / other exit animations | State-driven exit: boolean state + `onTransitionEnd` to unmount (flag as "requires state changes" in report) |
|
|
77
|
+
| `withRepeat(withTiming(...), -1, false)` | `transition={{ type: 'timing', ..., loop: 'repeat' }}` + `initialAnimate` for start value |
|
|
78
|
+
| `withRepeat(withTiming(...), -1, true)` | `transition={{ type: 'timing', ..., loop: 'reverse' }}` + `initialAnimate` for start value |
|
|
79
|
+
| `Easing.linear` | `easing: 'linear'` |
|
|
80
|
+
| `Easing.ease` / `Easing.inOut(Easing.ease)` | `easing: 'easeInOut'` |
|
|
81
|
+
| `Easing.in(Easing.ease)` | `easing: 'easeIn'` |
|
|
82
|
+
| `Easing.out(Easing.ease)` | `easing: 'easeOut'` |
|
|
83
|
+
| `Easing.bezier(x1, y1, x2, y2)` | `easing: [x1, y1, x2, y2]` |
|
|
84
|
+
| `Animated.Value` + `Animated.timing` | Same `animate` + `transition` pattern — convert to state-driven |
|
|
85
|
+
| `Animated.Value` + `Animated.spring` | `animate` + `transition={{ type: 'spring' }}` — convert to state-driven |
|
|
86
|
+
|
|
87
|
+
### Default Value Mapping
|
|
88
|
+
|
|
89
|
+
**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.**
|
|
90
|
+
|
|
91
|
+
#### `withSpring` → EaseView spring
|
|
92
|
+
|
|
93
|
+
| Parameter | Reanimated default | EaseView default | Action |
|
|
94
|
+
|---|---|---|---|
|
|
95
|
+
| `damping` | `10` | `15` | **Must set `damping: 10`** |
|
|
96
|
+
| `stiffness` | `100` | `120` | **Must set `stiffness: 100`** |
|
|
97
|
+
| `mass` | `1` | `1` | Same — omit |
|
|
98
|
+
|
|
99
|
+
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.
|
|
100
|
+
|
|
101
|
+
Example — bare `withSpring(1)` with no config:
|
|
102
|
+
```typescript
|
|
103
|
+
// Before (Reanimated)
|
|
104
|
+
scale.value = withSpring(1);
|
|
105
|
+
|
|
106
|
+
// After (EaseView) — must set damping: 10, stiffness: 100 to match
|
|
107
|
+
transition={{ type: 'spring', damping: 10, stiffness: 100 }}
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
**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)`.
|
|
111
|
+
|
|
112
|
+
#### `withTiming` → EaseView timing
|
|
113
|
+
|
|
114
|
+
| Parameter | Reanimated default | EaseView default | Action |
|
|
115
|
+
|---|---|---|---|
|
|
116
|
+
| `duration` | `300` | `300` | Same — omit |
|
|
117
|
+
| `easing` | `Easing.inOut(Easing.quad)` | `'easeInOut'` (cubic) | **Must set `easing: [0.455, 0.03, 0.515, 0.955]`** |
|
|
118
|
+
|
|
119
|
+
The easing curves are different! Reanimated's default is quadratic ease-in-out, EaseView's is cubic. Always set the easing explicitly when the source doesn't specify one.
|
|
120
|
+
|
|
121
|
+
Example — bare `withTiming(1)` with no config:
|
|
122
|
+
```typescript
|
|
123
|
+
// Before (Reanimated)
|
|
124
|
+
opacity.value = withTiming(1);
|
|
125
|
+
|
|
126
|
+
// After (EaseView) — must set quad easing to match
|
|
127
|
+
transition={{ type: 'timing', duration: 300, easing: [0.455, 0.03, 0.515, 0.955] }}
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
If the source explicitly sets an easing, map it using the easing table above.
|
|
131
|
+
|
|
132
|
+
#### `Animated.timing` (old RN API) → EaseView timing
|
|
133
|
+
|
|
134
|
+
| Parameter | RN Animated default | EaseView default | Action |
|
|
135
|
+
|---|---|---|---|
|
|
136
|
+
| `duration` | `500` | `300` | **Must set `duration: 500`** |
|
|
137
|
+
| `easing` | `Easing.inOut(Easing.ease)` | `'easeInOut'` | Same curve — omit |
|
|
138
|
+
|
|
139
|
+
#### `Animated.spring` (old RN API) → EaseView spring
|
|
140
|
+
|
|
141
|
+
RN Animated uses `friction`/`tension` by default: `friction: 7, tension: 40`. These map to: `stiffness = tension`, `damping = friction`.
|
|
142
|
+
|
|
143
|
+
| Parameter | RN Animated default | EaseView default | Action |
|
|
144
|
+
|---|---|---|---|
|
|
145
|
+
| stiffness (tension) | `40` | `120` | **Must set `stiffness: 40`** |
|
|
146
|
+
| damping (friction) | `7` | `15` | **Must set `damping: 7`** |
|
|
147
|
+
| mass | `1` | `1` | Same — omit |
|
|
148
|
+
|
|
149
|
+
### Unit Conversions
|
|
150
|
+
|
|
151
|
+
- **Rotation:** Reanimated uses `'45deg'` strings in transforms → EaseView uses `45` (number, degrees). Strip the `'deg'` suffix and parse to number.
|
|
152
|
+
- **Translation:** Both use DIPs (density-independent pixels). No conversion needed.
|
|
153
|
+
- **Scale:** Both use unitless multipliers. No conversion needed.
|
|
154
|
+
|
|
155
|
+
---
|
|
156
|
+
|
|
157
|
+
## Phase 3: Dry-Run Report
|
|
158
|
+
|
|
159
|
+
**ALWAYS print this report before asking the user to select components. This report must be visible to the user before Phase 4.**
|
|
160
|
+
|
|
161
|
+
Print a structured report. Do NOT apply any changes yet.
|
|
162
|
+
|
|
163
|
+
Format:
|
|
164
|
+
|
|
165
|
+
```
|
|
166
|
+
## Migration Report
|
|
167
|
+
|
|
168
|
+
### Summary
|
|
169
|
+
- Files scanned: X
|
|
170
|
+
- Components with animations: Y
|
|
171
|
+
- Migratable: Z | Not migratable: W
|
|
172
|
+
|
|
173
|
+
### Migratable Components
|
|
174
|
+
|
|
175
|
+
#### `path/to/file.tsx` — ComponentName
|
|
176
|
+
**Current:** Brief description of what the animation does and which API it uses
|
|
177
|
+
**Proposed:** What the EaseView equivalent looks like (include exact transition values with mapped defaults)
|
|
178
|
+
**Changes:** What will be added/removed/modified
|
|
179
|
+
**Note:** (only if applicable) "Requires state changes for exit animation" or other caveats
|
|
180
|
+
|
|
181
|
+
### Not Migratable (will be skipped)
|
|
182
|
+
|
|
183
|
+
#### `path/to/file.tsx` — ComponentName
|
|
184
|
+
**Reason:** Why it can't be migrated (from decision tree)
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
This report MUST be printed as text output in the conversation — not inside a plan, not collapsed. The user needs to read it before selecting components in Phase 4.
|
|
188
|
+
|
|
189
|
+
---
|
|
190
|
+
|
|
191
|
+
## Phase 4: User Confirmation
|
|
192
|
+
|
|
193
|
+
**CRITICAL: You MUST use the `AskUserQuestion` tool here. Do NOT use plan mode, do NOT use text prompts, do NOT ask inline. Call the `AskUserQuestion` tool directly.**
|
|
194
|
+
|
|
195
|
+
Call `AskUserQuestion` with these exact parameters:
|
|
196
|
+
- `multiSelect`: `true`
|
|
197
|
+
- `questions`: a single question object with:
|
|
198
|
+
- `header`: `"Migrate"`
|
|
199
|
+
- `question`: `"Which components should be migrated to EaseView? All are selected — deselect any to skip."`
|
|
200
|
+
- `multiSelect`: `true`
|
|
201
|
+
- `options`: one entry per migratable component, each with:
|
|
202
|
+
- `label`: the component name (e.g., `"AnimatedButton"`)
|
|
203
|
+
- `description`: file path and brief animation description (e.g., `"src/components/animated-button.tsx — spring scale on press"`)
|
|
204
|
+
|
|
205
|
+
Example tool call for 2 migratable components:
|
|
206
|
+
|
|
207
|
+
```json
|
|
208
|
+
{
|
|
209
|
+
"questions": [
|
|
210
|
+
{
|
|
211
|
+
"header": "Migrate",
|
|
212
|
+
"question": "Which components should be migrated to EaseView? All are selected — deselect any to skip.",
|
|
213
|
+
"multiSelect": true,
|
|
214
|
+
"options": [
|
|
215
|
+
{
|
|
216
|
+
"label": "AnimatedButton",
|
|
217
|
+
"description": "src/components/simple/animated-button.tsx — spring scale on press"
|
|
218
|
+
},
|
|
219
|
+
{
|
|
220
|
+
"label": "Collapsible",
|
|
221
|
+
"description": "src/components/ui/collapsible.tsx — fade-in entering animation"
|
|
222
|
+
}
|
|
223
|
+
]
|
|
224
|
+
}
|
|
225
|
+
]
|
|
226
|
+
}
|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
**Wait for the user's response before proceeding.** Do not enter plan mode. Do not apply any changes without the user selecting components.
|
|
230
|
+
|
|
231
|
+
If the user selects nothing or chooses "Other" to cancel, abort with: "Migration aborted. No changes were made."
|
|
232
|
+
|
|
233
|
+
Only proceed to Phase 5 with the components the user confirmed.
|
|
234
|
+
|
|
235
|
+
---
|
|
236
|
+
|
|
237
|
+
## Phase 5: Apply Migrations
|
|
238
|
+
|
|
239
|
+
For each confirmed component, apply the migration:
|
|
240
|
+
|
|
241
|
+
### Migration Steps (per component)
|
|
242
|
+
|
|
243
|
+
1. **Add EaseView import** if not already present:
|
|
244
|
+
|
|
245
|
+
```typescript
|
|
246
|
+
import { EaseView } from 'react-native-ease';
|
|
247
|
+
```
|
|
248
|
+
|
|
249
|
+
2. **Replace the animated view:**
|
|
250
|
+
|
|
251
|
+
- `Animated.View` → `EaseView`
|
|
252
|
+
- `<Animated.View style={[styles.box, animatedStyle]}>` → `<EaseView style={styles.box} animate={{ ... }} transition={{ ... }}>`
|
|
253
|
+
|
|
254
|
+
3. **Convert animation hooks to props:**
|
|
255
|
+
|
|
256
|
+
- Remove `useSharedValue`, `useAnimatedStyle`, `withTiming`, `withSpring`, `withRepeat` calls
|
|
257
|
+
- Convert their values into `animate`, `initialAnimate`, and `transition` props
|
|
258
|
+
|
|
259
|
+
4. **Convert entering/exiting animations:**
|
|
260
|
+
|
|
261
|
+
- `entering={FadeIn}` → `initialAnimate={{ opacity: 0 }}` on the EaseView + `animate={{ opacity: 1 }}`
|
|
262
|
+
- For `exiting`: introduce a state variable and `onTransitionEnd` callback:
|
|
263
|
+
|
|
264
|
+
```typescript
|
|
265
|
+
const [visible, setVisible] = useState(true);
|
|
266
|
+
const [mounted, setMounted] = useState(true);
|
|
267
|
+
|
|
268
|
+
// When triggering exit:
|
|
269
|
+
setVisible(false);
|
|
270
|
+
|
|
271
|
+
// On the EaseView:
|
|
272
|
+
{
|
|
273
|
+
mounted && (
|
|
274
|
+
<EaseView
|
|
275
|
+
animate={{ opacity: visible ? 1 : 0 }}
|
|
276
|
+
transition={{ type: 'timing', duration: 300 }}
|
|
277
|
+
onTransitionEnd={({ finished }) => {
|
|
278
|
+
if (finished && !visible) setMounted(false);
|
|
279
|
+
}}
|
|
280
|
+
>
|
|
281
|
+
...
|
|
282
|
+
</EaseView>
|
|
283
|
+
);
|
|
284
|
+
}
|
|
285
|
+
```
|
|
286
|
+
|
|
287
|
+
5. **Clean up imports:**
|
|
288
|
+
|
|
289
|
+
- Remove Reanimated imports that are no longer used in the file
|
|
290
|
+
- Keep any Reanimated imports still referenced by non-migrated code in the same file
|
|
291
|
+
- Never remove imports that are still used
|
|
292
|
+
|
|
293
|
+
6. **Print progress:**
|
|
294
|
+
```
|
|
295
|
+
[1/N] Migrated ComponentName in path/to/file.tsx
|
|
296
|
+
```
|
|
297
|
+
|
|
298
|
+
### Safety Rules
|
|
299
|
+
|
|
300
|
+
These rules are non-negotiable. Violating them corrupts user code.
|
|
301
|
+
|
|
302
|
+
1. **When in doubt, skip.** If a pattern is ambiguous or you're not confident in the migration, add it to "Not Migratable" with reason: "Complex pattern — manual review recommended"
|
|
303
|
+
2. **Never remove imports still used elsewhere in the file.** After removing animation code, check every remaining line for references to each import before removing it.
|
|
304
|
+
3. **Preserve all non-animation logic.** Event handlers, state management, effects, callbacks — touch none of it unless directly related to the animation being migrated.
|
|
305
|
+
4. **Preserve component structure and public API.** Props, ref forwarding, exported types — keep them identical.
|
|
306
|
+
5. **Handle mixed files correctly.** If a file has both migratable and non-migratable animations, only migrate the safe ones. Keep Reanimated imports if any Reanimated code remains.
|
|
307
|
+
6. **Map rotation units correctly.** Reanimated `'45deg'` string → EaseView `45` number. If the source uses radians, convert: `radians * (180 / Math.PI)`.
|
|
308
|
+
7. **Map easing presets correctly.** See the mapping table in Phase 2.
|
|
309
|
+
8. **Do not introduce TypeScript errors.** Ensure all types are correct after migration. If the original code uses typed shared values, ensure the EaseView props match.
|
|
310
|
+
|
|
311
|
+
---
|
|
312
|
+
|
|
313
|
+
## Phase 6: Final Report
|
|
314
|
+
|
|
315
|
+
After all migrations are applied, print:
|
|
316
|
+
|
|
317
|
+
```
|
|
318
|
+
## Migration Complete
|
|
319
|
+
|
|
320
|
+
### Changed (X components)
|
|
321
|
+
- `path/to/file.tsx` — ComponentName: brief description of what was migrated
|
|
322
|
+
|
|
323
|
+
### Unchanged (Y components)
|
|
324
|
+
- `path/to/file.tsx` — ComponentName: reason skipped
|
|
325
|
+
|
|
326
|
+
### Next Steps
|
|
327
|
+
- Run your app and verify animations visually
|
|
328
|
+
- Run your test suite to check for regressions
|
|
329
|
+
- If no Reanimated code remains, consider removing `react-native-reanimated` from dependencies
|
|
330
|
+
```
|
|
331
|
+
|
|
332
|
+
---
|
|
333
|
+
|
|
334
|
+
## EaseView API Reference (for migration accuracy)
|
|
335
|
+
|
|
336
|
+
### Supported Animatable Properties
|
|
337
|
+
|
|
338
|
+
All properties in the `animate` prop:
|
|
339
|
+
|
|
340
|
+
| Property | Type | Default | Notes |
|
|
341
|
+
| ----------------- | ------------ | --------------- | ------------------------------------ |
|
|
342
|
+
| `opacity` | `number` | `1` | 0–1 range |
|
|
343
|
+
| `translateX` | `number` | `0` | In DIPs (density-independent pixels) |
|
|
344
|
+
| `translateY` | `number` | `0` | In DIPs |
|
|
345
|
+
| `scale` | `number` | `1` | Shorthand for scaleX + scaleY |
|
|
346
|
+
| `scaleX` | `number` | `1` | Overrides scale for X axis |
|
|
347
|
+
| `scaleY` | `number` | `1` | Overrides scale for Y axis |
|
|
348
|
+
| `rotate` | `number` | `0` | Z-axis rotation in degrees |
|
|
349
|
+
| `rotateX` | `number` | `0` | X-axis rotation in degrees (3D) |
|
|
350
|
+
| `rotateY` | `number` | `0` | Y-axis rotation in degrees (3D) |
|
|
351
|
+
| `borderRadius` | `number` | `0` | In pixels |
|
|
352
|
+
| `backgroundColor` | `ColorValue` | `'transparent'` | Any RN color value |
|
|
353
|
+
|
|
354
|
+
### Transition Types
|
|
355
|
+
|
|
356
|
+
**Timing:**
|
|
357
|
+
|
|
358
|
+
```typescript
|
|
359
|
+
transition={{
|
|
360
|
+
type: 'timing',
|
|
361
|
+
duration: 300, // ms, default 300
|
|
362
|
+
easing: 'easeInOut', // 'linear' | 'easeIn' | 'easeOut' | 'easeInOut' | [x1,y1,x2,y2]
|
|
363
|
+
loop: 'repeat', // 'repeat' | 'reverse' — requires initialAnimate
|
|
364
|
+
}}
|
|
365
|
+
```
|
|
366
|
+
|
|
367
|
+
**Spring:**
|
|
368
|
+
|
|
369
|
+
```typescript
|
|
370
|
+
transition={{
|
|
371
|
+
type: 'spring',
|
|
372
|
+
damping: 15, // default 15
|
|
373
|
+
stiffness: 120, // default 120
|
|
374
|
+
mass: 1, // default 1
|
|
375
|
+
}}
|
|
376
|
+
```
|
|
377
|
+
|
|
378
|
+
**None (instant):**
|
|
379
|
+
|
|
380
|
+
```typescript
|
|
381
|
+
transition={{ type: 'none' }}
|
|
382
|
+
```
|
|
383
|
+
|
|
384
|
+
### Key Props
|
|
385
|
+
|
|
386
|
+
- `animate` — target values for animated properties
|
|
387
|
+
- `initialAnimate` — starting values (animates to `animate` on mount)
|
|
388
|
+
- `transition` — animation config (timing or spring)
|
|
389
|
+
- `onTransitionEnd` — callback with `{ finished: boolean }`
|
|
390
|
+
- `transformOrigin` — pivot point as `{ x: 0-1, y: 0-1 }`, default center
|
|
391
|
+
- `useHardwareLayer` — Android GPU optimization (boolean, default false)
|
|
392
|
+
|
|
393
|
+
### Important Constraints
|
|
394
|
+
|
|
395
|
+
- **Loop requires timing** (not spring) and `initialAnimate` must define the start value
|
|
396
|
+
- **No per-property transitions** — one transition config applies to all animated properties
|
|
397
|
+
- **No animation sequencing** — no equivalent to `withSequence`/`withDelay`
|
|
398
|
+
- **No gesture/scroll-driven animations** — EaseView is state-driven only
|
|
399
|
+
- **Style/animate conflict** — if a property appears in both `style` and `animate`, the animated value wins
|
package/src/EaseView.tsx
CHANGED
|
@@ -32,6 +32,7 @@ const MASK_ROTATE = 1 << 5;
|
|
|
32
32
|
const MASK_ROTATE_X = 1 << 6;
|
|
33
33
|
const MASK_ROTATE_Y = 1 << 7;
|
|
34
34
|
const MASK_BORDER_RADIUS = 1 << 8;
|
|
35
|
+
const MASK_BACKGROUND_COLOR = 1 << 9;
|
|
35
36
|
/* eslint-enable no-bitwise */
|
|
36
37
|
|
|
37
38
|
/** Maps animate prop keys to style keys that conflict. */
|
|
@@ -46,6 +47,7 @@ const ANIMATE_TO_STYLE_KEYS: Record<keyof AnimateProps, string> = {
|
|
|
46
47
|
rotateX: 'transform',
|
|
47
48
|
rotateY: 'transform',
|
|
48
49
|
borderRadius: 'borderRadius',
|
|
50
|
+
backgroundColor: 'backgroundColor',
|
|
49
51
|
};
|
|
50
52
|
|
|
51
53
|
/** Preset easing curves as cubic bezier control points. */
|
|
@@ -111,6 +113,8 @@ export function EaseView({
|
|
|
111
113
|
if (animate?.rotateX != null) animatedProperties |= MASK_ROTATE_X;
|
|
112
114
|
if (animate?.rotateY != null) animatedProperties |= MASK_ROTATE_Y;
|
|
113
115
|
if (animate?.borderRadius != null) animatedProperties |= MASK_BORDER_RADIUS;
|
|
116
|
+
if (animate?.backgroundColor != null)
|
|
117
|
+
animatedProperties |= MASK_BACKGROUND_COLOR;
|
|
114
118
|
/* eslint-enable no-bitwise */
|
|
115
119
|
|
|
116
120
|
// Resolve animate values (identity defaults for non-animated — safe values).
|
|
@@ -137,6 +141,10 @@ export function EaseView({
|
|
|
137
141
|
rotateY: initial?.rotateY ?? IDENTITY.rotateY,
|
|
138
142
|
};
|
|
139
143
|
|
|
144
|
+
// Resolve backgroundColor — passed as ColorValue directly (codegen handles conversion)
|
|
145
|
+
const animBgColor = animate?.backgroundColor ?? 'transparent';
|
|
146
|
+
const initialBgColor = initialAnimate?.backgroundColor ?? animBgColor;
|
|
147
|
+
|
|
140
148
|
// Strip style keys that conflict with animated properties
|
|
141
149
|
let cleanStyle: ViewProps['style'] = style;
|
|
142
150
|
if (animate && style) {
|
|
@@ -211,6 +219,10 @@ export function EaseView({
|
|
|
211
219
|
transition?.type === 'spring' ? transition.mass ?? 1 : 1;
|
|
212
220
|
const transitionLoop =
|
|
213
221
|
transition?.type === 'timing' ? transition.loop ?? 'none' : 'none';
|
|
222
|
+
const transitionDelay =
|
|
223
|
+
transition?.type === 'timing' || transition?.type === 'spring'
|
|
224
|
+
? transition.delay ?? 0
|
|
225
|
+
: 0;
|
|
214
226
|
|
|
215
227
|
const handleTransitionEnd = onTransitionEnd
|
|
216
228
|
? (event: { nativeEvent: { finished: boolean } }) =>
|
|
@@ -231,6 +243,7 @@ export function EaseView({
|
|
|
231
243
|
animateRotateX={resolved.rotateX}
|
|
232
244
|
animateRotateY={resolved.rotateY}
|
|
233
245
|
animateBorderRadius={resolved.borderRadius}
|
|
246
|
+
animateBackgroundColor={animBgColor}
|
|
234
247
|
initialAnimateOpacity={resolvedInitial.opacity}
|
|
235
248
|
initialAnimateTranslateX={resolvedInitial.translateX}
|
|
236
249
|
initialAnimateTranslateY={resolvedInitial.translateY}
|
|
@@ -240,6 +253,7 @@ export function EaseView({
|
|
|
240
253
|
initialAnimateRotateX={resolvedInitial.rotateX}
|
|
241
254
|
initialAnimateRotateY={resolvedInitial.rotateY}
|
|
242
255
|
initialAnimateBorderRadius={resolvedInitial.borderRadius}
|
|
256
|
+
initialAnimateBackgroundColor={initialBgColor}
|
|
243
257
|
transitionType={transitionType}
|
|
244
258
|
transitionDuration={transitionDuration}
|
|
245
259
|
transitionEasingBezier={bezier}
|
|
@@ -247,6 +261,7 @@ export function EaseView({
|
|
|
247
261
|
transitionStiffness={transitionStiffness}
|
|
248
262
|
transitionMass={transitionMass}
|
|
249
263
|
transitionLoop={transitionLoop}
|
|
264
|
+
transitionDelay={transitionDelay}
|
|
250
265
|
useHardwareLayer={useHardwareLayer}
|
|
251
266
|
transformOriginX={transformOrigin?.x ?? 0.5}
|
|
252
267
|
transformOriginY={transformOrigin?.y ?? 0.5}
|