ListItem：Unrecognized font family 'Material Icons'

[wuyunqiang]

Description

1. Explain what you did

code:
<List containerStyle={{ marginBottom: 20 }}>
{
list.map((l, i) => (
<ListItem
roundAvatar
onPress={() => console.log('Pressed')}
avatar={l.avatar_url}
key={i}
title={l.name}
subtitle={l.subtitle}
rightTitle={'right'}
/>
))
}

2. What you expected to happen
   android:

ios:

3. What actually happens
   android:

ios:

"react": "16.0.0-alpha.6",
"react-native": "0.44.3",
"react-native-elements": "^0.14.0",
"react-native-vector-icons": "^4.2.0",

Solution

I set hideChevron: false.

[iRoachie]

@wuyunqiang We use react-native-vector-icons under the hood for showing icons. Did you link the library at setup?

react-native link react-native-vector-icons

[wuyunqiang]

@iRoachie yes I link.
I used react-native-vector-icons for tab.

[binoy14]

@wuyunqiang What version of react-native-vector-icons are you using?

[wuyunqiang]

@binoy14
"react-native-vector-icons": "^4.2.0",

[binoy14]

@wuyunqiang did you try removing node_modules and reinstalling it? Could you try using snack.expo.io to check if you can reproduce this bug there.

[myerzman]

I have the same issue. How do I reinstall node_modules?

[xavier-villelegier]

@myerzman rm -rf node_modules && npm i

[P3GLEG]

I'm also experiencing this issue, I just recently fresh installed my machine. It happens when using any Icon component.

node -v v8.2.1

package.json

  "name": "",
  "version": "0.0.1",
  "description": "hot sauce",
  "author": "",
  "private": true,
  "main": "node_modules/expo/AppEntry.js",
  "dependencies": {
    "expo": "^18.0.4",
    "react": "16.0.0-alpha.12",
    "react-native": "https://github.com/expo/react-native/archive/sdk-18.0.1.tar.gz",
    "react-native-elements": "^0.14.0",
    "react-native-modal": "^2.4.0",
    "react-native-sortable-listview": "^0.2.2",
    "react-native-vector-icons": "^4.3.0",
    "react-navigation": "^1.0.0-beta.11",
    "react-redux": "^5.0.5",
    "redux": "^3.7.1",
    "redux-persist": "^5.0.0-proto.6",
    "redux-thunk": "^2.2.0"
  }
}

I also ran
npm i react-native-vector-icons --save && react-native link react-native-vector-icon

I am receiving this error on IOS.

I tried to import expos icons as a workaround

...
 componentWillMount() {
     await Font.loadAsync(MaterialIcons.font);
  }

It still gave me the same error.

Here is the error

[xavier-villelegier]

@k4ch0w Using expo you shouldn't have to link any libraries (that is the strength of expo).
You shouldn't render anything since the font is not loaded, so you have to update a isLoaded state in order to know when you can render anything.

Have a look at this example https://github.com/react-native-training/react-native-elements/issues/490#issuecomment-318164502

You can also read this part of the Expo documentation https://docs.expo.io/versions/v19.0.0/guides/preloading-and-caching-assets.html

[Monte9]

@k4ch0w please see @xavier-villelegier's answer above. When using Expo, the fonts need to be loaded first before you can render anything with the fonts.

[P3GLEG]

@xavier-villelegier Thanks Xavier! That fixed it for me.

[ji3000]

Need to link fonts into your project. This worked for me.

Source: https://github.com/oblador/react-native-vector-icons#installation
If you want to use any of the bundled icons, you need to add the icon fonts to your Xcode project. Just follow these steps:

Browse to node_modules/react-native-vector-icons and drag the folder Fonts (or just the ones you want) to your project in Xcode. Make sure your app is checked under "Add to targets" and that "Create groups" is checked if you add the whole folder.
Edit Info.plist and add a property called Fonts provided by application (or UIAppFonts if Xcode won't autocomplete/not using Xcode) and type in the files you just added. It will look something like this:
XCode screenshot

Note: you need to recompile your project after adding new fonts, also ensure that they also appear under Copy Bundle Resources in Build Phases.

If you want to use the TabBar/NavigatorIOS integration or use getImageSource, then you need to add RNVectorIcons.xcodeproj to Libraries and add libRNVectorIcons.a to Link Binary With Libraries under Build Phases. More info and screenshots about how to do this is available in the React Native documentation.

[kmcgill88]

I have this same issue and it still wasn't working. Finally I opened Xcode and realized after running the react-native link react-native-vector-icons command didn't quite link correctly under Build Phases. All I did was open the Libraries group on the left panel and clicked and drug the libRNVectorIcons.a back into build phases and removed the old one. Last I had to clean the Xcode build Product -> Clean and then again (holding option) Product -> Clean. Last build Xcode again. Refreshed RN app and was good to go. I wasted hours on this!