Custom Font in React-Navigation Header

Expo Application Services (EAS)
1

Hi,

there’s an issue with my EAS apk-build for android. I’m using a custom font all over my app, including react-navigation for the header title (via native stack navigator → screenoptions → headerTitleStyle). The thing is: everything is working as expected when I’m using expo build or even eas build with developmentClient=true. But in the eas release version it doesn’t work and it falls back to system font, but ONLY in the header of react-navigation. All other text in the app uses the custom font. Another weird thing: when I publish a build (OTA) on the release channel, the app gets updated and suddenly the header uses the correct custom font.

I’m absolutely clueless here. Tried to wait even more to be sure that the fonts are all loaded. Even tried to update the header on a button press. Tried useFont-hook and Font.loadAsync. Nothing works.

I’m testing on a OnePlus 5T, which sometimes is weird with fonts, but as explained above: builds with “expo build” and others work as expected.

Help please!

2

hi there! can you create an issue on Issues · expo/expo · GitHub with a minimal reproducible example app? (How to create a Minimal, Reproducible Example - Help Center - Stack Overflow)

we’d be happy to investigate if so!

3

hey! I have to see if I can do that!

meanwhile I found a workaround:

instead of setting the headerTitleStyle in screenoptions I’m setting now the complete headerTitle:

headerTitle: ({ children }) => <CustomText customStyle="extraBold" style={{ fontSize: 21 }}>{children}</CustomText>