rn-iconify 1.0.0 → 2.0.1

package/src/animated/index.ts

@@ -0,0 +1,97 @@
+/**
+ * Animated Icons Module
+ * Provides animation capabilities for rn-iconify icons
+ *
+ * @example Basic usage with preset
+ * ```tsx
+ * import { Mdi } from 'rn-iconify';
+ *
+ * // Direct usage with animate prop
+ * <Mdi name="loading" animate="spin" />
+ * <Mdi name="heart" animate="pulse" />
+ * <Mdi name="bell" animate="shake" />
+ * ```
+ *
+ * @example Using AnimatedIcon wrapper
+ * ```tsx
+ * import { AnimatedIcon } from 'rn-iconify/animated';
+ * import { Mdi } from 'rn-iconify';
+ *
+ * <AnimatedIcon animate="bounce">
+ *   <Mdi name="star" size={24} />
+ * </AnimatedIcon>
+ * ```
+ *
+ * @example Custom animation configuration
+ * ```tsx
+ * <Mdi
+ *   name="sync"
+ *   animate={{
+ *     type: 'rotate',
+ *     duration: 2000,
+ *     easing: 'linear',
+ *     loop: true,
+ *   }}
+ * />
+ * ```
+ *
+ * @example Animation control with ref
+ * ```tsx
+ * import { useRef } from 'react';
+ * import { AnimatedIcon, AnimationControls } from 'rn-iconify/animated';
+ *
+ * function MyComponent() {
+ *   const animRef = useRef<AnimationControls>(null);
+ *
+ *   const handlePress = () => {
+ *     if (animRef.current?.isAnimating) {
+ *       animRef.current.stop();
+ *     } else {
+ *       animRef.current?.start();
+ *     }
+ *   };
+ *
+ *   return (
+ *     <TouchableOpacity onPress={handlePress}>
+ *       <AnimatedIcon ref={animRef} animate="spin" autoPlay={false}>
+ *         <Mdi name="refresh" size={24} />
+ *       </AnimatedIcon>
+ *     </TouchableOpacity>
+ *   );
+ * }
+ * ```
+ */
+
+// Types
+export type {
+  AnimationPreset,
+  AnimationDirection,
+  AnimationEasing,
+  AnimationConfig,
+  AnimationType,
+  ResolvedAnimationConfig,
+  AnimationState,
+  AnimationControls,
+  AnimatedIconProps,
+} from './types';
+
+export { DEFAULT_ANIMATION_DURATIONS, DEFAULT_ANIMATION_LOOPS } from './types';
+
+// Presets
+export {
+  ANIMATION_PRESETS,
+  getEasingFunction,
+  resolveAnimation,
+  isAnimationPreset,
+  getDefaultDuration,
+  getDefaultLoop,
+} from './presets';
+
+// Hook
+export { useIconAnimation } from './useIconAnimation';
+
+// Component
+export { AnimatedIcon } from './AnimatedIcon';
+
+// Default export
+export { AnimatedIcon as default } from './AnimatedIcon';

package/src/animated/presets.ts

