Why are my custom fonts in React Native reverting to system fonts when app is pulled into foreground?

user_512798 0
Viewed 235

I have a relatively small app, a couple of views managed by a StackNavigator.

I have three custom fonts (TTF), used throughout the app.

The app works fine on the simulator for both Android and iOS - custom fonts display as expected.

I have now begun submitting my app to TestFlight and running it on device - two separate iPhones, so far.

When first loaded, the app works as expected and the fonts display correctly.

However, when the app goes into the background, and then is pulled into the foreground again, the fonts revert back to system fonts. (The page that is pulled from background actually looks correct, it is when the stack switches to another view that those fonts are incorrect.)

If I force close the app, then relaunch, everything is fine again until the next time it goes into the background.

Any thoughts on why these resources are not displaying?

react-native fonts ios
1 Answers

Circling back to answer this for future readers:

I stripped my app down to parts. Generated a new project with the latest RN version, etc.

Built out a minimal project with react-navigation and it crashed.

Removed navigation, and used conditional rendering to display pages and it crashed.

Stripped it down further, and ultimately found that setting the Display Name in XCode was the culprit: my app name had a '?' (question mark) in it.

iOS guideline say this is ok, and nothing broke on deployment, but something about React Native and reloading the context with this character broke something. My gut says that the question mark in some globbing routine to find the font files was causing it to miss.

Removed the question mark and it renders fine coming back into the foreground.

user_5127980
Related