rn-iconify 2.2.1 → 3.0.1

package/lib/module/IconRenderer.js

@@ -1,10 +1,18 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 /**
  * IconRenderer - Core component for rendering SVG icons
- * Handles cache lookup, network fetching, and SVG rendering
+ * Handles cache lookup, network fetching, placeholders, and SVG rendering
+ *
+ * v3.0 rewrite:
+ * - useReducer state machine (eliminates impossible states)
+ * - SvgXml color prop (preserves multi-color icons)
+ * - React.memo + React.forwardRef
+ * - Stable loadIcon deps (only iconName triggers refetch)
+ * - Auto 44dp hitSlop for small icons
+ * - Typed IconLoadError
  */
 
-import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import React, { useEffect, useCallback, useRef, useMemo, useReducer } from 'react';
 import { View, StyleSheet, Animated, Pressable } from 'react-native';
 import { SvgXml } from 'react-native-svg';
 import { CacheManager } from './cache/CacheManager';
@@ -12,14 +20,109 @@ import { fetchIcon } from './network/IconifyAPI';
 import { PlaceholderFactory } from './placeholder';
 import { useIconAnimation } from './animated/useIconAnimation';
 import { ConfigManager } from './config';
-/**
- * Escape special characters for XML attribute values
- * Prevents XSS attacks when user input is used as color prop
- */
-function escapeXmlAttribute(value) {
-  return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&apos;');
+import { IconLoadError } from './errors';
+import { useAccessibility } from './accessibility/AccessibilityProvider';
+
+// ---------------------------------------------------------------------------
+// State machine
+// ---------------------------------------------------------------------------
+
+const initialState = {
+  svg: null,
+  status: 'idle',
+  showFallback: false,
+  wasCacheHit: false,
+  error: null
+};
+function iconReducer(state, action) {
+  switch (action.type) {
+    case 'CACHE_HIT':
+      return {
+        svg: action.svg,
+        status: 'loaded',
+        showFallback: false,
+        wasCacheHit: true,
+        error: null
+      };
+    case 'FETCH_START':
+      return {
+        svg: null,
+        status: 'loading',
+        showFallback: false,
+        wasCacheHit: false,
+        error: null
+      };
+    case 'SHOW_FALLBACK':
+      if (state.status !== 'loading') return state;
+      return {
+        ...state,
+        showFallback: true
+      };
+    case 'FETCH_SUCCESS':
+      return {
+        svg: action.svg,
+        status: 'loaded',
+        showFallback: false,
+        wasCacheHit: false,
+        error: null
+      };
+    case 'FETCH_ERROR':
+      return {
+        svg: null,
+        status: 'error',
+        showFallback: true,
+        wasCacheHit: false,
+        error: action.error
+      };
+    case 'RESET':
+      return initialState;
+    default:
+      return state;
+  }
 }
-export function IconRenderer({
+
+// ---------------------------------------------------------------------------
+// PressableWrapper — extracted and memoized
+// ---------------------------------------------------------------------------
+
+const PressableWrapper = /*#__PURE__*/React.memo(function PressableWrapper({
+  onPress,
+  onLongPress,
+  onPressIn,
+  onPressOut,
+  disabled,
+  pressedStyle,
+  hitSlop,
+  children
+}) {
+  return /*#__PURE__*/React.createElement(Pressable, {
+    onPress: onPress,
+    onLongPress: onLongPress,
+    onPressIn: onPressIn,
+    onPressOut: onPressOut,
+    disabled: disabled,
+    hitSlop: hitSlop,
+    accessibilityRole: "button",
+    accessibilityState: {
+      disabled
+    },
+    style: pressedStyle ? ({
+      pressed
+    }) => [pressed && pressedStyle] : undefined
+  }, children);
+});
+
+// ---------------------------------------------------------------------------
+// MIN_TOUCH_TARGET for automatic hitSlop
+// ---------------------------------------------------------------------------
+
+const MIN_TOUCH_TARGET = 44;
+
+// ---------------------------------------------------------------------------
+// IconRenderer component
+// ---------------------------------------------------------------------------
+
+export const IconRenderer = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function IconRenderer({
   iconName,
   size = 24,
   color = '#000000',
@@ -53,20 +156,30 @@ export function IconRenderer({
   animationDelay,
   autoPlay = true,
   onAnimationComplete
-}) {
+}, ref) {
   // Resolve defaults from config
   const defaultsConfig = ConfigManager.getDefaultsConfig();
   const effectivePlaceholder = placeholder !== undefined ? placeholder : defaultsConfig.placeholder !== false ? defaultsConfig.placeholder : undefined;
   const fadeIn = defaultsConfig.fadeIn;
   const fadeInDuration = defaultsConfig.fadeInDuration;
-  const [svg, setSvg] = useState(null);
-  const [state, setState] = useState('idle');
-  const [showFallback, setShowFallback] = useState(false);
-  const [wasCacheHit, setWasCacheHit] = useState(false);
+
+  // State machine
+  const [state, dispatch] = useReducer(iconReducer, initialState);
+
+  // Refs for callback stability (these never invalidate loadIcon)
   const mountedRef = useRef(true);
-  const fallbackTimerRef = useRef(null);
   const abortControllerRef = useRef(null);
-  const isLoadingRef = useRef(false);
+  const fallbackTimerRef = useRef(null);
+  const onLoadRef = useRef(onLoad);
+  const onErrorRef = useRef(onError);
+  const fallbackRef = useRef(fallback);
+  const effectivePlaceholderRef = useRef(effectivePlaceholder);
+
+  // Keep refs up to date
+  onLoadRef.current = onLoad;
+  onErrorRef.current = onError;
+  fallbackRef.current = fallback;
+  effectivePlaceholderRef.current = effectivePlaceholder;
 
   // Fade-in animation value
   const fadeAnim = useRef(new Animated.Value(0)).current;
@@ -75,12 +188,22 @@ export function IconRenderer({
   const iconWidth = propWidth ?? size;
   const iconHeight = propHeight ?? size;
 
-  // Animation hook
+  // Auto hitSlop for accessibility (44dp minimum touch target)
+  const hitSlop = useMemo(() => Math.max(0, (MIN_TOUCH_TARGET - Math.min(iconWidth, iconHeight)) / 2), [iconWidth, iconHeight]);
+
+  // Accessibility context (optional — works without AccessibilityProvider)
+  const a11y = useAccessibility();
+  const reduceMotion = a11y?.shouldDisableAnimations() ?? false;
+
+  // Auto-generate accessibility label from icon name when not provided
+  const resolvedA11yLabel = accessibilityLabel ?? a11y?.getLabel(iconName);
+
+  // Animation hook — disabled when user prefers reduced motion
   const {
     animatedStyle,
     hasAnimation
   } = useIconAnimation({
-    animation: animate,
+    animation: reduceMotion ? undefined : animate,
     duration: animationDuration,
     loop: animationLoop,
     easing: animationEasing,
@@ -89,8 +212,11 @@ export function IconRenderer({
     onComplete: onAnimationComplete
   });
 
-  // Load icon
-  const loadIcon = useCallback(async () => {
+  // ------------------------------------------------------------------
+  // loadIcon — deps are only [iconName, fadeIn, fadeInDuration, fadeAnim]
+  // Callbacks and fallback are read from refs → never invalidate this
+  // ------------------------------------------------------------------
+  const loadIcon = useCallback(() => {
     if (!iconName) return;
 
     // Cancel any previous request
@@ -99,80 +225,92 @@ export function IconRenderer({
     }
     abortControllerRef.current = new AbortController();
 
+    // Clear previous fallback timer
+    if (fallbackTimerRef.current) {
+      clearTimeout(fallbackTimerRef.current);
+      fallbackTimerRef.current = null;
+    }
+
     // 1. Check cache first (synchronous)
     const cached = CacheManager.get(iconName);
     if (cached) {
-      if (mountedRef.current) {
-        setSvg(cached);
-        setState('loaded');
-        setWasCacheHit(true);
-        isLoadingRef.current = false;
-        fadeAnim.setValue(1); // No fade for cache hits
-        onLoad?.();
-      }
+      dispatch({
+        type: 'CACHE_HIT',
+        svg: cached
+      });
+      fadeAnim.setValue(1); // No fade for cache hits
+      onLoadRef.current?.();
       return;
     }
 
-    // 2. Set loading state and start fallback timer
-    setState('loading');
-    isLoadingRef.current = true;
-    setWasCacheHit(false);
+    // 2. Set loading state
+    dispatch({
+      type: 'FETCH_START'
+    });
+
+    // 3. Start fallback timer or show immediately
     if (fallbackDelay > 0) {
       fallbackTimerRef.current = setTimeout(() => {
-        if (mountedRef.current && isLoadingRef.current) {
-          setShowFallback(true);
+        if (mountedRef.current) {
+          dispatch({
+            type: 'SHOW_FALLBACK'
+          });
         }
       }, fallbackDelay);
-    } else if (fallback || effectivePlaceholder !== undefined) {
-      setShowFallback(true);
+    } else if (fallbackRef.current || effectivePlaceholderRef.current !== undefined) {
+      dispatch({
+        type: 'SHOW_FALLBACK'
+      });
     }
 
-    // 3. Fetch from network
-    try {
-      const fetchedSvg = await fetchIcon(iconName, abortControllerRef.current.signal);
-      if (mountedRef.current) {
-        CacheManager.set(iconName, fetchedSvg);
-        setSvg(fetchedSvg);
-        setState('loaded');
-        isLoadingRef.current = false;
-        setShowFallback(false);
-
-        // Fade-in for non-cached icons
-        if (fadeIn) {
-          fadeAnim.setValue(0);
-          Animated.timing(fadeAnim, {
-            toValue: 1,
-            duration: fadeInDuration,
-            useNativeDriver: true
-          }).start();
-        } else {
-          fadeAnim.setValue(1);
-        }
-        onLoad?.();
+    // 4. Fetch from network (async, fire-and-forget from useCallback's perspective)
+    const controller = abortControllerRef.current;
+    fetchIcon(iconName, controller.signal).then(fetchedSvg => {
+      if (!mountedRef.current) return;
+      CacheManager.set(iconName, fetchedSvg);
+      dispatch({
+        type: 'FETCH_SUCCESS',
+        svg: fetchedSvg
+      });
+
+      // Fade-in for non-cached icons
+      if (fadeIn) {
+        fadeAnim.setValue(0);
+        Animated.timing(fadeAnim, {
+          toValue: 1,
+          duration: fadeInDuration,
+          useNativeDriver: true
+        }).start();
+      } else {
+        fadeAnim.setValue(1);
       }
-    } catch (error) {
+      onLoadRef.current?.();
+    }).catch(error => {
       if (error instanceof Error && error.name === 'AbortError') {
         return;
       }
-      if (mountedRef.current) {
-        setState('error');
-        isLoadingRef.current = false;
-        onError?.(error instanceof Error ? error : new Error(String(error)));
-      }
-    }
-  }, [iconName, fallback, fallbackDelay, onLoad, onError, effectivePlaceholder, fadeIn, fadeInDuration, fadeAnim]);
+      if (!mountedRef.current) return;
+      const typedError = error instanceof IconLoadError ? error : error instanceof Error ? error : new IconLoadError('NETWORK', String(error));
+      dispatch({
+        type: 'FETCH_ERROR',
+        error: typedError
+      });
+      onErrorRef.current?.(typedError);
+    });
+  }, [iconName, fallbackDelay, fadeIn, fadeInDuration, fadeAnim]);
 
   // Effect to load icon
   useEffect(() => {
     mountedRef.current = true;
+    dispatch({
+      type: 'RESET'
+    });
     loadIcon();
     return () => {
       mountedRef.current = false;
-      isLoadingRef.current = false;
       if (fallbackTimerRef.current) {
         clearTimeout(fallbackTimerRef.current);
       }
-      // Abort any in-flight requests on unmount
       if (abortControllerRef.current) {
         abortControllerRef.current.abort();
       }
@@ -200,58 +338,45 @@ export function IconRenderer({
     return transforms.length > 0 ? transforms : undefined;
   }, [rotate, flip]);
 
-  // Memoize colorized SVG to avoid recalculating on every render
-  const colorizedSvg = useMemo(() => {
-    if (!svg) return null;
-    const safeColor = escapeXmlAttribute(color);
-    return svg.replace(/currentColor/g, safeColor).replace(/<svg/, `<svg fill="${safeColor}"`);
-  }, [svg, color]);
-
-  // Determine if we should show placeholder/fallback
-  const shouldShowPlaceholder = state === 'loading' && showFallback || state === 'error';
-
-  // Whether to use fade-in wrapper (only for non-cached, non-animated icons)
-  const useFadeIn = fadeIn && !wasCacheHit && state === 'loaded' && !hasAnimation;
-
-  // Check if icon should be pressable
+  // Determine rendering flags
+  const shouldShowPlaceholder = state.status === 'loading' && state.showFallback || state.status === 'error';
+  const useFadeIn = fadeIn && !state.wasCacheHit && state.status === 'loaded' && !hasAnimation;
   const isPressable = !!(onPress || onLongPress);
 
-  // NativeWind className support - conditional spread to avoid TS errors
+  // NativeWind className support
   const nativeWindProps = className ? {
     className
   } : {};
 
-  /**
-   * Wraps content with Pressable if onPress/onLongPress is provided
-   */
-  const wrapWithPressable = content => {
+  // ------------------------------------------------------------------
+  // Helper: wrap content with PressableWrapper if interactive
+  // ------------------------------------------------------------------
+  const wrapContent = content => {
     if (!isPressable) return content;
-    return /*#__PURE__*/React.createElement(Pressable, {
+    return /*#__PURE__*/React.createElement(PressableWrapper, {
       onPress: onPress,
       onLongPress: onLongPress,
       onPressIn: onPressIn,
       onPressOut: onPressOut,
       disabled: disabled,
-      accessibilityRole: "button",
-      accessibilityState: {
-        disabled
-      },
-      style: ({
-        pressed
-      }) => [pressed && pressedStyle]
+      pressedStyle: pressedStyle,
+      hitSlop: hitSlop
     }, content);
   };
 
-  // Render placeholder or fallback during loading/error
+  // ------------------------------------------------------------------
+  // Render: placeholder / fallback during loading or error
+  // ------------------------------------------------------------------
   if (shouldShowPlaceholder) {
-    // Priority: effectivePlaceholder (includes config default) > fallback
     if (effectivePlaceholder !== undefined) {
-      return wrapWithPressable(/*#__PURE__*/React.createElement(View, _extends({
+      return wrapContent(/*#__PURE__*/React.createElement(View, _extends({
+        ref: ref,
         style: [{
           width: iconWidth,
           height: iconHeight
         }, style],
-        accessibilityLabel: accessibilityLabel,
+        accessibilityLabel: resolvedA11yLabel,
+        accessibilityRole: "image",
         testID: testID
       }, nativeWindProps), /*#__PURE__*/React.createElement(PlaceholderFactory, {
         type: effectivePlaceholder,
@@ -261,92 +386,100 @@ export function IconRenderer({
         duration: placeholderDuration
       })));
     }
-
-    // Fallback for backwards compatibility (deprecated)
     if (fallback) {
-      return wrapWithPressable(/*#__PURE__*/React.createElement(View, _extends({
+      return wrapContent(/*#__PURE__*/React.createElement(View, _extends({
+        ref: ref,
         style: [{
           width: iconWidth,
           height: iconHeight
         }, style],
-        accessibilityLabel: accessibilityLabel,
+        accessibilityLabel: resolvedA11yLabel,
+        accessibilityRole: "image",
         testID: testID
       }, nativeWindProps), fallback));
     }
-
-    // Return empty view if no placeholder/fallback
-    return wrapWithPressable(/*#__PURE__*/React.createElement(View, _extends({
+    return wrapContent(/*#__PURE__*/React.createElement(View, _extends({
+      ref: ref,
       style: [{
         width: iconWidth,
         height: iconHeight
       }, style],
-      accessibilityLabel: accessibilityLabel,
+      accessibilityLabel: resolvedA11yLabel,
+      accessibilityRole: "image",
       testID: testID
     }, nativeWindProps)));
   }
 
-  // Render icon
-  if (colorizedSvg) {
-    // Render with animation wrapper if animation is enabled
+  // ------------------------------------------------------------------
+  // Render: loaded SVG
+  // Uses SvgXml's native `color` prop instead of regex replacement.
+  // This preserves multi-color icons (color only replaces currentColor).
+  // ------------------------------------------------------------------
+  if (state.svg) {
+    const svgElement = /*#__PURE__*/React.createElement(SvgXml, {
+      xml: state.svg,
+      width: iconWidth,
+      height: iconHeight,
+      color: color
+    });
+
+    // With animation
     if (hasAnimation) {
-      return wrapWithPressable(/*#__PURE__*/React.createElement(Animated.View, _extends({
+      return wrapContent(/*#__PURE__*/React.createElement(Animated.View, _extends({
+        ref: ref,
         style: [styles.container, {
           width: iconWidth,
           height: iconHeight,
           transform: transformStyle
         }, style, animatedStyle],
-        accessibilityLabel: accessibilityLabel,
+        accessibilityLabel: resolvedA11yLabel,
         accessibilityRole: "image",
         testID: testID
-      }, nativeWindProps), /*#__PURE__*/React.createElement(SvgXml, {
-        xml: colorizedSvg,
-        width: iconWidth,
-        height: iconHeight
-      })));
+      }, nativeWindProps), svgElement));
     }
 
-    // Render without animation (with optional fade-in)
+    // With fade-in (non-cached network fetch)
     if (useFadeIn) {
-      return wrapWithPressable(/*#__PURE__*/React.createElement(Animated.View, _extends({
+      return wrapContent(/*#__PURE__*/React.createElement(Animated.View, _extends({
+        ref: ref,
         style: [styles.container, {
           width: iconWidth,
           height: iconHeight,
           transform: transformStyle,
           opacity: fadeAnim
         }, style],
-        accessibilityLabel: accessibilityLabel,
+        accessibilityLabel: resolvedA11yLabel,
         accessibilityRole: "image",
         testID: testID
-      }, nativeWindProps), /*#__PURE__*/React.createElement(SvgXml, {
-        xml: colorizedSvg,
-        width: iconWidth,
-        height: iconHeight
-      })));
+      }, nativeWindProps), svgElement));
     }
-    return wrapWithPressable(/*#__PURE__*/React.createElement(View, _extends({
+
+    // Static render (cache hit or fade disabled)
+    return wrapContent(/*#__PURE__*/React.createElement(View, _extends({
+      ref: ref,
       style: [styles.container, {
         width: iconWidth,
         height: iconHeight,
         transform: transformStyle
       }, style],
-      accessibilityLabel: accessibilityLabel,
+      accessibilityLabel: resolvedA11yLabel,
       accessibilityRole: "image",
       testID: testID
-    }, nativeWindProps), /*#__PURE__*/React.createElement(SvgXml, {
-      xml: colorizedSvg,
-      width: iconWidth,
-      height: iconHeight
-    })));
+    }, nativeWindProps), svgElement));
   }
 
-  // Show placeholder immediately if set (no delay), otherwise empty view
-  if (effectivePlaceholder !== undefined && state === 'loading') {
-    return wrapWithPressable(/*#__PURE__*/React.createElement(View, _extends({
+  // ------------------------------------------------------------------
+  // Render: initial loading (before fallback delay)
+  // ------------------------------------------------------------------
+  if (effectivePlaceholder !== undefined && state.status === 'loading') {
+    return wrapContent(/*#__PURE__*/React.createElement(View, _extends({
+      ref: ref,
       style: [{
         width: iconWidth,
         height: iconHeight
       }, style],
-      accessibilityLabel: accessibilityLabel,
+      accessibilityLabel: resolvedA11yLabel,
+      accessibilityRole: "image",
       testID: testID
     }, nativeWindProps), /*#__PURE__*/React.createElement(PlaceholderFactory, {
       type: effectivePlaceholder,
@@ -357,16 +490,18 @@ export function IconRenderer({
     })));
   }
 
-  // Return empty view while loading (before fallback delay)
-  return wrapWithPressable(/*#__PURE__*/React.createElement(View, _extends({
+  // Empty view while loading
+  return wrapContent(/*#__PURE__*/React.createElement(View, _extends({
+    ref: ref,
     style: [{
       width: iconWidth,
       height: iconHeight
     }, style],
-    accessibilityLabel: accessibilityLabel,
+    accessibilityLabel: resolvedA11yLabel,
+    accessibilityRole: "image",
     testID: testID
   }, nativeWindProps)));
-}
+}));
 const styles = StyleSheet.create({
   container: {
     alignItems: 'center',

package/lib/module/accessibility/AccessibilityProvider.js

@@ -78,19 +78,18 @@ 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();
     };