@@ -0,0 +1,211 @@
+/**
+ * Animation presets for rn-iconify
+ * Pre-configured animations for common use cases
+ */
+
+import { Easing } from 'react-native';
+import type {
+  AnimationPreset,
+  AnimationConfig,
+  ResolvedAnimationConfig,
+  AnimationType,
+  AnimationEasing,
+} from './types';
+
+/**
+ * Preset animation configurations
+ */
+export const ANIMATION_PRESETS: Record<AnimationPreset, AnimationConfig> = {
+  /**
+   * Continuous rotation (loading spinner)
+   */
+  spin: {
+    type: 'rotate',
+    duration: 1000,
+    loop: true,
+    iterations: -1,
+    easing: 'linear',
+    direction: 'normal',
+    delay: 0,
+    from: 0,
+    to: 360,
+  },
+
+  /**
+   * Pulsing opacity (heartbeat effect)
+   */
+  pulse: {
+    type: 'opacity',
+    duration: 1500,
+    loop: true,
+    iterations: -1,
+    easing: 'ease-in-out',
+    direction: 'alternate',
+    delay: 0,
+    from: 1,
+    to: 0.4,
+  },
+
+  /**
+   * Bouncing scale (attention grabber)
+   */
+  bounce: {
+    type: 'scale',
+    duration: 600,
+    loop: true,
+    iterations: -1,
+    easing: 'bounce',
+    direction: 'alternate',
+    delay: 0,
+    from: 1,
+    to: 1.2,
+  },
+
+  /**
+   * Horizontal shake (error/warning)
+   */
+  shake: {
+    type: 'translate',
+    duration: 500,
+    loop: false,
+    iterations: 1,
+    easing: 'ease-out',
+    direction: 'normal',
+    delay: 0,
+    from: { x: 0, y: 0 },
+    to: { x: 10, y: 0 },
+  },
+
+  /**
+   * Ping effect (notification)
+   */
+  ping: {
+    type: 'scale',
+    duration: 1000,
+    loop: true,
+    iterations: -1,
+    easing: 'ease-out',
+    direction: 'normal',
+    delay: 0,
+    from: 1,
+    to: 1.5,
+  },
+
+  /**
+   * Quick wiggle (playful attention)
+   */
+  wiggle: {
+    type: 'rotate',
+    duration: 300,
+    loop: false,
+    iterations: 1,
+    easing: 'ease-in-out',
+    direction: 'alternate',
+    delay: 0,
+    from: -15,
+    to: 15,
+  },
+};
+
+/**
+ * Convert easing string to React Native Easing function
+ */
+export function getEasingFunction(easing: AnimationEasing): (value: number) => number {
+  if (typeof easing === 'function') {
+    return easing;
+  }
+
+  switch (easing) {
+    case 'linear':
+      return Easing.linear;
+    case 'ease':
+      return Easing.ease;
+    case 'ease-in':
+      return Easing.in(Easing.ease);
+    case 'ease-out':
+      return Easing.out(Easing.ease);
+    case 'ease-in-out':
+      return Easing.inOut(Easing.ease);
+    case 'bounce':
+      return Easing.bounce;
+    default:
+      return Easing.linear;
+  }
+}
+
+/**
+ * Resolve animation type to full configuration
+ */
+export function resolveAnimation(
+  animation: AnimationType,
+  overrides?: {
+    duration?: number;
+    loop?: boolean;
+    easing?: AnimationEasing;
+    delay?: number;
+  }
+): ResolvedAnimationConfig {
+  // Get base config from preset or use custom config
+  const baseConfig: AnimationConfig =
+    typeof animation === 'string' ? { ...ANIMATION_PRESETS[animation] } : { ...animation };
+
+  // Normalize from/to values
+  const rawFrom = baseConfig.from ?? 0;
+  const rawTo = baseConfig.to ?? 1;
+
+  // Normalize translate values to have required x/y
+  let normalizedFrom: number | { x: number; y: number };
+  let normalizedTo: number | { x: number; y: number };
+
+  if (baseConfig.type === 'translate') {
+    if (typeof rawFrom === 'number') {
+      normalizedFrom = { x: rawFrom, y: 0 };
+    } else {
+      normalizedFrom = { x: rawFrom.x ?? 0, y: rawFrom.y ?? 0 };
+    }
+    if (typeof rawTo === 'number') {
+      normalizedTo = { x: rawTo, y: 0 };
+    } else {
+      normalizedTo = { x: rawTo.x ?? 0, y: rawTo.y ?? 0 };
+    }
+  } else {
+    normalizedFrom = typeof rawFrom === 'number' ? rawFrom : 0;
+    normalizedTo = typeof rawTo === 'number' ? rawTo : 1;
+  }
+
+  // Apply overrides
+  const config: ResolvedAnimationConfig = {
+    type: baseConfig.type,
+    duration: overrides?.duration ?? baseConfig.duration ?? 1000,
+    loop: overrides?.loop ?? baseConfig.loop ?? true,
+    iterations: baseConfig.iterations ?? -1,
+    easing: overrides?.easing ?? baseConfig.easing ?? 'linear',
+    direction: baseConfig.direction ?? 'normal',
+    delay: overrides?.delay ?? baseConfig.delay ?? 0,
+    from: normalizedFrom,
+    to: normalizedTo,
+  };
+
+  return config;
+}
+
+/**
+ * Check if a string is a valid animation preset
+ */
+export function isAnimationPreset(value: string): value is AnimationPreset {
+  return value in ANIMATION_PRESETS;
+}
+
+/**
+ * Get default duration for a preset
+ */
+export function getDefaultDuration(preset: AnimationPreset): number {
+  return ANIMATION_PRESETS[preset]?.duration ?? 1000;
+}
+
+/**
+ * Get default loop setting for a preset
+ */
+export function getDefaultLoop(preset: AnimationPreset): boolean {
+  return ANIMATION_PRESETS[preset]?.loop ?? true;
+}

package/src/animated/types.ts

