react-native-ease 0.2.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.
Files changed (26) hide show
  1. package/.claude-plugin/marketplace.json +21 -0
  2. package/.claude-plugin/plugin.json +5 -0
  3. package/README.md +102 -74
  4. package/android/src/main/java/com/ease/EaseView.kt +19 -1
  5. package/android/src/main/java/com/ease/EaseViewManager.kt +5 -0
  6. package/ios/EaseView.mm +5 -0
  7. package/lib/module/EaseView.js +2 -0
  8. package/lib/module/EaseView.js.map +1 -1
  9. package/lib/module/EaseView.web.js +210 -0
  10. package/lib/module/EaseView.web.js.map +1 -0
  11. package/lib/module/EaseViewNativeComponent.ts +1 -0
  12. package/lib/module/index.js +1 -1
  13. package/lib/module/index.js.map +1 -1
  14. package/lib/typescript/src/EaseView.d.ts.map +1 -1
  15. package/lib/typescript/src/EaseView.web.d.ts +16 -0
  16. package/lib/typescript/src/EaseView.web.d.ts.map +1 -0
  17. package/lib/typescript/src/EaseViewNativeComponent.d.ts +1 -0
  18. package/lib/typescript/src/EaseViewNativeComponent.d.ts.map +1 -1
  19. package/lib/typescript/src/types.d.ts +4 -0
  20. package/lib/typescript/src/types.d.ts.map +1 -1
  21. package/package.json +7 -5
  22. package/skills/react-native-ease-refactor/SKILL.md +399 -0
  23. package/src/EaseView.tsx +5 -0
  24. package/src/EaseView.web.tsx +295 -0
  25. package/src/EaseViewNativeComponent.ts +1 -0
  26. package/src/types.ts +4 -0
package/.claude-plugin/marketplace.json ADDED
@@ -0,0 +1,21 @@
1
+ {
2
+ "name": "react-native-ease-plugins",
3
+ "owner": {
4
+ "name": "AppAndFlow",
5
+ "email": "devops@appandflow.com"
6
+ },
7
+ "metadata": {
8
+ "description": "Claude Code skills for react-native-ease — migrate Reanimated/Animated code to react-native-ease"
9
+ },
10
+ "plugins": [
11
+ {
12
+ "name": "react-native-ease",
13
+ "source": "./",
14
+ "description": "Scan for Animated/Reanimated code and migrate to react-native-ease",
15
+ "version": "0.2.0",
16
+ "author": {
17
+ "name": "AppAndFlow"
18
+ }
19
+ }
20
+ ]
21
+ }
package/.claude-plugin/plugin.json ADDED
@@ -0,0 +1,5 @@
1
+ {
2
+ "name": "react-native-ease",
3
+ "description": "Declarative native animations for React Native — migration tools",
4
+ "version": "0.2.0"
5
+ }
package/README.md CHANGED
@@ -1,32 +1,17 @@
1
- # 🍃 react-native-ease
1
+ <img width="100%" height="auto" alt="react-native-ease by App & Flow" src="https://github.com/user-attachments/assets/8006ed51-d373-4c97-9e80-9937eb9a569e" />
2
2
 
3
3
  Lightweight declarative animations powered by platform APIs. Uses Core Animation on iOS and Animator on Android — zero JS overhead.
4
4
 
