rn-iconify 2.2.0 → 3.0.0

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/index.ts

@@ -45,6 +45,7 @@ export {
   VALID_PREFIXES,
   getFilenameFromState,
   getFilenameFromFile,
+  getRootFromFile,
 } from './types';
 
 /**

package/src/babel/plugin.ts

@@ -9,6 +9,7 @@
  */
 
 import * as nodePath from 'path';
+import * as fs from 'fs';
 import type { PluginObj, types as BabelTypes, NodePath } from '@babel/core';
 import type { ImportDeclaration } from '@babel/types';
 import type { BabelPluginState, BabelPluginOptions } from './types';
@@ -17,6 +18,7 @@ import {
   VALID_COMPONENTS,
   getFilenameFromState,
   getFilenameFromFile,
+  getRootFromFile,
 } from './types';
 import {
   getComponentName,
@@ -62,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
  */
@@ -97,6 +109,69 @@ 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
+
+/**
+ * Check if a scan lock file exists and is recent
+ */
+function isScanLockActive(lockPath: string, maxAge: number = SCAN_LOCK_MAX_AGE): boolean {
+  try {
+    const stat = fs.statSync(lockPath);
+    return Date.now() - stat.mtimeMs < maxAge;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Acquire the scan lock by writing a timestamp file
+ * Returns true if lock was acquired, false if already held
+ */
+function acquireScanLock(lockPath: string): boolean {
+  if (isScanLockActive(lockPath)) {
+    return false;
+  }
+  try {
+    const dir = nodePath.dirname(lockPath);
+    if (!fs.existsSync(dir)) {
+      fs.mkdirSync(dir, { recursive: true });
+    }
+    fs.writeFileSync(lockPath, String(Date.now()), { flag: 'wx' });
+    return true;
+  } catch {
+    // Another worker may have created it between our check and write
+    return false;
+  }
+}
+
+/**
+ * Release the scan lock
+ */
+function releaseScanLock(lockPath: string): void {
+  try {
+    fs.unlinkSync(lockPath);
+  } catch {
+    // Already removed or never existed
+  }
+}
+
 /**
  * Create the rn-iconify Babel plugin
  */
@@ -115,30 +190,24 @@ 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);
 
-        // Detect project root from file
-        const filename = getFilenameFromFile(file);
-        if (filename) {
-          let dir = filename;
-          while (dir !== '/') {
-            dir = dir.substring(0, dir.lastIndexOf('/'));
-            try {
-              require.resolve(`${dir}/package.json`);
-              projectRoot = dir;
-              break;
-            } catch {
-              continue;
-            }
-          }
-          if (!projectRoot) {
-            projectRoot = process.cwd();
-          }
-        }
+        // Detect project root from Babel's root (set from babel.config.js location)
+        const root = getRootFromFile(file);
+        projectRoot = root || process.cwd();
 
         const outputPath = opts.outputPath || '.rn-iconify';
         bundleDirPath = resolveBundleDir(outputPath, projectRoot);
@@ -148,14 +217,26 @@ export function createRnIconifyPlugin(babel: {
         existingBundle = readExistingBundle(bundleJsonPath);
         bundleExists = existingBundle !== null;
 
-        // Run sync scanner to discover all icons in the project
-        try {
-          scannedIcons = scanProjectForIcons(projectRoot, {
-            verbose: opts.verbose,
-          });
-        } catch (error) {
+        // Use file-based lock to prevent duplicate scans across Metro workers
+        const lockPath = nodePath.join(bundleDirPath, '.scan-lock');
+        const lockAcquired = acquireScanLock(lockPath);
+
+        if (lockAcquired) {
+          try {
+            scannedIcons = scanProjectForIcons(projectRoot, {
+              verbose: opts.verbose,
+            });
+          } catch (error) {
+            if (opts.verbose) {
+              console.warn('[rn-iconify] Scanner failed:', error);
+            }
+            scannedIcons = [];
+          } finally {
+            releaseScanLock(lockPath);
+          }
+        } else {
           if (opts.verbose) {
-            console.warn('[rn-iconify] Scanner failed:', error);
+            console.log('[rn-iconify] Scanner skipped (another worker is scanning)');
           }
           scannedIcons = [];
         }
@@ -334,36 +415,42 @@ 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);
     },
   };
 }
 
+// Exported for testing
+export { acquireScanLock, releaseScanLock, isScanLockActive, resetBuildState };
+
 /**
  * Reset plugin state (for testing)
  */
 export function resetPluginState(): void {
   processedFiles.clear();
   buildInProgress = false;
+  projectRoot = '';
   hasInjected = false;
   bundleExists = false;
   bundleDirPath = '';

package/src/babel/scanner.ts

@@ -7,6 +7,7 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import { COMPONENT_PREFIX_MAP } from './types';
+import { isValidIconName } from './ast-utils';
 
 /**
  * Scanner options
@@ -56,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'])
@@ -89,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;
@@ -109,38 +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) {
-        icons.push(`${prefix}:${iconName}`);
-        if (verbose) {
-          console.log(`[rn-iconify:scanner] Found ${prefix}:${iconName} 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}`);
       }
     }
   }
@@ -155,7 +134,7 @@ function scanFile(
     let itemMatch: RegExpExecArray | null;
     while ((itemMatch = STRING_ITEM_REGEX.exec(arrayContent)) !== null) {
       const iconName = itemMatch[1];
-      if (iconName && iconName.includes(':')) {
+      if (iconName && iconName.includes(':') && isValidIconName(iconName)) {
         icons.push(iconName);
         if (verbose) {
           console.log(`[rn-iconify:scanner] Found prefetch ${iconName} in ${filePath}`);
@@ -241,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/babel/types.ts

@@ -157,6 +157,32 @@ export function getFilenameFromFile(file: unknown): string {
   return getFilename(file);
 }
 
+/**
+ * Type guard to check if an object has opts.root
+ */
+function hasOptsWithRoot(obj: unknown): obj is { opts: { root: string } } {
+  return (
+    typeof obj === 'object' &&
+    obj !== null &&
+    'opts' in obj &&
+    typeof (obj as Record<string, unknown>).opts === 'object' &&
+    (obj as Record<string, unknown>).opts !== null &&
+    'root' in ((obj as Record<string, unknown>).opts as object) &&
+    typeof (obj as Record<string, { root: unknown }>).opts.root === 'string'
+  );
+}
+
+/**
+ * Helper to safely extract project root from BabelFile object
+ * Babel sets file.opts.root from babel.config.js location
+ */
+export function getRootFromFile(file: unknown): string | undefined {
+  if (hasOptsWithRoot(file)) {
+    return file.opts.root;
+  }
+  return undefined;
+}
+
 /**
  * Collected icon information
  */