Closed charlieroth closed 8 years ago
Same problems... also checked xcode. The fonts are already in the build phase
You have restart packager after adding fonts. Close the packager terminal and restart from xcode. Should fix your problem.
Try rnpm link react-native-vector-icons
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
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 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.
react-native link react-native-vector-icons solved my problem.
Only declaring in Info.plist helped http://stackoverflow.com/a/30540901
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
@sravindravmd thank you so much.
@charlieroth You can try to recreate the iOS Scheme on XCode, and run react-native link
or rnpm link
after.
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
react-native link react-native-vector-icons
is working for me thanks.
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.
@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 .
@GeekRishabh I haven't used expo for my project. Is there another method w/o expo?
I had the same issue.
Solved by running first Link
react-native link
Then restart,
react-native run-ios
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..) :(
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
react-native link react-native-vector-icons solved my problem.
react-native link react-native-vector-icons
These commands resolved my issue:
react-native link react-native-vector-icons
react-native start --reset-cache
react-native run-ios
just adding manual as @RobbyRob81 said
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"
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.
@vemundeldegard try the above mentioned solutions
@sravindravmd Thanks. Your solution works for me.
This works for me adding the fonts manually on the Build Phase tab of the xcode then run the it on xcode manually.
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
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
react-native link
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!
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 !!
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.
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 .
try to delete ios/build, and rebuild by react-native run-ios. that solved my problem.
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.
easy solution
run
expo install expo-font
Run react-native link
then react-native run-ios
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),
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:
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
.
I had the same problem, I fixed buy running run react-native link react-native-vector-icons
2. react-native link react-native-vector-icons
Hi All, I was having same problem and resolved by doing this.
- close running packager
- run react-native link react-native-vector-icons
- and run react-native start --reset-cache
- Finally use react-native run-ios
Perfect answer ! You helped me much !!!! Thanks you
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!
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!
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:
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>
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.
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
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"
Here I have a simple component:
I ran![screen shot 2016-07-21 at 11 43 59 am](https://cloud.githubusercontent.com/assets/13981427/17029309/c48ee584-4f38-11e6-8e01-0df6f7dabc8f.png)
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?