rn-iconify 1.0.0 → 2.0.0

package/src/navigation/createDrawerIcon.tsx

@@ -0,0 +1,113 @@
+/**
+ * createDrawerIcon - Helper for React Navigation drawer icons
+ * Creates a drawerIcon function for drawer navigation items
+ */
+
+import React from 'react';
+import { Icon } from '../alias';
+import type { DrawerIconProps, DrawerIconConfig, DrawerIconFunction } from './types';
+
+// IconSpec is just a type alias for string (icon name)
+type IconSpec = string;
+
+/**
+ * Normalize config to full DrawerIconConfig
+ */
+function normalizeConfig(config: IconSpec | DrawerIconConfig): DrawerIconConfig {
+  if (typeof config === 'string') {
+    return { icon: config };
+  }
+  return config;
+}
+
+/**
+ * Create a drawer icon function for React Navigation
+ *
+ * @example Simple usage
+ * ```tsx
+ * import { createDrawerIcon } from 'rn-iconify/navigation';
+ *
+ * <Drawer.Screen
+ *   name="Home"
+ *   component={HomeScreen}
+ *   options={{
+ *     drawerIcon: createDrawerIcon('mdi:home'),
+ *   }}
+ * />
+ * ```
+ *
+ * @example Different icons for focused/unfocused
+ * ```tsx
+ * <Drawer.Screen
+ *   options={{
+ *     drawerIcon: createDrawerIcon({
+ *       icon: 'mdi:home-outline',
+ *       focusedIcon: 'mdi:home',
+ *     }),
+ *   }}
+ * />
+ * ```
+ *
+ * @example With custom size
+ * ```tsx
+ * <Drawer.Screen
+ *   options={{
+ *     drawerIcon: createDrawerIcon({
+ *       icon: 'mdi:settings',
+ *       size: 28,
+ *     }),
+ *   }}
+ * />
+ * ```
+ */
+export function createDrawerIcon(config: IconSpec | DrawerIconConfig): DrawerIconFunction {
+  const normalizedConfig = normalizeConfig(config);
+
+  return function DrawerIcon({ focused, color, size }: DrawerIconProps) {
+    const { icon, focusedIcon, size: customSize, style } = normalizedConfig;
+
+    // Determine which icon to show
+    const iconName = focused && focusedIcon ? focusedIcon : icon;
+
+    // Determine size
+    const iconSize = customSize ?? size;
+
+    return <Icon name={iconName} size={iconSize} color={color} style={style} />;
+  };
+}
+
+/**
+ * Create multiple drawer icons at once
+ *
+ * @example
+ * ```tsx
+ * import { createDrawerIcons } from 'rn-iconify/navigation';
+ *
+ * const drawerIcons = createDrawerIcons({
+ *   Home: 'mdi:home',
+ *   Profile: 'mdi:account',
+ *   Settings: {
+ *     icon: 'mdi:cog-outline',
+ *     focusedIcon: 'mdi:cog',
+ *   },
+ * });
+ *
+ * <Drawer.Screen
+ *   name="Home"
+ *   options={{ drawerIcon: drawerIcons.Home }}
+ * />
+ * ```
+ */
+export function createDrawerIcons<T extends Record<string, IconSpec | DrawerIconConfig>>(
+  configs: T
+): { [K in keyof T]: DrawerIconFunction } {
+  const result = {} as { [K in keyof T]: DrawerIconFunction };
+
+  for (const [key, config] of Object.entries(configs)) {
+    result[key as keyof T] = createDrawerIcon(config);
+  }
+
+  return result;
+}
+
+export default createDrawerIcon;

package/src/navigation/createHeaderIcon.tsx

