rn-iconify 2.2.1 → 3.0.1

package/src/accessibility/AccessibilityProvider.tsx

@@ -101,21 +101,23 @@ export function AccessibilityProvider({
     };
   }, []);
 
-  // Listen for high contrast preference (iOS only, via bold text as proxy)
+  // Listen for inverted colors (best available system proxy for high contrast)
   useEffect(() => {
     const checkHighContrast = async () => {
       try {
-        // Use bold text as a proxy for high contrast preference
-        const isBoldText = await AccessibilityInfo.isBoldTextEnabled();
-        setIsHighContrast(isBoldText);
+        const isInverted = await AccessibilityInfo.isInvertColorsEnabled();
+        setIsHighContrast(isInverted);
       } catch {
-        // Ignore errors on unsupported platforms
+        // Ignore errors on unsupported platforms (Android, old RN)
       }
     };
 
     checkHighContrast();
 
-    const subscription = AccessibilityInfo.addEventListener('boldTextChanged', setIsHighContrast);
+    const subscription = AccessibilityInfo.addEventListener(
+      'invertColorsChanged',
+      setIsHighContrast
+    );
 
     return () => {
       subscription?.remove();

package/src/alias/createIconAliases.tsx

@@ -4,9 +4,9 @@
  */
 
 import React from 'react';
+import { type View } from 'react-native';
 import { IconRenderer } from '../IconRenderer';
-import { useIconTheme } from '../theme';
-import { DEFAULT_ICON_THEME } from '../theme/types';
+import { useMergedIconProps } from '../theme';
 import { IconAliasProvider as BaseProvider } from './IconAliasContext';
 import type {
   IconAliasMap,
@@ -122,67 +122,29 @@ export function createIconAliases<T extends IconAliasMap>(
 
   /**
    * Type-safe Icon component with alias support
+   * Uses rest spread to forward ALL props (press, animation, className, etc.)
    */
-  function TypedIcon({
-    name,
-    size,
-    color,
-    width,
-    height,
-    style,
-    rotate,
-    flip,
-    fallback,
-    fallbackDelay,
-    placeholder,
-    placeholderColor,
-    placeholderDuration,
-    onLoad,
-    onError,
-    accessibilityLabel,
-    testID,
-  }: GenericIconProps<AliasName<T>>) {
-    // Get theme defaults
-    const { theme } = useIconTheme();
-
-    // Resolve the icon name
-    const resolvedName = resolve(name);
-
-    // Merge props with theme defaults
-    const mergedSize = size ?? theme.size ?? DEFAULT_ICON_THEME.size;
-    const mergedColor = color ?? theme.color ?? DEFAULT_ICON_THEME.color;
-    const mergedRotate = rotate ?? theme.rotate ?? DEFAULT_ICON_THEME.rotate;
-    const mergedFlip = flip ?? theme.flip;
-    const mergedFallbackDelay =
-      fallbackDelay ?? theme.fallbackDelay ?? DEFAULT_ICON_THEME.fallbackDelay;
-    const mergedPlaceholder = placeholder ?? theme.placeholder;
-    const mergedPlaceholderColor =
-      placeholderColor ?? theme.placeholderColor ?? DEFAULT_ICON_THEME.placeholderColor;
-    const mergedPlaceholderDuration =
-      placeholderDuration ?? theme.placeholderDuration ?? DEFAULT_ICON_THEME.placeholderDuration;
-
-    return (
-      <IconRenderer
-        iconName={resolvedName}
-        size={mergedSize}
-        color={mergedColor}
-        width={width}
-        height={height}
-        style={style}
-        rotate={mergedRotate}
-        flip={mergedFlip}
-        fallback={fallback}
-        fallbackDelay={mergedFallbackDelay}
-        placeholder={mergedPlaceholder}
-        placeholderColor={mergedPlaceholderColor}
-        placeholderDuration={mergedPlaceholderDuration}
-        onLoad={onLoad}
-        onError={onError}
-        accessibilityLabel={accessibilityLabel ?? name}
-        testID={testID}
-      />
-    );
-  }
+  const TypedIcon = React.memo(
+    React.forwardRef<View, GenericIconProps<AliasName<T>>>(function TypedIcon(
+      { name, accessibilityLabel, ...restProps },
+      ref
+    ) {
+      // Resolve the icon name
+      const resolvedName = resolve(name);
+
+      // Merge with theme defaults (memoized internally)
+      const mergedProps = useMergedIconProps(restProps);
+
+      return (
+        <IconRenderer
+          ref={ref}
+          iconName={resolvedName}
+          accessibilityLabel={accessibilityLabel ?? name}
+          {...mergedProps}
+        />
+      );
+    })
+  );
 
   TypedIcon.displayName = 'TypedIcon';
 

package/src/animated/useIconAnimation.ts

@@ -178,7 +178,12 @@ export function useIconAnimation(options: UseIconAnimationOptions = {}): UseIcon
       }
 
       case 'sequence':
-        // For custom sequences, return null and handle separately
+        if (__DEV__) {
+          console.warn(
+            '[rn-iconify] Animation type "sequence" is not yet implemented. ' +
+              'Use individual animation presets (spin, pulse, bounce, shake, ping, wiggle) instead.'
+          );
+        }
         return null;
 
       default:
@@ -286,12 +291,15 @@ export function useIconAnimation(options: UseIconAnimationOptions = {}): UseIcon
     });
   }, []);
 
