infinitered / ignite

Infinite Red's battle-tested React Native project boilerplate, along with a CLI, component/model generators, and more!
MIT License
17.66k stars 1.4k forks source link

Font loading error only when doing a Testflight build #2419

Closed jvgeee closed 1 year ago

jvgeee commented 1 year ago

Describe the bug

I'm using some custom fonts, and have followed the instructions for custom fonts as follows:

module.exports = {
  assets: [
    // TODO: link documentation about fonts to this section
    // If you need to add non-google fonts (those not available through the `@expo-google-fonts/**`
    // packages, you can add them to the referenced path below and uncomment this line.
    "./assets/fonts/",
  ],
}

In ./app/App.tsx:

const [areFontsLoaded, fontError] = useFonts(customFontsToLoad)

in ./app/theme/typography.ts

export const customFontsToLoad = {
  ApercuBold: require("../../assets/fonts/ApercuBold.ttf"),
  ApercuBoldItalic: require("../../assets/fonts/ApercuBoldItalic.ttf"),
  ApercuLight: require("../../assets/fonts/ApercuLight.ttf"),
  ApercuLightItalic: require("../../assets/fonts/ApercuLightItalic.ttf"),
  ApercuMedium: require("../../assets/fonts/ApercuMedium.ttf"),
  ApercuRegular: require("../../assets/fonts/ApercuRegular.ttf"),
  ApercuItalic: require("../../assets/fonts/ApercuItalic.ttf"),
  RecoletaRegular: require("../../assets/fonts/RecoletaRegular.otf"),
  RecoletaBold: require("../../assets/fonts/RecoletaBold.otf"),
  RecoletaMedium: require("../../assets/fonts/RecoletaMedium.otf"),
}

When I do local builds of the app, the fonts load fine. When I do a release build on XCode, the fonts also work fine .When I do a release build and upload to Testflight, the fonts fail loading and I only see a white screen in the app.

I see this error: E_font_file_not_found coming from Expo-Font.

Not sure if this is an issue with expo-font, or an issue with the way Ignite's Xcode project is set up.

And ideas or things I could try?

Ignite version

8.4.5

Additional info

System platform darwin arch arm64 cpu 8 cores Apple M1 directory mello-app /Users/jvg/Sites/mello-app

JavaScript (and globally-installed packages) node 16.19.1 /Users/jvg/.nvm/versions/node/v16.19.1/bin/node npm 8.19.3 /Users/jvg/.nvm/versions/node/v16.19.1/bin/npm @aws-amplify/cli 10.8.1 appcenter-cli 2.13.4 aws-sdk 2.1334.0 corepack 0.15.1 expo-cli 6.3.2 npm 8.19.3 serverless 3.28.1 yarn 1.22.19 /opt/homebrew/bin/yarn create-next-app 10.1.3 ios-deploy 1.11.4 pnpm - not installed expo 48.0.9 managed

Ignite ignite-cli 8.4.5 /Users/jvg/.npm/_npx/e31027f3785124a8/node_modules/.bin/ignite ignite src build /Users/jvg/.npm/_npx/e31027f3785124a8/node_modules/ignite-cli/build

Android java 17.0.6 /opt/homebrew/opt/openjdk@17/bin/java android home - /Users/jvg/Android/Sdk

iOS xcode 14.3 cocoapods 1.11.3 /opt/homebrew/lib/ruby/gems/3.1.0/bin/pod

Tools git git version 2.40.0 /opt/homebrew/bin/git

jvgeee commented 1 year ago

So I did a fresh install of Ignite in a new project and copied over the IOS folder to see if that made any differences, and now it's working fine. Unfortunately this means I have no idea what the problem is/was, it must have been some sort of config error that bungled up my assets.

Sorry if someone finds this in the future with the same issue and is looking for a solution! Try doing what I did (create a new ignite app with the same name in a different folder, then copy over the IOS folder to your existing project. You'll obviously need to reconfigure the IOS project to have your splashscreen/appicon/Google info.plist/schemas everything else)