Skip to content

Provide font on app side - breaking change#76

Open
SamuelBrucksch wants to merge 16 commits intomasterfrom
external-fonts
Open

Provide font on app side - breaking change#76
SamuelBrucksch wants to merge 16 commits intomasterfrom
external-fonts

Conversation

@SamuelBrucksch
Copy link
Copy Markdown
Contributor

@SamuelBrucksch SamuelBrucksch commented Apr 29, 2026

With this PR we remove the provided Material Symbol Font and let the app set the default font.

Setup

  1. Add a .ttf font file to your native projects:

    • iOS — add <name>.ttf to your app bundle (no UIAppFonts entry needed — the library registers it via CoreText automatically).
    • Android — place <name>.ttf in res/font/.

    For cross-platform compatibility use lowercase names with underscores only (e.g. material_symbols).

  2. Register the font and an optional glyph map at startup:

    import { setIconFont } from '@iternio/react-native-auto-play';
    import { glyphMap } from './assets/Glyphmap';
    
    setIconFont('material_symbols', glyphMap);
  3. Use glyph images by name or code point:

    { type: 'glyph', name: 'directions_car' }
    { type: 'glyph', codepoint: 0xe531 }

setIconFont must be called once before the first glyph is used (subsequent calls are ignored). If no font is registered, the library throws an error when a glyph image is rendered.

Type-safe glyph names

To get autocompletion and type checking for glyph names, create a declaration file in your app (e.g. autoplay-glyphs.d.ts):

import type { GlyphName } from './assets/Glyphmap';

declare module '@iternio/react-native-auto-play' {
  interface AutoPlayGlyphMap extends Record<GlyphName, number> {}
}

Without this augmentation, name accepts any string. With it, only keys from your glyph map are allowed and you get full autocompletion.

@SamuelBrucksch SamuelBrucksch requested a review from g4rb4g3 April 29, 2026 14:14
@SamuelBrucksch SamuelBrucksch changed the title Allow custom icon fonts from native assets Allow custom icon fonts via assets Apr 30, 2026
@SamuelBrucksch SamuelBrucksch changed the title Allow custom icon fonts via assets Allow custom icon fonts from assets Apr 30, 2026
@SamuelBrucksch SamuelBrucksch changed the title Allow custom icon fonts from assets Provide font on app side Apr 30, 2026
@SamuelBrucksch SamuelBrucksch marked this pull request as ready for review April 30, 2026 08:58
@SamuelBrucksch SamuelBrucksch changed the title Provide font on app side Provide font on app side - breaking change Apr 30, 2026
Comment thread packages/react-native-autoplay/src/utils/NitroImage.ts
Comment thread packages/react-native-autoplay/src/utils/NitroImage.ts

class SymbolFont {
private static let defaultCanvasSize = 32
private static var cachedFontName: String?
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

The mutable static variable cachedFontName is not protected against concurrent access, which may lead to thread-safety issues.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Not sure this is actually an issue...

class SymbolFont {
private static let defaultCanvasSize = 32
private static var cachedFontName: String?
private static var cachedPSName: String?
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

The mutable static variable cachedPSName is not protected against concurrent access, which may lead to thread-safety issues.

@github-actions
Copy link
Copy Markdown
Contributor

Minor thread-safety concerns were identified regarding the mutable global cached state in the native modules.

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.

1 participant