rn-iconify 2.2.1 → 3.0.1

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);