tauri-apps/tauri

[bug] [macOS] Issue with loading fonts in expo RN app with Tauri on MacOS

bladerunner2020 opened this issue · 0 comments

Describe the bug

We have an Expo React Native app that we run using Tauri. It works fine on Windows, but there's a strange issue on macOS. When running the app on macOS through Tauri, the fonts fail to load correctly (although the app works fine when run in a browser on macOS, both in Safari and Chrome).

The issue is that the fonts don't load as expected. More specifically, they seem to load (everything is displayed correctly), but useFonts returns Error: 6000ms timeout exceeded.

  const [fontsLoaded, err] = useFonts({
    'Inter-Black': require('@/assets/fonts/inter/Inter-Black.otf'),
    'Inter-Regular': require('@/assets/fonts/inter/Inter-Regular.otf'),
    'Inter-Medium': require('@/assets/fonts/inter/Inter-Medium.otf'),
    'Inter-Bold': require('@/assets/fonts/inter/Inter-Bold.otf'),
    'Inter-SemiBold': require('@/assets/fonts/inter/Inter-SemiBold.otf'),
  });

Under the hood, useFonts (from expo-font) uses document.fonts.load(...). When I tried calling this function directly, I encountered the same issue: the callback was only triggered once (should be called 5 times). However, when I used document.fonts.ready, it indicated that all fonts were loaded.

As a workaround, we now use a combination of useFonts and document.fonts.ready.

Interestingly, if I only load one font, the error doesn’t occur. I also tried increasing the timeout to 60 seconds, but the same error persisted.

Reproduction

No response

Expected behavior

No error while loading fonts.

Full tauri info output

[✔] Environment
    - OS: Mac OS 14.6.1 X64
    ✔ Xcode Command Line Tools: installed
    ✔ rustc: 1.80.1 (3f5fd8dd4 2024-08-06)
    ✔ cargo: 1.80.1 (376290515 2024-07-16)
    ✔ rustup: 1.27.1 (54dd3d00f 2024-04-24)
    ✔ Rust toolchain: stable-aarch64-apple-darwin (default)
    - node: 20.9.0
    - yarn: 1.22.19
    - npm: 10.1.0

[-] Packages
    - tauri [RUST]: 1.8.0
    - tauri-build [RUST]: 1.5.5
    - wry [RUST]: 0.24.11
    - tao [RUST]: 0.16.10
    - @tauri-apps/api [NPM]: 1.6.0
    - @tauri-apps/cli [NPM]: 1.6.2

[-] App
    - build-type: bundle
    - CSP: unset
    - distDir: ../dist
    - devPath: http://localhost:8081/
    - framework: React

Stack trace

No response

Additional context

No response