@react-native-vector-icons/common 0.0.1-alpha.8 → 11.0.0-alpha.0

package/src/create-icon-set.tsx

@@ -1,14 +1,25 @@
-import React, { forwardRef, type Ref } from 'react';
+import React, { forwardRef, type Ref, useEffect } from 'react';
 
 import { PixelRatio, Platform, Text, type TextProps, type TextStyle, processColor } from 'react-native';
 
 import NativeIconAPI from './NativeVectorIcons';
 import createIconSourceCache from './create-icon-source-cache';
+import { dynamicLoader } from './dynamicLoading/dynamic-font-loading';
+import { isDynamicLoadingEnabled } from './dynamicLoading/dynamic-loading-setting';
+import type { FontSource } from './dynamicLoading/types';
 import ensureNativeModuleAvailable from './ensure-native-module-available';
 
 export const DEFAULT_ICON_SIZE = 12;
 export const DEFAULT_ICON_COLOR = 'black';
 
+type ValueData = { uri: string; scale: number };
+type GetImageSourceSyncIconFunc<GM> = (name: GM, size?: number, color?: TextStyle['color']) => ValueData | undefined;
+type GetImageSourceIconFunc<GM> = (
+  name: GM,
+  size?: number,
+  color?: TextStyle['color'],
+) => Promise<ValueData | undefined>;
+
 export type IconProps<T> = TextProps & {
   name: T;
   size?: number;
@@ -16,20 +27,53 @@ export type IconProps<T> = TextProps & {
   innerRef?: Ref<Text>;
 };
 
-export const createIconSet = <GM extends Record<string, number>>(
+type IconComponent<GM extends Record<string, number>> = React.FC<
+  TextProps & {
+    name: keyof GM;
+    size?: number;
+    color?: TextStyle['color'];
+    innerRef?: Ref<Text>;
+  } & React.RefAttributes<Text>
+> & {
+  getImageSource: GetImageSourceIconFunc<keyof GM>;
+  getImageSourceSync: GetImageSourceSyncIconFunc<keyof GM>;
+};
+
+export type CreateIconSetOptions = {
+  postScriptName: string;
+  fontFileName: string;
+  fontSource?: FontSource;
+  fontStyle?: TextProps['style'];
+};
+
+export function createIconSet<GM extends Record<string, number>>(
   glyphMap: GM,
-  fontFamily: string,
-  fontFile: string,
+  postScriptName: string,
+  fontFileName: string,
   fontStyle?: TextProps['style'],
-) => {
-  // Android doesn't care about actual fontFamily name, it will only look in fonts folder.
-  const fontBasename = fontFile ? fontFile.replace(/\.(otf|ttf)$/, '') : fontFamily;
+): IconComponent<GM>;
+export function createIconSet<GM extends Record<string, number>>(
+  glyphMap: GM,
+  options: CreateIconSetOptions,
+): IconComponent<GM>;
+export function createIconSet<GM extends Record<string, number>>(
+  glyphMap: GM,
+  postScriptNameOrOptions: string | CreateIconSetOptions,
+  fontFileNameParam?: string,
+  fontStyleParam?: TextProps['style'],
+): IconComponent<GM> {
+  const { postScriptName, fontFileName, fontStyle } =
+    typeof postScriptNameOrOptions === 'string'
+      ? { postScriptName: postScriptNameOrOptions, fontFileName: fontFileNameParam, fontStyle: fontStyleParam }
+      : postScriptNameOrOptions;
+
+  const fontBasename = fontFileName ? fontFileName.replace(/\.(otf|ttf)$/, '') : postScriptName;
 
   const fontReference = Platform.select({
-    windows: `/Assets/${fontFile}#${fontFamily}`,
+    windows: `/Assets/${fontFileName}#${postScriptName}`,
     android: fontBasename,
     web: fontBasename,
-    default: fontFamily,
+    default: postScriptName,
   });
 
   const resolveGlyph = (name: keyof GM) => {
@@ -45,14 +89,37 @@ export const createIconSet = <GM extends Record<string, number>>(
   const Icon = ({
     name,
     size = DEFAULT_ICON_SIZE,
-    color,
+    color = DEFAULT_ICON_COLOR,
     style,
     children,
     allowFontScaling = false,
     innerRef,
     ...props
   }: IconProps<keyof GM>) => {
-    const glyph = name ? resolveGlyph(name as string) : '';
+    const [isFontLoaded, setIsFontLoaded] = React.useState(
+      isDynamicLoadingEnabled() ? dynamicLoader.isLoaded(fontReference) : true,
+    );
+    const glyph = isFontLoaded && name ? resolveGlyph(name) : '';
+
+    // biome-ignore lint/correctness/useExhaustiveDependencies: the dependencies never change
+    useEffect(() => {
+      let isMounted = true;
+
+      if (
+        !isFontLoaded &&
+        typeof postScriptNameOrOptions === 'object' &&
+        typeof postScriptNameOrOptions.fontSource !== 'undefined'
+      ) {
+        dynamicLoader.loadFontAsync(fontReference, postScriptNameOrOptions.fontSource).finally(() => {
+          if (isMounted) {
+            setIsFontLoaded(true);
+          }
+        });
+      }
+      return () => {
+        isMounted = false;
+      };
+    }, []);
 
     const styleDefaults = {
       fontSize: size,
@@ -150,30 +217,10 @@ export const createIconSet = <GM extends Record<string, number>>(
     }
   };
 
-  const loadFont = async () => {
-    if (Platform.OS !== 'ios') {
-      return;
-    }
-    ensureNativeModuleAvailable();
-
-    const [filename, extension] = fontFile.split('.'); // FIXME: what if filename has two dots?
-    if (!filename) {
-      // NOTE: Thie is impossible but TypeScript doesn't know that
-      throw new Error('Font needs a filename.');
-    }
-    if (!extension) {
-      throw new Error('Font needs a filename extensison.');
-    }
-
-    await NativeIconAPI.loadFontWithFileName(filename, extension, 'react-native-vector-icons');
-  };
-
-  loadFont();
-
   const IconNamespace = Object.assign(WrappedIcon, {
     getImageSource,
     getImageSourceSync,
   });
 
   return IconNamespace;
-};
+}

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

@@ -0,0 +1,97 @@
+/*
+ * The following imports are always present when react native is installed
+ * in the future, more explicit apis will be exposed by the core, including typings
+ * */
+// @ts-expect-error missing types
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { getAssetByID } from '@react-native/assets-registry/registry';
+import type { Image } from 'react-native';
+// @ts-expect-error missing types
+import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
+import { getErrorCallback } from './dynamic-loading-setting';
+import type { DynamicLoader, FontSource } from './types';
+
+const loadPromises: { [fontSource: string]: Promise<void> } = {};
+
+const loadFontAsync = async (fontFamily: string, fontSource: FontSource): Promise<void> => {
+  const expoModules = globalThis?.expo?.modules;
+  if (!expoModules) {
+    throw new Error('Expo is not available. Dynamic font loading is not available.');
+  }
+
+  if (loadPromises[fontFamily]) {
+    return loadPromises[fontFamily];
+  }
+
+  loadPromises[fontFamily] = (async function LoadFont() {
+    try {
+      const localUri = await (() => {
+        if (typeof fontSource === 'string') {
+          // a local filesystem uri
+          return fontSource;
+        }
+        // a module id
+        const { uri, type, hash } = getLocalFontUrl(fontSource, fontFamily);
+        return expoModules.ExpoAsset.downloadAsync(uri, hash, type);
+      })();
+
+      await expoModules.ExpoFontLoader.loadAsync(fontFamily, localUri);
+    } catch (error) {
+      console.error(`Failed to load font ${fontFamily}`, error); // eslint-disable-line no-console
+
+      getErrorCallback()?.({
+        error: error as Error,
+        fontFamily,
+        fontSource,
+      });
+    } finally {
+      delete loadPromises[fontFamily];
+    }
+  })();
+
+  return loadPromises[fontFamily];
+};
+
+type AssetRegistryEntry = {
+  name: string;
+  httpServerLocation: string;
+  hash: string;
+  type: string; // file extension
+};
+
+const getLocalFontUrl = (fontModuleId: number, fontFamily: string) => {
+  const assetMeta: AssetRegistryEntry = getAssetByID(fontModuleId);
+  if (!assetMeta) {
+    throw new Error(`no asset found for font family "${fontFamily}", moduleId: ${String(fontModuleId)}`);
+  }
+
+  const resolver: typeof Image.resolveAssetSource = resolveAssetSource;
+  const assetSource = resolver(fontModuleId);
+
+  return { ...assetMeta, ...assetSource };
+};
+
+const loadedFontsCache: { [name: string]: boolean } = {};
+
+const isLoadedNative = (fontFamily: string) => {
+  if (fontFamily in loadedFontsCache) {
+    return true;
+  }
+
+  const { expo } = globalThis;
+  if (!expo) {
+    throw new Error('Expo is not available. Dynamic font loading is not available.');
+  }
+
+  const loadedNativeFonts = expo.modules.ExpoFontLoader.getLoadedFonts();
+  loadedNativeFonts.forEach((font) => {
+    loadedFontsCache[font] = true;
+  });
+
+  return fontFamily in loadedFontsCache;
+};
+
+export const dynamicLoader: DynamicLoader = {
+  isLoaded: isLoadedNative,
+  loadFontAsync,
+};

package/src/dynamicLoading/dynamic-font-loading.web.ts

@@ -0,0 +1,15 @@
+/**
+ * dynamic font loading isn't supported on web
+ * */
+import type { DynamicLoader, FontSource } from './types';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const loadFontAsync = async (_fontFamily: string, _fontSource: FontSource): Promise<void> => undefined;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const isLoaded = (_fontFamily: string) => true;
+
+export const dynamicLoader: DynamicLoader = {
+  isLoaded,
+  loadFontAsync,
+};

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

@@ -0,0 +1,77 @@
+import type { FontSource } from './types';
+
+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>;
+      };
+    };
+  }
+
+  // eslint-disable-next-line vars-on-top
+  var expo: ExpoGlobal | undefined;
+}
+
+const hasNecessaryExpoModules = !!globalThis.expo?.modules?.ExpoAsset && !!globalThis.expo?.modules?.ExpoFontLoader;
+
+const hasNecessaryExpoFeatures =
+  hasNecessaryExpoModules && typeof globalThis.expo?.modules.ExpoFontLoader.getLoadedFonts === 'function';
+
+let dynamicFontLoadingEnabled = hasNecessaryExpoFeatures;
+
+export const isDynamicLoadingSupported = () => hasNecessaryExpoFeatures;
+
+/**
+ * Set whether dynamic loading of fonts is enabled.
+ * Currently, the presence of Expo Asset and Font Loader modules is a prerequisite for enabling.
+ * In the future, React Native core apis will be used for dynamic font loading.
+ *
+ * @param value - whether dynamic loading of fonts is enabled
+ * @returns `true` if dynamic loading of fonts was successfully set. `false` otherwise.
+ * */
+export const setDynamicLoadingEnabled = (value: boolean): boolean => {
+  if (!hasNecessaryExpoFeatures) {
+    if (process.env.NODE_ENV !== 'production' && !!value) {
+      const message = hasNecessaryExpoModules
+        ? 'Expo is installed, but does not support dynamic font loading. Make sure to use Expo SDK 52 or newer.'
+        : 'Necessary Expo modules not found. Dynamic font loading is not available on Web or when necessary Expo modules are not present.';
+      console.error(message); // eslint-disable-line no-console
+    }
+    return false;
+  }
+
+  dynamicFontLoadingEnabled = !!value;
+
+  return true;
+};
+
+/**
+ * Whether dynamic loading of fonts is enabled.
+ * */
+export const isDynamicLoadingEnabled = () => dynamicFontLoadingEnabled;
+
+type ErrorCallback = (args: {
+  error: Error;
+  fontFamily: string;
+  fontSource: FontSource;
+}) => void;
+
+let dynamicLoadingErrorCallback: undefined | ErrorCallback;
+
+/**
+ * Set a callback to be called when an error occurs during dynamic font loading.
+ * */
+export const setDynamicLoadingErrorCallback = (callback: ErrorCallback) => {
+  dynamicLoadingErrorCallback = callback;
+};
+
+export const getErrorCallback = () => dynamicLoadingErrorCallback;

