react-native-ease 0.2.0 → 0.4.0

package/src/EaseView.web.tsx

@@ -0,0 +1,462 @@
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+import { View, type ViewStyle, type StyleProp } from 'react-native';
+import type {
+  AnimateProps,
+  CubicBezier,
+  SingleTransition,
+  Transition,
+  TransitionEndEvent,
+  TransformOrigin,
+} from './types';
+
+/** Identity values used as defaults for animate/initialAnimate. */
+const IDENTITY: Required<Omit<AnimateProps, 'scale' | 'backgroundColor'>> = {
+  opacity: 1,
+  translateX: 0,
+  translateY: 0,
+  scaleX: 1,
+  scaleY: 1,
+  rotate: 0,
+  rotateX: 0,
+  rotateY: 0,
+  borderRadius: 0,
+};
+
+/** Preset easing curves as cubic bezier control points. */
+const EASING_PRESETS: Record<string, CubicBezier> = {
+  linear: [0, 0, 1, 1],
+  easeIn: [0.42, 0, 1, 1],
+  easeOut: [0, 0, 0.58, 1],
+  easeInOut: [0.42, 0, 0.58, 1],
+};
+
+// ---------------------------------------------------------------------------
+// Spring simulation → CSS linear() easing
+// ---------------------------------------------------------------------------
+
+/** Simulate a damped spring from 0 → 1 and return settling duration + sample points. */
+function simulateSpring(
+  damping: number,
+  stiffness: number,
+  mass: number,
+): { durationMs: number; points: number[] } {
+  const dt = 1 / 120; // 120 Hz simulation
+  const maxTime = 10; // 10s safety cap
+  let x = 0;
+  let v = 0;
+  const samples: number[] = [0];
+  let step = 0;
+
+  while (step * dt < maxTime) {
+    const a = (-stiffness * (x - 1) - damping * v) / mass;
+    v += a * dt;
+    x += v * dt;
+    step++;
+    // Downsample to ~60 fps (every 2nd sample)
+    if (step % 2 === 0) {
+      samples.push(Math.round(x * 10000) / 10000);
+    }
+    // Settled?
+    if (Math.abs(x - 1) < 0.001 && Math.abs(v) < 0.001) break;
+  }
+
+  // Ensure last point is exactly 1
+  samples[samples.length - 1] = 1;
+
+  return {
+    durationMs: Math.round(step * dt * 1000),
+    points: samples,
+  };
+}
+
+/** Cache for computed spring easing strings (keyed by damping-stiffness-mass). */
+const springCache = new Map<string, { duration: number; easing: string }>();
+
+function getSpringEasing(
+  damping: number,
+  stiffness: number,
+  mass: number,
+): { duration: number; easing: string } {
+  const key = `${damping}-${stiffness}-${mass}`;
+  let cached = springCache.get(key);
+  if (cached) return cached;
+
+  const { durationMs, points } = simulateSpring(damping, stiffness, mass);
+  const easing = `linear(${points.join(', ')})`;
+  cached = { duration: durationMs, easing };
+  springCache.set(key, cached);
+  return cached;
+}
+
+/** Detect CSS linear() support (lazy, cached). */
+let linearSupported: boolean | null = null;
+function supportsLinearEasing(): boolean {
+  if (linearSupported != null) return linearSupported;
+  try {
+    const el = document.createElement('div');
+    el.style.transitionTimingFunction = 'linear(0, 1)';
+    linearSupported = el.style.transitionTimingFunction !== '';
+  } catch {
+    linearSupported = false;
+  }
+  return linearSupported;
+}
+
+const SPRING_FALLBACK_EASING = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)';
+
+export type EaseViewProps = {
+  animate?: AnimateProps;
+  initialAnimate?: AnimateProps;
+  transition?: Transition;
+  onTransitionEnd?: (event: TransitionEndEvent) => void;
+  /** No-op on web. */
+  useHardwareLayer?: boolean;
+  transformOrigin?: TransformOrigin;
+  style?: StyleProp<ViewStyle>;
+  children?: React.ReactNode;
+};
+
+function resolveAnimateValues(props: AnimateProps | undefined): Required<
+  Omit<AnimateProps, 'scale' | 'backgroundColor'>
+> & {
+  backgroundColor?: string;
+} {
+  return {
+    ...IDENTITY,
+    ...props,
+    scaleX: props?.scaleX ?? props?.scale ?? IDENTITY.scaleX,
+    scaleY: props?.scaleY ?? props?.scale ?? IDENTITY.scaleY,
+    rotateX: props?.rotateX ?? IDENTITY.rotateX,
+    rotateY: props?.rotateY ?? IDENTITY.rotateY,
+    backgroundColor: props?.backgroundColor as string | undefined,
+  };
+}
+
+function buildTransform(vals: ReturnType<typeof resolveAnimateValues>): string {
+  const parts: string[] = [];
+  if (vals.translateX !== 0 || vals.translateY !== 0) {
+    parts.push(`translate(${vals.translateX}px, ${vals.translateY}px)`);
+  }
+  if (vals.scaleX !== 1 || vals.scaleY !== 1) {
+    parts.push(
+      vals.scaleX === vals.scaleY
+        ? `scale(${vals.scaleX})`
+        : `scale(${vals.scaleX}, ${vals.scaleY})`,
+    );
+  }
+  if (vals.rotate !== 0) {
+    parts.push(`rotate(${vals.rotate}deg)`);
+  }
+  if (vals.rotateX !== 0) {
+    parts.push(`rotateX(${vals.rotateX}deg)`);
+  }
+  if (vals.rotateY !== 0) {
+    parts.push(`rotateY(${vals.rotateY}deg)`);
+  }
+  return parts.length > 0 ? parts.join(' ') : 'none';
+}
+
+/** Returns true if the transition is a SingleTransition (has a `type` field). */
+function isSingleTransition(t: Transition): t is SingleTransition {
+  return 'type' in t;
+}
+
+/** Resolve a single config into CSS-ready duration/easing. */
+function resolveConfigForCss(config: SingleTransition | undefined): {
+  duration: number;
+  easing: string;
+  type: string;
+} {
+  if (!config || config.type === 'none') {
+    return { duration: 0, easing: 'linear', type: config?.type ?? 'timing' };
+  }
+  return {
+    duration: resolveDuration(config),
+    easing: resolveEasing(config),
+    type: config.type,
+  };
+}
+
+/** CSS property names for each category. */
+const CSS_PROP_MAP = {
+  opacity: 'opacity',
+  transform: 'transform',
+  borderRadius: 'border-radius',
+  backgroundColor: 'background-color',
+} as const;
+
+type CategoryKey = keyof typeof CSS_PROP_MAP;
+
+/** Resolve transition prop into per-category CSS configs. */
+function resolvePerCategoryConfigs(
+  transition: Transition | undefined,
+): Record<CategoryKey, { duration: number; easing: string; type: string }> {
+  if (!transition) {
+    const def = resolveConfigForCss(undefined);
+    return {
+      opacity: def,
+      transform: def,
+      borderRadius: def,
+      backgroundColor: def,
+    };
+  }
+  if (isSingleTransition(transition)) {
+    const def = resolveConfigForCss(transition);
+    return {
+      opacity: def,
+      transform: def,
+      borderRadius: def,
+      backgroundColor: def,
+    };
+  }
+  // TransitionMap
+  const defaultConfig = resolveConfigForCss(transition.default);
+  return {
+    opacity: transition.opacity
+      ? resolveConfigForCss(transition.opacity)
+      : defaultConfig,
+    transform: transition.transform
+      ? resolveConfigForCss(transition.transform)
+      : defaultConfig,
+    borderRadius: transition.borderRadius
+      ? resolveConfigForCss(transition.borderRadius)
+      : defaultConfig,
+    backgroundColor: transition.backgroundColor
+      ? resolveConfigForCss(transition.backgroundColor)
+      : defaultConfig,
+  };
+}
+
+function resolveEasing(transition: SingleTransition | undefined): string {
+  if (!transition || transition.type === 'none') {
+    return 'linear';
+  }
+  if (transition.type === 'spring') {
+    const d = transition.damping ?? 15;
+    const s = transition.stiffness ?? 120;
+    const m = transition.mass ?? 1;
+    if (supportsLinearEasing()) {
+      return getSpringEasing(d, s, m).easing;
+    }
+    return SPRING_FALLBACK_EASING;
+  }
+  // timing
+  const easing = transition.easing ?? 'easeInOut';
+  const bezier: CubicBezier = Array.isArray(easing)
+    ? easing
+    : EASING_PRESETS[easing]!;
+  return `cubic-bezier(${bezier[0]}, ${bezier[1]}, ${bezier[2]}, ${bezier[3]})`;
+}
+
+function resolveDuration(transition: SingleTransition | undefined): number {
+  if (!transition) return 300;
+  if (transition.type === 'timing') return transition.duration ?? 300;
+  if (transition.type === 'none') return 0;
+  // Spring: use simulation-derived duration (incorporates stiffness)
+  const d = transition.damping ?? 15;
+  const s = transition.stiffness ?? 120;
+  const m = transition.mass ?? 1;
+  return getSpringEasing(d, s, m).duration;
+}
+
+/** Counter for unique keyframe names. */
+let keyframeCounter = 0;
+
+export function EaseView({
+  animate,
+  initialAnimate,
+  transition,
+  onTransitionEnd,
+  useHardwareLayer: _useHardwareLayer,
+  transformOrigin,
+  style,
+  children,
+}: EaseViewProps) {
+  const resolved = resolveAnimateValues(animate);
+  const hasInitial = initialAnimate != null;
+  const [mounted, setMounted] = useState(!hasInitial);
+  // On web, View ref gives us the underlying DOM element.
+  const viewRef = useRef<React.ComponentRef<typeof View>>(null);
+  const animationNameRef = useRef<string | null>(null);
+
+  const getElement = useCallback(
+    () => viewRef.current as unknown as HTMLElement | null,
+    [],
+  );
+
+  // For initialAnimate: render initial values first, then animate on mount.
+  useEffect(() => {
+    if (hasInitial) {
+      getElement()?.getBoundingClientRect();
+      setMounted(true);
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const displayValues =
+    !mounted && hasInitial ? resolveAnimateValues(initialAnimate) : resolved;
+
+  const categoryConfigs = resolvePerCategoryConfigs(transition);
+
+  // For loop mode, use the default/single transition config
+  const singleTransition =
+    transition && isSingleTransition(transition)
+      ? transition
+      : transition && !isSingleTransition(transition)
+      ? transition.default
+      : undefined;
+  const loopMode =
+    singleTransition?.type === 'timing' ? singleTransition.loop : undefined;
+  const loopDuration = resolveDuration(singleTransition);
+  const loopEasing = resolveEasing(singleTransition);
+
+  const originX = ((transformOrigin?.x ?? 0.5) * 100).toFixed(1);
+  const originY = ((transformOrigin?.y ?? 0.5) * 100).toFixed(1);
+
+  const transitionCss =
+    !mounted && hasInitial
+      ? 'none'
+      : (Object.keys(CSS_PROP_MAP) as CategoryKey[])
+          .filter((key) => {
+            const cfg = categoryConfigs[key];
+            return cfg.type !== 'none' && cfg.duration > 0;
+          })
+          .map((key) => {
+            const cfg = categoryConfigs[key];
+            return `${CSS_PROP_MAP[key]} ${cfg.duration}ms ${cfg.easing}`;
+          })
+          .join(', ') || 'none';
+
+  // Apply CSS transition/animation properties imperatively (not in RN style spec).
+  useEffect(() => {
+    const el = getElement();
+    if (!el) return;
+
+    if (!loopMode) {
+      el.style.transition = transitionCss;
+    }
+    el.style.transformOrigin = `${originX}% ${originY}%`;
+  });
+
+  // Handle transitionend event via DOM listener.
+  useEffect(() => {
+    const el = getElement();
+    if (!el || !onTransitionEnd) return;
+
+    const handler = (e: TransitionEvent) => {
+      if (e.target !== e.currentTarget) return;
+      if (e.propertyName !== 'opacity' && e.propertyName !== 'transform')
+        return;
+      onTransitionEnd({ finished: true });
+    };
+
+    el.addEventListener('transitionend', handler);
+    return () => el.removeEventListener('transitionend', handler);
+  }, [onTransitionEnd, getElement]);
+
+  // Handle loop animations via CSS @keyframes.
+  useEffect(() => {
+    const el = getElement();
+    if (!loopMode || !el) {
+      if (animationNameRef.current) {
+        const cleanEl = getElement();
+        if (cleanEl) cleanEl.style.animation = '';
+        animationNameRef.current = null;
+      }
+      return;
+    }
+
+    const fromValues = initialAnimate
+      ? resolveAnimateValues(initialAnimate)
+      : resolveAnimateValues(undefined);
+    const toValues = resolveAnimateValues(animate);
+
+    const fromTransform = buildTransform(fromValues);
+    const toTransform = buildTransform(toValues);
+
+    const name = `ease-loop-${++keyframeCounter}`;
+    animationNameRef.current = name;
+
+    // Only include border-radius/background-color in keyframes when explicitly
+    // set by the user, to avoid overriding values from the style prop.
+    const hasBorderRadius =
+      initialAnimate?.borderRadius != null || animate?.borderRadius != null;
+    const hasBgColor =
+      initialAnimate?.backgroundColor != null ||
+      animate?.backgroundColor != null;
+
+    const fromBlock = [
+      `opacity: ${fromValues.opacity}`,
+      `transform: ${fromTransform}`,
+      hasBorderRadius ? `border-radius: ${fromValues.borderRadius}px` : '',
+      hasBgColor && fromValues.backgroundColor
+        ? `background-color: ${fromValues.backgroundColor}`
+        : '',
+    ]
+      .filter(Boolean)
+      .join('; ');
+
+    const toBlock = [
+      `opacity: ${toValues.opacity}`,
+      `transform: ${toTransform}`,
+      hasBorderRadius ? `border-radius: ${toValues.borderRadius}px` : '',
+      hasBgColor && toValues.backgroundColor
+        ? `background-color: ${toValues.backgroundColor}`
+        : '',
+    ]
+      .filter(Boolean)
+      .join('; ');
+
+    const keyframes = `@keyframes ${name} { from { ${fromBlock} } to { ${toBlock} } }`;
+
+    const styleEl = document.createElement('style');
+    styleEl.textContent = keyframes;
+    document.head.appendChild(styleEl);
+
+    const direction = loopMode === 'reverse' ? 'alternate' : 'normal';
+    el.style.transition = 'none';
+    el.style.animation = `${name} ${loopDuration}ms ${loopEasing} infinite ${direction}`;
+
+    return () => {
+      styleEl.remove();
+      el.style.animation = '';
+      animationNameRef.current = null;
+    };
+  }, [loopMode, animate, initialAnimate, loopDuration, loopEasing, getElement]);
+
+  // Build animated style using RN transform array format.
+  // react-native-web converts these to CSS transform strings.
+  const animatedStyle: ViewStyle = {
+    opacity: displayValues.opacity,
+    transform: [
+      ...(displayValues.translateX !== 0
+        ? [{ translateX: displayValues.translateX }]
+        : []),
+      ...(displayValues.translateY !== 0
+        ? [{ translateY: displayValues.translateY }]
+        : []),
+      ...(displayValues.scaleX !== 1 ? [{ scaleX: displayValues.scaleX }] : []),
+      ...(displayValues.scaleY !== 1 ? [{ scaleY: displayValues.scaleY }] : []),
+      ...(displayValues.rotate !== 0
+        ? [{ rotate: `${displayValues.rotate}deg` }]
+        : []),
+      ...(displayValues.rotateX !== 0
+        ? [{ rotateX: `${displayValues.rotateX}deg` }]
+        : []),
+      ...(displayValues.rotateY !== 0
+        ? [{ rotateY: `${displayValues.rotateY}deg` }]
+        : []),
+    ],
+    ...(displayValues.borderRadius > 0
+      ? { borderRadius: displayValues.borderRadius }
+      : {}),
+    ...(displayValues.backgroundColor
+      ? { backgroundColor: displayValues.backgroundColor }
+      : {}),
+  };
+
+  return (
+    <View ref={viewRef} style={[style, animatedStyle]}>
+      {children}
+    </View>
+  );
+}

package/src/EaseViewNativeComponent.ts

@@ -6,6 +6,28 @@ import {
   type ColorValue,
 } from 'react-native';
 
+type Float = CodegenTypes.Float;
+type Int32 = CodegenTypes.Int32;
+
+type NativeTransitionConfig = Readonly<{
+  type: string;
+  duration: Int32;
+  easingBezier: ReadonlyArray<Float>;
+  damping: Float;
+  stiffness: Float;
+  mass: Float;
+  loop: string;
+  delay: Int32;
+}>;
+
+type NativeTransitions = Readonly<{
+  defaultConfig: NativeTransitionConfig;
+  transform?: NativeTransitionConfig;
+  opacity?: NativeTransitionConfig;
+  borderRadius?: NativeTransitionConfig;
+  backgroundColor?: NativeTransitionConfig;
+}>;
+
 export interface NativeProps extends ViewProps {
   // Bitmask of which properties are animated (0 = none, let style handle all)
   animatedProperties?: CodegenTypes.WithDefault<CodegenTypes.Int32, 0>;
@@ -37,21 +59,8 @@ export interface NativeProps extends ViewProps {
   >;
   initialAnimateBackgroundColor?: ColorValue;
 
-  // Transition config
-  transitionType?: CodegenTypes.WithDefault<
-    'timing' | 'spring' | 'none',
-    'timing'
-  >;
-  transitionDuration?: CodegenTypes.WithDefault<CodegenTypes.Int32, 300>;
-  // Easing cubic bezier control points [x1, y1, x2, y2] (default: easeInOut)
-  transitionEasingBezier?: ReadonlyArray<CodegenTypes.Float>;
-  transitionDamping?: CodegenTypes.WithDefault<CodegenTypes.Float, 15.0>;
-  transitionStiffness?: CodegenTypes.WithDefault<CodegenTypes.Float, 120.0>;
-  transitionMass?: CodegenTypes.WithDefault<CodegenTypes.Float, 1.0>;
-  transitionLoop?: CodegenTypes.WithDefault<
-    'none' | 'repeat' | 'reverse',
-    'none'
-  >;
+  // Unified transition config — one struct with per-property configs
+  transitions?: NativeTransitions;
 
   // Transform origin (0–1 fractions, default center)
   transformOriginX?: CodegenTypes.WithDefault<CodegenTypes.Float, 0.5>;

package/src/index.tsx

@@ -4,6 +4,8 @@ export type {
   AnimateProps,
   CubicBezier,
   Transition,
+  SingleTransition,
+  TransitionMap,
   TimingTransition,
   SpringTransition,
   NoneTransition,

package/src/types.ts

@@ -20,6 +20,8 @@ export type TimingTransition = {
   easing?: EasingType;
   /** Loop mode — 'repeat' restarts from the beginning, 'reverse' alternates direction. */
   loop?: 'repeat' | 'reverse';
+  /** Delay in milliseconds before the animation starts. @default 0 */
+  delay?: number;
 };
 
 /** Physics-based spring transition. */
@@ -31,6 +33,8 @@ export type SpringTransition = {
   stiffness?: number;
   /** Mass of the object — higher values mean slower, more momentum. @default 1 */
   mass?: number;
+  /** Delay in milliseconds before the animation starts. @default 0 */
+  delay?: number;
 };
 
 /** No transition — values are applied immediately without animation. */
@@ -38,8 +42,28 @@ export type NoneTransition = {
   type: 'none';
 };
 
-/** Animation transition configuration. */
-export type Transition = TimingTransition | SpringTransition | NoneTransition;
+/** A single animation transition configuration. */
+export type SingleTransition =
+  | TimingTransition
+  | SpringTransition
+  | NoneTransition;
+
+/** Per-property transition map with category-based keys. */
+export type TransitionMap = {
+  /** Fallback config for properties not explicitly listed. */
+  default?: SingleTransition;
+  /** Config for all transform properties (translateX/Y, scaleX/Y, rotate, rotateX/Y). */
+  transform?: SingleTransition;
+  /** Config for opacity. */
+  opacity?: SingleTransition;
+  /** Config for borderRadius. */
+  borderRadius?: SingleTransition;
+  /** Config for backgroundColor. */
+  backgroundColor?: SingleTransition;
+};
+
+/** Animation transition configuration — either a single config or a per-property map. */
+export type Transition = SingleTransition | TransitionMap;
 
 /** Event fired when the animation ends. */
 export type TransitionEndEvent = {