Image Generation

/**
 * Generate a PNG image from a font glyph asynchronously
 * @param fontFamilyName - Platform-specific font family name
 * @param glyph - Unicode character or string representation of the glyph
 * @param fontSize - Size of the rendered icon in points
 * @param color - Color as a numeric value (e.g., 0xFF0000 for red)
 * @returns Promise resolving to base64 data URI of the PNG image
 */
function getImageForFont(
  fontFamilyName: string,
  glyph: string,
  fontSize: number,
  color: number
): Promise<string>;

/**
 * Generate a PNG image from a font glyph synchronously
 * @param fontFamilyName - Platform-specific font family name
 * @param glyph - Unicode character or string representation of the glyph
 * @param fontSize - Size of the rendered icon in points
 * @param color - Color as a numeric value (e.g., 0xFF0000 for red)
 * @returns Base64 data URI of the PNG image
 */
function getImageForFontSync(
  fontFamilyName: string,
  glyph: string,
  fontSize: number,
  color: number
): string;

/**
 * Ensures the native module is properly linked and available
 * @throws Error if native module is not properly configured
 */
function ensureNativeModuleAvailable(): void;

interface IconComponent<T> {
  /**
   * Generate image source asynchronously for the given icon
   * @param name - Icon name from the component's glyph map
   * @param size - Icon size in points (default: DEFAULT_ICON_SIZE)
   * @param color - Icon color as string (default: DEFAULT_ICON_COLOR)
   * @returns Promise resolving to image source object
   */
  getImageSource(name: T, size?: number, color?: string): Promise<ImageSource | undefined>;
  
  /**
   * Generate image source synchronously for the given icon
   * @param name - Icon name from the component's glyph map
   * @param size - Icon size in points (default: DEFAULT_ICON_SIZE)
   * @param color - Icon color as string (default: DEFAULT_ICON_COLOR)
   * @returns Image source object or undefined if generation fails
   */
  getImageSourceSync(name: T, size?: number, color?: string): ImageSource | undefined;
}

interface ImageSource {
  /** Data URI of the generated PNG image */
  uri: string;
  /** Scale factor for the image (typically 1) */
  scale: number;
}

import { getImageForFont, getImageForFontSync } from '@react-native-vector-icons/get-image';
import FontAwesome6 from '@react-native-vector-icons/fontawesome6';

// Direct native module usage
const asyncImage = await getImageForFont(
  'FontAwesome6Free-Solid',
  '\uf015', // Unicode for 'home' icon
  24,
  0x4A90E2 // Blue color
);
// asyncImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...'

const syncImage = getImageForFontSync(
  'FontAwesome6Free-Regular',
  '\uf005', // Unicode for 'star' icon
  20,
  0xFFD700 // Gold color
);

// Using icon component methods (recommended)
const homeImage = await FontAwesome6.getImageSource('home', 24, '#4A90E2');
// homeImage = { uri: 'data:image/png;base64,...', scale: 1 }

const starImage = FontAwesome6.getImageSourceSync('star', 20, 'gold');
// starImage = { uri: 'data:image/png;base64,...', scale: 1 } or undefined

interface MultiStyleImageMethods {
  getImageSource(
    iconStyle: 'regular' | 'solid' | 'brand',
    name: string,
    size?: number,
    color?: string
  ): Promise<ImageSource | undefined>;
  
  getImageSourceSync(
    iconStyle: 'regular' | 'solid' | 'brand',
    name: string,
    size?: number,
    color?: string
  ): ImageSource | undefined;
}

import FontAwesome6 from '@react-native-vector-icons/fontawesome6';

// Generate different styles of the same icon
const regularStar = await FontAwesome6.getImageSource('regular', 'star', 24, '#FFD700');
const solidStar = await FontAwesome6.getImageSource('solid', 'star', 24, '#FFD700');
const brandGithub = await FontAwesome6.getImageSource('brand', 'github', 20, '#333');

npm install @react-native-vector-icons/get-image

import { ensureNativeModuleAvailable } from '@react-native-vector-icons/get-image';

try {
  ensureNativeModuleAvailable();
  console.log('Native module is properly linked');
} catch (error) {
  console.error('Native module setup issue:', error.message);
  // Handle graceful fallback
}

// String colors (icon component methods)
const image1 = await FontAwesome6.getImageSource('home', 24, '#4A90E2');
const image2 = await FontAwesome6.getImageSource('star', 20, 'red');
const image3 = await FontAwesome6.getImageSource('heart', 18, 'rgba(255, 0, 0, 0.8)');

// Numeric colors (native module direct usage)
const directImage = await getImageForFont(
  'FontAwesome6Free-Solid',
  '\uf015',
  24,
  0x4A90E2 // Hexadecimal color value
);

// Color conversion utility (internal)
const colorToNumber = (color: string): number => {
  // Converts CSS color strings to numeric values
  // Handles: hex (#RGB, #RRGGBB), named colors, rgba(), etc.
};

// First call generates the image
const image1 = await FontAwesome6.getImageSource('home', 24, '#4A90E2');

// Subsequent calls return cached result
const image2 = await FontAwesome6.getImageSource('home', 24, '#4A90E2');
// Returned immediately from cache

// Synchronous: Fast but may block UI thread
const syncImage = FontAwesome6.getImageSourceSync('star', 20, 'gold');

// Asynchronous: Recommended for UI responsiveness
const asyncImage = await FontAwesome6.getImageSource('star', 20, 'gold');

// Use sync only when:
// - Image is likely cached
// - Called outside render cycle
// - Performance testing confirms no blocking

// Native module not linked
try {
  const image = await getImageForFont('FontName', '\uf000', 24, 0x000000);
} catch (error) {
  if (error.message.includes("doesn't seem to be linked")) {
    console.log('Run pod install and rebuild the app');
  }
}

// Font not found
const image = await FontAwesome6.getImageSource('nonexistent-icon', 24, '#000');
// Returns undefined for invalid icon names

// Invalid color format (direct native usage)
try {
  const image = await getImageForFont('FontName', '\uf000', 24, 'invalid-color');
} catch (error) {
  console.error('Color must be numeric for direct native calls');
}

const getIconImage = async (name: string, size: number, color: string) => {
  try {
    // Try to generate image
    const image = await FontAwesome6.getImageSource(name, size, color);
    return image || getDefaultImage(); // Fallback for invalid icons
  } catch (error) {
    console.warn('Image generation failed:', error);
    return getDefaultImage(); // Fallback for native module issues
  }
};

const getDefaultImage = () => ({
  uri: 'data:image/png;base64,iVBORw0...', // Placeholder image
  scale: 1
});

import { Image } from 'react-native';
import FontAwesome6 from '@react-native-vector-icons/fontawesome6';

const IconImage = ({ name, size = 24, color = '#000' }) => {
  const [imageSource, setImageSource] = useState(null);
  
  useEffect(() => {
    FontAwesome6.getImageSource(name, size, color)
      .then(setImageSource)
      .catch(console.error);
  }, [name, size, color]);
  
  return imageSource ? (
    <Image source={imageSource} style={{ width: size, height: size }} />
  ) : null;
};

// Generate image for use in web context
const exportIconAsImage = async (iconName: string) => {
  const image = await FontAwesome6.getImageSource(iconName, 48, '#333');
  
  if (image) {
    // Use in img tag, canvas, or download
    return image.uri; // data:image/png;base64,...
  }
  
  return null;
};