@@ -0,0 +1,213 @@
+/**
+ * createHeaderIcon - Helper for React Navigation header icons
+ * Creates header icons for headerLeft, headerRight, etc.
+ */
+
+import React from 'react';
+import { TouchableOpacity, StyleSheet } from 'react-native';
+import { Icon } from '../alias';
+import type { HeaderIconProps } from './types';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+/**
+ * Configuration for header icon
+ */
+export interface HeaderIconConfig {
+  /**
+   * Icon name (full name or alias)
+   */
+  icon: string;
+
+  /**
+   * Icon size
+   * @default 24
+   */
+  size?: number;
+
+  /**
+   * Icon color (uses tintColor from navigation if not provided)
+   */
+  color?: string;
+
+  /**
+   * Callback when icon is pressed
+   */
+  onPress?: () => void;
+
+  /**
+   * Container style
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * Accessibility label
+   */
+  accessibilityLabel?: string;
+
+  /**
+   * Hit slop for touch area
+   */
+  hitSlop?: { top?: number; bottom?: number; left?: number; right?: number };
+}
+
+/**
+ * Create a header icon component for React Navigation
+ *
+ * @example headerRight with back action
+ * ```tsx
+ * import { createHeaderIcon } from 'rn-iconify/navigation';
+ *
+ * <Stack.Screen
+ *   name="Details"
+ *   options={({ navigation }) => ({
+ *     headerRight: createHeaderIcon({
+ *       icon: 'mdi:close',
+ *       onPress: () => navigation.goBack(),
+ *     }),
+ *   })}
+ * />
+ * ```
+ *
+ * @example headerLeft with menu
+ * ```tsx
+ * <Stack.Screen
+ *   options={({ navigation }) => ({
+ *     headerLeft: createHeaderIcon({
+ *       icon: 'mdi:menu',
+ *       onPress: () => navigation.openDrawer(),
+ *       accessibilityLabel: 'Open menu',
+ *     }),
+ *   })}
+ * />
+ * ```
+ *
+ * @example Custom styling
+ * ```tsx
+ * <Stack.Screen
+ *   options={{
+ *     headerRight: createHeaderIcon({
+ *       icon: 'mdi:dots-vertical',
+ *       size: 28,
+ *       color: '#007AFF',
+ *       style: { marginRight: 8 },
+ *     }),
+ *   }}
+ * />
+ * ```
+ */
+export function createHeaderIcon(config: HeaderIconConfig) {
+  const {
+    icon,
+    size = 24,
+    color,
+    onPress,
+    style,
+    accessibilityLabel,
+    hitSlop = { top: 10, bottom: 10, left: 10, right: 10 },
+  } = config;
+
+  return function HeaderIcon(props: HeaderIconProps) {
+    const iconColor = color ?? props.tintColor ?? '#000000';
+
+    const iconElement = (
+      <Icon name={icon} size={size} color={iconColor} accessibilityLabel={accessibilityLabel} />
+    );
+
+    if (onPress) {
+      return (
+        <TouchableOpacity
+          onPress={onPress}
+          style={[styles.container, style, { padding: 8 }]}
+          hitSlop={hitSlop}
+          accessibilityRole="button"
+          accessibilityLabel={accessibilityLabel}
+          activeOpacity={props.pressOpacity ?? 0.7}
+        >
+          {iconElement}
+        </TouchableOpacity>
+      );
+    }
+
+    return iconElement;
+  };
+}
+
+/**
+ * Create a back button icon for navigation headers
+ *
+ * @example
+ * ```tsx
+ * import { createBackIcon } from 'rn-iconify/navigation';
+ *
+ * <Stack.Screen
+ *   options={({ navigation }) => ({
+ *     headerLeft: createBackIcon({
+ *       onPress: () => navigation.goBack(),
+ *     }),
+ *   })}
+ * />
+ * ```
+ */
+export function createBackIcon(options: Omit<HeaderIconConfig, 'icon'> = {}) {
+  return createHeaderIcon({
+    icon: 'mdi:arrow-left',
+    accessibilityLabel: 'Go back',
+    ...options,
+  });
+}
+
+/**
+ * Create a close button icon for modal screens
+ *
+ * @example
+ * ```tsx
+ * import { createCloseIcon } from 'rn-iconify/navigation';
+ *
+ * <Stack.Screen
+ *   options={({ navigation }) => ({
+ *     headerRight: createCloseIcon({
+ *       onPress: () => navigation.goBack(),
+ *     }),
+ *   })}
+ * />
+ * ```
+ */
+export function createCloseIcon(options: Omit<HeaderIconConfig, 'icon'> = {}) {
+  return createHeaderIcon({
+    icon: 'mdi:close',
+    accessibilityLabel: 'Close',
+    ...options,
+  });
+}
+
+/**
+ * Create a menu button icon for opening drawers
+ *
+ * @example
+ * ```tsx
+ * import { createMenuIcon } from 'rn-iconify/navigation';
+ *
+ * <Stack.Screen
+ *   options={({ navigation }) => ({
+ *     headerLeft: createMenuIcon({
+ *       onPress: () => navigation.openDrawer(),
+ *     }),
+ *   })}
+ * />
+ * ```
+ */
+export function createMenuIcon(options: Omit<HeaderIconConfig, 'icon'> = {}) {
+  return createHeaderIcon({
+    icon: 'mdi:menu',
+    accessibilityLabel: 'Open menu',
+    ...options,
+  });
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 8,
+  },
+});
+
+export default createHeaderIcon;

