rn-iconify 1.0.0 → 2.0.0

package/lib/typescript/types/index.d.ts

@@ -1,5 +1,7 @@
 import type { ReactNode } from 'react';
 import type { ViewStyle, StyleProp } from 'react-native';
+import type { PlaceholderType } from '../placeholder/types';
+import type { AnimationType, AnimationEasing } from '../animated/types';
 /**
  * Icon transformation rotation values
  */
@@ -50,13 +52,31 @@ export interface IconProps<T extends string = string> {
     flip?: IconFlip;
     /**
      * Fallback component shown while the icon is loading
+     * @deprecated Use `placeholder` instead for built-in animated placeholders
      */
     fallback?: ReactNode;
     /**
-     * Delay in milliseconds before showing the fallback
+     * Delay in milliseconds before showing the fallback/placeholder
      * @default 0
      */
     fallbackDelay?: number;
+    /**
+     * Placeholder shown while the icon is loading
+     * Can be a preset ('skeleton', 'pulse', 'shimmer') or a custom ReactNode
+     * @example 'shimmer'
+     * @example <ActivityIndicator size="small" />
+     */
+    placeholder?: PlaceholderType;
+    /**
+     * Placeholder background color
+     * @default '#E1E1E1'
+     */
+    placeholderColor?: string;
+    /**
+     * Placeholder animation duration in milliseconds
+     * @default 1000
+     */
+    placeholderDuration?: number;
     /**
      * Called when the icon loads successfully
      */
@@ -73,6 +93,41 @@ export interface IconProps<T extends string = string> {
      * Test ID for testing purposes
      */
     testID?: string;
+    /**
+     * Animation to apply to the icon
+     * Can be a preset ('spin', 'pulse', 'bounce', 'shake', 'ping', 'wiggle')
+     * or a custom animation configuration
+     * @example 'spin'
+     * @example { type: 'rotate', duration: 2000, easing: 'linear' }
+     */
+    animate?: AnimationType;
+    /**
+     * Animation duration in milliseconds (overrides preset default)
+     */
+    animationDuration?: number;
+    /**
+     * Whether the animation should loop
+     * @default true for most presets
+     */
+    animationLoop?: boolean;
+    /**
+     * Animation easing function
+     */
+    animationEasing?: AnimationEasing;
+    /**
+     * Delay before animation starts (ms)
+     * @default 0
+     */
+    animationDelay?: number;
+    /**
+     * Whether to start animation automatically
+     * @default true
+     */
+    autoPlay?: boolean;
+    /**
+     * Callback when animation completes (for non-looping animations)
+     */
+    onAnimationComplete?: () => void;
 }
 /**
  * Internal icon data structure from Iconify API
@@ -128,4 +183,6 @@ export interface IconRendererProps extends Omit<IconProps<string>, 'name'> {
      */
     iconName: string;
 }
+export type { PlaceholderType, PlaceholderConfig, PlaceholderPreset } from '../placeholder/types';
+export type { AnimationType, AnimationPreset, AnimationConfig, AnimationEasing, AnimationControls, } from '../animated/types';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,CAAC;AAE9C;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;AAE1D;;GAEG;AACH,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAClD;;;OAGG;IACH,IAAI,EAAE,CAAC,CAAC;IAER;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IAEtB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAEjC;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;GAGG;AACH,MAAM,WAAW,kBAAkB;IACjC,sBAAsB;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;IACvC,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEvE;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACxE;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;CAClB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,15 +1,42 @@
 {
   "name": "rn-iconify",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "268,000+ Iconify icons for React Native with native MMKV caching and full TypeScript autocomplete",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "types": "lib/typescript/index.d.ts",
   "react-native": "src/index.ts",
   "source": "src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/typescript/index.d.ts",
+      "import": "./lib/module/index.js",
+      "require": "./lib/commonjs/index.js"
+    },
+    "./babel": {
+      "types": "./lib/typescript/babel/index.d.ts",
+      "import": "./lib/module/babel/index.js",
+      "require": "./lib/commonjs/babel/index.js"
+    },
+    "./navigation": {
+      "types": "./lib/typescript/navigation/index.d.ts",
+      "import": "./lib/module/navigation/index.js",
+      "require": "./lib/commonjs/navigation/index.js"
+    },
+    "./animated": {
+      "types": "./lib/typescript/animated/index.d.ts",
+      "import": "./lib/module/animated/index.js",
+      "require": "./lib/commonjs/animated/index.js"
+    }
+  },
+  "bin": {
+    "rn-iconify": "./lib/commonjs/cli/index.js"
+  },
   "files": [
     "src",
     "lib",
+    "bin",
+    "babel.js",
     "!**/__tests__",
     "!**/__fixtures__",
     "!**/__mocks__"
@@ -32,13 +59,23 @@
   },
   "keywords": [
     "react-native",
+    "react-native-icons",
     "icons",
     "iconify",
     "svg",
+    "svg-icons",
+    "icon-library",
+    "icon-component",
+    "typescript",
+    "mmkv",
+    "cache",
     "material-design",
     "heroicons",
     "lucide",
     "phosphor",
+    "tabler",
+    "fontawesome",
+    "fluent-icons",
     "feather",
     "vector-icons"
   ],
