search

GeekyAnts / NativeBase

Mobile-first, accessible components for React Native & Web to build consistent UI across Android, iOS and Web.
https://nativebase.io/
MIT License
20.16k stars 2.38k forks source link

Unrecognized font family 'Ionicons' #72

Closed charlieroth closed 8 years ago

charlieroth commented 8 years ago

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?

advany commented 8 years ago

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

sankhadeeproy007 commented 8 years ago

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

olivergeorge commented 8 years ago

Try rnpm link react-native-vector-icons

kumarryogeshh commented 8 years ago
/node_modules/native-base/node_modules/react-native-vector-icons/RNVectorIconsManager/RNVectorIconsManager.h:9:9: 'RCTBridgeModule.h' file not found
himanshu-satija commented 8 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

farruxx commented 7 years ago

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

sravindravmd commented 7 years ago

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 commented 7 years ago

@sravindravmd thank you so much.

clucasalcantara commented 7 years ago

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

nicnilov commented 7 years ago

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 commented 7 years ago

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

AbhayVarshney commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

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

kadharmfn commented 7 years ago

I had the same issue.

Solved by running first Link

react-native link

Then restart,

react-native run-ios
ckim16 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

cristianPerez commented 6 years ago

Solved with

react-native link react-native-vector-icons
tuanluu-agilityio commented 6 years ago

These commands resolved my issue:

react-native link react-native-vector-icons
react-native start --reset-cache
react-native run-ios
arash-hacker commented 6 years ago

just adding manual as @RobbyRob81 said screen shot - - at

jerodgers1 commented 6 years ago

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 commented 6 years ago

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.

SupriyaKalghatgi commented 6 years ago

@vemundeldegard try the above mentioned solutions

maniyarpayal commented 6 years ago

@sravindravmd Thanks. Your solution works for me.

stepheljobs commented 6 years ago

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

screen shot 2018-09-14 at 2 59 24 am

pinchez254 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

react-native link

arhmnsh commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 notifications@github.com 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 commented 5 years ago

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

seunex commented 5 years ago

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 commented 5 years ago

easy solution

run

expo install expo-font

codler commented 4 years ago

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

eddyfrank commented 4 years ago

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),
Bioinformatics-Surgeon commented 4 years ago

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"

Screen Shot 2020-01-17 at 9 02 55 PM

I read through link provided by eddyfrank. (https://github.com/oblador/react-native-vector-icons#option-with-cocoapods) Followed the iOS portion shown below: image

alexandermckay commented 4 years ago

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 commented 4 years ago

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

thangpq commented 4 years ago

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 commented 4 years ago

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!

gabrielmicko commented 3 years ago
UIAppFonts AntDesign.ttf Entypo.ttf EvilIcons.ttf Feather.ttf FontAwesome.ttf FontAwesome5_Brands.ttf FontAwesome5_Regular.ttf FontAwesome5_Solid.ttf Foundation.ttf Ionicons.ttf MaterialIcons.ttf MaterialCommunityIcons.ttf SimpleLineIcons.ttf Octicons.ttf Zocial.ttf

Thanks for this!

anmolagarwal17 commented 3 years ago

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"

Screen Shot 2020-01-17 at 9 02 55 PM

I read through link provided by eddyfrank. (https://github.com/oblador/react-native-vector-icons#option-with-cocoapods) Followed the iOS portion shown below: image

Thanks a lot man 🔥🔥🔥

Also, everyone else, you need to add fonts manually in the ./ios/{yourAppName}/Info.plist file. To add it manually paste the below code in that file (to add all fonts):

<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>
  <string>Fontisto.ttf</string>
</array>

More on it, here

Add it in the file, then check in xcode if fonts were added successfully or not. Also don't forget to close & restart xcode & terminal, that also solves some problems.

Ayzekberk commented 2 years ago

my react version is over 0.6

1) i successfully install vector icons first npm install react-native-vector-icons 2) i did npx pod-install successfully (I don't use react-native link because it gives error and also when i check react-native > 0.6 there is autolinking usage so react-native link not preferable in react-native > 0.6) 3) Than i ran my app with this command npx react-native run-ios --simulator="iPhone 8" 4) in my App.js file there is import like this. Also library shows no error ! import Ionicons from "react-native-vector-icons/Ionicons";

5) But when i want to use ionicons in JSX like this

<Ionicons
              name="information-circle-outline"
              size={40}
              color="blue"
            />

I got this error Unrecognized font family 'Ionicons'

than i ran react-native link react-native-vector-icons

also when i build by linking my build was failed. But when i unlink my build is successfull.

I don't understand where i make a mistake

Also i tried info.plist method again i failed Also i tried xcode build i failed

Ayzekberk commented 2 years ago

Most important think is if you face with this error if react-native version > 0.6;

1) ***** MOST IMPORTANT IS THIS : Don't use reack-native link and unlink your dependecy if you link before react-native unlink react-native-vector-icons

2) you have to link manually. So update under ios folder to your Podfile with your dependency and add below code to podfile

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

3) than update inside of yourinfo.plist file inside ios folder. Add those fonts under <key>UIAppFonts</key>

                 <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>Fontisto.ttf</string>
        <string>Foundation.ttf</string>
        <string>Ionicons.ttf</string>
        <string>MaterialCommunityIcons.ttf</string>
        <string>MaterialIcons.ttf</string>
        <string>Octicons.ttf</string>
        <string>SimpleLineIcons.ttf</string>
        <string>Zocial.ttf</string>

4) dont forget to run pod update inside ios directory on terminal 5) run your app by npx react-native run-ios --simulator="iPhone 8"