react-native-ease 0.3.0 → 0.4.0

package/src/EaseView.tsx

@@ -1,8 +1,9 @@
 import { StyleSheet, type ViewProps, type ViewStyle } from 'react-native';
-import NativeEaseView from './EaseViewNativeComponent';
+import NativeEaseView, { type NativeProps } from './EaseViewNativeComponent';
 import type {
   AnimateProps,
   CubicBezier,
+  SingleTransition,
   Transition,
   TransitionEndEvent,
   TransformOrigin,
@@ -58,6 +59,115 @@ const EASING_PRESETS: Record<string, CubicBezier> = {
   easeInOut: [0.42, 0, 0.58, 1],
 };
 
+/** Returns true if the transition is a SingleTransition (has a `type` field). */
+function isSingleTransition(t: Transition): t is SingleTransition {
+  return 'type' in t;
+}
+
+type NativeTransitions = NonNullable<NativeProps['transitions']>;
+type NativeTransitionConfig = NativeTransitions['defaultConfig'];
+
+/** Default config: timing 300ms easeInOut. */
+const DEFAULT_CONFIG: NativeTransitionConfig = {
+  type: 'timing',
+  duration: 300,
+  easingBezier: [0.42, 0, 0.58, 1],
+  damping: 15,
+  stiffness: 120,
+  mass: 1,
+  loop: 'none',
+  delay: 0,
+};
+
+/** Resolve a SingleTransition into a native config object. */
+function resolveSingleConfig(config: SingleTransition): NativeTransitionConfig {
+  const type = config.type as string;
+  const duration = config.type === 'timing' ? config.duration ?? 300 : 300;
+  const rawEasing =
+    config.type === 'timing' ? config.easing ?? 'easeInOut' : 'easeInOut';
+  if (__DEV__) {
+    if (Array.isArray(rawEasing)) {
+      if ((rawEasing as number[]).length !== 4) {
+        console.warn(
+          'react-native-ease: Custom easing must be a [x1, y1, x2, y2] tuple (got length ' +
+            (rawEasing as number[]).length +
+            ').',
+        );
+      }
+      if (
+        rawEasing[0] < 0 ||
+        rawEasing[0] > 1 ||
+        rawEasing[2] < 0 ||
+        rawEasing[2] > 1
+      ) {
+        console.warn(
+          'react-native-ease: Easing x-values (x1, x2) must be between 0 and 1.',
+        );
+      }
+    }
+  }
+  const easingBezier: number[] = Array.isArray(rawEasing)
+    ? rawEasing
+    : EASING_PRESETS[rawEasing]!;
+  const damping = config.type === 'spring' ? config.damping ?? 15 : 15;
+  const stiffness = config.type === 'spring' ? config.stiffness ?? 120 : 120;
+  const mass = config.type === 'spring' ? config.mass ?? 1 : 1;
+  const loop: string =
+    config.type === 'timing' ? config.loop ?? 'none' : 'none';
+  const delay =
+    config.type === 'timing' || config.type === 'spring'
+      ? config.delay ?? 0
+      : 0;
+  return {
+    type,
+    duration,
+    easingBezier,
+    damping,
+    stiffness,
+    mass,
+    loop,
+    delay,
+  };
+}
+
+/** Category keys that map to optional NativeTransitions fields. */
+const CATEGORY_KEYS = [
+  'transform',
+  'opacity',
+  'borderRadius',
+  'backgroundColor',
+] as const;
+
+/** Resolve the transition prop into a NativeTransitions struct. */
+function resolveTransitions(transition?: Transition): NativeTransitions {
+  // No transition: timing default for all properties
+  if (transition == null) {
+    return { defaultConfig: DEFAULT_CONFIG };
+  }
+
+  // Single transition: set as defaultConfig only
+  if (isSingleTransition(transition)) {
+    return { defaultConfig: resolveSingleConfig(transition) };
+  }
+
+  // TransitionMap: resolve defaultConfig + only specified category keys
+  const defaultConfig = transition.default
+    ? resolveSingleConfig(transition.default)
+    : DEFAULT_CONFIG;
+
+  const result: NativeTransitions = { defaultConfig };
+
+  for (const key of CATEGORY_KEYS) {
+    const specific = transition[key];
+    if (specific != null) {
+      (result as Record<string, NativeTransitionConfig>)[key] =
+        resolveSingleConfig(specific);
+    }
+  }
+
+  return result;
+}
+
 export type EaseViewProps = ViewProps & {
   /** Target values for animated properties. */
   animate?: AnimateProps;
@@ -86,6 +196,8 @@ export type EaseViewProps = ViewProps & {
   useHardwareLayer?: boolean;
   /** Pivot point for scale and rotation as 0–1 fractions. @default { x: 0.5, y: 0.5 } (center) */
   transformOrigin?: TransformOrigin;
+  /** NativeWind / Tailwind CSS class string. Requires NativeWind in your project. */
+  className?: string;
 };
 
 export function EaseView({
@@ -179,50 +291,8 @@ export function EaseView({
     }
   }
 
-  // Resolve transition config
-  const transitionType = transition?.type ?? 'timing';
-  const transitionDuration =
-    transition?.type === 'timing' ? transition.duration ?? 300 : 300;
-  const rawEasing =
-    transition?.type === 'timing'
-      ? transition.easing ?? 'easeInOut'
-      : 'easeInOut';
-  if (__DEV__) {
-    if (Array.isArray(rawEasing)) {
-      if ((rawEasing as number[]).length !== 4) {
-        console.warn(
-          'react-native-ease: Custom easing must be a [x1, y1, x2, y2] tuple (got length ' +
-            (rawEasing as number[]).length +
-            ').',
-        );
-      }
-      if (
-        rawEasing[0] < 0 ||
-        rawEasing[0] > 1 ||
-        rawEasing[2] < 0 ||
-        rawEasing[2] > 1
-      ) {
-        console.warn(
-          'react-native-ease: Easing x-values (x1, x2) must be between 0 and 1.',
-        );
-      }
-    }
-  }
-  const bezier: CubicBezier = Array.isArray(rawEasing)
-    ? rawEasing
-    : EASING_PRESETS[rawEasing]!;
-  const transitionDamping =
-    transition?.type === 'spring' ? transition.damping ?? 15 : 15;
-  const transitionStiffness =
-    transition?.type === 'spring' ? transition.stiffness ?? 120 : 120;
-  const transitionMass =
-    transition?.type === 'spring' ? transition.mass ?? 1 : 1;
-  const transitionLoop =
-    transition?.type === 'timing' ? transition.loop ?? 'none' : 'none';
-  const transitionDelay =
-    transition?.type === 'timing' || transition?.type === 'spring'
-      ? transition.delay ?? 0
-      : 0;
+  // Resolve transition config into a fully-populated struct
+  const transitions = resolveTransitions(transition);
 
   const handleTransitionEnd = onTransitionEnd
     ? (event: { nativeEvent: { finished: boolean } }) =>
@@ -254,14 +324,7 @@ export function EaseView({
       initialAnimateRotateY={resolvedInitial.rotateY}
       initialAnimateBorderRadius={resolvedInitial.borderRadius}
       initialAnimateBackgroundColor={initialBgColor}
-      transitionType={transitionType}
-      transitionDuration={transitionDuration}
-      transitionEasingBezier={bezier}
-      transitionDamping={transitionDamping}
-      transitionStiffness={transitionStiffness}
-      transitionMass={transitionMass}
-      transitionLoop={transitionLoop}
-      transitionDelay={transitionDelay}
+      transitions={transitions}
       useHardwareLayer={useHardwareLayer}
       transformOriginX={transformOrigin?.x ?? 0.5}
       transformOriginY={transformOrigin?.y ?? 0.5}

package/src/EaseView.web.tsx

@@ -3,6 +3,7 @@ import { View, type ViewStyle, type StyleProp } from 'react-native';
 import type {
   AnimateProps,
   CubicBezier,
+  SingleTransition,
   Transition,
   TransitionEndEvent,
   TransformOrigin,
@@ -29,6 +30,80 @@ const EASING_PRESETS: Record<string, CubicBezier> = {
   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;
@@ -81,10 +156,91 @@ function buildTransform(vals: ReturnType<typeof resolveAnimateValues>): string {
   return parts.length > 0 ? parts.join(' ') : 'none';
 }
 
-function resolveEasing(transition: Transition | undefined): string {
-  if (!transition || transition.type !== 'timing') {
-    return 'cubic-bezier(0.42, 0, 0.58, 1)';
+/** 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
@@ -92,24 +248,17 @@ function resolveEasing(transition: Transition | undefined): string {
   return `cubic-bezier(${bezier[0]}, ${bezier[1]}, ${bezier[2]}, ${bezier[3]})`;
 }
 
-function resolveDuration(transition: Transition | undefined): number {
+function resolveDuration(transition: SingleTransition | undefined): number {
   if (!transition) return 300;
   if (transition.type === 'timing') return transition.duration ?? 300;
   if (transition.type === 'none') return 0;
-  const damping = transition.damping ?? 15;
-  const mass = transition.mass ?? 1;
-  const tau = (2 * mass) / damping;
-  return Math.round(tau * 4 * 1000);
+  // 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;
 }
 
-/** CSS transition properties that we animate. */
-const TRANSITION_PROPS = [
-  'opacity',
-  'transform',
-  'border-radius',
-  'background-color',
-];
-
 /** Counter for unique keyframe names. */
 let keyframeCounter = 0;
 
@@ -146,21 +295,36 @@ export function EaseView({
   const displayValues =
     !mounted && hasInitial ? resolveAnimateValues(initialAnimate) : resolved;
 
-  const duration = resolveDuration(transition);
-  const easing = resolveEasing(transition);
+  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 transitionType = transition?.type ?? 'timing';
-  const loopMode = transition?.type === 'timing' ? transition.loop : undefined;
-
   const transitionCss =
-    transitionType === 'none' || (!mounted && hasInitial)
+    !mounted && hasInitial
       ? 'none'
-      : TRANSITION_PROPS.map((prop) => `${prop} ${duration}ms ${easing}`).join(
-          ', ',
-        );
+      : (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(() => {
@@ -168,14 +332,7 @@ export function EaseView({
     if (!el) return;
 
     if (!loopMode) {
-      const springTransition =
-        transitionType === 'spring'
-          ? TRANSITION_PROPS.map(
-              (prop) =>
-                `${prop} ${duration}ms cubic-bezier(0.25, 0.46, 0.45, 0.94)`,
-            ).join(', ')
-          : null;
-      el.style.transition = springTransition ?? transitionCss;
+      el.style.transition = transitionCss;
     }
     el.style.transformOrigin = `${originX}% ${originY}%`;
   });
@@ -257,27 +414,37 @@ export function EaseView({
 
     const direction = loopMode === 'reverse' ? 'alternate' : 'normal';
     el.style.transition = 'none';
-    el.style.animation = `${name} ${duration}ms ${easing} infinite ${direction}`;
+    el.style.animation = `${name} ${loopDuration}ms ${loopEasing} infinite ${direction}`;
 
     return () => {
       styleEl.remove();
       el.style.animation = '';
       animationNameRef.current = null;
     };
-  }, [loopMode, animate, initialAnimate, duration, easing, getElement]);
+  }, [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: [
-      { translateX: displayValues.translateX },
-      { translateY: displayValues.translateY },
-      { scaleX: displayValues.scaleX },
-      { scaleY: displayValues.scaleY },
-      { rotate: `${displayValues.rotate}deg` },
-      { rotateX: `${displayValues.rotateX}deg` },
-      { rotateY: `${displayValues.rotateY}deg` },
+      ...(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 }

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,22 +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'
-  >;
-  transitionDelay?: CodegenTypes.WithDefault<CodegenTypes.Int32, 0>;
+  // 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

@@ -42,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 = {