@@ -51,7 +88,7 @@
   "bugs": {
     "url": "https://github.com/mogretici/rn-iconify/issues"
   },
-  "homepage": "https://github.com/mogretici/rn-iconify#readme",
+  "homepage": "https://rn-iconify.vercel.app",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -67,6 +104,8 @@
     }
   },
   "devDependencies": {
+    "@babel/core": "^7.24.0",
+    "@babel/types": "^7.24.0",
     "@commitlint/cli": "^19.0.0",
     "@commitlint/config-conventional": "^19.0.0",
     "@react-native/babel-preset": "^0.82.1",
@@ -88,7 +127,6 @@
     "react-native-mmkv": "^3.0.0",
     "react-native-svg": "^15.0.0",
     "react-test-renderer": "^18.2.0",
-    "ts-node": "^10.9.0",
     "tsx": "^4.20.6",
     "typescript": "^5.4.0"
   },

package/src/IconRenderer.tsx

@@ -4,10 +4,12 @@
  */
 
 import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, Animated } from 'react-native';
 import { SvgXml } from 'react-native-svg';
 import { CacheManager } from './cache/CacheManager';
 import { fetchIcon } from './network/IconifyAPI';
+import { PlaceholderFactory } from './placeholder';
+import { useIconAnimation } from './animated/useIconAnimation';
 import type { IconRendererProps, IconLoadingState } from './types';
 
 /**
@@ -34,10 +36,21 @@ export function IconRenderer({
   flip,
   fallback,
   fallbackDelay = 0,
+  placeholder,
+  placeholderColor,
+  placeholderDuration,
   onLoad,
   onError,
   accessibilityLabel,
   testID,
+  // Animation props
+  animate,
+  animationDuration,
+  animationLoop,
+  animationEasing,
+  animationDelay,
+  autoPlay = true,
+  onAnimationComplete,
 }: IconRendererProps) {
   const [svg, setSvg] = useState<string | null>(null);
   const [state, setState] = useState<IconLoadingState>('idle');
@@ -51,6 +64,17 @@ export function IconRenderer({
   const iconWidth = propWidth ?? size;
   const iconHeight = propHeight ?? size;
 
+  // Animation hook
+  const { animatedStyle, hasAnimation } = useIconAnimation({
+    animation: animate,
+    duration: animationDuration,
+    loop: animationLoop,
+    easing: animationEasing,
+    delay: animationDelay,
+    autoPlay,
+    onComplete: onAnimationComplete,
+  });
+
   // Load icon
   const loadIcon = useCallback(async () => {
     if (!iconName) return;
@@ -159,8 +183,31 @@ export function IconRenderer({
     return svg.replace(/currentColor/g, safeColor).replace(/<svg/, `<svg fill="${safeColor}"`);
   }, [svg, color]);
 
-  // Render fallback
-  if ((state === 'loading' && showFallback) || state === 'error') {
+  // Determine if we should show placeholder/fallback
+  const shouldShowPlaceholder = (state === 'loading' && showFallback) || state === 'error';
+
+  // Render placeholder or fallback during loading/error
+  if (shouldShowPlaceholder) {
+    // Priority: placeholder > fallback
+    if (placeholder !== undefined) {
+      return (
+        <View
+          style={[{ width: iconWidth, height: iconHeight }, style]}
+          accessibilityLabel={accessibilityLabel}
+          testID={testID}
+        >
+          <PlaceholderFactory
+            type={placeholder}
+            width={iconWidth}
+            height={iconHeight}
+            color={placeholderColor}
+            duration={placeholderDuration}
+          />
+        </View>
+      );
+    }
+
+    // Fallback for backwards compatibility (deprecated)
     if (fallback) {
       return (
         <View
@@ -172,7 +219,8 @@ export function IconRenderer({
         </View>
       );
     }
-    // Return empty view if no fallback
+
+    // Return empty view if no placeholder/fallback
     return (
       <View
         style={[{ width: iconWidth, height: iconHeight }, style]}
@@ -184,6 +232,26 @@ export function IconRenderer({
 
   // Render icon
   if (colorizedSvg) {
+    // Render with animation wrapper if animation is enabled
+    if (hasAnimation) {
+      return (
+        <Animated.View
+          style={[
+            styles.container,
+            { width: iconWidth, height: iconHeight, transform: transformStyle },
+            style,
+            animatedStyle,
+          ]}
+          accessibilityLabel={accessibilityLabel}
+          accessibilityRole="image"
+          testID={testID}
+        >
+          <SvgXml xml={colorizedSvg} width={iconWidth} height={iconHeight} />
+        </Animated.View>
+      );
+    }
+
+    // Render without animation
     return (
       <View
         style={[
@@ -200,6 +268,25 @@ export function IconRenderer({
     );
   }
 
+  // Show placeholder immediately if set (no delay), otherwise empty view
+  if (placeholder !== undefined && state === 'loading') {
+    return (
+      <View
+        style={[{ width: iconWidth, height: iconHeight }, style]}
+        accessibilityLabel={accessibilityLabel}
+        testID={testID}
+      >
+        <PlaceholderFactory
+          type={placeholder}
+          width={iconWidth}
+          height={iconHeight}
+          color={placeholderColor}
+          duration={placeholderDuration}
+        />
+      </View>
+    );
+  }
+
   // Return empty view while loading (before fallback delay)
   return (
     <View

package/src/accessibility/AccessibilityProvider.tsx

@@ -0,0 +1,220 @@
+/**
+ * Accessibility Provider for rn-iconify
+ * Provides accessibility context to all icon components
+ */
+
+import React, { createContext, useContext, useState, useMemo, useCallback, useEffect } from 'react';
+import { AccessibilityInfo } from 'react-native';
+import type { AccessibilityRole } from 'react-native';
+import type {
+  AccessibilityConfig,
+  ResolvedAccessibilityConfig,
+  AccessibilityContextValue,
+} from './types';
+import { defaultLabelGenerator, adjustForHighContrast } from './utils';
+
+/**
+ * Default accessibility configuration
+ */
+export const DEFAULT_ACCESSIBILITY_CONFIG: ResolvedAccessibilityConfig = {
+  autoLabels: true,
+  labelGenerator: defaultLabelGenerator,
+  highContrast: false,
+  respectReducedMotion: true,
+  defaultRole: 'image' as AccessibilityRole,
+  showFocusIndicators: true,
+  minTouchTargetSize: 44,
+};
+
+/**
+ * Accessibility context
+ */
+export const AccessibilityContext = createContext<AccessibilityContextValue | null>(null);
+
+/**
+ * Props for AccessibilityProvider
+ */
+export interface AccessibilityProviderProps {
+  /**
+   * Initial accessibility configuration
+   */
+  config?: AccessibilityConfig;
+
+  /**
+   * Children components
+   */
+  children: React.ReactNode;
+}
+
+/**
+ * Accessibility Provider Component
+ * Wraps your app to provide accessibility features to all icons
+ *
+ * @example
+ * ```tsx
+ * import { AccessibilityProvider } from 'rn-iconify';
+ *
+ * function App() {
+ *   return (
+ *     <AccessibilityProvider config={{ autoLabels: true }}>
+ *       <MyApp />
+ *     </AccessibilityProvider>
+ *   );
+ * }
+ * ```
+ */
+export function AccessibilityProvider({
+  config: initialConfig,
+  children,
+}: AccessibilityProviderProps): React.ReactElement {
+  // Resolved configuration state
+  const [config, setConfigState] = useState<ResolvedAccessibilityConfig>(() => ({
+    ...DEFAULT_ACCESSIBILITY_CONFIG,
+    ...initialConfig,
+    labelGenerator: initialConfig?.labelGenerator ?? DEFAULT_ACCESSIBILITY_CONFIG.labelGenerator,
+  }));
+
+  // System preferences
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+  const [isHighContrast, setIsHighContrast] = useState(false);
+
+  // Listen for reduced motion preference
+  useEffect(() => {
+    const checkReducedMotion = async () => {
+      try {
+        const isReducedMotion = await AccessibilityInfo.isReduceMotionEnabled();
+        setPrefersReducedMotion(isReducedMotion);
+      } catch {
+        // Ignore errors on unsupported platforms
+      }
+    };
+
+    checkReducedMotion();
+
+    const subscription = AccessibilityInfo.addEventListener(
+      'reduceMotionChanged',
+      setPrefersReducedMotion
+    );
+
+    return () => {
+      subscription?.remove();
+    };
+  }, []);
+
+  // Listen for high contrast preference (iOS only, via bold text as proxy)
+  useEffect(() => {
+    const checkHighContrast = async () => {
+      try {
+        // Use bold text as a proxy for high contrast preference
+        const isBoldText = await AccessibilityInfo.isBoldTextEnabled();
+        setIsHighContrast(isBoldText);
+      } catch {
+        // Ignore errors on unsupported platforms
+      }
+    };
+
+    checkHighContrast();
+
+    const subscription = AccessibilityInfo.addEventListener('boldTextChanged', setIsHighContrast);
+
+    return () => {
+      subscription?.remove();
+    };
+  }, []);
+
+  // Update config handler
+  const setConfig = useCallback((newConfig: Partial<AccessibilityConfig>) => {
+    setConfigState((prev) => ({
+      ...prev,
+      ...newConfig,
+      labelGenerator: newConfig.labelGenerator ?? prev.labelGenerator,
+    }));
+  }, []);
+
+  // Destructure config for stable dependencies
+  const { autoLabels, labelGenerator, highContrast, respectReducedMotion } = config;
+
+  // Get label for icon
+  const getLabel = useCallback(
+    (iconName: string, customLabel?: string): string | undefined => {
+      // Custom label takes precedence
+      if (customLabel) return customLabel;
+
+      // Return undefined if auto-labels are disabled
+      if (!autoLabels) return undefined;
+
+      // Generate label using configured generator
+      return labelGenerator(iconName);
+    },
+    [autoLabels, labelGenerator]
+  );
+
+  // Get contrast-adjusted color
+  const getContrastColor = useCallback(
+    (color: string): string => {
+      // Check if high contrast should be applied
+      const shouldApplyHighContrast = highContrast || isHighContrast;
+
+      if (shouldApplyHighContrast) {
+        return adjustForHighContrast(color);
+      }
+
+      return color;
+    },
+    [highContrast, isHighContrast]
+  );
+
+  // Check if animations should be disabled
+  const shouldDisableAnimations = useCallback((): boolean => {
+    if (!respectReducedMotion) return false;
+    return prefersReducedMotion;
+  }, [respectReducedMotion, prefersReducedMotion]);
+
+  // Context value
+  const contextValue = useMemo<AccessibilityContextValue>(
+    () => ({
+      config,
+      prefersReducedMotion,
+      isHighContrast,
+      setConfig,
+      getLabel,
+      getContrastColor,
+      shouldDisableAnimations,
+    }),
+    [
+      config,
+      prefersReducedMotion,
+      isHighContrast,
+      setConfig,
+      getLabel,
+      getContrastColor,
+      shouldDisableAnimations,
+    ]
+  );
+
+  return (
+    <AccessibilityContext.Provider value={contextValue}>{children}</AccessibilityContext.Provider>
+  );
+}
+
+/**
+ * Hook to access accessibility context
+ * Throws if used outside AccessibilityProvider
+ */
+export function useAccessibilityContext(): AccessibilityContextValue {
+  const context = useContext(AccessibilityContext);
+  if (!context) {
+    throw new Error('useAccessibilityContext must be used within an AccessibilityProvider');
+  }
+  return context;
+}
+
+/**
+ * Hook to safely access accessibility context
+ * Returns null if used outside AccessibilityProvider
+ */
+export function useAccessibility(): AccessibilityContextValue | null {
+  return useContext(AccessibilityContext);
+}
+
+export default AccessibilityProvider;