-  // Pause animation (not directly supported, we stop it)
+  // Pause animation
+  // Note: React Native's Animated API does not support true pause/resume.
+  // pause() stops the animation at its current position.
+  // resume() restarts the animation from the beginning.
   const pause = useCallback(() => {
     if (animationRef.current) {
       animationRef.current.stop();
+      animationRef.current = null;
     }
-    // Use queueMicrotask to defer state update (React 19 compatibility)
     queueMicrotask(() => {
       if (mountedRef.current) {
         setState('paused');
@@ -299,7 +307,7 @@ export function useIconAnimation(options: UseIconAnimationOptions = {}): UseIcon
     });
   }, []);
 
-  // Resume animation
+  // Resume a paused animation (restarts from beginning due to RN Animated API limitations)
   const resume = useCallback(() => {
     if (state === 'paused') {
       start();
@@ -335,17 +343,20 @@ export function useIconAnimation(options: UseIconAnimationOptions = {}): UseIcon
     if (!config) return {};
 
     switch (config.type) {
-      case 'rotate':
+      case 'rotate': {
+        const fromDeg = config.from as number;
+        const toDeg = config.to as number;
         return {
           transform: [
             {
               rotate: rotateValue.interpolate({
-                inputRange: [0, 360],
-                outputRange: ['0deg', '360deg'],
+                inputRange: [fromDeg, toDeg],
+                outputRange: [`${fromDeg}deg`, `${toDeg}deg`],
               }),
             },
           ],
         };
+      }
 
       case 'scale':
         return {

package/src/babel/cache-writer.ts

@@ -303,9 +303,7 @@ export function writeBundleToFile(bundle: IconBundle, outputPath: string, verbos
  * Resolve the bundle directory path
  */
 export function resolveBundleDir(outputPath: string, projectRoot: string): string {
-  return path.isAbsolute(outputPath)
-    ? outputPath
-    : path.join(projectRoot, outputPath);
+  return path.isAbsolute(outputPath) ? outputPath : path.join(projectRoot, outputPath);
 }
 
 /**
@@ -345,9 +343,15 @@ export async function generateBundle(
     }
 
     // Fetch only new icons
-    const newBundle = newIconNames.length > 0
-      ? await fetchAndCreateBundle(newIconNames, options)
-      : { version: '1.0.0', generatedAt: new Date().toISOString(), icons: {}, count: 0 } as IconBundle;
+    const newBundle =
+      newIconNames.length > 0
+        ? await fetchAndCreateBundle(newIconNames, options)
+        : ({
+            version: '1.0.0',
+            generatedAt: new Date().toISOString(),
+            icons: {},
+            count: 0,
+          } as IconBundle);
 
     // Merge with existing bundle
     const mergedIcons = {

package/src/babel/plugin.ts

@@ -64,6 +64,16 @@ const processedFiles = new Set<string>();
  */
 let buildInProgress = false;
 
+/**
+ * Timestamp when build started — used for stale build detection
+ */
+let buildStartTime = 0;
+
+/**
+ * Maximum build duration (ms) before auto-reset
+ */
+const BUILD_TIMEOUT = 60_000;
+
 /**
  * Debounce timer for bundle generation
  */
@@ -99,6 +109,23 @@ let scannedIcons: string[] = [];
  */
 let existingBundle: IconBundle | null = null;
 
+/**
+ * Reset all module-level build state
+ * Called when build completes or when stale build is detected
+ */
+function resetBuildState(): void {
+  buildInProgress = false;
+  buildStartTime = 0;
+  hasInjected = false;
+  scannedIcons = [];
+  existingBundle = null;
+  processedFiles.clear();
+  if (bundleTimer) {
+    clearTimeout(bundleTimer);
+    bundleTimer = null;
+  }
+}
+
 const SCAN_LOCK_MAX_AGE = 30000; // 30 seconds
 
 /**
@@ -163,9 +190,18 @@ export function createRnIconifyPlugin(babel: {
         return;
       }
 
+      // Auto-reset stale builds (stuck for > 60s)
+      if (buildInProgress && buildStartTime > 0 && Date.now() - buildStartTime > BUILD_TIMEOUT) {
+        if (opts.verbose) {
+          console.warn('[rn-iconify] Stale build detected (>60s), resetting state');
+        }
+        resetBuildState();
+      }
+
       // Initialize collector on first file
       if (!buildInProgress) {
         buildInProgress = true;
+        buildStartTime = Date.now();
         hasInjected = false;
         collector.initialize(opts);
 
@@ -379,24 +415,26 @@ export function createRnIconifyPlugin(babel: {
       }
 
       bundleTimer = setTimeout(async () => {
-        if (!collector.isBundleGenerated()) {
-          collector.markBundleGenerated();
+        try {
+          if (!collector.isBundleGenerated()) {
+            collector.markBundleGenerated();
 
-          // Merge AST-collected icons with scanner-collected icons
-          const astIcons = collector.getIconNames();
-          const allIcons = Array.from(new Set([...astIcons, ...scannedIcons]));
+            // Merge AST-collected icons with scanner-collected icons
+            const astIcons = collector.getIconNames();
+            const allIcons = Array.from(new Set([...astIcons, ...scannedIcons]));
 
-          if (allIcons.length > 0) {
-            collector.printSummary();
+            if (allIcons.length > 0) {
+              collector.printSummary();
 
-            try {
-              await generateBundle(allIcons, opts, projectRoot, existingBundle);
-            } catch (error) {
-              console.error('[rn-iconify] Bundle generation error:', error);
+              try {
+                await generateBundle(allIcons, opts, projectRoot, existingBundle);
+              } catch (error) {
+                console.error('[rn-iconify] Bundle generation error:', error);
+              }
             }
           }
-
-          buildInProgress = false;
+        } finally {
+          resetBuildState();
         }
       }, 500);
     },
@@ -404,7 +442,7 @@ export function createRnIconifyPlugin(babel: {
 }
 
 // Exported for testing
-export { acquireScanLock, releaseScanLock, isScanLockActive };
+export { acquireScanLock, releaseScanLock, isScanLockActive, resetBuildState };
 
 /**
  * Reset plugin state (for testing)

package/src/babel/scanner.ts

@@ -57,25 +57,24 @@ interface UsageFile {
 }
 
 /**
- * Build regex patterns for icon component detection
- * Matches: <Ion name="home" /> or <Ion name={'home'} /> or <Ion name={`home`} />
+ * Build a single combined regex that captures both the component name
+ * and the icon name in one match — O(n) single pass instead of O(n²)
+ *
+ * Captures:
+ *   group 1 = component name (e.g., "Ion")
+ *   group 2 = icon name from name="..."
+ *   group 3 = icon name from name={'...'}
+ *   group 4 = icon name from name={"..."}
+ *   group 5 = icon name from name={`...`}
  */
-function buildComponentRegex(): RegExp {
+function buildCombinedRegex(): RegExp {
   const componentNames = Object.keys(COMPONENT_PREFIX_MAP).join('|');
   return new RegExp(
-    `<(?:${componentNames})\\s[^>]*?name=(?:"([^"]+)"|\\{'([^']+)'\\}|\\{"([^"]+)"\\}|\\\`([^\`]+)\\\`)`,
+    `<(${componentNames})\\s[^>]*?name=(?:"([^"]+)"|\\{'([^']+)'\\}|\\{"([^"]+)"\\}|\\\`([^\`]+)\\\`)`,
     'g'
   );
 }
 
-/**
- * Build regex to extract component name from JSX
- */
-function buildComponentNameRegex(): RegExp {
-  const componentNames = Object.keys(COMPONENT_PREFIX_MAP).join('|');
-  return new RegExp(`<(${componentNames})\\s`, 'g');
-}
-
 /**
  * Regex to match prefetchIcons calls
  * Matches: prefetchIcons(['ion:home', 'mdi:settings'])
@@ -90,12 +89,7 @@ const STRING_ITEM_REGEX = /['"]([^'"]+)['"]/g;
 /**
  * Scan a single file for icon usage
  */
-function scanFile(
-  filePath: string,
-  componentRegex: RegExp,
-  componentNameRegex: RegExp,
-  verbose: boolean
-): string[] {
+function scanFile(filePath: string, combinedRegex: RegExp, verbose: boolean): string[] {
   const icons: string[] = [];
 
   let content: string;
@@ -110,40 +104,22 @@ function scanFile(
     return icons;
   }
 
-  // Scan for JSX component usage: <Ion name="home" />
-  componentRegex.lastIndex = 0;
-  componentNameRegex.lastIndex = 0;
-
-  // Find all component usages with name attribute
-  const fullPattern = new RegExp(componentRegex.source, 'g');
+  // Single-pass scan: combined regex captures component name + icon name in one match
+  combinedRegex.lastIndex = 0;
   let match: RegExpExecArray | null;
 
-  while ((match = fullPattern.exec(content)) !== null) {
-    const iconName = match[1] || match[2] || match[3] || match[4];
-    if (!iconName) continue;
-
-    // Find the component name for this match by searching backwards
-    const beforeMatch = content.substring(0, match.index + 20);
-    const namePattern = new RegExp(componentNameRegex.source, 'g');
-    let nameMatch: RegExpExecArray | null;
-    let lastNameMatch: RegExpExecArray | null = null;
+  while ((match = combinedRegex.exec(content)) !== null) {
+    const componentName = match[1];
+    const iconName = match[2] || match[3] || match[4] || match[5];
+    if (!componentName || !iconName) continue;
 
-    while ((nameMatch = namePattern.exec(beforeMatch)) !== null) {
-      if (nameMatch.index <= match.index) {
-        lastNameMatch = nameMatch;
-      }
-    }
-
-    if (lastNameMatch) {
-      const componentName = lastNameMatch[1];
-      const prefix = COMPONENT_PREFIX_MAP[componentName];
-      if (prefix) {
-        const fullName = `${prefix}:${iconName}`;
-        if (!isValidIconName(fullName)) continue;
-        icons.push(fullName);
-        if (verbose) {
-          console.log(`[rn-iconify:scanner] Found ${fullName} in ${filePath}`);
-        }
+    const prefix = COMPONENT_PREFIX_MAP[componentName];
+    if (prefix) {
+      const fullName = `${prefix}:${iconName}`;
+      if (!isValidIconName(fullName)) continue;
+      icons.push(fullName);
+      if (verbose) {
+        console.log(`[rn-iconify:scanner] Found ${fullName} in ${filePath}`);
       }
     }
   }
@@ -244,15 +220,14 @@ export function scanProjectForIcons(projectRoot: string, options: ScannerOptions
     console.log(`[rn-iconify:scanner] Found ${files.length} source files to scan`);
   }
 
-  // 2. Build regex patterns once
-  const componentRegex = buildComponentRegex();
-  const componentNameRegex = buildComponentNameRegex();
+  // 2. Build combined regex once (single-pass O(n) per file)
+  const combinedRegex = buildCombinedRegex();
 
   // 3. Scan each file
   const allIcons: Set<string> = new Set();
 
   for (const file of files) {
-    const icons = scanFile(file, componentRegex, componentNameRegex, verbose);
+    const icons = scanFile(file, combinedRegex, verbose);
     for (const icon of icons) {
       allIcons.add(icon);
     }

package/src/cache/CacheManager.ts

@@ -50,6 +50,13 @@ class CacheManagerImpl {
    */
   private isLoadingBundle = false;
 
+  /**
+   * Batched icon usage reports (DEV only)
+   * Accumulates icon names and flushes every 2 seconds
+   */
+  private pendingReports = new Set<string>();
+  private reportTimer: ReturnType<typeof setTimeout> | null = null;
+
   /**
    * Initialize bundled icons from the Babel plugin cache
    * This should be called automatically on first access
@@ -79,31 +86,34 @@ class CacheManagerImpl {
     }
 
     this.isLoadingBundle = true;
-    this.bundledIcons = new Map();
-    let skippedCount = 0;
-
-    for (const [iconName, data] of Object.entries(bundle.icons)) {
-      if (data && typeof data.svg === 'string' && data.svg.length > 0) {
-        this.bundledIcons.set(iconName, data.svg);
-      } else {
-        skippedCount++;
-        if (__DEV__) {
-          console.warn(`[rn-iconify] Skipping invalid icon in bundle: ${iconName}`);
+    try {
+      this.bundledIcons = new Map();
+      let skippedCount = 0;
+
+      for (const [iconName, data] of Object.entries(bundle.icons)) {
+        if (data && typeof data.svg === 'string' && data.svg.length > 0) {
+          this.bundledIcons.set(iconName, data.svg);
+        } else {
+          skippedCount++;
+          if (__DEV__) {
+            console.warn(`[rn-iconify] Skipping invalid icon in bundle: ${iconName}`);
+          }
         }
       }
-    }
 
-    if (__DEV__ && skippedCount > 0) {
-      console.warn(`[rn-iconify] Skipped ${skippedCount} invalid icons in bundle`);
-    }
+      if (__DEV__ && skippedCount > 0) {
+        console.warn(`[rn-iconify] Skipped ${skippedCount} invalid icons in bundle`);
+      }
 
-    this.bundledIconsInitialized = true;
+      this.bundledIconsInitialized = true;
 
-    // Warmup memory cache from disk cache
-    this.warmup();
+      // Warmup memory cache from disk cache
+      this.warmup();
 
-    this.isLoadingBundle = false;
-    return this.bundledIcons.size;
+      return this.bundledIcons.size;
+    } finally {
+      this.isLoadingBundle = false;
+    }
   }
 
   /**
@@ -395,22 +405,43 @@ class CacheManagerImpl {
 
   /**
    * Report icon usage to Metro dev server (DEV only)
-   * Fire-and-forget POST to the Metro middleware
+   * Batches reports and flushes every 2 seconds to avoid
+   * flooding Metro with individual HTTP requests
    */
   reportIconUsage(iconName: string): void {
     if (typeof __DEV__ === 'undefined' || !__DEV__) return;
     if (this.isLoadingBundle) return;
 
+    this.pendingReports.add(iconName);
+
+    if (!this.reportTimer) {
+      this.reportTimer = setTimeout(() => this.flushReports(), 2000);
+    }
+  }
+
+  /**
+   * Flush batched icon usage reports to Metro dev server
+   */
+  private flushReports(): void {
+    this.reportTimer = null;
+
+    if (this.pendingReports.size === 0) return;
+
+    const icons = Array.from(this.pendingReports);
+    this.pendingReports.clear();
+
     try {
-      // Use global fetch if available (React Native)
       if (typeof fetch === 'function') {
-        fetch('http://localhost:8081/__rn_iconify_log', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ icon: iconName }),
-        }).catch(() => {
-          // Silently ignore - Metro server might not have the plugin
-        });
+        // Send all icons in a single request
+        for (const icon of icons) {
+          fetch('http://localhost:8081/__rn_iconify_log', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ icon }),
+          }).catch(() => {
+            // Silently ignore - Metro server might not have the plugin
+          });
+        }
       }
     } catch {
       // Silently ignore

package/src/cache/MemoryCache.ts

@@ -1,15 +1,12 @@
 /**
- * Simple in-memory cache for icon SVG data
- * Provides instant synchronous access to recently used icons
+ * LRU in-memory cache for icon SVG data
+ * Uses Map insertion-order trick for O(1) eviction:
+ * - get() deletes and re-inserts to move entry to tail
+ * - eviction removes from head (oldest) in O(1)
  */
 
-interface CacheEntry {
-  svg: string;
-  timestamp: number;
-}
-
 class MemoryCacheImpl {
-  private cache = new Map<string, CacheEntry>();
+  private cache = new Map<string, string>();
   private maxSize: number;
 
   constructor(maxSize = 500) {
@@ -18,31 +15,36 @@ class MemoryCacheImpl {
 
   /**
    * Get icon SVG from memory cache
+   * Moves the entry to the tail (most recently used)
    * @returns SVG string or null if not cached
    */
   get(iconName: string): string | null {
-    const entry = this.cache.get(iconName);
-    if (entry) {
-      // Update timestamp for LRU
-      entry.timestamp = Date.now();
-      return entry.svg;
+    const svg = this.cache.get(iconName);
+    if (svg !== undefined) {
+      // Move to tail by delete + re-insert (Map preserves insertion order)
+      this.cache.delete(iconName);
+      this.cache.set(iconName, svg);
+      return svg;
     }
     return null;
   }
 
   /**
    * Store icon SVG in memory cache
+   * Evicts oldest entries if cache is at capacity
    */
   set(iconName: string, svg: string): void {
+    // If key already exists, delete first to refresh position
+    if (this.cache.has(iconName)) {
+      this.cache.delete(iconName);
+    }
+
     // Evict oldest entries if cache is full
     if (this.cache.size >= this.maxSize) {
       this.evictOldest();
     }
 
-    this.cache.set(iconName, {
-      svg,
-      timestamp: Date.now(),
-    });
+    this.cache.set(iconName, svg);
   }
 
   /**
@@ -81,22 +83,17 @@ class MemoryCacheImpl {
   }
 
   /**
-   * Evict the oldest entries to make room for new ones
+   * Evict the oldest 20% of entries
+   * O(1) per removal using Map's insertion order (head = oldest)
    */
   private evictOldest(): void {
-    // Remove 20% of oldest entries
     const entriesToRemove = Math.ceil(this.maxSize * 0.2);
-    const entries = Array.from(this.cache.entries());
-
-    // Sort by timestamp (oldest first)
-    entries.sort((a, b) => a[1].timestamp - b[1].timestamp);
+    let removed = 0;
 
-    // Remove oldest entries
-    for (let i = 0; i < entriesToRemove && i < entries.length; i++) {
-      const entry = entries[i];
-      if (entry) {
-        this.cache.delete(entry[0]);
-      }
+    for (const key of this.cache.keys()) {
+      if (removed >= entriesToRemove) break;
+      this.cache.delete(key);
+      removed++;
     }
   }
 }