Unrecognized font family ‘Ionicons’

I’ve tried to import like those below:

// import Icon from ‘react-native-vector-icons/dist/FontAwesome’;
// import Icon from ‘react-native-vector-icons/FontAwesome’;
import Icon from ‘react-native-vector-icons/Ionicons’;

all comes up ‘Unrecognized font family XXX’
none is useful, how to import Icon?

2 thoughts on “Unrecognized font family ‘Ionicons’

  1. @davekedar run react-native link react-native-vector-icons, and after the run link command, run this command:
    watchman watch-del-all && npm start --reset-cache, and try run on simulator again.

  2. I got this error “Unrecognized font family ‘Ionicons'” and then, I went to my xcode > myproject > info.plist > Fonts provided by application and add all the vectors icon manually; AntDesign.ttf, FontAwesome.ttf, Ionicons.ttf, etc. After that, I run my project and the error gone.

Comments are closed.

Unrecognized font family ‘Ionicons’

I’ve tried to import like those below:

// import Icon from ‘react-native-vector-icons/dist/FontAwesome’;
// import Icon from ‘react-native-vector-icons/FontAwesome’;
import Icon from ‘react-native-vector-icons/Ionicons’;

all comes up ‘Unrecognized font family XXX’
none is useful, how to import Icon?

2 thoughts on “Unrecognized font family ‘Ionicons’

  1. @davekedar run react-native link react-native-vector-icons, and after the run link command, run this command:
    watchman watch-del-all && npm start --reset-cache, and try run on simulator again.

Comments are closed.

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:
screen shot 2016-07-21 at 11 43 59 am

Any suggestions? Should I try to link native-base manually following the instructions in the docs?

18 thoughts on “Unrecognized font family ‘Ionicons’

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

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

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

  4. 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
  5. 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
    
  6. @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 .

  7. I had the same issue.

    Solved by running first Link

    react-native link
    

    Then restart,

    react-native run-ios
    
  8. 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

  9. These commands resolved my issue:

    react-native link react-native-vector-icons
    react-native start --reset-cache
    react-native run-ios
  10. 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
    
    

    skjermbilde 2018-08-04 kl 18 21 52
    skjermbilde 2018-08-04 kl 18 22 08

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

  11. 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" (react-native-vector-icons@6.6.0),
    

Comments are closed.