package/src/dynamicLoading/types.ts

@@ -0,0 +1,10 @@
+// the result of calling require('path')
+type ModuleId = number;
+type LocalFileSystemUri = string;
+
+export type FontSource = ModuleId | LocalFileSystemUri;
+
+export type DynamicLoader = {
+  loadFontAsync: (fontFamily: string, fontSource: FontSource) => Promise<void>;
+  isLoaded: (fontFamily: string) => boolean;
+};

package/src/index.ts

@@ -1,2 +1,49 @@
+import { NativeModules, Platform } from 'react-native';
+
 export { createIconSet, DEFAULT_ICON_SIZE, DEFAULT_ICON_COLOR } from './create-icon-set';
-export type { IconProps } from './create-icon-set';
+export type { IconProps, CreateIconSetOptions } from './create-icon-set';
+export {
+  setDynamicLoadingEnabled,
+  isDynamicLoadingEnabled,
+  isDynamicLoadingSupported,
+  setDynamicLoadingErrorCallback,
+} from './dynamicLoading/dynamic-loading-setting';
+
+const LINKING_ERROR = `
+  The package '@react-native-vector-icons/common' doesn't seem to be linked. Make sure:
+    ${Platform.select({ ios: "- You have run 'pod install'\n", default: '' })}
+    - You rebuilt the app after installing the package\n'
+    - You are not using Expo Go
+  `;
+
+// @ts-expect-error : NativeModules type is incomplete
+const isTurboModuleEnabled = global.__turboModuleProxy != null; // eslint-disable-line no-underscore-dangle
+
+const VectorIconsModule = isTurboModuleEnabled
+  ? require('./NativeVectorIcons').default // eslint-disable-line @typescript-eslint/no-require-imports
+  : NativeModules.VectorIcons;
+
+const VectorIcons = VectorIconsModule
+  ? VectorIconsModule
+  : new Proxy(
+      {},
+      {
+        get() {
+          throw new Error(LINKING_ERROR);
+        },
+      },
+    );
+
+// TODO: Do we want to expose this as a public API?
+export function getImageForFont(
+  fontFamilyName: string,
+  glyph: string,
+  fontSize: number,
+  color: number,
+): Promise<string> {
+  return VectorIcons.getImageForFont(fontFamilyName, glyph, fontSize, color);
+}
+
+export function getImageForFontSync(fontFamilyName: string, glyph: string, fontSize: number, color: number): string {
+  return VectorIcons.getImageForFontSync(fontFamilyName, glyph, fontSize, color);
+}

