search

entria / react-native-fontawesome

React Native Font Awesome Icons
MIT License
176 stars 34 forks source link

Upgraded to 6.0.1 and icons turned into question marks #53

Closed dayhaysoos closed 5 years ago

dayhaysoos commented 5 years ago

I just upgraded to 6.0.1, I downloaded the extra set of files, like fa-brands-400.eot and .tff etc etc

Ran react-native link react-native-fontawesome

closed simulator and react-native run-ios

I am trying to use the Twitter, Twitch and Discord icons. Twitter and Twitch were working just fine before the update, now they are all showing up as question marks.

I went to look at the references/dependencies in Xcode and everything is there just fine. Any ideas?

Thanks in advanced!

leandrosimoes commented 5 years ago

Did you check if you are using the correct IconTypes enum such as IconType.FAR, IconType.FAS or IconType.FAB ?

eathentica commented 5 years ago

Hi, I have almost the same problem. My icons are not question marks but some kind of cross marks.

Here is my build.gradle buildscript { ext { buildToolsVersion = "27.0.3" minSdkVersion = 16 compileSdkVersion = 27 targetSdkVersion = 26 supportLibVersion = "27.1.1" googlePlayServicesVersion = "16.0.0" androidMapsUtilsVersion = "0.5+" } repositories { google() jcenter() } dependencies { classpath 'com.android.tools.build:gradle:3.1.4' classpath 'com.google.gms:google-services:4.0.1' } }

allprojects { repositories { mavenLocal() google() jcenter() maven { url "$rootDir/../node_modules/react-native/android" } maven { url "https://maven.google.com" } } }

task wrapper(type: Wrapper) { gradleVersion = '4.4' distributionUrl = distributionUrl.replace("bin", "all") }

I have to go back to 0.57.4 to get it works. Did I miss out something?

Thanks in advanced!

leandrosimoes commented 5 years ago

Hi, I have almost the same problem. My icons are not question marks but some kind of cross marks.

Here is my build.gradle buildscript { ext { buildToolsVersion = "27.0.3" minSdkVersion = 16 compileSdkVersion = 27 targetSdkVersion = 26 supportLibVersion = "27.1.1" googlePlayServicesVersion = "16.0.0" androidMapsUtilsVersion = "0.5+" } repositories { google() jcenter() } dependencies { classpath 'com.android.tools.build:gradle:3.1.4' classpath 'com.google.gms:google-services:4.0.1' } }

allprojects { repositories { mavenLocal() google() jcenter() maven { url "$rootDir/../node_modules/react-native/android" } maven { url "https://maven.google.com" } } }

task wrapper(type: Wrapper) { gradleVersion = '4.4' distributionUrl = distributionUrl.replace("bin", "all") }

I have to go back to 0.57.4 to get it works. Did I miss out something?

Thanks in advanced!

Hi! Can you provide the code part where you are setting the icon?

eathentica commented 5 years ago

I use FontAwesome everywhere in my code. In Version 0.57.4, for example:

{Icons.chevronLeft}

And it will appear as followed:

screenshot 2018-12-29 at 15 10 32

In Version 6.0.1

{Icons.chevronLeft}

And here is how it looks like:

screenshot 2018-12-30 at 10 04 17

The action buttons on right bottom display correctly, because I use "react-native-vector-icons" there.

I have delete the build folder, clean, rebuild. It did not help. The use of IconType.FAR also does not work.

iOS has no problems!

Best regards, Eathentica

leandrosimoes commented 5 years ago

@eathentica check your font files names and see if they are matching this patterns:

fa_brands_400.ttf fa_regular_400.ttf fa_solid_900.ttf

If not, change them to match exactly as that, because a few versions behind, the font files in fontawesome, had the names separated with underlines, but now, the font files are separated with dashes. I already open a PR to change the Icon.js to match dashes instead underlines, but the PR wasn't merged yet as you can see here: https://github.com/entria/react-native-fontawesome/pull/52

eathentica commented 5 years ago

Hi, I have a look at the assets. There are the following files: FontAwesome.ttf FontAwesome5_Brands.ttf FontAwesome5_Regular.ttf FontAwesome5_Solid.ttf

How do I change their names? Best regards, Eathentica www.eathentica.com

leandrosimoes commented 5 years ago

@eathentica Just change the file name, Android considers the file name and not the font family. You can remove the FontAwesome.ttf file too and let just the other three files, brands, regular and solid.

eathentica commented 5 years ago

Sorry, but I still do not understand what you meant. FontAwesome.ttf ---> ? FontAwesome5_Brands.ttf ---> fa_brands_400.ttf FontAwesome5_Regular.ttf ---> fa_regular_400.ttf FontAwesome5_Solid.ttf ---> fa_solid_900.ttf

Or do I miss something here?

leandrosimoes commented 5 years ago

FontAwesome.ttf ---> ? FontAwesome5_Brands.ttf ---> fa_brands_400.ttf FontAwesome5_Regular.ttf ---> fa_regular_400.ttf FontAwesome5_Solid.ttf ---> fa_solid_900.ttf

Exactly, delete the FontAwesome.ttf file and change the other file names like this:

FontAwesome5_Brands.ttf ---> fa_brands_400.ttf FontAwesome5_Regular.ttf ---> fa_regular_400.ttf FontAwesome5_Solid.ttf ---> fa_solid_900.ttf

rgordon95 commented 5 years ago

const IconTypes = { FAR: Platform.OS === 'ios' ? 'FontAwesome5FreeRegular' : 'fa_regular_400.ttf', FAS: Platform.OS === 'ios' ? 'FontAwesome5FreeSolid' : 'fa_solid_900.ttf', FAB: Platform.OS === 'ios' ? 'FontAwesome5BrandsRegular' : 'fa_brands_400.ttf' }

did not work for me either...

what you must do is download the FA files for desktop and include them within your android package in android/app/src/main/assets/fonts and rename them as advised above (i used .otf like fa_regular_400.ttf)

rajuashok commented 5 years ago

@eathentica check your font files names and see if they are matching this patterns:

fa_brands_400.ttf fa_regular_400.ttf fa_solid_900.ttf

If not, change them to match exactly as that, because a few versions behind, the font files in fontawesome, had the names separated with underlines, but now, the font files are separated with dashes. I already open a PR to change the Icon.js to match dashes instead underlines, but the PR wasn't merged yet as you can see here: #52

This worked for me. Please update your repo's readme with proper files. This link gives files with dashes instead of underscores: https://github.com/FortAwesome/Font-Awesome/releases/download/5.4.1/fontawesome-free-5.4.1-web.zip

deeuu commented 5 years ago

Same for me...hyphen->underscore substitution is necessary.

Please update readme or review the PR.

leandrosimoes commented 5 years ago

I created a PR that solves this issue with hyphens: https://github.com/entria/react-native-fontawesome/pull/61

rgordon95 commented 5 years ago

I would suggest just using react-native-elements or native base as it has better support for FA FA5 and many other icon libraries in one dep.

leandrosimoes commented 5 years ago

I agreed with @rgordon95 about using other alternatives than this repo, because I think that any maintainer is looking for this anymore since FontAwesome/react-native-fontawesome, that I'm using for new projects by the way. I just created this PR because I have some legacy projects that I'm using entria/react-native-fontawesome and I just couldn't change the package right now.

dayhaysoos commented 5 years ago

Switching to FontAwesome/react-native-fontawesome solved my issue