package/src/navigation/createTabBarIcon.tsx

@@ -0,0 +1,180 @@
+/**
+ * createTabBarIcon - Helper for React Navigation tab bar icons
+ * Creates a tabBarIcon function that handles focused/unfocused states
+ */
+
+import React from 'react';
+import { Icon } from '../alias';
+import type {
+  TabBarIconProps,
+  TabBarIconConfig,
+  SimpleTabBarIconConfig,
+  TabBarIconFunction,
+} from './types';
+
+/**
+ * Normalize config to full TabBarIconConfig
+ */
+function normalizeConfig(config: SimpleTabBarIconConfig | TabBarIconConfig): TabBarIconConfig {
+  // String: same icon for both states
+  if (typeof config === 'string') {
+    return { focused: config };
+  }
+
+  // Array: [focused, unfocused]
+  if (Array.isArray(config)) {
+    return { focused: config[0], unfocused: config[1] };
+  }
+
+  // Full config object
+  return config;
+}
+
+/**
+ * Create a tab bar icon function for React Navigation
+ *
+ * @example Simple usage (same icon for both states)
+ * ```tsx
+ * import { createTabBarIcon } from 'rn-iconify/navigation';
+ *
+ * <Tab.Screen
+ *   name="Home"
+ *   component={HomeScreen}
+ *   options={{
+ *     tabBarIcon: createTabBarIcon('mdi:home'),
+ *   }}
+ * />
+ * ```
+ *
+ * @example Different icons for focused/unfocused
+ * ```tsx
+ * <Tab.Screen
+ *   options={{
+ *     tabBarIcon: createTabBarIcon(['mdi:home', 'mdi:home-outline']),
+ *   }}
+ * />
+ * ```
+ *
+ * @example With full configuration
+ * ```tsx
+ * <Tab.Screen
+ *   options={{
+ *     tabBarIcon: createTabBarIcon({
+ *       focused: 'mdi:home',
+ *       unfocused: 'mdi:home-outline',
+ *       size: 28,
+ *       focusedColor: '#007AFF',
+ *     }),
+ *   }}
+ * />
+ * ```
+ *
+ * @example With aliases (requires IconAliasProvider)
+ * ```tsx
+ * <Tab.Screen
+ *   options={{
+ *     tabBarIcon: createTabBarIcon(['home', 'home-outline']),
+ *   }}
+ * />
+ * ```
+ */
+export function createTabBarIcon(
+  config: SimpleTabBarIconConfig | TabBarIconConfig
+): TabBarIconFunction {
+  const normalizedConfig = normalizeConfig(config);
+
+  return function TabBarIcon({ focused, color, size }: TabBarIconProps) {
+    const {
+      focused: focusedIcon,
+      unfocused: unfocusedIcon,
+      size: customSize,
+      focusedColor,
+      unfocusedColor,
+      style,
+      accessibilityLabel,
+    } = normalizedConfig;
+
+    // Determine which icon to show
+    const iconName = focused ? focusedIcon : (unfocusedIcon ?? focusedIcon);
+
+    // Determine color
+    const iconColor = focused ? (focusedColor ?? color) : (unfocusedColor ?? color);
+
+    // Determine size
+    const iconSize = customSize ?? size;
+
+    return (
+      <Icon
+        name={iconName}
+        size={iconSize}
+        color={iconColor}
+        style={style}
+        accessibilityLabel={accessibilityLabel}
+      />
+    );
+  };
+}
+
+/**
+ * Create multiple tab bar icons at once
+ *
+ * @example
+ * ```tsx
+ * import { createTabBarIcons } from 'rn-iconify/navigation';
+ *
+ * const tabIcons = createTabBarIcons({
+ *   Home: ['mdi:home', 'mdi:home-outline'],
+ *   Search: 'mdi:magnify',
+ *   Profile: ['mdi:account', 'mdi:account-outline'],
+ *   Settings: {
+ *     focused: 'mdi:cog',
+ *     unfocused: 'mdi:cog-outline',
+ *     size: 26,
+ *   },
+ * });
+ *
+ * <Tab.Screen
+ *   name="Home"
+ *   options={{ tabBarIcon: tabIcons.Home }}
+ * />
+ * ```
+ */
+export function createTabBarIcons<
+  T extends Record<string, SimpleTabBarIconConfig | TabBarIconConfig>,
+>(configs: T): { [K in keyof T]: TabBarIconFunction } {
+  const result = {} as { [K in keyof T]: TabBarIconFunction };
+
+  for (const [key, config] of Object.entries(configs)) {
+    result[key as keyof T] = createTabBarIcon(config);
+  }
+
+  return result;
+}
+
+/**
+ * Quick helper for common tab patterns
+ * Uses filled/outline icon variants automatically
+ *
+ * @example
+ * ```tsx
+ * import { tabIcon } from 'rn-iconify/navigation';
+ *
+ * <Tab.Screen
+ *   options={{
+ *     tabBarIcon: tabIcon('mdi', 'home'),  // mdi:home / mdi:home-outline
+ *   }}
+ * />
+ * ```
+ */
+export function tabIcon(
+  prefix: string,
+  name: string,
+  outlineSuffix = '-outline'
+): TabBarIconFunction {
+  return createTabBarIcon({
+    focused: `${prefix}:${name}`,
+    unfocused: `${prefix}:${name}${outlineSuffix}`,
+  });
+}
+
+export default createTabBarIcon;

