[Bug] Android's getImageSource returning cropped images

• Review the documentation: https://github.com/oblador/react-native-vector-icons
• Search for existing issues (including closed issues): https://github.com/oblador/react-native-vector-icons/issues

Environment

RN: 0.59.10 react-native-vector-icons: 6.6.0 Target platform: Android

Description

For our app that uses react-native-navigation, we are required to pass images to be used as icons for our bottomTabs. A very common approach is to use this library’s getImageSource function to generate the images. It seems that certain icons are not being generated correctly. Initially I thought it was related to FontAwesome 5 icons which we recently upgraded to but we are not the only ones running into it. (https://github.com/wix/react-native-navigation/issues/4931) and additionally it works perfectly on iOS.

I dove into the code myself, messing around with the getImageForFont Android function (https://github.com/oblador/react-native-vector-icons/blob/master/android/src/main/java/com/oblador/vectoricons/VectorIconsModule.java#L43)

But my knowledge is very limited when it comes to Fonts and how Android’s paint and canvas work. It seems that SVG’s that have a width bigger than height are being cropped incorrectly.

Reproducible Demo

I have confirmed this by doing the following:

loadedIconSource['fa-inbox'] = await FontAwesome.getImageSource('inbox', 24, undefined, FA5Style.solid);

And then using RN’s Image component to render it, (using resizeMode contain to make sure we don’t crop it):

<Image source={loadedIconSource['fa-inbox']} resizeMode="contain" style={{ height: 84, width: 84 }} />

Result is:

How it should look like: https://fontawesome.com/icons/inbox?style=regular

[edferreira]

I’m also having this issue

[ItsNoHax]

@vrgimael That’s not the fix… That’s the commit that broke this in the first place…