package/src/scripts/common.ts

@@ -0,0 +1,52 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { resolveNodeModuleDir } from '@react-native-community/cli-tools';
+
+const getPackageJson = (filename: string) => {
+  const packageData = fs.readFileSync(filename, 'utf-8');
+  const packageJson = JSON.parse(packageData);
+
+  return packageJson;
+};
+
+const getPackageFontDirectories = (packageJsonFilename: string) => {
+  const rootPackageJson = getPackageJson(packageJsonFilename);
+  const dependencies = Object.keys(rootPackageJson.dependencies || {});
+
+  const packageDirs: string[] = [];
+  dependencies.forEach((dependency) => {
+    const dir = resolveNodeModuleDir(packageJsonFilename, dependency);
+    const packageJson = getPackageJson(`${dir}/package.json`);
+    if (packageJson.keywords?.includes?.('react-native-vector-icons-icon')) {
+      packageDirs.push(`${dir}/fonts`);
+    }
+  });
+
+  return packageDirs;
+};
+
+const getLocalFontsDir = (packageJsonFilename: string) => {
+  const rootPackageJson = getPackageJson(packageJsonFilename);
+  const config = rootPackageJson.reactNativeVectorIcons || {};
+
+  return `${path.dirname(packageJsonFilename)}/${config.fontDir || 'rnvi-fonts'}`;
+};
+
+const getFonts = (fontDir: string) => {
+  if (!fs.existsSync(fontDir)) {
+    return [];
+  }
+
+  const fonts = fs.readdirSync(fontDir);
+  const fontPaths = fonts.map((font) => `${fontDir}/${font}`);
+
+  return fontPaths;
+};
+
+export const getFontPaths = (packageJsonFilename: string) => {
+  const packageDirs = getPackageFontDirectories(packageJsonFilename);
+  packageDirs.push(getLocalFontsDir(packageJsonFilename));
+  const fonts = packageDirs.map(getFonts);
+
+  return fonts.flat();
+};

