"Unrecognised font family" on iOS

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.

[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.

[bitttttten]

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