React Native Text Inline Image
A few months ago I was assigned to fix a bug where one of our images were displayed really small in Android app, but it was render fine in iOS. Like most of other React Native apps we shared a lot of the code between iOS and android apps, so my main thinking was how come it suddenly started to happen. I remember that a few weeks before we upgraded our app to React Native 0.41 version, so maybe it was related.
I took a deep look into our source code and the bug was getting present with an Image wrapped inside of a Text view. If you didn’t know that is posible, React Native supports inline views/images inside of Text views, it looks something like this:
This is how it looks once you run the app:
But for android that image is not getting scale the same way it gets scale for iOS, imagine you use this for a tooltip icon of 20x20, for android it ends up rendering just a little dot on the phone screen!
After some debugging into React Native code I find out that the issue was related to scaling Image properly for based on the device pixel ratio. You can see more details about this issue here.
I’ll explain really quick the issue, previous version of React Native it used to take into account the Pixel Ratio of the device when setting the size of the inline image before getting paint into the screen. After some refactoring to the way that logic it’s handle inside of react native for some other fixes scaling the image was omitted. So for android it will not longer scale the inline images instead it uses the raw width and height with no other special treatment.
So, to fix this bug we will need to check for the platform environment and apply a multiplier based on the Pixel ratio for the width and height of the image.
This is how a fix may look like:
Manually applying the Pixel Ratio based on the Platform fixed the Inline image scaling, yeah!
Unfortunately until now React Native has not fixed this behavior, and having this logic spread across the app is not sustainable. So why not creating an InlineImage component that can abstract this logic so it can be reused in other places.
Now we can go back an just replace the regular Image component with our InlineImage like this:
This is a very nice way to fix a bug, creating a component that can be reused for the future while React Native comes up with a fix for inline images on android.
For now we are using InlineImage component in our app, hopefully not not too much time, but who knows? Feel free to use it in you app if you come across this issue.