package/src/accessibility/index.ts

@@ -0,0 +1,63 @@
+/**
+ * Accessibility Module for rn-iconify
+ * Provides accessibility features for icon components
+ *
+ * @example
+ * ```tsx
+ * import { AccessibilityProvider, useAccessibleIcon } from 'rn-iconify';
+ *
+ * // Wrap your app with AccessibilityProvider
+ * function App() {
+ *   return (
+ *     <AccessibilityProvider config={{ autoLabels: true, highContrast: false }}>
+ *       <MyApp />
+ *     </AccessibilityProvider>
+ *   );
+ * }
+ *
+ * // Use the hook in your components
+ * function MyIcon({ name, size, color }) {
+ *   const { accessibilityProps, adjustedColor } = useAccessibleIcon({
+ *     iconName: name,
+ *     size,
+ *     color,
+ *   });
+ *
+ *   return <Icon name={name} size={size} color={adjustedColor} {...accessibilityProps} />;
+ * }
+ * ```
+ */
+
+// Types
+export type {
+  AccessibilityConfig,
+  ResolvedAccessibilityConfig,
+  AccessibilityContextValue,
+  AccessibleIconProps,
+} from './types';
+
+// Provider
+export {
+  AccessibilityProvider,
+  AccessibilityContext,
+  useAccessibilityContext,
+  useAccessibility,
+  DEFAULT_ACCESSIBILITY_CONFIG,
+} from './AccessibilityProvider';
+export type { AccessibilityProviderProps } from './AccessibilityProvider';
+
+// Hook
+export { useAccessibleIcon, withAccessibility } from './useAccessibleIcon';
+export type { UseAccessibleIconInput, UseAccessibleIconOutput } from './useAccessibleIcon';
+
+// Utilities
+export {
+  defaultLabelGenerator,
+  adjustForHighContrast,
+  meetsContrastRequirement,
+  getHighContrastAlternative,
+  calculateTouchTargetPadding,
+} from './utils';
+
+// Default export
+export { AccessibilityProvider as default } from './AccessibilityProvider';