React-native-vector-icons: FontAwesome5Pro Icons are not respecting "solid" style

[willcosgrove]

I'm using the FontAwesome5Pro icon set, which comes with solid, regular, and light variants, with "regular" being the default.

I have several icons which I specify as being "solid" and those icons will randomly render as "regular". The solid flag is hard coded (not wired up to any kind of state) so they should never be "regular". Not all of the icons in my app will flip from solid to regular. But once an icon has flipped, it doesn't appear to ever go back to rendering as solid.

I'm not sure where to begin to debug this issue. @hampustagerud I know you've been the primary dev on the FontAwesome pack. Is there anything I can provide which would help narrow this problem down? Have you noticed any similar problems in your use of the icons?

Thanks!

[willcosgrove]

It seems to flip styles when the app is backgrounded and then resumes.

[hampustagerud]

The tests I did when developing it have not shown any similar behaviour but then again I never closed and opened the app again. I have tried it just now but I don't seem to loose my solid style (on iOS). Is this problem occurring on Android and/or iOS? Development/Release mode? Is it happening every time you close the app or just sometimes? Some help reproducing the issue would be awesome 🙂

The iOS implementation is a bit hacky, due to the way fonts are handled, which is why I guess it could be a little volatile. The Android version, however, should not be since it is just using file names and should use the same font every time 🙃

[willcosgrove]

This is on iOS. It happens in development and release mode. Here’s a video of the issue in a release build: http://c.willl.me/tUKq

Notice the solid style on the play/pause and skip buttons. After closing and reopening the app, and then navigating away and back to the screen with the icons, you see them switch to the regular style.

[hampustagerud]

Hmm, that's odd... Are you using any libraries to display the modal with the buttons?

[willcosgrove]

It’s just a react navigation screen. It doesn’t seem to happen to the icons in the header any more, but it used to. I’m not sure what changed. Sorry, I know this isn’t very helpful 😔

[willcosgrove]

I’ll also add that I was experiencing this behavior on day one of working on this app. It was created with the Ignite CLI. It had this library included with it, I upgraded it to 5.0.0 to use FontAwesome 5 Pro, and was immediately noticing solid icons changing style on app close and reopen. So I would be surprised if it was another dependency that was causing the issue.

Let me know if you think of anything else I can provide to aid in debugging. I’ll go checkout the font loading code and see if anything jumps out at me.

[hampustagerud]

I still can't reproduce this behaviour, even with react navigation... Can you create a minimal example in a repo that I can clone and try out? Just extract the navigation part and create a home screen and an overlay screen with icons (like your example) should do the trick 🙂 Please make sure it works and produces the bug since it seems to elude my attempts to reproduce it 😕

I don't think it is a dependency problem, it is probably something in the iOS implementation, but in order to being able to reproduce the bug I need to know the setup of the project.

[willcosgrove]

Here's a repo I made that is replicating the issue. I put steps to reproduce the issue in the readme: willcosgrove/react-native-icon-bug-replication

Thanks for taking a look at it!

[hampustagerud]

Finally got it running by switching simulators, I usually run the iPhone 6 simulator with iOS 10.3 since its the lowest target on my machine but it worked perfectly every time... Running your example on iPhone X 11.4 indeed causes the bug to appear 🙃 Very interesting indeed but I'll see what I can find out!

[hampustagerud]

So I think I have found the cause (sort of at least) but it is in the React core so not sure how I can fix it (would prefer not having to mess with the core libraries) 🙂 But at least I know where it's failing 👍🏻

[willcosgrove]

😯 wow! You’ve got me curious. What’s the problem? I wonder if it’s been reported to them before

[hampustagerud]

It's not really a problem with the core, it's just that the way the font files are constructed does not fit the font selection process that the core implements. The current workaround doesn't seem to work because iOS/React sometimes resets the font database when closing the app and then it fails. Working on a different workaround instead since I doubt a PR to the core wouldn't be of much interest to facebook 🙂

[willcosgrove]

Thanks for the explanation! And for following up so quickly with me on this issue. Let me know if there's anything I can do to help out!

[hampustagerud]

I have uploaded a fix to my fork but I would like you to try it out before I submit a PR, it is working on my simulators now at least 🙃 You can just replace the standard line in package.json with:

"react-native-vector-icons": "hampustagerud/react-native-vector-icons#fa5-ios-fix"

and it should download the new version when running yarn 🙂 You might have to link it again but I doubt it.

Thank you for working with me, I intend to use these fonts myself soon so I'm just glad I got it working now rather than having to deal with it later 🙂

[willcosgrove]

Giving it a test now! I'll try first without relinking, and if that doesn't work, I'll relink and give it another shot.

[willcosgrove]

Looks like that did the trick! No relinking required, just like you said. Thank you so much for digging into this and getting it fixed so quickly! 🙏

[hampustagerud]

Sweet, I'll make the PR then so the changes get into the master branch 🙃

Thanks for finding this bug, it forced me to come up with a cleaner solution 🙌🏻

[carineli]

Hey @hampustagerud :) Has this fix changed anything else? For me, its defaulting to the 'solid' style now so no access to 'regular' (even when passing light as a prop)? (v6.0.2) - regular is working as expected on android - but not ios

"Regular" only ever appears for me if I delete the solid.ttf.

Many thanks!

[SteffeyDev]

Same issue as @carineli, can only use solid icons, regardless of what I pass in as style.

[FRizzonelli]

For me some icons are rendered as regular (even if I try to specify solid), and other viceversa :(
Any idea?