NativeBase: Unrecognized font family 'Ionicons'
Here I have a simple component:
import React, { Component } from 'react';
import {
Container,
Header,
Title,
Content,
Button,
Icon,
} from 'native-base';
export default class App extends Component {
render() {
return(
<Container>
<Header>
<Button transparent>
<Icon name="ios-arrow-back" />
</Button>
<Title>Header</Title>
<Button transparent>
<Icon name="ios-menu" />
</Button>
</Header>
<Content>
</Content>
</Container>
);
}
}
I ran rnpm link like I was told to do in the Getting Started section of the docs. I am getting this error:
Any suggestions? Should I try to link native-base manually following the instructions in the docs?
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Comments: 50 (3 by maintainers)
Links to this issue
Commits related to this issue
- fix bug icon 不显示 运行即可解决 react-native link react-native-vector-icons https://github.com/GeekyAnts/NativeBase/issues/72 — committed to zhulinpinyu/MinLife by zhulinpinyu 7 years ago
- issue for link font: https://github.com/GeekyAnts/NativeBase/issues/72 — committed to pptang/worklifeinjapan by pptang 5 years ago
- feat: replace prop-types dependency and link font issue for link font: https://github.com/GeekyAnts/NativeBase/issues/72 — committed to pptang/worklifeinjapan by pptang 5 years ago
- feat: replace prop-types dependency and link font issue for link font: https://github.com/GeekyAnts/NativeBase/issues/72 — committed to pptang/worklifeinjapan by pptang 5 years ago
- Adding ionic icons - required podfile update ```pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons' ``` needs to be added to the top of the podfile for IOS, then in terminal you... — committed to pearcircuitmike/react-native-food-app by pearcircuitmike 2 years ago
Hi All, I was having same problem and resolved by doing this.
Try running
rm -rf node_modules && npm installIf RN < 0.29, runrnpm link react-native-vector-iconsIf RN >= 0.29, runreact-native link react-native-vector-iconsTry
rnpm link react-native-vector-iconsFor RN 0.60+ don’t use
react-native link ...! (see Autolinking)Instead add this in your
Podfile:and run
pod update(orpod install).Furthermore add this in your
Info.plist:(took from https://github.com/oblador/react-native-vector-icons#option-with-cocoapods)
Works fine in my project with:
You have restart packager after adding fonts. Close the packager terminal and restart from xcode. Should fix your problem.
react-native link react-native-vector-icons solved my problem.What worked for me was uninstalling the
@expo/vector-iconspackage recommended by Native-base Getting Started guide, and installing thereact-native-vector-iconsas a dependency.I solved and I think this is one of cause. http://image.prntscr.com/image/837ddc4fea2d427e8466671c2515b3b1.png I tried to re-run this command
react-native link react-native-vector-iconsbecause my RN >= 0.29.Same problem here even after following the above suggestions.
Update:
I was able to resolve the issue by editing the info.plist, adding the font files, then running the application with Xcode. Docs here: https://github.com/oblador/react-native-vector-icons
I had the same issue.
Solved by running first Link
Then restart,
@AbhayVarshney If you are using expo/CRNA then you need to import then Ionicons . somewhat like
you can have a look here this will work for you .
Simply add the missing font to your
ios/project_name/Info.plistfile.Don’t worry about using
react-native linkthis is automatically taken care of in newer versions (from0.60) and messing around with linking can create annoying bugs.I only use Material Community Icons so I can ignore the other icon fonts.
One thing to be aware of is
react-native unlink react-native-vector-iconsclears theUIAppFontsarray so unlink first, then editInfo.plist.<projectDir>/node_modules/native-base/node_modules/react-native-vector-icons/RNVectorIconsManager/RNVectorIconsManager.h:9:9: ‘RCTBridgeModule.h’ file not found
Most important think is if you face with this error if react-native version > 0.6;
***** MOST IMPORTANT IS THIS : Don’t use
reack-native linkand unlink your dependecy if you link beforereact-native unlink react-native-vector-iconsyou have to link manually. So update under
iosfolder to yourPodfilewith your dependency and add below code to podfilepod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'info.plistfile insideiosfolder. Add those fonts under<key>UIAppFonts</key>pod updateinsideiosdirectory on terminalnpx react-native run-ios --simulator="iPhone 8"These commands resolved my issue:
I have tried everything here, and nothing works.
Also tried to install another libary, that doesn’t work either.
Solved with
I faced the issue with both
v2.1.4andv2.1.5So I fixed the version inpackage.jsonto"native-base": "2.1.3"Then ran the following:rm -rf node_modulesnpm ireact-native link@charlieroth You can try to recreate the iOS Scheme on XCode, and run
react-native linkorrnpm linkafter.Same problems… also checked xcode. The fonts are already in the build phase
try to delete ios/build, and rebuild by react-native run-ios. that solved my problem.
I had the same problem, I fixed buy running run
react-native link react-native-vector-iconsScreen shot for adding Ionicons.ttf to
Info.plistxcode version 11.3
"native-base": "^2.13.8", "react": "16.9.0", "react-native": "0.61.5"I read through link provided by eddyfrank. (https://github.com/oblador/react-native-vector-icons#option-with-cocoapods) Followed the iOS portion shown below:
easy solution
run
expo install expo-fontreact-native link react-native-vector-icons solved my problem.
I specifically want to use
Entypofromreact-native-vector-icons. I have copied over theFontsfolder to the Xcode, checked all the icon types are there ininfo.plistandcopy bundle resources,rm -rf node_modules && npm install, clean up last build,react-native link react-native-vector-iconsand thennpm startbut it still does not work.and nothing shows up (Iconwise…) 😦