Icons are not loaded in standalone iOS app.

[ShaneMcNamara]

🐛 Bug Report

Summary of Issue

Icons load correctly in Expo Client on my physical device, as well as iOS simulator with expo start --no-dev --minify

Environment - output of expo diagnostics & the platform(s) you're targeting

  Expo CLI 4.0.8 environment info:
    System:
      OS: macOS 10.15.5
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 12.16.2 - /usr/local/bin/node
      Yarn: 1.19.1 - /usr/local/bin/yarn
      npm: 6.14.4 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    Managers:
      CocoaPods: 1.8.3 - /Users/ShaneMcNamara/.rvm/gems/ruby-2.2.0/bin/pod
    SDKs:
      iOS SDK:
        Platforms: iOS 14.2, DriverKit 20.0, macOS 11.0, tvOS 14.2, watchOS 7.1
    IDEs:
      Android Studio: 4.0 AI-193.6911.18.40.6821437
      Xcode: 12.2/12B45b - /usr/bin/xcodebuild
    npmPackages:
      expo: ~39.0.2 => 39.0.5 
      react: 16.13.1 => 16.13.1 
      react-dom: 16.13.1 => 16.13.1 
      react-native: https://github.com/expo/react-native/archive/sdk-39.0.2.tar.gz => 0.63.2 
      react-native-web: ~0.13.12 => 0.13.18 
      react-navigation: ^4.4.0 => 4.4.3 
    npmGlobalPackages:
      expo-cli: 4.0.8
    Expo Workflow: managed

iOS Simulator

Version 12.2 (940.16)
SimulatorKit 597.13.0.1
CoreSimulator 732.18.0.2

iPhone

Software Version 14.2
Model Name iPhone Xs

Expo Client

Client version: 2.17.4.109949

Reproducible Demo

I will add this in when (or if) my reproducible demo is approved to TestFlight.

I have this:

 Font.loadAsync({
        // This is the font that we are using for our tab bar
        ...Ionicons.font,
        ...AntDesign.font,
});

In my App.js, which is called as part of the AppLoading.startAsync

Expected Behavior vs Actual Behavior

1. Icons should show up. Icon is completely missing.
2. Behaviour on simulator and/or Expo Client should replicate as much as possible the behaviour on standalone.

[ShaneMcNamara]

Alright, I was able to get this to work.

It seems that changing my app.json from:

    "assetBundlePatterns": [
      "assets/images/*",
      "assets/fonts/*",
      "assets/*"
    ],

to

    "assetBundlePatterns": [
      "**/*"
    ],

has solved the issue. However it does seem counter intuitive that assetBundlePatterns would affect fonts imported in required modules. It would be valuable to document this behaviour somewhere

[brentvatne]

if it's not included in assetBundlePatterns then you will need to have an internet connection when you load the app in order for the icons to load

[ShaneMcNamara]

Hi @brentvatne,

My device definitely has internet connectivity as it is downloading the JS updated OTA and basically performing all other actions correctly (e.g. logging in). Is there something wrong with the following:

if (!this.state.isLoadingComplete) {
      return (
        <AppLoading
          startAsync={this.initialLoad}
          onError={handleLoadingError}
          onFinish={() => {
            this.setState({
              isLoadingComplete:true,
            });
          }}
        />
      );
    } 

initialLoad() {
  await Promise.all([
          ...Ionicons.font,
        ...AntDesign.font,
        ...MaterialIcons.font,
        ...FontAwesome.font,
 ]);
}

Thanks.

[AJIXuMuK]

Same issue.

I have

"assetBundlePatterns": [
      "**/*"
    ],

in the app.json and also tried to load fonts using

const [loaded, error] = Font.useFonts({
    ...MaterialIcons.font, 
    ...MaterialCommunityIcons.font
  });

[brentvatne]

read your logs when you run publish, see if you are publishing for the correct target.

you can also be explicit about it:

expo publish --target managed - publishes for consumption in client or standalone apps built with expo build expo publish --target bare - publishes for bare react-native apps

closing this but if you continue having this issue then please post a new issue on https://github.com/expo/expo/issues and provide a reproducible example and more information