package/src/scripts/getFonts.ts

@@ -1,52 +1,11 @@
 #!/usr/bin/env node
 
-import fs from 'node:fs';
-import path from 'node:path';
-import { resolveNodeModuleDir } from '@react-native-community/cli-tools';
+import { getFontPaths } from './common';
 
-const rootDir = process.argv[2];
-if (!rootDir) {
-  throw new Error('Need rootDir as first argument');
+const packageJsonFilename = process.argv[2];
+if (!packageJsonFilename) {
+  throw new Error('Need the path to the roo package.json as the first argument');
 }
 
-const getPackageJson = (dir: string) => {
-  const packageData = fs.readFileSync(path.join(dir, 'package.json'), 'utf-8');
-  const packageJson = JSON.parse(packageData);
-
-  return packageJson;
-};
-
-const getPackages = () => {
-  const rootPackageJson = getPackageJson(rootDir);
-  const dependencies = Object.keys(rootPackageJson.dependencies || {});
-
-  const packageDirs: string[] = [];
-  dependencies.forEach((dependency) => {
-    const dir = resolveNodeModuleDir(rootDir, dependency);
-    const packageJson = getPackageJson(dir);
-    if (packageJson.keywords?.includes?.('react-native-vector-icons-icon')) {
-      packageDirs.push(dir);
-    }
-  });
-  return packageDirs;
-};
-
-const getFonts = (dir: string) => {
-  const fontDirs = [`${dir}/fonts`];
-
-  const rootPackageJson = getPackageJson(rootDir);
-  const config = rootPackageJson.reactNativeVectorIcons || {};
-  fontDirs.push(`${rootDir}/${config.fontDir || 'rnvi-fonts'}`);
-
-  fontDirs.forEach((fontDir) => {
-    if (!fs.existsSync(fontDir)) {
-      return;
-    }
-
-    const fonts = fs.readdirSync(fontDir);
-    fonts.forEach((font) => console.log(`${fontDir}/${font}`)); // eslint-disable-line no-console
-  });
-};
-
-const packageDirs = getPackages();
-packageDirs.forEach((dir) => getFonts(dir));
+const fonts = getFontPaths(packageJsonFilename);
+fonts.map((font) => console.log(font)); // eslint-disable-line no-console

package/src/scripts/updatePlist.ts

@@ -0,0 +1,58 @@
+#!/usr/bin/env node
+/* eslint-disable no-console */
+
+import fs from 'node:fs';
+import * as path from 'node:path';
+import pc from 'picocolors';
+import * as plist from 'plist';
+
+import { getFontPaths } from './common';
+
+const getFontName = (fontPath: string) => path.basename(fontPath);
+
+const packageJsonFilename = process.argv[2];
+if (!packageJsonFilename) {
+  throw new Error('Need the path to the root package.json as the first argument');
+}
+
+const infoPlistFilename = process.argv[3];
+if (!infoPlistFilename) {
+  throw new Error('Need the path to the Info.plist as the second argument');
+}
+
+const fonts = getFontPaths(packageJsonFilename);
+console.log(`Found ${fonts.length} fonts`);
+
+const infoPlistContent = fs.readFileSync(infoPlistFilename, 'utf8');
+const infoPlist = plist.parse(infoPlistContent) as Record<string, string[]>;
+
+const plistFonts = new Set(infoPlist.UIAppFonts || []);
+const providedFonts = new Set(fonts.map(getFontName));
+
+let hasChanges = false;
+
+// Check for missing fonts and add them
+providedFonts.forEach((font) => {
+  if (!plistFonts.has(font)) {
+    plistFonts.add(font);
+    console.log(pc.green(`Added ${font}`));
+    hasChanges = true;
+  } else {
+    console.log(`Existing ${font}`);
+  }
+});
+
+// Check for extra fonts in Info.plist
+plistFonts.forEach((font) => {
+  if (!providedFonts.has(font)) {
+    console.log(pc.red(`Extra ${font} (Please remove manually if not needed)`));
+  }
+});
+
+// Update Info.plist if there were changes
+if (hasChanges) {
+  infoPlist.UIAppFonts = Array.from(plistFonts);
+  const updatedInfoPlistContent = plist.build(infoPlist).replace(/^ {2}/gm, '').replace(/ {2}/gm, '\t');
+
+  fs.writeFileSync(infoPlistFilename, updatedInfoPlistContent, 'utf8');
+}