Skip to content

feat: allow using expo font for getImageSource #1788

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jul 12, 2025

Conversation

vonovak
Copy link
Collaborator

@vonovak vonovak commented Jul 8, 2025

This expands the existing implementation by adding the ability to use getImageSource on Expo Go. The implementation uses renderToImageAsync from expo-font to achieve that. This brings feature-parity with @expo/vector-icons to this package - once this is done, all native (iOS, Android) features from @expo/vector-icons will be usable also with react-native-vector-icons (except those that were removed from oblador/react-native-vector-icons - createMultiStyleIconSet).

Test plan

Tested locally in Expo Go

import { ensureGetImageAvailable } from './get-image-library';

export const DEFAULT_ICON_SIZE = 12;
export const DEFAULT_ICON_COLOR = 'black';
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

moved this to a separate file to avoid circular imports

@@ -65,7 +63,11 @@ export function createIconSet<GM extends Record<string, number>>(
): IconComponent<GM> {
const { postScriptName, fontFileName, fontStyle } =
typeof postScriptNameOrOptions === 'string'
? { postScriptName: postScriptNameOrOptions, fontFileName: fontFileNameParam, fontStyle: fontStyleParam }
? {
postScriptName: postScriptNameOrOptions,
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

reformatted by biome

@@ -12,8 +12,6 @@ export default function createIconSourceCache() {

const setError = (key: string, error: Error) => cache.set(key, { type: TYPE_ERROR, data: error });

const has = (key: string) => cache.has(key);
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

has is not needed - get() !== undefined is equivalent to that, and the value obtained by get() can be returned right away - as in packages/common/src/get-image-source.ts

import { DEFAULT_ICON_COLOR, DEFAULT_ICON_SIZE } from './defaults';
import { ensureGetImageAvailable } from './get-image-library';

export const getImageSourceSync = (
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is basically the same, just moved to a separate file for clarity

NativeIconAPI.ensureNativeModuleAvailable();

return NativeIconAPI;
if (hasExpoRenderToImage) {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this will kick in for expo-go

throw new Error(
'Could not import @react-native-vector-icons/get-image, did you install it? It is required for getImageSource*',
);
if (NativeIconAPI) {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if @react-native-vector-icons/get-image is installed and the native module is available, use it

@johnf johnf merged commit 95e57e8 into oblador:master Jul 12, 2025
4 of 28 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants