React-native-screens: "Unrecognised font family" on iOS

[bitttttten]

Hey! I am trying to style my header title and I run into this error. The font is being used in other parts of the app, and I am waiting for the font to load before rendering the app. I don't get any issues or errors on Android, only iOS.

import { createNativeStackNavigator } from "react-native-screens/native-stack"

export const HomeScreen = () => {
    const { t } = useTranslation()
    const theme = useTheme()

    return (
        <Stack.Navigator
            initialRouteName="Home"
            screenOptions={{
                headerStyle: {
                    backgroundColor: theme.colours.site.neutral,
                },
                headerTitleStyle: {
                    // this is the problematic line!
                    fontFamily: theme.font.family.thin,
                },
                headerTintColor: theme.colours.tones.lightest,
                headerRight: HeaderRight,
            }}
        >
            <Stack.Screen
                name="Home"
                component={Home}
                options={{
                    headerTitle: t("home.title"),
                }}
            />
        </Stack.Navigator>
    )
}

My dependencies:

{
  "dependencies": {
    "@emotion/native": "11.0.0-next.12",
    "@emotion/react": "^11.0.0-next.12",
    "@react-native-community/async-storage": "~1.11.0",
    "@react-native-community/datetimepicker": "2.4.0",
    "@react-native-community/masked-view": "0.1.10",
    "@react-native-community/picker": "1.6.0",
    "@react-native-community/viewpager": "3.3.0",
    "@react-navigation/bottom-tabs": "^5.4.7",
    "@react-navigation/drawer": "^5.7.7",
    "@react-navigation/material-bottom-tabs": "^5.2.7",
    "@react-navigation/native": "^5.4.2",
    "@react-navigation/stack": "^5.3.9",
    "@testing-library/jest-native": "^3.1.0",
    "@testing-library/react-native": "^5.0.3",
    "color": "^3.1.2",
    "dotenv-cli": "^3.1.0",
    "expo": "^38.0.0",
    "expo-asset": "~8.1.7",
    "expo-detox-hook": "^1.0.10",
    "expo-firebase-analytics": "~2.4.1",
    "expo-firebase-core": "~1.1.1",
    "expo-linear-gradient": "~8.2.1",
    "expo-linking": "^1.0.3",
    "expo-localization": "~8.2.1",
    "expo-notifications": "~0.3.3",
    "expo-splash-screen": "^0.3.1",
    "firebase": "7.9.0",
    "formik": "^2.1.4",
    "i18next": "^19.4.4",
    "intl": "^1.2.5",
    "jest-expo": "^38.0.0",
    "jest-fetch-mock": "^3.0.3",
    "lodash.get": "^4.4.2",
    "lodash.pick": "^4.4.0",
    "lodash.set": "^4.3.2",
    "luxon": "^1.24.1",
    "numeric-quantity": "^0.5.1",
    "patch-package": "^6.2.2",
    "polished": "^3.6.3",
    "pullstate": "^1.13.2",
    "qs": "^6.9.4",
    "react": "16.11.0",
    "react-dom": "16.11.0",
    "react-error-boundary": "^2.2.3",
    "react-i18next": "^11.7.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
    "react-native-appearance": "~0.3.3",
    "react-native-coachmark": "0.0.4",
    "react-native-communications": "^2.2.1",
    "react-native-country-picker-modal": "^1.10.0",
    "react-native-easy-toast": "^1.2.0",
    "react-native-gesture-handler": "~1.6.0",
    "react-native-htmlview": "^0.15.0",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-modal": "^11.5.6",
    "react-native-modal-datetime-picker": "^8.7.0",
    "react-native-picker-select": "^7.0.0",
    "react-native-reanimated": "~1.9.0",
    "react-native-render-html": "^4.2.0",
    "react-native-safe-area-context": "~3.0.7",
    "react-native-screens": "~2.9.0",
    "react-native-shimmer-placeholder": "https://github.com/tomzaku/react-native-shimmer-placeholder.git#expo",
    "react-native-snap-carousel": "^3.9.1",
    "react-native-stars": "^1.2.1",
    "react-native-super-grid": "^3.2.0",
    "react-native-swiper": "^1.6.0",
    "react-native-vector-icons": "^6.6.0",
    "react-native-web": "~0.11.7",
    "react-spring": "^8.0.27",
    "sentry-expo": "^2.0.4",
    "standard-version": "^8.0.0",
    "standard-version-expo": "^1.0.3",
    "yup": "^0.29.0"
  },
  "devDependencies": {
    "@types/react": "~16.9.41",
    "@types/react-native": "~0.62.13",
    "babel-preset-expo": "^8.2.3",
    "typescript": "~3.9.5"
  },
  }
}

If it means anything, I was using Expo 37 and had no issues at all. I've only run into this issue on Expo 38.

[bitttttten]

Here is how I am loading the fonts.

import * as Font from "expo-font"

export const useLocalFonts = () =>
    Font.useFonts({
        'acuminpro-regular': require("../assets/fonts/AcuminProCond-Bold.ttf"),
        'acuminpro-thin': require("../assets/fonts/acuminprocond-medium.ttf"),
        'organika-script': require("../assets/fonts/organika-script.otf"),
    })

Below is a bit simplified, just to remove the fluff.

const App = () => {
    const [hasFonts, fontError] = useLocalFonts()

    if (fontError) {
        console.error(`Error loading fonts: ${fontError}`)
    }

    if (!hasFonts) return null

    return (
        <Suspense fallback={null}>
            {...restOfApp}
        </Suspense>
    )
}

export default App

[WoLewicki]

Does this issue happen for any font you choose? It is weird that it would work on SDK 37, which uses react-native-screens v.2.2.0, which does https://github.com/software-mansion/react-native-screens/blob/2.2.0/ios/RNSScreenStackHeaderConfig.m#L350 and SDK 38 uses react-native-screens v.2.8.0 which does https://github.com/software-mansion/react-native-screens/blob/2.8.0/ios/RNSScreenStackHeaderConfig.m#L299 and it resolves to the same thing eventually. Are you sure you didn't change anything? And if so can you provide a repo with an easy reproduction of the issue?

[olapersson]

@WoLewicki I have the same problem, afaict it happens to any font. I did my repro with the google font package as it was easier but the behavior seems to be identical to any loaded font. As it happened on a expo update I opened an issue at expos tracker: https://github.com/expo/expo/issues/9795

A reproduction can be found here https://github.com/olapersson/expo-font-issue

[WoLewicki]

Can you check if #622 resolves your issue and does not introduce any new problems?

[olapersson]

What's the easiest way to install it from the branch?

I get an error when I try to install it like this:

$ npm i -S 'git://github.com/software-mansion/react-native-screens#@wolewicki/header-expo-version'

[...]

npm ERR! prepareGitDep src/native-stack/views/FontProcessor.expo.tsx:2:35 - error TS2307: Cannot find module 'expo-font' or its corresponding type declarations.

[WoLewicki]

The easiest way is to use patch-package and apply those changes as a patch in your node_modules.

[olapersson]

Thanks @WoLewicki, patch-package worked well and it seems https://github.com/software-mansion/react-native-screens/pull/622 does resolve the issue for me. 👍 I get a couple of warnings that it's not the version mandated by expo but I think that's expected.

[WoLewicki]

Can you show a screenshot of these warnings?

[olapersson]

Sure

It might be possible to get around by installing 2.9.0 and patching all the way from there. Haven't tried that yet, also not verified if I can build the binary from this.

[WoLewicki]

Oh ok, these warnings. Yes, this is normal due to the managed workflow having the native code of 2.9.0 version. But the changes made in JS only can be applied without any problems as long as they don't come with any native changes so it is ok in this case.

[bitttttten]

I am still getting the Unrecognised font-family error. I'll put some time aside this week to make a repo!

[WoLewicki]

@bitttttten are you using Expo managed workflow with these changes applied?

[bitttttten]

@bitttttten are you using Expo managed workflow with these changes applied?

@WoLewicki yes!

[WoLewicki]

So please provide a repo that shows the problem so I can work on it.

[bitttttten]

Yep, I have a very busy week but I'll try and get on it in the next few days :)

[bitttttten]

Hey @WoLewicki , I managed to setup a repro: https://github.com/bitttttten/react-native-screens-font-crash-repo

There is a boolean toggling the crash in App.tsx on line 14. Switching it to true and false will show the error I am getting. After turning it on, you can also remove the fontFamily style in App.tsx on line 110.

Hope it helps 🤞

[WoLewicki]

@bitttttten after I applied changes from #622 in the node_modules, the error disappeared and the font worked in the header. I will close this issue with the merge of the PR, but please comment here if I am wrong.