React Native Tab bar iOS icon not showing

Question

I have set up a Tabbar IOS and it shows system icons just fine, when i use systemIcon="search" but when i use my own icons with

icon={
   require("./images/home.png")
} 

the icon doesn't show up. The icon is saved as

home.png, home@2x.png & home@3x.png

.

I tried various sizes like

30x30, 60x60, 50x50

but they all just show a grey square which turns blue when selected. The icon is saved as a 24 bit png. Not sure what's wrong with it. I even tried it with different devices on the simulator but all with the same result.

Answer 1

A transparent color in your home image is required. A image with a solid color background is turning gray. The outlines of the icon are important.