Skip to content

Provide font on app side - breaking change#76

Merged
g4rb4g3 merged 16 commits intomasterfrom
external-fonts
May 4, 2026
Merged

Provide font on app side - breaking change#76
g4rb4g3 merged 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
Comment thread packages/react-native-autoplay/ios/utils/SymbolFont.swift
Comment thread packages/react-native-autoplay/ios/utils/SymbolFont.swift
@github-actions
Copy link
Copy Markdown
Contributor

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

@g4rb4g3 g4rb4g3 merged commit c0c68ec into master May 4, 2026
2 checks passed
@g4rb4g3 g4rb4g3 deleted the external-fonts branch May 4, 2026 11:11
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