Icon shown as X or Chinese character

[Belval]

Very basic usage:

import { FontAwesome } from '@expo/vector-icons';

<TouchableOpacity onPress={this._doStuff.bind(this)} style={{flex: 1, alignSelf: 'flex-end', alignItems: 'center', marginBottom: 10}}>
    <FontAwesome name="circle-o" size={48} color="grey" />
</TouchableOpacity>

When using FontAwesome, this will show as a square with an X in it.
When using Ionicons it will be a Chinese character (using another icon than circle-o)

My project uses typescript, here is the package.json file:

{
  "main": "src/index.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject"
  },
  "dependencies": {
    "buffer": "^5.2.1",
    "expo": "^32.0.0",
    "isomorphic-unfetch": "^3.0.0",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
    "react-native-pinch-zoom-view": "^0.2.0",
    "react-navigation": "^3.0.9",
    "typesafe-actions": "^3.2.1"
  },
  "devDependencies": {
    "@types/expo": "^32.0.1",
    "@types/expo__vector-icons": "^9.0.0",
    "@types/react": "^16.8.2",
    "@types/react-dom": "^16.8.0",
    "@types/react-native": "^0.57.35",
    "@types/react-navigation": "^3.0.1",
    "@types/react-redux": "^7.0.1",
    "babel-preset-expo": "^5.0.0",
    "prettier": "1.16.4",
    "pretty-quick": "^1.10.0",
    "typescript": "^3.3.3"
  },
  "private": true
}

I cleared all app data as a sanity check, also deleted and re-installed my node_modules folder. My project was made in regular Javascript then migrated over to TypeScript (which then broke it).

[brentvatne]

I don't know what may have broken it from migrating to TypeScript, not enough information for me to say. Also that indicates that it's not an issue with the library but with your config

[Belval]

I understand that, but shouldn't there be any kind of checks in place to add a warning/pointer/log anything to indicate what the issue was?

It's nearly impossible to debug an issue if I follow the instructions written in the README, and somehow end up with a badly broken package with erratic that throws absolutely no exception.

[brentvatne]

ideally, but I have never encountered such an issue so it's unclear how I would detect it (or if its even detectable). if you can post a reproducible example I can look into it!

[Belval]

I have solved my issue, and it had indeed nothing to do with expo.

In the index.js file, the App component was registered using react-native AppRegistry instead of expo registerRootComponent

Basically, this:

import {AppRegistry} from 'react-native';
import App from './App';

AppRegistry.registerComponent('main', () => App);

had to be changed to this:

import { registerRootComponent } from 'expo';
import App from './App';

registerRootComponent(App);

I don't know why the symptoms of this were that the icons wouldn't render anymore, but I don't see how it could be detected on expo's side since the issue is pretty much not using expo in the first place.

I'm sorry for opening an issue on this. Keep up to good work!

[brentvatne]

it seems that I had created an issue to warn about this this a while ago but never got around to it, I'll make sure to do it soon - expo/expo#1036

[yanagassi]

This error usually occurs on Samsung phones with newer Android phones, not on other brands or phones.

[danhab99]

I'm having this same issue on a Galaxy s9. Any fix yet?

[farhan-ibrahim]

I have solved my issue, and it had indeed nothing to do with expo.

In the index.js file, the App component was registered using react-native AppRegistry instead of expo registerRootComponent

Basically, this:

import {AppRegistry} from 'react-native';
import App from './App';

AppRegistry.registerComponent('main', () => App);

had to be changed to this:

import { registerRootComponent } from 'expo';
import App from './App';

registerRootComponent(App);

I don't know why the symptoms of this were that the icons wouldn't render anymore, but I don't see how it could be detected on expo's side since the issue is pretty much not using expo in the first place.

I'm sorry for opening an issue on this. Keep up to good work!

I changed this inside index.js, but still having the same issue. Encountered after upgrading to SDK 40

[brentvatne]

if you have a custom metro.config.js make sure you are using @expo/metro-config as the base, as described in https://docs.expo.io/guides/customizing-metro/ and in sdk 40 release notes

[knowsarzehmeh]

I have solved my issue, and it had indeed nothing to do with expo.
In the index.js file, the App component was registered using react-native AppRegistry instead of expo registerRootComponent
Basically, this:

import {AppRegistry} from 'react-native';
import App from './App';

AppRegistry.registerComponent('main', () => App);

had to be changed to this:

import { registerRootComponent } from 'expo';
import App from './App';

registerRootComponent(App);

I don't know why the symptoms of this were that the icons wouldn't render anymore, but I don't see how it could be detected on expo's side since the issue is pretty much not using expo in the first place.
I'm sorry for opening an issue on this. Keep up to good work!

I changed this inside index.js, but still having the same issue. Encountered after upgrading to SDK 40

I'm having the same issue on SDK 40, have you found a fix yet?

[brentvatne]

@knowsarzehmeh

if you have a custom metro.config.js make sure you are using @expo/metro-config as the base, as described in https://docs.expo.io/guides/customizing-metro/ and in sdk 40 release notes

[Fannolo]

for everyone who is still facing the issue and is using a custom icon like Fontello, in my case inside the android prebuild generated folder the folder asset/font/[name of the font].ttf was missing, after adding it to the folder, the whole icon started to work properly I suspect the prebuild step oversees the transfer of the icon font