@react-native-vector-icons/common 12.0.0 → 12.1.0

package/src/dynamicLoading/dynamic-loading-setting.ts

@@ -1,19 +1,35 @@
 import type { FontSource } from './types';
 
+type ExpoAssetModule = {
+  // definition from
+  // https://github.com/expo/expo/blob/1f5a5991d14aad09282d1ce1612b44d30e7e7d3d/packages/expo-asset/ios/AssetModule.swift#L23
+  downloadAsync: (uri: string, hash: string | undefined, type: string) => Promise<string>;
+};
+
+type ExpoFontLoaderModule = {
+  // definition from
+  // https://github.com/expo/expo/blob/1f5a5991d14aad09282d1ce1612b44d30e7e7d3d/packages/expo-font/ios/FontLoaderModule.swift#L18
+  getLoadedFonts: () => string[];
+  loadAsync: (fontFamilyAlias: string, fileUri: string) => Promise<void>;
+};
+
+type ExpoFontUtilsModule = {
+  renderToImageAsync: (
+    glyph: string,
+    options: {
+      fontFamily?: string;
+      size?: number;
+      color?: number;
+    },
+  ) => Promise<string>;
+};
+
 declare global {
   interface ExpoGlobal {
     modules: {
-      ExpoAsset: {
-        // definition from
-        // https://github.com/expo/expo/blob/1f5a5991d14aad09282d1ce1612b44d30e7e7d3d/packages/expo-asset/ios/AssetModule.swift#L23
-        downloadAsync: (uri: string, hash: string | undefined, type: string) => Promise<string>;
-      };
-      ExpoFontLoader: {
-        // definition from
-        // https://github.com/expo/expo/blob/1f5a5991d14aad09282d1ce1612b44d30e7e7d3d/packages/expo-font/ios/FontLoaderModule.swift#L18
-        getLoadedFonts: () => string[];
-        loadAsync: (fontFamilyAlias: string, fileUri: string) => Promise<void>;
-      };
+      ExpoAsset?: ExpoAssetModule;
+      ExpoFontLoader?: ExpoFontLoaderModule;
+      ExpoFontUtils?: ExpoFontUtilsModule;
     };
   }
 
@@ -21,10 +37,45 @@ declare global {
   var expo: ExpoGlobal | undefined;
 }
 
+type ExpoGlobalType = {
+  modules: {
+    ExpoAsset: ExpoAssetModule;
+    ExpoFontLoader: ExpoFontLoaderModule;
+  };
+};
+
+// biome-ignore lint/suspicious/noExplicitAny: this is used internally with globalThis
+function getIsDynamicLoadingSupported(globalObj: any): globalObj is {
+  expo: ExpoGlobalType;
+} {
+  return (
+    globalObj?.expo &&
+    typeof globalObj.expo.modules?.ExpoAsset?.downloadAsync === 'function' &&
+    typeof globalObj.expo.modules?.ExpoFontLoader?.getLoadedFonts === 'function' &&
+    typeof globalObj.expo.modules?.ExpoFontLoader?.loadAsync === 'function'
+  );
+}
+
+// biome-ignore lint/suspicious/noExplicitAny: this is used internally with globalThis
+export function getIsRenderToImageSupported(globalObj: any): globalObj is {
+  expo: {
+    modules: {
+      ExpoFontUtils: ExpoFontUtilsModule;
+    };
+  };
+} {
+  return globalObj?.expo && typeof globalObj.expo.modules?.ExpoFontUtils?.renderToImageAsync === 'function';
+}
+
+export function assertExpoModulesPresent(globalObj: unknown): asserts globalObj is { expo: ExpoGlobalType } {
+  if (!getIsDynamicLoadingSupported(globalObj)) {
+    throw new Error('Dynamic font loading for Expo is not available.');
+  }
+}
+
 const hasNecessaryExpoModules = !!globalThis.expo?.modules?.ExpoAsset && !!globalThis.expo?.modules?.ExpoFontLoader;
 
-const hasNecessaryExpoFeatures =
-  hasNecessaryExpoModules && typeof globalThis.expo?.modules.ExpoFontLoader.getLoadedFonts === 'function';
+const hasNecessaryExpoFeatures = getIsDynamicLoadingSupported(globalThis);
 
 let dynamicFontLoadingEnabled = hasNecessaryExpoFeatures;
 
@@ -59,11 +110,7 @@ export const setDynamicLoadingEnabled = (value: boolean): boolean => {
  * */
 export const isDynamicLoadingEnabled = () => dynamicFontLoadingEnabled;
 
-type ErrorCallback = (args: {
-  error: Error;
-  fontFamily: string;
-  fontSource: FontSource;
-}) => void;
+type ErrorCallback = (args: { error: Error; fontFamily: string; fontSource: FontSource }) => void;
 
 let dynamicLoadingErrorCallback: undefined | ErrorCallback;
 

package/src/get-image-library.ts

@@ -1,3 +1,5 @@
+import { getIsRenderToImageSupported } from './dynamicLoading/dynamic-loading-setting';
+
 // eslint-disable-next-line import/no-mutable-exports
 let NativeIconAPI: typeof import('@react-native-vector-icons/get-image') | null = null;
 
@@ -5,17 +7,36 @@ try {
   // eslint-disable-next-line global-require,import/no-extraneous-dependencies,@typescript-eslint/no-require-imports
   NativeIconAPI = require('@react-native-vector-icons/get-image');
 } catch {
-  // No warning at this stage
+  // if this fails, it's likely due to:
+  // "Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'VectorIcons' could not be found. ..."
+  // No warning at this stage.
 }
 
+const globalRef = globalThis;
+const hasExpoRenderToImage = getIsRenderToImageSupported(globalRef);
+
 export const ensureGetImageAvailable = () => {
-  if (!NativeIconAPI) {
-    throw new Error(
-      'Could not import @react-native-vector-icons/get-image, did you install it? It is required for getImageSource*',
-    );
+  if (NativeIconAPI) {
+    NativeIconAPI.ensureNativeModuleAvailable();
+    return NativeIconAPI;
   }
-
-  NativeIconAPI.ensureNativeModuleAvailable();
-
-  return NativeIconAPI;
+  if (hasExpoRenderToImage) {
+    const { ExpoFontUtils } = globalRef.expo.modules;
+    return {
+      getImageForFont: async (fontReference: string, glyph: string, size: number, color: number) =>
+        ExpoFontUtils.renderToImageAsync(glyph, {
+          fontFamily: fontReference,
+          size,
+          color,
+        }),
+      getImageForFontSync: () => {
+        throw new Error(
+          'You attempted to call `getImageForFontSync`. Expo dev client with `@react-native-vector-icons/get-image` installed is required for this. Alternatively, call `getImageForFont` or generate the image yourself and bundle it with the app.',
+        );
+      },
+    };
+  }
+  throw new Error(
+    'Error in getImageSource / getImageSourceSync: You need to either (1) install `@react-native-vector-icons/get-image` or (2) use Expo SDK 53+ (Expo dev client or Expo Go). Check your setup and rebuild the app.',
+  );
 };

package/src/get-image-source.ts

@@ -0,0 +1,74 @@
+import type { TextStyle } from 'react-native';
+import { PixelRatio, processColor } from 'react-native';
+
+import type createIconSourceCache from './create-icon-source-cache';
+import { DEFAULT_ICON_COLOR, DEFAULT_ICON_SIZE } from './defaults';
+import { ensureGetImageAvailable } from './get-image-library';
+
+export const getImageSourceSync = (
+  imageSourceCache: ReturnType<typeof createIconSourceCache>,
+  fontReference: string,
+  glyph: string,
+  size = DEFAULT_ICON_SIZE,
+  color: TextStyle['color'] = DEFAULT_ICON_COLOR,
+) => {
+  const NativeIconAPI = ensureGetImageAvailable();
+
+  const processedColor = processColor(color);
+  const cacheKey = `${glyph}:${size}:${String(processedColor)}`;
+
+  const maybeCachedValue = imageSourceCache.get(cacheKey);
+  if (maybeCachedValue !== undefined) {
+    // FIXME: Should this check if it's an error and throw it again?
+    return maybeCachedValue;
+  }
+
+  try {
+    const imagePath = NativeIconAPI.getImageForFontSync(
+      fontReference,
+      glyph,
+      size,
+      processedColor as number, // FIXME what if a non existent colour was passed in?
+    );
+    const value = { uri: imagePath, scale: PixelRatio.get() };
+    imageSourceCache.setValue(cacheKey, value);
+    return value;
+  } catch (error) {
+    imageSourceCache.setError(cacheKey, error as Error);
+    throw error;
+  }
+};
+
+export const getImageSource = async (
+  imageSourceCache: ReturnType<typeof createIconSourceCache>,
+  fontReference: string,
+  glyph: string,
+  size = DEFAULT_ICON_SIZE,
+  color: TextStyle['color'] = DEFAULT_ICON_COLOR,
+) => {
+  const NativeIconAPI = ensureGetImageAvailable();
+
+  const processedColor = processColor(color);
+  const cacheKey = `${glyph}:${size}:${String(processedColor)}`;
+
+  const maybeCachedValue = imageSourceCache.get(cacheKey);
+  if (maybeCachedValue !== undefined) {
+    // FIXME: Should this check if it's an error and throw it again?
+    return maybeCachedValue;
+  }
+
+  try {
+    const imagePath = await NativeIconAPI.getImageForFont(
+      fontReference,
+      glyph,
+      size,
+      processedColor as number, // FIXME what if a non existent colour was passed in?
+    );
+    const value = { uri: imagePath, scale: PixelRatio.get() };
+    imageSourceCache.setValue(cacheKey, value);
+    return value;
+  } catch (error) {
+    imageSourceCache.setError(cacheKey, error as Error);
+    throw error;
+  }
+};

package/src/index.ts

@@ -1,8 +1,9 @@
-export { createIconSet, DEFAULT_ICON_SIZE, DEFAULT_ICON_COLOR } from './create-icon-set';
-export type { IconProps, CreateIconSetOptions } from './create-icon-set';
+export type { CreateIconSetOptions, IconProps } from './create-icon-set';
+export { createIconSet } from './create-icon-set';
+export { DEFAULT_ICON_COLOR, DEFAULT_ICON_SIZE } from './defaults';
 export {
-  setDynamicLoadingEnabled,
   isDynamicLoadingEnabled,
   isDynamicLoadingSupported,
+  setDynamicLoadingEnabled,
   setDynamicLoadingErrorCallback,
 } from './dynamicLoading/dynamic-loading-setting';

package/src/scripts/common.ts

@@ -1,5 +1,6 @@
 import fs from 'node:fs';
 import path from 'node:path';
+
 import { resolveNodeModuleDir } from '@react-native-community/cli-tools';
 
 const getPackageJson = (filename: string) => {

package/src/scripts/updatePlist.ts

@@ -3,6 +3,7 @@
 
 import fs from 'node:fs';
 import * as path from 'node:path';
+
 import pc from 'picocolors';
 import * as plist from 'plist';