5
- ## Goals
5
+ ## About
6
+ App & Flow is a Montreal-based React Native engineering and consulting studio. We partner with the world’s top companies and are recommended by [Expo](https://expo.dev/consultants). Need a hand? Let’s build together. team@appandflow.com
6
7
 
7
- - **Fast** — Animations run entirely on native platform APIs (CAAnimation, ObjectAnimator/SpringAnimation). No JS animation loop, no worklets, no shared values.
8
- - **Simple** — CSS-transition-like API. Set target values, get smooth animations. One component, a few props.
9
- - **Lightweight** — Minimal native code, no C++ runtime, no custom animation engine. Just a thin declarative wrapper around what the OS already provides.
10
- - **Interruptible** — Changing values mid-animation smoothly redirects to the new target. No jumps.
11
-
12
- ## Non-Goals
13
-
14
- - **Complex gesture-driven animations** — If you need pan/pinch-driven animations, animation worklets, or shared values across components, use [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated).
15
- - **Layout animations** — Animating width/height/layout changes is not supported.
16
- - **Shared element transitions** — Use Reanimated or React Navigation's shared element transitions.
17
- - **Old architecture** — Fabric (new architecture) only.
8
+ ## Demo
18
9
 
19
- ## When to use this vs Reanimated
10
+ ![ease-demo](https://github.com/user-attachments/assets/09658b07-803e-4b7e-a23c-831a6c63df84)
20
11
 
21
- | Use react-native-ease | Use Reanimated |
22
- |---|---|
23
- | Fade in a view | Gesture-driven animations |
24
- | Slide/translate on state change | Complex interpolations |
25
- | Scale/rotate on press | Shared values across components |
26
- | Simple enter animations | Layout animations |
27
- | You want zero config | You need animation worklets |
12
+ ## Getting started
28
13
 
29
- ## Installation
14
+ ### Installation
30
15
 
31
16
  ```bash
32
17
  npm install react-native-ease
@@ -34,7 +19,25 @@ npm install react-native-ease
34
19
  yarn add react-native-ease
35
20
  ```
36
21
 
37
- ## Quick Start
22
+ ### Migration Skill
23
+
24
+ If you're already using `react-native-reanimated` or React Native's `Animated` API, this project includes an [Agent Skill](https://agentskills.io) that scans your codebase for animations that can be replaced with `react-native-ease` and migrates them automatically.
25
+
26
+ ```bash
27
+ npx skills add appandflow/react-native-ease
28
+ ```
29
+
30
+ Then invoke the skill in your agent (e.g., `/react-native-ease-refactor` in Claude Code).
31
+
32
+ The skill will:
33
+
34
+ 1. Scan your project for Reanimated/Animated code
35
+ 2. Classify which animations can be migrated (and which can't, with reasons)
36
+ 3. Show a migration report with before/after details
37
+ 4. Let you select which components to migrate
38
+ 5. Apply the changes, preserving all non-animation logic
39
+
40
+ ### Example
38
41
 
39
42
  ```tsx
40
43
  import { EaseView } from 'react-native-ease';
@@ -54,6 +57,32 @@ function FadeCard({ visible, children }) {
54
57
 
55
58
  `EaseView` works like a regular `View` — it accepts children, styles, and all standard view props. When values in `animate` change, it smoothly transitions to the new values using native platform animations.
56
59
 
60
+ ## Why
61
+
62
+ ### Goals
63
+
64
+ - **Fast** — Animations run entirely on native platform APIs (CAAnimation, ObjectAnimator/SpringAnimation). No JS animation loop, no worklets, no shared values.
65
+ - **Simple** — CSS-transition-like API. Set target values, get smooth animations. One component, a few props.
66
+ - **Lightweight** — Minimal native code, no C++ runtime, no custom animation engine. Just a thin declarative wrapper around what the OS already provides.
67
+ - **Interruptible** — Changing values mid-animation smoothly redirects to the new target. No jumps.
68
+
69
+ ### Non-Goals
70
+
71
+ - **Complex gesture-driven animations** — If you need pan/pinch-driven animations, animation worklets, or shared values across components, use [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated).
72
+ - **Layout animations** — Animating width/height/layout changes is not supported.
73
+ - **Shared element transitions** — Use Reanimated or React Navigation's shared element transitions.
74
+ - **Old architecture** — Fabric (new architecture) only.
75
+
76
+ ### When to use this vs Reanimated
77
+
78
+ | Use case | Ease | Reanimated |
79
+ | -------------------------------------- | ---- | ---------- |
80
+ | Fade/slide/scale on state change | ✅ | |
81
+ | Enter/exit animations | ✅ | |
82
+ | Gesture-driven animations (pan, pinch) | | ✅ |
83
+ | Layout animations (width, height) | | ✅ |
84
+ | Complex interpolations & chaining | | ✅ |
85
+
57
86
  ## Guide
58
87
 
59
88
  ### Timing Animations
@@ -67,11 +96,11 @@ Timing animations transition from one value to another over a fixed duration wit
67
96
  />
68
97
  ```
69
98
 
70
- | Parameter | Type | Default | Description |
71
- |---|---|---|---|
72
- | `duration` | `number` | `300` | Duration in milliseconds |
73
- | `easing` | `EasingType` | `'easeInOut'` | Easing curve (preset name or `[x1, y1, x2, y2]` cubic bezier) |
74
- | `loop` | `string` | — | `'repeat'` restarts from the beginning, `'reverse'` alternates direction |
99
+ | Parameter | Type | Default | Description |
100
+ | ---------- | ------------ | ------------- | ------------------------------------------------------------------------ |
101
+ | `duration` | `number` | `300` | Duration in milliseconds |
102
+ | `easing` | `EasingType` | `'easeInOut'` | Easing curve (preset name or `[x1, y1, x2, y2]` cubic bezier) |
103
+ | `loop` | `string` | — | `'repeat'` restarts from the beginning, `'reverse'` alternates direction |
75
104
 
76
105
  Available easing curves:
77
106
 
@@ -112,11 +141,11 @@ Spring animations use a physics-based model for natural-feeling motion. Great fo
112
141
  />
113
142
  ```
114
143
 
115
- | Parameter | Type | Default | Description |
116
- |---|---|---|---|
117
- | `damping` | `number` | `15` | Friction — higher values reduce oscillation |
118
- | `stiffness` | `number` | `120` | Spring constant — higher values mean faster animation |
119
- | `mass` | `number` | `1` | Mass of the object — higher values mean slower, more momentum |
144
+ | Parameter | Type | Default | Description |
145
+ | ----------- | -------- | ------- | ------------------------------------------------------------- |
146
+ | `damping` | `number` | `15` | Friction — higher values reduce oscillation |
147
+ | `stiffness` | `number` | `120` | Spring constant — higher values mean faster animation |
148
+ | `mass` | `number` | `1` | Mass of the object — higher values mean slower, more momentum |
120
149
 
121
150
  Spring presets for common feels:
122
151
 
@@ -180,6 +209,8 @@ When `borderRadius` is in `animate`, any `borderRadius` in `style` is automatica
180
209
 
181
210
  On Android, background color uses `ValueAnimator.ofArgb()` (timing only — spring is not supported for colors). On iOS, it uses `CAAnimation` on the `backgroundColor` layer key path and supports both timing and spring transitions.
182
211
 
212
+ > **Note:** On Android, background color animation uses `ValueAnimator.ofArgb()` which only supports timing transitions. Spring transitions for `backgroundColor` are not supported on Android and will fall back to timing with the default duration. On iOS, both timing and spring transitions work for background color.
213
+
183
214
  When `backgroundColor` is in `animate`, any `backgroundColor` in `style` is automatically stripped to avoid conflicts.
184
215
 
185
216
  ### Animatable Properties
@@ -189,16 +220,16 @@ All properties are set in the `animate` prop as flat values (no transform array)
189
220
  ```tsx
190
221
  <EaseView
191
222
  animate={{
192
- opacity: 1, // 0 to 1
193
- translateX: 0, // pixels
194
- translateY: 0, // pixels
195
- scale: 1, // 1 = normal size (shorthand for scaleX + scaleY)
196
- scaleX: 1, // horizontal scale
197
- scaleY: 1, // vertical scale
198
- rotate: 0, // Z-axis rotation in degrees
199
- rotateX: 0, // X-axis rotation in degrees (3D)
200
- rotateY: 0, // Y-axis rotation in degrees (3D)
201
- borderRadius: 0, // pixels (hardware-accelerated, clips children)
223
+ opacity: 1, // 0 to 1
224
+ translateX: 0, // pixels
225
+ translateY: 0, // pixels
226
+ scale: 1, // 1 = normal size (shorthand for scaleX + scaleY)
227
+ scaleX: 1, // horizontal scale
228
+ scaleY: 1, // vertical scale
229
+ rotate: 0, // Z-axis rotation in degrees
230
+ rotateX: 0, // X-axis rotation in degrees (3D)
231
+ rotateY: 0, // Y-axis rotation in degrees (3D)
232
+ borderRadius: 0, // pixels (hardware-accelerated, clips children)
202
233
  backgroundColor: 'transparent', // any RN color value
203
234
  }}
204
235
  />
@@ -280,11 +311,11 @@ By default, scale and rotation animate from the view's center. Use `transformOri
280
311
  />
281
312
  ```
282
313
 
283
- | Value | Position |
284
- |---|---|
285
- | `{ x: 0, y: 0 }` | Top-left |
314
+ | Value | Position |
315
+ | -------------------- | ---------------- |
316
+ | `{ x: 0, y: 0 }` | Top-left |
286
317
  | `{ x: 0.5, y: 0.5 }` | Center (default) |
287
- | `{ x: 1, y: 1 }` | Bottom-right |
318
+ | `{ x: 1, y: 1 }` | Bottom-right |
288
319
 
289
320
  ### Style Handling
290
321
 
@@ -318,32 +349,32 @@ By default, scale and rotation animate from the view's center. Use `transformOri
318
349
 
319
350
  A `View` that animates property changes using native platform APIs.
320
351
 
321
- | Prop | Type | Description |
322
- |---|---|---|
323
- | `animate` | `AnimateProps` | Target values for animated properties |
324
- | `initialAnimate` | `AnimateProps` | Starting values for enter animations (animates to `animate` on mount) |
325
- | `transition` | `Transition` | Animation configuration (timing, spring, or none) |
326
- | `onTransitionEnd` | `(event) => void` | Called when all animations complete with `{ finished: boolean }` |
327
- | `transformOrigin` | `{ x?: number; y?: number }` | Pivot point for scale/rotation as 0–1 fractions. Default: `{ x: 0.5, y: 0.5 }` (center) |
328
- | `useHardwareLayer` | `boolean` | Android only — rasterize to GPU texture during animations. See [Hardware Layers](#hardware-layers-android). Default: `false` |
329
- | `style` | `ViewStyle` | Non-animated styles (layout, colors, borders, etc.) |
330
- | `children` | `ReactNode` | Child elements |
331
- | ...rest | `ViewProps` | All other standard View props |
352
+ | Prop | Type | Description |
353
+ | ------------------ | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
354
+ | `animate` | `AnimateProps` | Target values for animated properties |
355
+ | `initialAnimate` | `AnimateProps` | Starting values for enter animations (animates to `animate` on mount) |
356
+ | `transition` | `Transition` | Animation configuration (timing, spring, or none) |
357
+ | `onTransitionEnd` | `(event) => void` | Called when all animations complete with `{ finished: boolean }` |
358
+ | `transformOrigin` | `{ x?: number; y?: number }` | Pivot point for scale/rotation as 0–1 fractions. Default: `{ x: 0.5, y: 0.5 }` (center) |
359
+ | `useHardwareLayer` | `boolean` | Android only — rasterize to GPU texture during animations. See [Hardware Layers](#hardware-layers-android). Default: `false` |
360
+ | `style` | `ViewStyle` | Non-animated styles (layout, colors, borders, etc.) |
361
+ | `children` | `ReactNode` | Child elements |
362
+ | ...rest | `ViewProps` | All other standard View props |
332
363
 
333
364
  ### `AnimateProps`
334
365
 
335
- | Property | Type | Default | Description |
336
- |---|---|---|---|
337
- | `opacity` | `number` | `1` | View opacity (0–1) |
338
- | `translateX` | `number` | `0` | Horizontal translation in pixels |
339
- | `translateY` | `number` | `0` | Vertical translation in pixels |
340
- | `scale` | `number` | `1` | Uniform scale factor (shorthand for `scaleX` + `scaleY`) |
341
- | `scaleX` | `number` | `1` | Horizontal scale factor (overrides `scale` for X axis) |
342
- | `scaleY` | `number` | `1` | Vertical scale factor (overrides `scale` for Y axis) |
343
- | `rotate` | `number` | `0` | Z-axis rotation in degrees |
344
- | `rotateX` | `number` | `0` | X-axis rotation in degrees (3D) |
345
- | `rotateY` | `number` | `0` | Y-axis rotation in degrees (3D) |
346
- | `borderRadius` | `number` | `0` | Border radius in pixels (hardware-accelerated, clips children) |
366
+ | Property | Type | Default | Description |
367
+ | ----------------- | ------------ | --------------- | ------------------------------------------------------------------------------------ |
368
+ | `opacity` | `number` | `1` | View opacity (0–1) |
369
+ | `translateX` | `number` | `0` | Horizontal translation in pixels |
370
+ | `translateY` | `number` | `0` | Vertical translation in pixels |
371
+ | `scale` | `number` | `1` | Uniform scale factor (shorthand for `scaleX` + `scaleY`) |
372
+ | `scaleX` | `number` | `1` | Horizontal scale factor (overrides `scale` for X axis) |
373
+ | `scaleY` | `number` | `1` | Vertical scale factor (overrides `scale` for Y axis) |
374
+ | `rotate` | `number` | `0` | Z-axis rotation in degrees |
375
+ | `rotateX` | `number` | `0` | X-axis rotation in degrees (3D) |
376
+ | `rotateY` | `number` | `0` | Y-axis rotation in degrees (3D) |
377
+ | `borderRadius` | `number` | `0` | Border radius in pixels (hardware-accelerated, clips children) |
347
378
  | `backgroundColor` | `ColorValue` | `'transparent'` | Background color (any RN color value). Timing-only on Android, spring+timing on iOS. |
348
379
 
349
380
  Properties not specified in `animate` default to their identity values.
@@ -385,10 +416,7 @@ Applies values instantly with no animation. `onTransitionEnd` fires immediately
385
416
  Setting `useHardwareLayer` rasterizes the view into a GPU texture for the duration of the animation. This means animated property changes (opacity, scale, rotation) are composited on the RenderThread without redrawing the view hierarchy — useful for complex views with many children.
386
417
 
387
418
  ```tsx
388
- <EaseView
389
- animate={{ opacity: isVisible ? 1 : 0 }}
390
- useHardwareLayer
391
- />
419
+ <EaseView animate={{ opacity: isVisible ? 1 : 0 }} useHardwareLayer />
392
420
  ```
393
421
 
394
422
  **Trade-offs:**
package/android/src/main/java/com/ease/EaseView.kt CHANGED
@@ -42,6 +42,7 @@ class EaseView(context: Context) : ReactViewGroup(context) {
42
42
  var transitionStiffness: Float = 120.0f
43
43
  var transitionMass: Float = 1.0f
44
44
  var transitionLoop: String = "none"
45
+ var transitionDelay: Long = 0L
45
46
 
46
47
  // --- Transform origin (0–1 fractions) ---
47
48
  var transformOriginX: Float = 0.5f
@@ -112,6 +113,7 @@ class EaseView(context: Context) : ReactViewGroup(context) {
112
113
  // --- Running animations ---
113
114
  private val runningAnimators = mutableMapOf<String, Animator>()
114
115
  private val runningSpringAnimations = mutableMapOf<DynamicAnimation.ViewProperty, SpringAnimation>()
116
+ private val pendingDelayedRunnables = mutableListOf<Runnable>()
115
117
 
116
118
  // --- Animated properties bitmask (set by ViewManager) ---
117
119
  var animatedProperties: Int = 0
@@ -384,6 +386,7 @@ class EaseView(context: Context) : ReactViewGroup(context) {
384
386
 
385
387
  val animator = ValueAnimator.ofArgb(fromColor, toColor).apply {
386
388
  duration = transitionDuration.toLong()
389
+ startDelay = transitionDelay
387
390
  interpolator = PathInterpolator(
388
391
  transitionEasingBezier[0], transitionEasingBezier[1],
389
392
  transitionEasingBezier[2], transitionEasingBezier[3]
@@ -443,6 +446,7 @@ class EaseView(context: Context) : ReactViewGroup(context) {
443
446
 
444
447
  val animator = ObjectAnimator.ofFloat(this, propertyName, fromValue, toValue).apply {
445
448
  duration = transitionDuration.toLong()
449
+ startDelay = transitionDelay
446
450
  interpolator = PathInterpolator(
447
451
  transitionEasingBezier[0], transitionEasingBezier[1],
448
452
  transitionEasingBezier[2], transitionEasingBezier[3]
@@ -520,10 +524,20 @@ class EaseView(context: Context) : ReactViewGroup(context) {
520
524
 
521
525
  onEaseAnimationStart()
522
526
  runningSpringAnimations[viewProperty] = spring
523
- spring.start()
527
+ if (transitionDelay > 0) {
528
+ val runnable = Runnable { spring.start() }
529
+ pendingDelayedRunnables.add(runnable)
530
+ postDelayed(runnable, transitionDelay)
531
+ } else {
532
+ spring.start()
533
+ }
524
534
  }
525
535
 
526
536
  private fun cancelAllAnimations() {
537
+ for (runnable in pendingDelayedRunnables) {
538
+ removeCallbacks(runnable)
539
+ }
540
+ pendingDelayedRunnables.clear()
527
541
  for (animator in runningAnimators.values) {
528
542
  animator.cancel()
529
543
  }
@@ -573,6 +587,10 @@ class EaseView(context: Context) : ReactViewGroup(context) {
573
587
  }
574
588
 
575
589
  fun cleanup() {
590
+ for (runnable in pendingDelayedRunnables) {
591
+ removeCallbacks(runnable)
592
+ }
593
+ pendingDelayedRunnables.clear()
576
594
  for (animator in runningAnimators.values) {
577
595
  animator.cancel()
578
596
  }
package/android/src/main/java/com/ease/EaseViewManager.kt CHANGED
@@ -173,6 +173,11 @@ class EaseViewManager : ReactViewManager() {
173
173
  view.transitionLoop = value ?: "none"
174
174
  }
175
175
 
176
+ @ReactProp(name = "transitionDelay", defaultInt = 0)
177
+ fun setTransitionDelay(view: EaseView, value: Int) {
178
+ view.transitionDelay = value.toLong()
179
+ }
180
+
176
181
  // --- Border radius ---
177
182
 
178
183
  @ReactProp(name = "animateBorderRadius", defaultFloat = 0f)
package/ios/EaseView.mm CHANGED
@@ -194,6 +194,11 @@ static const int kMaskAnyTransform = kMaskTranslateX | kMaskTranslateY |
194
194
  toValue:toValue
195
195
  props:props
196
196
  loop:loop];
197
+ if (props.transitionDelay > 0) {
198
+ animation.beginTime =
199
+ CACurrentMediaTime() + (props.transitionDelay / 1000.0);
200
+ animation.fillMode = kCAFillModeBackwards;
201
+ }
197
202
  [animation setValue:@(_animationBatchId) forKey:@"easeBatchId"];
198
203
  animation.delegate = self;
199
204
  [self.layer addAnimation:animation forKey:animationKey];
package/lib/module/EaseView.js CHANGED
@@ -154,6 +154,7 @@ export function EaseView({
154
154
  const transitionStiffness = transition?.type === 'spring' ? transition.stiffness ?? 120 : 120;
155
155
  const transitionMass = transition?.type === 'spring' ? transition.mass ?? 1 : 1;
156
156
  const transitionLoop = transition?.type === 'timing' ? transition.loop ?? 'none' : 'none';
157
+ const transitionDelay = transition?.type === 'timing' || transition?.type === 'spring' ? transition.delay ?? 0 : 0;
157
158
  const handleTransitionEnd = onTransitionEnd ? event => onTransitionEnd(event.nativeEvent) : undefined;
158
159
  return /*#__PURE__*/_jsx(NativeEaseView, {
159
160
  style: cleanStyle,
@@ -186,6 +187,7 @@ export function EaseView({
186
187
  transitionStiffness: transitionStiffness,
187
188
  transitionMass: transitionMass,
188
189
  transitionLoop: transitionLoop,
190
+ transitionDelay: transitionDelay,
189
191
  useHardwareLayer: useHardwareLayer,
190
192
  transformOriginX: transformOrigin?.x ?? 0.5,
191
193
  transformOriginY: transformOrigin?.y ?? 0.5,
package/lib/module/EaseView.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["StyleSheet","NativeEaseView","jsx","_jsx","IDENTITY","opacity","translateX","translateY","scaleX","scaleY","rotate","rotateX","rotateY","borderRadius","MASK_OPACITY","MASK_TRANSLATE_X","MASK_TRANSLATE_Y","MASK_SCALE_X","MASK_SCALE_Y","MASK_ROTATE","MASK_ROTATE_X","MASK_ROTATE_Y","MASK_BORDER_RADIUS","MASK_BACKGROUND_COLOR","ANIMATE_TO_STYLE_KEYS","scale","backgroundColor","EASING_PRESETS","linear","easeIn","easeOut","easeInOut","EaseView","animate","initialAnimate","transition","onTransitionEnd","useHardwareLayer","transformOrigin","style","rest","animatedProperties","resolved","initial","resolvedInitial","animBgColor","initialBgColor","cleanStyle","flat","flatten","conflicting","Set","key","Object","keys","styleKey","add","size","__DEV__","console","warn","join","cleaned","k","v","entries","has","transitionType","type","transitionDuration","duration","rawEasing","easing","Array","isArray","length","bezier","transitionDamping","damping","transitionStiffness","stiffness","transitionMass","mass","transitionLoop","loop","handleTransitionEnd","event","nativeEvent","undefined","animateOpacity","animateTranslateX","animateTranslateY","animateScaleX","animateScaleY","animateRotate","animateRotateX","animateRotateY","animateBorderRadius","animateBackgroundColor","initialAnimateOpacity","initialAnimateTranslateX","initialAnimateTranslateY","initialAnimateScaleX","initialAnimateScaleY","initialAnimateRotate","initialAnimateRotateX","initialAnimateRotateY","initialAnimateBorderRadius","initialAnimateBackgroundColor","transitionEasingBezier","transformOriginX","x","transformOriginY","y"],"sourceRoot":"../../src","sources":["EaseView.tsx"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["StyleSheet","NativeEaseView","jsx","_jsx","IDENTITY","opacity","translateX","translateY","scaleX","scaleY","rotate","rotateX","rotateY","borderRadius","MASK_OPACITY","MASK_TRANSLATE_X","MASK_TRANSLATE_Y","MASK_SCALE_X","MASK_SCALE_Y","MASK_ROTATE","MASK_ROTATE_X","MASK_ROTATE_Y","MASK_BORDER_RADIUS","MASK_BACKGROUND_COLOR","ANIMATE_TO_STYLE_KEYS","scale","backgroundColor","EASING_PRESETS","linear","easeIn","easeOut","easeInOut","EaseView","animate","initialAnimate","transition","onTransitionEnd","useHardwareLayer","transformOrigin","style","rest","animatedProperties","resolved","initial","resolvedInitial","animBgColor","initialBgColor","cleanStyle","flat","flatten","conflicting","Set","key","Object","keys","styleKey","add","size","__DEV__","console","warn","join","cleaned","k","v","entries","has","transitionType","type","transitionDuration","duration","rawEasing","easing","Array","isArray","length","bezier","transitionDamping","damping","transitionStiffness","stiffness","transitionMass","mass","transitionLoop","loop","transitionDelay","delay","handleTransitionEnd","event","nativeEvent","undefined","animateOpacity","animateTranslateX","animateTranslateY","animateScaleX","animateScaleY","animateRotate","animateRotateX","animateRotateY","animateBorderRadius","animateBackgroundColor","initialAnimateOpacity","initialAnimateTranslateX","initialAnimateTranslateY","initialAnimateScaleX","initialAnimateScaleY","initialAnimateRotate","initialAnimateRotateX","initialAnimateRotateY","initialAnimateBorderRadius","initialAnimateBackgroundColor","transitionEasingBezier","transformOriginX","x","transformOriginY","y"],"sourceRoot":"../../src","sources":["EaseView.tsx"],"mappings":"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","ignoreList":[]}
package/lib/module/EaseView.web.js ADDED
@@ -0,0 +1,210 @@
1
+ "use strict";
2
+
3
+ import React, { useEffect, useRef, useState, useCallback } from 'react';
4
+ import { View } from 'react-native';
5
+ import { jsx as _jsx } from "react/jsx-runtime";
6
+ /** Identity values used as defaults for animate/initialAnimate. */
7
+ const IDENTITY = {
8
+ opacity: 1,
9
+ translateX: 0,
10
+ translateY: 0,
11
+ scaleX: 1,
12
+ scaleY: 1,
13
+ rotate: 0,
14
+ rotateX: 0,
15
+ rotateY: 0,
16
+ borderRadius: 0
17
+ };
18
+
19
+ /** Preset easing curves as cubic bezier control points. */
20
+ const EASING_PRESETS = {
21
+ linear: [0, 0, 1, 1],
22
+ easeIn: [0.42, 0, 1, 1],
23
+ easeOut: [0, 0, 0.58, 1],
24
+ easeInOut: [0.42, 0, 0.58, 1]
25
+ };
26
+ function resolveAnimateValues(props) {
27
+ return {
28
+ ...IDENTITY,
29
+ ...props,
30
+ scaleX: props?.scaleX ?? props?.scale ?? IDENTITY.scaleX,
31
+ scaleY: props?.scaleY ?? props?.scale ?? IDENTITY.scaleY,
32
+ rotateX: props?.rotateX ?? IDENTITY.rotateX,
33
+ rotateY: props?.rotateY ?? IDENTITY.rotateY,
34
+ backgroundColor: props?.backgroundColor
35
+ };
36
+ }
37
+ function buildTransform(vals) {
38
+ const parts = [];
39
+ if (vals.translateX !== 0 || vals.translateY !== 0) {
40
+ parts.push(`translate(${vals.translateX}px, ${vals.translateY}px)`);
41
+ }
42
+ if (vals.scaleX !== 1 || vals.scaleY !== 1) {
43
+ parts.push(vals.scaleX === vals.scaleY ? `scale(${vals.scaleX})` : `scale(${vals.scaleX}, ${vals.scaleY})`);
44
+ }
45
+ if (vals.rotate !== 0) {
46
+ parts.push(`rotate(${vals.rotate}deg)`);
47
+ }
48
+ if (vals.rotateX !== 0) {
49
+ parts.push(`rotateX(${vals.rotateX}deg)`);
50
+ }
51
+ if (vals.rotateY !== 0) {
52
+ parts.push(`rotateY(${vals.rotateY}deg)`);
53
+ }
54
+ return parts.length > 0 ? parts.join(' ') : 'none';
55
+ }
56
+ function resolveEasing(transition) {
57
+ if (!transition || transition.type !== 'timing') {
58
+ return 'cubic-bezier(0.42, 0, 0.58, 1)';
59
+ }
60
+ const easing = transition.easing ?? 'easeInOut';
61
+ const bezier = Array.isArray(easing) ? easing : EASING_PRESETS[easing];
62
+ return `cubic-bezier(${bezier[0]}, ${bezier[1]}, ${bezier[2]}, ${bezier[3]})`;
63
+ }
64
+ function resolveDuration(transition) {
65
+ if (!transition) return 300;
66
+ if (transition.type === 'timing') return transition.duration ?? 300;
67
+ if (transition.type === 'none') return 0;
68
+ const damping = transition.damping ?? 15;
69
+ const mass = transition.mass ?? 1;
70
+ const tau = 2 * mass / damping;
71
+ return Math.round(tau * 4 * 1000);
72
+ }
73
+
74
+ /** CSS transition properties that we animate. */
75
+ const TRANSITION_PROPS = ['opacity', 'transform', 'border-radius', 'background-color'];
76
+
77
+ /** Counter for unique keyframe names. */
78
+ let keyframeCounter = 0;
79
+ export function EaseView({
80
+ animate,
81
+ initialAnimate,
82
+ transition,
83
+ onTransitionEnd,
84
+ useHardwareLayer: _useHardwareLayer,
85
+ transformOrigin,
86
+ style,
87
+ children
88
+ }) {
89
+ const resolved = resolveAnimateValues(animate);
90
+ const hasInitial = initialAnimate != null;
91
+ const [mounted, setMounted] = useState(!hasInitial);
92
+ // On web, View ref gives us the underlying DOM element.
93
+ const viewRef = useRef(null);
94
+ const animationNameRef = useRef(null);
95
+ const getElement = useCallback(() => viewRef.current, []);
96
+
97
+ // For initialAnimate: render initial values first, then animate on mount.
98
+ useEffect(() => {
99
+ if (hasInitial) {
100
+ getElement()?.getBoundingClientRect();
101
+ setMounted(true);
102
+ }
103
+ }, []); // eslint-disable-line react-hooks/exhaustive-deps
104
+
105
+ const displayValues = !mounted && hasInitial ? resolveAnimateValues(initialAnimate) : resolved;
106
+ const duration = resolveDuration(transition);
107
+ const easing = resolveEasing(transition);
108
+ const originX = ((transformOrigin?.x ?? 0.5) * 100).toFixed(1);
109
+ const originY = ((transformOrigin?.y ?? 0.5) * 100).toFixed(1);
110
+ const transitionType = transition?.type ?? 'timing';
111
+ const loopMode = transition?.type === 'timing' ? transition.loop : undefined;
112
+ const transitionCss = transitionType === 'none' || !mounted && hasInitial ? 'none' : TRANSITION_PROPS.map(prop => `${prop} ${duration}ms ${easing}`).join(', ');
113
+
114
+ // Apply CSS transition/animation properties imperatively (not in RN style spec).
115
+ useEffect(() => {
116
+ const el = getElement();
117
+ if (!el) return;
118
+ if (!loopMode) {
119
+ const springTransition = transitionType === 'spring' ? TRANSITION_PROPS.map(prop => `${prop} ${duration}ms cubic-bezier(0.25, 0.46, 0.45, 0.94)`).join(', ') : null;
120
+ el.style.transition = springTransition ?? transitionCss;
121
+ }
122
+ el.style.transformOrigin = `${originX}% ${originY}%`;
123
+ });
124
+
125
+ // Handle transitionend event via DOM listener.
126
+ useEffect(() => {
127
+ const el = getElement();
128
+ if (!el || !onTransitionEnd) return;
129
+ const handler = e => {
130
+ if (e.target !== e.currentTarget) return;
131
+ if (e.propertyName !== 'opacity' && e.propertyName !== 'transform') return;
132
+ onTransitionEnd({
133
+ finished: true
134
+ });
135
+ };
136
+ el.addEventListener('transitionend', handler);
137
+ return () => el.removeEventListener('transitionend', handler);
138
+ }, [onTransitionEnd, getElement]);
139
+
140
+ // Handle loop animations via CSS @keyframes.
141
+ useEffect(() => {
142
+ const el = getElement();
143
+ if (!loopMode || !el) {
144
+ if (animationNameRef.current) {
145
+ const cleanEl = getElement();
146
+ if (cleanEl) cleanEl.style.animation = '';
147
+ animationNameRef.current = null;
148
+ }
149
+ return;
150
+ }
151
+ const fromValues = initialAnimate ? resolveAnimateValues(initialAnimate) : resolveAnimateValues(undefined);
152
+ const toValues = resolveAnimateValues(animate);
153
+ const fromTransform = buildTransform(fromValues);
154
+ const toTransform = buildTransform(toValues);
155
+ const name = `ease-loop-${++keyframeCounter}`;
156
+ animationNameRef.current = name;
157
+
158
+ // Only include border-radius/background-color in keyframes when explicitly
159
+ // set by the user, to avoid overriding values from the style prop.
160
+ const hasBorderRadius = initialAnimate?.borderRadius != null || animate?.borderRadius != null;
161
+ const hasBgColor = initialAnimate?.backgroundColor != null || animate?.backgroundColor != null;
162
+ const fromBlock = [`opacity: ${fromValues.opacity}`, `transform: ${fromTransform}`, hasBorderRadius ? `border-radius: ${fromValues.borderRadius}px` : '', hasBgColor && fromValues.backgroundColor ? `background-color: ${fromValues.backgroundColor}` : ''].filter(Boolean).join('; ');
163
+ const toBlock = [`opacity: ${toValues.opacity}`, `transform: ${toTransform}`, hasBorderRadius ? `border-radius: ${toValues.borderRadius}px` : '', hasBgColor && toValues.backgroundColor ? `background-color: ${toValues.backgroundColor}` : ''].filter(Boolean).join('; ');
164
+ const keyframes = `@keyframes ${name} { from { ${fromBlock} } to { ${toBlock} } }`;
165
+ const styleEl = document.createElement('style');
166
+ styleEl.textContent = keyframes;
167
+ document.head.appendChild(styleEl);
168
+ const direction = loopMode === 'reverse' ? 'alternate' : 'normal';
169
+ el.style.transition = 'none';
170
+ el.style.animation = `${name} ${duration}ms ${easing} infinite ${direction}`;
171
+ return () => {
172
+ styleEl.remove();
173
+ el.style.animation = '';
174
+ animationNameRef.current = null;
175
+ };
176
+ }, [loopMode, animate, initialAnimate, duration, easing, getElement]);
177
+
178
+ // Build animated style using RN transform array format.
179
+ // react-native-web converts these to CSS transform strings.
180
+ const animatedStyle = {
181
+ opacity: displayValues.opacity,
182
+ transform: [{
183
+ translateX: displayValues.translateX
184
+ }, {
185
+ translateY: displayValues.translateY
186
+ }, {
187
+ scaleX: displayValues.scaleX
188
+ }, {
189
+ scaleY: displayValues.scaleY
190
+ }, {
191
+ rotate: `${displayValues.rotate}deg`
192
+ }, {
193
+ rotateX: `${displayValues.rotateX}deg`
194
+ }, {
195
+ rotateY: `${displayValues.rotateY}deg`
196
+ }],
197
+ ...(displayValues.borderRadius > 0 ? {
198
+ borderRadius: displayValues.borderRadius
199
+ } : {}),
200
+ ...(displayValues.backgroundColor ? {
201
+ backgroundColor: displayValues.backgroundColor
202
+ } : {})
203
+ };
204
+ return /*#__PURE__*/_jsx(View, {
205
+ ref: viewRef,
206
+ style: [style, animatedStyle],
207
+ children: children
208
+ });
209
+ }
210
+ //# sourceMappingURL=EaseView.web.js.map