@@ -0,0 +1,239 @@
+/**
+ * Animation types for rn-iconify
+ * Supports preset animations and custom configurations
+ */
+
+import type { EasingFunction } from 'react-native';
+
+/**
+ * Built-in animation presets
+ */
+export type AnimationPreset = 'spin' | 'pulse' | 'bounce' | 'shake' | 'ping' | 'wiggle';
+
+/**
+ * Animation direction for reversible animations
+ */
+export type AnimationDirection = 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
+
+/**
+ * Animation easing options
+ */
+export type AnimationEasing =
+  | 'linear'
+  | 'ease'
+  | 'ease-in'
+  | 'ease-out'
+  | 'ease-in-out'
+  | 'bounce'
+  | EasingFunction;
+
+/**
+ * Custom animation configuration
+ */
+export interface AnimationConfig {
+  /**
+   * Animation type
+   */
+  type: 'rotate' | 'scale' | 'opacity' | 'translate' | 'sequence';
+
+  /**
+   * Animation duration in milliseconds
+   * @default 1000
+   */
+  duration?: number;
+
+  /**
+   * Whether to loop the animation
+   * @default true for spin/pulse/bounce/ping, false for shake/wiggle
+   */
+  loop?: boolean;
+
+  /**
+   * Number of times to loop (-1 for infinite)
+   * @default -1
+   */
+  iterations?: number;
+
+  /**
+   * Animation easing function
+   * @default varies by preset: 'linear' for spin, 'ease-in-out' for pulse/wiggle, 'bounce' for bounce, 'ease-out' for shake/ping
+   */
+  easing?: AnimationEasing;
+
+  /**
+   * Animation direction
+   * @default 'normal'
+   */
+  direction?: AnimationDirection;
+
+  /**
+   * Delay before animation starts (ms)
+   * @default 0
+   */
+  delay?: number;
+
+  /**
+   * For rotate: degrees to rotate (default: 360)
+   * For scale: min/max scale values
+   * For opacity: min/max opacity values
+   * For translate: x/y translation values
+   */
+  from?: number | { x?: number; y?: number };
+  to?: number | { x?: number; y?: number };
+}
+
+/**
+ * Animation prop type - can be a preset string or custom config
+ */
+export type AnimationType = AnimationPreset | AnimationConfig;
+
+/**
+ * Resolved animation configuration with all defaults applied
+ */
+export interface ResolvedAnimationConfig {
+  type: AnimationConfig['type'];
+  duration: number;
+  loop: boolean;
+  iterations: number;
+  easing: AnimationEasing;
+  direction: AnimationDirection;
+  delay: number;
+  from: number | { x: number; y: number };
+  to: number | { x: number; y: number };
+}
+
+/**
+ * Animation state for tracking animation lifecycle
+ */
+export type AnimationState = 'idle' | 'running' | 'paused' | 'completed';
+
+/**
+ * Animation control interface returned by useIconAnimation
+ */
+export interface AnimationControls {
+  /**
+   * Start the animation
+   */
+  start: () => void;
+
+  /**
+   * Stop the animation
+   */
+  stop: () => void;
+
+  /**
+   * Pause the animation
+   */
+  pause: () => void;
+
+  /**
+   * Resume a paused animation
+   */
+  resume: () => void;
+
+  /**
+   * Reset animation to initial state
+   */
+  reset: () => void;
+
+  /**
+   * Current animation state
+   */
+  state: AnimationState;
+
+  /**
+   * Whether animation is currently running
+   */
+  isAnimating: boolean;
+}
+
+/**
+ * Props for animated icon components
+ */
+export interface AnimatedIconProps {
+  /**
+   * Icon element to animate
+   */
+  children: React.ReactNode;
+
+  /**
+   * Animation to apply
+   * Can be a preset name or custom configuration
+   * @example 'spin'
+   * @example { type: 'rotate', duration: 2000, easing: 'linear' }
+   */
+  animate?: AnimationType;
+
+  /**
+   * Animation duration override (ms)
+   * @default varies by preset
+   */
+  animationDuration?: number;
+
+  /**
+   * Whether animation should loop
+   * @default true
+   */
+  animationLoop?: boolean;
+
+  /**
+   * Animation easing override
+   */
+  animationEasing?: AnimationEasing;
+
+  /**
+   * Delay before animation starts (ms)
+   * @default 0
+   */
+  animationDelay?: number;
+
+  /**
+   * Whether to start animation immediately
+   * @default true
+   */
+  autoPlay?: boolean;
+
+  /**
+   * Callback when animation completes (for non-looping animations)
+   */
+  onAnimationComplete?: () => void;
+
+  /**
+   * Width of the animation container
+   */
+  width?: number;
+
+  /**
+   * Height of the animation container
+   */
+  height?: number;
+
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+}
+
+/**
+ * Default animation durations by preset
+ */
+export const DEFAULT_ANIMATION_DURATIONS: Record<AnimationPreset, number> = {
+  spin: 1000,
+  pulse: 1500,
+  bounce: 600,
+  shake: 500,
+  ping: 1000,
+  wiggle: 300,
+};
+
+/**
+ * Default animation loop settings by preset
+ */
+export const DEFAULT_ANIMATION_LOOPS: Record<AnimationPreset, boolean> = {
+  spin: true,
+  pulse: true,
+  bounce: true,
+  shake: false,
+  ping: true,
+  wiggle: false,
+};