rn-iconify 2.2.0 → 3.0.0

package/lib/commonjs/index.js

@@ -7,6 +7,7 @@ var _exportNames = {
   prefetchIcons: true,
   clearCache: true,
   getCacheStats: true,
+  IconLoadError: true,
   Skeleton: true,
   Pulse: true,
   Shimmer: true,
@@ -67,11 +68,6 @@ var _exportNames = {
   loadOfflineBundleAsync: true,
   isBundleCompatible: true,
   getBundleStats: true,
-  PerformanceMonitor: true,
-  enablePerformanceMonitoring: true,
-  disablePerformanceMonitoring: true,
-  getPerformanceReport: true,
-  printPerformanceReport: true,
   AccessibilityProvider: true,
   AccessibilityContext: true,
   useAccessibilityContext: true,
@@ -83,20 +79,7 @@ var _exportNames = {
   meetsContrastRequirement: true,
   getHighContrastAlternative: true,
   calculateTouchTargetPadding: true,
-  DEFAULT_ACCESSIBILITY_CONFIG: true,
-  IconExplorer: true,
-  ExplorerContext: true,
-  useExplorerContext: true,
-  useExplorer: true,
-  getAllIconSets: true,
-  getIconSetByPrefix: true,
-  getIconSetsByCategory: true,
-  searchIconSets: true,
-  generateImportStatement: true,
-  generateIconJSX: true,
-  POPULAR_ICON_SETS: true,
-  DEFAULT_PREVIEW_CONFIG: true,
-  DEFAULT_EXPLORER_CONFIG: true
+  DEFAULT_ACCESSIBILITY_CONFIG: true
 };
 Object.defineProperty(exports, "ANIMATION_PRESETS", {
   enumerable: true,
@@ -158,12 +141,6 @@ Object.defineProperty(exports, "DEFAULT_CONFIG", {
     return _config.DEFAULT_CONFIG;
   }
 });
-Object.defineProperty(exports, "DEFAULT_EXPLORER_CONFIG", {
-  enumerable: true,
-  get: function () {
-    return _explorer.DEFAULT_EXPLORER_CONFIG;
-  }
-});
 Object.defineProperty(exports, "DEFAULT_ICON_THEME", {
   enumerable: true,
   get: function () {
@@ -182,18 +159,6 @@ Object.defineProperty(exports, "DEFAULT_PLACEHOLDER_CONFIG", {
     return _placeholder.DEFAULT_PLACEHOLDER_CONFIG;
   }
 });
-Object.defineProperty(exports, "DEFAULT_PREVIEW_CONFIG", {
-  enumerable: true,
-  get: function () {
-    return _explorer.DEFAULT_PREVIEW_CONFIG;
-  }
-});
-Object.defineProperty(exports, "ExplorerContext", {
-  enumerable: true,
-  get: function () {
-    return _explorer.ExplorerContext;
-  }
-});
 Object.defineProperty(exports, "Icon", {
   enumerable: true,
   get: function () {
@@ -212,10 +177,10 @@ Object.defineProperty(exports, "IconAliasProvider", {
     return _alias.IconAliasProvider;
   }
 });
-Object.defineProperty(exports, "IconExplorer", {
+Object.defineProperty(exports, "IconLoadError", {
   enumerable: true,
   get: function () {
-    return _explorer.IconExplorer;
+    return _errors.IconLoadError;
   }
 });
 Object.defineProperty(exports, "IconThemeContext", {
@@ -230,18 +195,6 @@ Object.defineProperty(exports, "IconThemeProvider", {
     return _theme.IconThemeProvider;
   }
 });
-Object.defineProperty(exports, "POPULAR_ICON_SETS", {
-  enumerable: true,
-  get: function () {
-    return _explorer.POPULAR_ICON_SETS;
-  }
-});
-Object.defineProperty(exports, "PerformanceMonitor", {
-  enumerable: true,
-  get: function () {
-    return _performance.PerformanceMonitor;
-  }
-});
 Object.defineProperty(exports, "PlaceholderFactory", {
   enumerable: true,
   get: function () {
@@ -363,18 +316,6 @@ Object.defineProperty(exports, "defineAliases", {
     return _alias.defineAliases;
   }
 });
-Object.defineProperty(exports, "disablePerformanceMonitoring", {
-  enumerable: true,
-  get: function () {
-    return _performance.disablePerformanceMonitoring;
-  }
-});
-Object.defineProperty(exports, "enablePerformanceMonitoring", {
-  enumerable: true,
-  get: function () {
-    return _performance.enablePerformanceMonitoring;
-  }
-});
 Object.defineProperty(exports, "fetchCollection", {
   enumerable: true,
   get: function () {
@@ -393,30 +334,12 @@ Object.defineProperty(exports, "fetchIconsBatch", {
     return _IconifyAPI.fetchIconsBatch;
   }
 });
-Object.defineProperty(exports, "generateIconJSX", {
-  enumerable: true,
-  get: function () {
-    return _explorer.generateIconJSX;
-  }
-});
-Object.defineProperty(exports, "generateImportStatement", {
-  enumerable: true,
-  get: function () {
-    return _explorer.generateImportStatement;
-  }
-});
 Object.defineProperty(exports, "getAPIBaseUrl", {
   enumerable: true,
   get: function () {
     return _IconifyAPI.getAPIBaseUrl;
   }
 });
-Object.defineProperty(exports, "getAllIconSets", {
-  enumerable: true,
-  get: function () {
-    return _explorer.getAllIconSets;
-  }
-});
 Object.defineProperty(exports, "getBundleStats", {
   enumerable: true,
   get: function () {
@@ -454,30 +377,12 @@ Object.defineProperty(exports, "getHighContrastAlternative", {
     return _accessibility.getHighContrastAlternative;
   }
 });
-Object.defineProperty(exports, "getIconSetByPrefix", {
-  enumerable: true,
-  get: function () {
-    return _explorer.getIconSetByPrefix;
-  }
-});
-Object.defineProperty(exports, "getIconSetsByCategory", {
-  enumerable: true,
-  get: function () {
-    return _explorer.getIconSetsByCategory;
-  }
-});
 Object.defineProperty(exports, "getNativeIconify", {
   enumerable: true,
   get: function () {
     return _native.getNativeIconify;
   }
 });
-Object.defineProperty(exports, "getPerformanceReport", {
-  enumerable: true,
-  get: function () {
-    return _performance.getPerformanceReport;
-  }
-});
 Object.defineProperty(exports, "isAnimationPreset", {
   enumerable: true,
   get: function () {
@@ -527,12 +432,6 @@ Object.defineProperty(exports, "parseIconName", {
   }
 });
 exports.prefetchIcons = prefetchIcons;
-Object.defineProperty(exports, "printPerformanceReport", {
-  enumerable: true,
-  get: function () {
-    return _performance.printPerformanceReport;
-  }
-});
 Object.defineProperty(exports, "resetConfiguration", {
   enumerable: true,
   get: function () {
@@ -545,12 +444,6 @@ Object.defineProperty(exports, "resolveAnimation", {
     return _animated.resolveAnimation;
   }
 });
-Object.defineProperty(exports, "searchIconSets", {
-  enumerable: true,
-  get: function () {
-    return _explorer.searchIconSets;
-  }
-});
 Object.defineProperty(exports, "searchIconsAPI", {
   enumerable: true,
   get: function () {
@@ -581,18 +474,6 @@ Object.defineProperty(exports, "useAccessibleIcon", {
     return _accessibility.useAccessibleIcon;
   }
 });
-Object.defineProperty(exports, "useExplorer", {
-  enumerable: true,
-  get: function () {
-    return _explorer.useExplorer;
-  }
-});
-Object.defineProperty(exports, "useExplorerContext", {
-  enumerable: true,
-  get: function () {
-    return _explorer.useExplorerContext;
-  }
-});
 Object.defineProperty(exports, "useIconAliasContext", {
   enumerable: true,
   get: function () {
@@ -653,6 +534,7 @@ Object.keys(_components).forEach(function (key) {
     }
   });
 });
+var _errors = require("./errors");
 var _placeholder = require("./placeholder");
 var _theme = require("./theme");
 var _alias = require("./alias");
@@ -664,9 +546,7 @@ var _config = require("./config");
 var _IconifyAPI = require("./network/IconifyAPI");
 var _native = require("./native");
 var _bundle = require("./bundle");
-var _performance = require("./performance");
 var _accessibility = require("./accessibility");
-var _explorer = require("./explorer");
 /**
  * rn-iconify
  * 268,000+ Iconify icons for React Native with native MMKV caching
@@ -684,6 +564,8 @@ var _explorer = require("./explorer");
 
 // Icon Set Components (200+ sets, 268,000+ icons)
 
+// Errors
+
 // Core Types
 
 // Placeholder Components
@@ -708,11 +590,13 @@ var _explorer = require("./explorer");
 
 // Offline Bundle
 
-// Performance Monitoring
+// Performance Monitoring — runtime exports moved to 'rn-iconify/dev'
+// Types kept here for type-only consumers
 
 // Accessibility
 
-// Icon Explorer (Dev Mode)
+// Icon Explorer — runtime exports moved to 'rn-iconify/dev'
+// Types kept here for type-only consumers
 
 /**
  * Prefetch multiple icons into cache

package/lib/commonjs/network/IconifyAPI.js

@@ -11,6 +11,7 @@ exports.getAPIBaseUrl = getAPIBaseUrl;
 exports.parseIconName = parseIconName;
 exports.searchIconsAPI = searchIconsAPI;
 var _config = require("../config");
+var _errors = require("../errors");
 /**
  * Iconify API Client
  * Handles fetching icon data from Iconify API
@@ -185,15 +186,28 @@ function buildSvg(data, defaultWidth = 24, defaultHeight = 24) {
  */
 async function fetchIcon(iconName, signal) {
   // Check for pending request (deduplication)
+  // If a request is already in flight, reuse it but isolate the abort signal
+  // so that one component's unmount doesn't cancel another's fetch
   const pending = pendingRequests.get(iconName);
   if (pending) {
+    if (signal) {
+      return Promise.race([pending, new Promise((_, reject) => {
+        if (signal.aborted) {
+          reject(new DOMException('Aborted', 'AbortError'));
+          return;
+        }
+        signal.addEventListener('abort', () => reject(new DOMException('Aborted', 'AbortError')), {
+          once: true
+        });
+      })]);
+    }
     return pending;
   }
 
   // Parse icon name
   const parsed = parseIconName(iconName);
   if (!parsed) {
-    throw new Error(`Invalid icon name format: "${iconName}". Expected "prefix:name" format.`);
+    throw new _errors.IconLoadError('INVALID_NAME', `Invalid icon name format: "${iconName}". Expected "prefix:name" format.`);
   }
   const {
     prefix,
@@ -218,19 +232,22 @@ async function fetchIcon(iconName, signal) {
           signal
         });
         if (!response.ok) {
-          throw new Error(`HTTP ${response.status}: Failed to fetch icon "${iconName}"`);
+          if (response.status === 404) {
+            throw new _errors.IconLoadError('NOT_FOUND', `Icon "${iconName}" not found (HTTP 404)`);
+          }
+          throw new _errors.IconLoadError('NETWORK', `HTTP ${response.status}: Failed to fetch icon "${iconName}"`);
         }
         const data = await response.json();
 
         // Validate response structure
         if (!data || typeof data !== 'object' || !data.icons) {
-          throw new Error(`Invalid API response for icon "${iconName}"`);
+          throw new _errors.IconLoadError('NETWORK', `Invalid API response for icon "${iconName}"`);
         }
 
         // Check if icon exists in response
         const iconData = data.icons[name];
         if (!iconData) {
-          throw new Error(`Icon "${iconName}" not found in Iconify API response`);
+          throw new _errors.IconLoadError('NOT_FOUND', `Icon "${iconName}" not found in Iconify API response`);
         }
 
         // Build SVG from icon data
@@ -238,7 +255,7 @@ async function fetchIcon(iconName, signal) {
 
         // Validate SVG output
         if (!isValidSvg(svg)) {
-          throw new Error(`Invalid SVG generated for icon "${iconName}"`);
+          throw new _errors.IconLoadError('INVALID_SVG', `Invalid SVG generated for icon "${iconName}"`);
         }
         return svg;
       } catch (error) {
@@ -252,7 +269,13 @@ async function fetchIcon(iconName, signal) {
             throw error;
           }
         }
-        lastError = error instanceof Error ? error : new Error(String(error));
+
+        // Convert timeout aborts to typed error
+        if (error instanceof Error && error.name === 'AbortError' && !signal?.aborted) {
+          lastError = new _errors.IconLoadError('TIMEOUT', `Timeout fetching icon "${iconName}"`);
+        } else {
+          lastError = error instanceof Error ? error : new _errors.IconLoadError('NETWORK', String(error));
+        }
 
         // Wait before retrying (except on last attempt)
         if (attempt < settings.retries) {
@@ -386,14 +409,15 @@ async function fetchIconsBatch(iconNames, signal) {
 
 /**
  * Check if Iconify API is reachable
+ * @param timeoutMs Timeout in milliseconds (default: 5000)
  */
-async function checkAPIHealth() {
+async function checkAPIHealth(timeoutMs = 5000) {
   const settings = getAPISettings();
   try {
-    const response = await fetch(`${settings.baseUrl}/collections`, {
+    const response = await fetchWithTimeout(`${settings.baseUrl}/collections`, {
       method: 'HEAD',
       headers: settings.headers
-    });
+    }, timeoutMs);
     return response.ok;
   } catch {
     return false;

package/lib/commonjs/placeholder/Shimmer.js

@@ -10,13 +10,34 @@ var _types = require("./types");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
  * Shimmer Placeholder Component
- * Animated gradient sweep effect while icon is loading
+ * Animated gradient-like sweep effect while icon is loading
+ *
+ * Uses 3 overlapping bars with staggered opacity to simulate a gradient,
+ * without requiring any external gradient library.
  */
 
 /**
- * Shimmer placeholder - animated light sweep effect
- * Provides prominent visual feedback during loading
- * Uses translateX animation for smooth performance
+ * Bar configuration for the gradient-like shimmer
+ * Each bar has a different width and opacity, staggered in time
+ */
+const SHIMMER_BARS = [{
+  widthFactor: 0.5,
+  opacity: 0.15,
+  delay: 0
+}, {
+  widthFactor: 0.35,
+  opacity: 0.3,
+  delay: 0.15
+}, {
+  widthFactor: 0.2,
+  opacity: 0.5,
+  delay: 0.3
+}];
+
+/**
+ * Shimmer placeholder - animated gradient-like sweep effect
+ * 3 overlapping bars create a soft gradient without native dependencies
+ * Uses translateX animation for smooth 60fps performance
  */
 function ShimmerComponent({
   width,
@@ -27,30 +48,41 @@ function ShimmerComponent({
   borderRadius = _types.DEFAULT_PLACEHOLDER_CONFIG.borderRadius,
   testID
 }) {
-  const translateX = (0, _react.useRef)(new _reactNative.Animated.Value(-width)).current;
+  // One Animated.Value per bar for staggered animation
+  const bar0 = (0, _react.useRef)(new _reactNative.Animated.Value(-width)).current;
+  const bar1 = (0, _react.useRef)(new _reactNative.Animated.Value(-width)).current;
+  const bar2 = (0, _react.useRef)(new _reactNative.Animated.Value(-width)).current;
+  const bars = (0, _react.useMemo)(() => [bar0, bar1, bar2], [bar0, bar1, bar2]);
   const animationRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
-    // Reset animation when width changes
-    translateX.setValue(-width);
+    // Reset all bars
+    for (const bar of bars) {
+      bar.setValue(-width);
+    }
 
-    // Create looping shimmer animation
-    animationRef.current = _reactNative.Animated.loop(_reactNative.Animated.timing(translateX, {
+    // Create staggered looping animations
+    const animations = SHIMMER_BARS.map((config, i) => _reactNative.Animated.loop(_reactNative.Animated.sequence([
+    // Stagger delay
+    ...(config.delay > 0 ? [_reactNative.Animated.delay(duration * config.delay)] : []), _reactNative.Animated.timing(bars[i], {
       toValue: width,
-      duration: duration,
-      easing: _reactNative.Easing.linear,
+      duration: duration * (1 - config.delay),
+      easing: _reactNative.Easing.inOut(_reactNative.Easing.ease),
       useNativeDriver: true
-    }));
+    }),
+    // Reset for next loop iteration
+    _reactNative.Animated.timing(bars[i], {
+      toValue: -width,
+      duration: 0,
+      useNativeDriver: true
+    })])));
+    animationRef.current = _reactNative.Animated.parallel(animations);
     animationRef.current.start();
     return () => {
-      // Clean up animation on unmount
       if (animationRef.current) {
         animationRef.current.stop();
       }
     };
-  }, [translateX, width, duration]);
-
-  // Calculate shimmer bar width (30% of container width)
-  const shimmerWidth = Math.max(width * 0.3, 20);
+  }, [bars, width, duration]);
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: [styles.container, {
       width,
@@ -62,16 +94,18 @@ function ShimmerComponent({
     accessibilityRole: "none",
     accessibilityElementsHidden: true,
     importantForAccessibility: "no"
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
+  }, SHIMMER_BARS.map((config, i) => /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
+    key: i,
     style: [styles.shimmer, {
-      width: shimmerWidth,
+      width: Math.max(width * config.widthFactor, 12),
       height,
       backgroundColor: highlightColor,
+      opacity: config.opacity,
       transform: [{
-        translateX
+        translateX: bars[i]
       }]
     }]
-  }));
+  })));
 }
 const styles = _reactNative.StyleSheet.create({
   container: {
@@ -81,8 +115,7 @@ const styles = _reactNative.StyleSheet.create({
   shimmer: {
     position: 'absolute',
     top: 0,
-    left: 0,
-    opacity: 0.5
+    left: 0
   }
 });
 

package/lib/commonjs/theme/IconThemeProvider.js

@@ -10,6 +10,10 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 /**
  * IconThemeProvider
  * Provides global theme configuration for all icon components
+ *
+ * v3.0 fix: Replaced useState + useEffect anti-pattern with useMemo.
+ * Inline theme props no longer cause infinite re-render loops.
+ * setTheme() still works for dynamic theme switching via internal override state.
  */
 
 /**
@@ -31,20 +35,6 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * }
  * ```
  *
- * @example With placeholder defaults
- * ```tsx
- * <IconThemeProvider
- *   theme={{
- *     size: 24,
- *     color: '#1a1a1a',
- *     placeholder: 'shimmer',
- *     placeholderColor: '#f0f0f0',
- *   }}
- * >
- *   <YourApp />
- * </IconThemeProvider>
- * ```
- *
  * @example Dynamic theme switching
  * ```tsx
  * function App() {
@@ -67,26 +57,36 @@ function IconThemeProviderComponent({
   theme: initialTheme,
   children
 }) {
-  const [theme, setThemeState] = (0, _react.useState)(() => (0, _context.mergeWithDefaults)(initialTheme));
+  // Derive theme from prop (no useState + useEffect cycle)
+  const externalTheme = (0, _react.useMemo)(() => (0, _context.mergeWithDefaults)(initialTheme), [initialTheme]);
 
-  // Memoized setTheme that supports both direct value and updater function
+  // Internal override state for setTheme() API
+  const [overrideTheme, setOverrideTheme] = (0, _react.useState)(null);
+
+  // When external theme changes, clear any override
+  const prevExternalRef = _react.default.useRef(externalTheme);
+  if (prevExternalRef.current !== externalTheme) {
+    prevExternalRef.current = externalTheme;
+    if (overrideTheme !== null) {
+      setOverrideTheme(null);
+    }
+  }
+  const effectiveTheme = overrideTheme ?? externalTheme;
+
+  // setTheme supports both direct value and updater function
   const setTheme = (0, _react.useCallback)(newTheme => {
-    setThemeState(prevTheme => {
-      const nextTheme = typeof newTheme === 'function' ? newTheme(prevTheme) : newTheme;
+    setOverrideTheme(prevOverride => {
+      const current = prevOverride ?? externalTheme;
+      const nextTheme = typeof newTheme === 'function' ? newTheme(current) : newTheme;
       return (0, _context.mergeWithDefaults)(nextTheme);
     });
-  }, []);
-
-  // Update internal state when prop changes
-  _react.default.useEffect(() => {
-    setThemeState((0, _context.mergeWithDefaults)(initialTheme));
-  }, [initialTheme]);
+  }, [externalTheme]);
 
   // Memoize context value to prevent unnecessary re-renders
   const contextValue = (0, _react.useMemo)(() => ({
-    theme,
+    theme: effectiveTheme,
     setTheme
-  }), [theme, setTheme]);
+  }), [effectiveTheme, setTheme]);
   return /*#__PURE__*/_react.default.createElement(_context.IconThemeContext.Provider, {
     value: contextValue
   }, children);