[Bug] Android's getImageSource returning cropped images
See original GitHub issue- 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
Issue Analytics
- State:
- Created 4 years ago
- Reactions:14
- Comments:22
Top GitHub Comments
I’m also having this issue
@vrgimael That’s not the fix… That’s the commit that broke this in the first place…