Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ListItem:Unrecognized font family 'Material Icons' #503

Closed
wuyunqiang opened this issue Jul 17, 2017 · 21 comments
Closed

ListItem:Unrecognized font family 'Material Icons' #503

wuyunqiang opened this issue Jul 17, 2017 · 21 comments

Comments

@wuyunqiang
Copy link

wuyunqiang commented Jul 17, 2017

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'}
/>
))
}

  1. What you expected to happen
    android:

androidright

ios:

iosright

  1. What actually happens
    android:

androidlistitem

ios:

ioslistitem

"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
Copy link
Collaborator

iRoachie commented Jul 17, 2017

@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
Copy link
Author

wuyunqiang commented Jul 18, 2017

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

@binoy14
Copy link
Contributor

binoy14 commented Jul 18, 2017

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

@wuyunqiang
Copy link
Author

wuyunqiang commented Jul 18, 2017

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

@binoy14
Copy link
Contributor

binoy14 commented Jul 18, 2017

@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
Copy link

myerzman commented Jul 27, 2017

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

@xavier-villelegier
Copy link
Collaborator

xavier-villelegier commented Jul 27, 2017

@myerzman rm -rf node_modules && npm i

@P3GLEG
Copy link

P3GLEG commented Aug 1, 2017

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
screen shot 2017-08-01 at 4 52 12 am

@xavier-villelegier
Copy link
Collaborator

xavier-villelegier commented Aug 1, 2017

@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
Copy link
Collaborator

Monte9 commented Aug 8, 2017

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

@Monte9 Monte9 closed this as completed Aug 8, 2017
@P3GLEG
Copy link

P3GLEG commented Aug 9, 2017

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

@ji3000
Copy link

ji3000 commented Aug 28, 2017

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
Copy link

kmcgill88 commented Sep 1, 2017

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!

@YYEleven
Copy link

YYEleven commented Sep 6, 2017

read https://www.npmjs.com/package/react-native-vector-icons can resolve the problem

@RafaRuiz
Copy link

RafaRuiz commented Sep 25, 2017

I had to remove libRNVectorIcons from Build Phases and re-add it

@hoanganhbk94
Copy link

hoanganhbk94 commented Oct 27, 2017

@kmcgill88 Thanks :))

@thinkbed
Copy link

thinkbed commented Nov 21, 2017

I fix this problem by running "reac-native link" command follow the instruction of https://www.npmjs.com/package/react-native-vector-icons.

@kwes01
Copy link

kwes01 commented Nov 24, 2017

i have this error

imagen

@xavier-villelegier
Copy link
Collaborator

xavier-villelegier commented Nov 24, 2017

@kwes01 This was quickly fixed in the v0.18.4, please update your RNE version

@binora
Copy link

binora commented Nov 26, 2017

Hi, I use expo and have preloaded the fonts as per documentation but i still get this error :
screen shot 2017-11-26 at 1 09 35 pm

versions :
"react-native-elements": "^0.18.4"
"expo": "^23.0.0"

It works on Android but not on IOS. Please help

@hoangvuanhdevelopervn
Copy link

hoangvuanhdevelopervn commented Mar 28, 2018

You have to link to library: react-native link react-native-vector-icons

@react-native-elements react-native-elements locked as resolved and limited conversation to collaborators Apr 1, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests