Nativebase: Unrecognized font family 'Ionicons'

[charlieroth]

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?

[advany]

Same problems... also checked xcode. The fonts are already in the build phase

[sankhadeeproy007]

You have restart packager after adding fonts. Close the packager terminal and restart from xcode. Should fix your problem.

[olivergeorge]

Try rnpm link react-native-vector-icons

[kumarryogeshh]

/node_modules/native-base/node_modules/react-native-vector-icons/RNVectorIconsManager/RNVectorIconsManager.h:9:9: 'RCTBridgeModule.h' file not found

[himanshu-satija]

Try running rm -rf node_modules && npm install
If RN < 0.29, run rnpm link react-native-vector-icons
If RN >= 0.29, run react-native link react-native-vector-icons

[RobbyRob81]

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

[tranquang7979]

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-icons because my RN >= 0.29.

[clucasalcantara]

react-native link react-native-vector-icons solved my problem.

[farruxx]

Only declaring in Info.plist helped
http://stackoverflow.com/a/30540901

[sravindravmd]

Hi All,
I was having same problem and resolved by doing this.

1) close running packager
2) run react-native link react-native-vector-icons
3) and run react-native start --reset-cache
4) Finally use react-native run-ios

[zhulinpinyu]

@sravindravmd thank you so much.

[clucasalcantara]

@charlieroth You can try to recreate the iOS Scheme on XCode, and run react-native link or rnpm link after.

[nicnilov]

What worked for me was uninstalling the @expo/vector-icons package recommended by Native-base Getting Started guide, and installing the react-native-vector-icons as a dependency.

npm install react-native-vector-icons --save
react-native link react-native-vector-icons

[Lalit-Joshi]

react-native link react-native-vector-icons is working for me thanks.

[AbhayVarshney]

Hi, I am getting this same issue. So for some reason, my app is working perfectly fine when I run it through the emulator. But when I run it on my device, the same error is shown. I have no clue why it works on the emulator but not on the device.

[GeekRishabh]

@AbhayVarshney If you are using expo/CRNA then you need to import then Ionicons .
somewhat like

  async componentWillMount() {
      await Expo.Font.loadAsync({
        'Roboto': require('native-base/Fonts/Roboto.ttf'),
        'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
        'Ionicons': require('native-base/Fonts/Ionicons.ttf'),
      });
  }

you can have a look here this will work for you .

[AbhayVarshney]

@GeekRishabh I haven't used expo for my project. Is there another method w/o expo?

[kadharmfn]

I had the same issue.

Solved by running first Link

react-native link

Then restart,

react-native run-ios

[ckim16]

I specifically want to use Entypo from react-native-vector-icons. I have copied over the Fonts folder to the Xcode, checked all the icon types are there in info.plist and copy bundle resources, rm -rf node_modules && npm install, clean up last build, react-native link react-native-vector-icons and then npm start but it still does not work.

import Entypo from 'react-native-vector-icons/Entypo';

<Entypo name={icon} size={25}/>

and nothing shows up (Iconwise..) :(

[wung-s]

I faced the issue with both v2.1.4 and v2.1.5
So I fixed the version in package.json to "native-base": "2.1.3"
Then ran the following:
rm -rf node_modules
npm i
react-native link

[zhangqiangoffice]

react-native link react-native-vector-icons solved my problem.

[cristianPerez]

Solved with

react-native link react-native-vector-icons

[tuanluu-agilityio]

These commands resolved my issue:

react-native link react-native-vector-icons
react-native start --reset-cache
react-native run-ios

[Arshiamidos]

just adding manual as @RobbyRob81 said

[jerodgers1]

If you have tried everything and its still not working I suggest rechecking the spelling of the fonts you declare in Info.plist
"typos are evil"

[vemundeldegard]

I have tried everything here, and nothing works.

Unrecognized font family 'FontAwesome'

+[RCTFont updateFont:withFamily:size:weight:style:variant:scaleMultiplier:]
    RCTFont.mm:325
-[RCTTextAttributes effectiveFont]
-[RCTTextAttributes effectiveTextAttributes]
-[RCTBaseTextShadowView attributedTextWithBaseTextAttributes:]
-[RCTTextShadowView attributedTextWithMeasuredAttachmentsThatFitSize:]
-[RCTTextShadowView textStorageAndLayoutManagerThatFitsSize:exclusiveOwnership:]
RCTTextShadowViewMeasure
YGNodeWithMeasureFuncSetMeasuredDimensions(YGNode*, float, float, YGMeasureMode, YGMeasureMode, float, float)
YGNodelayoutImpl(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, YGConfig*)
YGLayoutNodeInternal(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, char const*, YGConfig*)
YGNodeComputeFlexBasisForChild(YGNode*, YGNode*, float, YGMeasureMode, float, float, float, YGMeasureMode, YGDirection, YGConfig*)
YGNodeComputeFlexBasisForChildren(YGNode*, float, float, YGMeasureMode, YGMeasureMode, YGDirection, YGFlexDirection, YGConfig*, bool, float&)
YGNodelayoutImpl(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, YGConfig*)
YGLayoutNodeInternal(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, char const*, YGConfig*)
YGNodeComputeFlexBasisForChild(YGNode*, YGNode*, float, YGMeasureMode, float, float, float, YGMeasureMode, YGDirection, YGConfig*)
YGNodeComputeFlexBasisForChildren(YGNode*, float, float, YGMeasureMode, YGMeasureMode, YGDirection, YGFlexDirection, YGConfig*, bool, float&)
YGNodelayoutImpl(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, YGConfig*)
YGLayoutNodeInternal(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, char const*, YGConfig*)
YGNodelayoutImpl(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, YGConfig*)
YGLayoutNodeInternal(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, char const*, YGConfig*)
YGDistributeFreeSpaceSecondPass(YGCollectFlexItemsRowValues&, YGNode*, YGFlexDirection, YGFlexDirection, float, float, float, float, float, bool, YGMeasureMode, bool, YGConfig*)
YGResolveFlexibleLength(YGNode*, YGCollectFlexItemsRowValues&, YGFlexDirection, YGFlexDirection, float, float, float, float, float, bool, YGMeasureMode, bool, YGConfig*)
YGNodelayoutImpl(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, YGConfig*)
YGLayoutNodeInternal(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, char const*, YGConfig*)
YGNodelayoutImpl(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, YGConfig*)
YGLayoutNodeInternal(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, char const*, YGConfig*)
YGNodelayoutImpl(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, YGConfig*)
YGLayoutNodeInternal(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, char const*, YGConfig*)
YGNodelayoutImpl(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, YGConfig*)
YGLayoutNodeInternal(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, char const*, YGConfig*)
YGNodelayoutImpl(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, YGConfig*)
YGLayoutNodeInternal(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, char const*, YGConfig*)
YGNodelayoutImpl(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, YGConfig*)
YGLayoutNodeInternal(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, char const*, YGConfig*)
YGNodelayoutImpl(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, YGConfig*)
YGLayoutNodeInternal(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, char const*, YGConfig*)
YGNodeAbsoluteLayoutChild(YGNode*, YGNode*, float, YGMeasureMode, float, YGDirection, YGConfig*)
YGNodelayoutImpl(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, YGConfig*)
YGLayoutNodeInternal(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, char const*, YGConfig*)
YGNodelayoutImpl(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, YGConfig*)
YGLayoutNodeInternal(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, char const*, YGConfig*)
YGNodelayoutImpl(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, YGConfig*)
YGLayoutNodeInternal(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, char const*, YGConfig*)
YGNodelayoutImpl(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, YGConfig*)
YGLayoutNodeInternal(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, char const*, YGConfig*)
YGNodelayoutImpl(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, YGConfig*)
YGLayoutNodeInternal(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, char const*, YGConfig*)
YGNodelayoutImpl(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, YGConfig*)
YGLayoutNodeInternal(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, char const*, YGConfig*)
YGNodeCalculateLayout
-[RCTShadowView layoutWithMinimumSize:maximumSize:layoutDirection:layoutContext:]
-[RCTRootShadowView layoutWithAffectedShadowViews:]
-[RCTUIManager uiBlockWithLayoutUpdateForRootView:]
-[RCTUIManager _layoutAndMount]
-[RCTUIManager batchDidComplete]
__32-[RCTCxxBridge batchDidComplete]_block_invoke
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_queue_serial_drain
_dispatch_queue_invoke
_dispatch_root_queue_drain
_dispatch_worker_thread3
_pthread_wqthread
start_wqthread

Also tried to install another libary, that doesn't work either.

[SupriyaKalghatgi]

@vemundeldegard try the above mentioned solutions

[maniyarpayal]

@sravindravmd Thanks. Your solution works for me.

[stepheljobs]

This works for me adding the fonts manually on the Build Phase tab of the xcode then run the it on xcode manually.

[pinchez254]

The problem is with native-base Title, nativ- base uses custom fonts , import Text from react-native and style it to be a title instead if you are having trouble especially if you are are using expo

[shaynos]

I had this problem on a new react native project. I ran the project on the simulator through Xcode and it ran properly after that

[mahdi4187]

react-native link

[arhmnsh]

I'd tried all the steps mentioned in above comments like:

close running packager
run react-native link react-native-vector-icons
and run react-native start --reset-cache
Finally use react-native run-ios

Was still facing the issue.
I then restarted terminal, Xcode, simulator. It worked!

[AbdelkarimGhaouri]

Hello Guys

Still facing this error more than 3 months i have tried all things, Please can someone help me to fix this please, I'm so confused.

the most screens of my application are using native-base :/

Also - Im using Visual Studio Code & windows device.

Please Advice !!

[forbesgillikin]

I was having this problem today on a fresh React Native install. I solved this issue by using the Legacy Build System in xCode instead of the default New Build System. You can change your build system settings by navigating to File > Project Settings > Shared Project Settings > Build System.

[pinchez254]

This mainly happens due to use of Icons from native base ... try to use
react-native vector icons or @expo vector icons.

On Tue, Jan 29, 2019 at 7:15 PM forbesgillikin [e-mail]
wrote:

I was having this problem today on a fresh React Native install. I solved
this issue by using the Legacy Build System in xCode instead of the default
New Build System. You can change your build system settings by navigating
to File > Project Settings > Shared Project Settings > Build System.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/GeekyAnts/NativeBase/issues/72#issuecomment-458602059,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AlWEKgupti3GxQZno0QmYUnricOquic4ks5vIHONgaJpZM4JR8Lc
.

[pinsoneatra]

try to delete ios/build, and rebuild by react-native run-ios.
that solved my problem.

[seunex]

If your iOS project is using CocoaPods (contains Podfile) and linked library has podspec file, then react-native link will link the library using Podfile.

Add the comment below to the bottom of your podfile.

# Add new pods below this line

Then run "react-native link [package_name]"

This works for me.

[lucasghelal]

easy solution

run

expo install expo-font

[codler]

Run react-native link then react-native run-ios

[eddyfrank]

For RN 0.60+ don't use react-native link ...! (see Autolinking)

Instead add this in your Podfile:

pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

and run pod update (or pod install).

Furthermore add this in your Info.plist:

<key>UIAppFonts</key>
<array>
  <string>AntDesign.ttf</string>
  <string>Entypo.ttf</string>
  <string>EvilIcons.ttf</string>
  <string>Feather.ttf</string>
  <string>FontAwesome.ttf</string>
  <string>FontAwesome5_Brands.ttf</string>
  <string>FontAwesome5_Regular.ttf</string>
  <string>FontAwesome5_Solid.ttf</string>
  <string>Foundation.ttf</string>
  <string>Ionicons.ttf</string>
  <string>MaterialIcons.ttf</string>
  <string>MaterialCommunityIcons.ttf</string>
  <string>SimpleLineIcons.ttf</string>
  <string>Octicons.ttf</string>
  <string>Zocial.ttf</string>
</array>

(took from https://github.com/oblador/react-native-vector-icons#option-with-cocoapods)

Works fine in my project with:

"react": "16.9.0",
"react-native": "0.61.1",
"native-base": "2.13.8" ([email protected]),

[Bioinformatics-Surgeon]

Screen shot for adding Ionicons.ttf to Info.plist

xcode 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:

[alexandermckay]

Simply add the missing font to your ios/project_name/Info.plist file.

Don't worry about using react-native link this is automatically taken care of in newer versions (from 0.60) and messing around with linking can create annoying bugs.

I only use Material Community Icons so I can ignore the other icon fonts.

<key>UIAppFonts</key>
<array>
  <string>MaterialCommunityIcons.ttf</string>
</array>

One thing to be aware of is react-native unlink react-native-vector-icons clears the UIAppFonts array so unlink first, then edit Info.plist.

[kigh143]

I had the same problem, I fixed buy running run react-native link react-native-vector-icons

[thangpq]

2. react-native link react-native-vector-icons

Hi All,
I was having same problem and resolved by doing this.

1. close running packager
2. run react-native link react-native-vector-icons
3. and run react-native start --reset-cache
4. Finally use react-native run-ios

Perfect answer ! You helped me much !!!! Thanks you

[ugurcanalyuz]

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-icons because my RN >= 0.29.

Thanks, now working my project!