package/src/navigation/index.ts

@@ -0,0 +1,80 @@
+/**
+ * React Navigation Integration
+ * Helpers for using rn-iconify with React Navigation
+ *
+ * @example Tab Navigator
+ * ```tsx
+ * import { createTabBarIcon } from 'rn-iconify/navigation';
+ *
+ * <Tab.Navigator>
+ *   <Tab.Screen
+ *     name="Home"
+ *     options={{
+ *       tabBarIcon: createTabBarIcon(['mdi:home', 'mdi:home-outline']),
+ *     }}
+ *   />
+ * </Tab.Navigator>
+ * ```
+ *
+ * @example Drawer Navigator
+ * ```tsx
+ * import { createDrawerIcon } from 'rn-iconify/navigation';
+ *
+ * <Drawer.Screen
+ *   options={{
+ *     drawerIcon: createDrawerIcon('mdi:home'),
+ *   }}
+ * />
+ * ```
+ *
+ * @example Header Icons
+ * ```tsx
+ * import { createHeaderIcon, createBackIcon } from 'rn-iconify/navigation';
+ *
+ * <Stack.Screen
+ *   options={({ navigation }) => ({
+ *     headerLeft: createBackIcon({ onPress: () => navigation.goBack() }),
+ *     headerRight: createHeaderIcon({ icon: 'mdi:dots-vertical' }),
+ *   })}
+ * />
+ * ```
+ */
+
+// Types
+export type {
+  TabBarIconProps,
+  DrawerIconProps,
+  HeaderIconProps,
+  TabBarIconConfig,
+  SimpleTabBarIconConfig,
+  DrawerIconConfig,
+  TabBarIconFunction,
+  DrawerIconFunction,
+  HeaderIconFunction,
+  NavigationIconPreset,
+  IconSpec,
+} from './types';
+
+export { DEFAULT_NAVIGATION_PRESETS } from './types';
+
+// Tab Bar Icons
+export { createTabBarIcon, createTabBarIcons, tabIcon } from './createTabBarIcon';
+
+// Drawer Icons
+export { createDrawerIcon, createDrawerIcons } from './createDrawerIcon';
+
+// Header Icons
+export {
+  createHeaderIcon,
+  createBackIcon,
+  createCloseIcon,
+  createMenuIcon,
+} from './createHeaderIcon';
+export type { HeaderIconConfig } from './createHeaderIcon';
+
+// Hook
+export { useNavigationIcon } from './useNavigationIcon';
+export type { UseNavigationIconOptions, UseNavigationIconReturn } from './useNavigationIcon';
+
+// Default export
+export { createTabBarIcon as default } from './createTabBarIcon';