React-native-vector-icons: Icons with greater width than height loaded as image with getImageSource are cropped wrong in Android

[yentheo]

I created an icon font with Icomoon from SVG-files. The font looked great.
I use the IconSet to load the icons in an Image with IconSet.getImageSource. Worked great on iOS, also works great on Android for most of the icons. But as you can see in the next screenshot, not for all:

So this is on Android. For iOS it's like this:

At first, I couldn't, for the life of me, figure out why some icons were cut of and others not. Now looking at the icons that are cut off, I think it has to do with the height and the width. When I look at the font itself, it looks perfectly normal:

But the height of the icon itself is less than the width. So it looks like the Android code just takes the height, just for the pixels that are not "transparent" and also uses this for width and crops the icon.

[yentheo]

https://github.com/oblador/react-native-vector-icons/blob/a76a9a57f6e8087d80cb61ef8f01595d688d2ad7/android/src/main/java/com/oblador/vectoricons/VectorIconsModule.java#L70

I put this code in an Android app (non react native) and it works great.

    val custom_font = Typeface.createFromAsset(assets, "fonts/icomoon.ttf")
    val paint = Paint()
    paint.setTypeface(custom_font)
    paint.textSize = 256f
    paint.setAntiAlias(true)
    val textBounds = Rect()
    val glyph = '\uE90C'
    paint.getTextBounds(glyph.toString(), 0, glyph.toString().length, textBounds)

    val bitmap = Bitmap.createBitmap(textBounds.width(), textBounds.height(), Bitmap.Config.ARGB_8888)
    val canvas = Canvas(bitmap)
    canvas.drawText(glyph.toString(), (-textBounds.left).toFloat(),(-textBounds.top).toFloat(), paint)
    imageView.setImageBitmap(bitmap)

So maybe it's the compressing or something.

[yentheo]

This is so embarrassing... The problem was that the React Native Image-component has the resizeMode to cover by default. Setting it to contain resolved my issue.