Styling Bottom-Tabs for Native iOS and Android

[nuno-vicente]

Hi team 👋

I'm working on a local patch (for react-navigation/bottom-tabs & react-native-screens) that enables additional styling on native iOS and Android.
I'm interested to know if these changes align with your vision or if you're open to supporting/maintain such modifications.

On iOS, while the system supports base64 image icons, it primarily uses UITabBarController which only displays UIImage, limiting the styling possibilities. I've successfully created a patch where I use UIGraphicsImageRenderer, allowing icon corner radius adjustment. Displaying rounded images on the tab bar.

Concerning Android, BottomNavigationView appears to apply universal tinting to all icon types on the bottom tab due to the setTintList() call from Material. Is there a plan to support the tinted property from the icon's 'image' type on Android? For image cases, I'm exploring the option of encapsulating the bitmap in a custom Drawable to prevent undesired tinting.

I'm very interested to hear your thoughts and feedback on these matters.

[kkafar]

That's a valid question. Since this topic is duplicated - here and on SWM discord, I'll redirect the conversation there.

For anyone interested, please navigate to https://discord.com/channels/464786597288738816/1341714352226570240/1475846739519865075

This is Software Mansion's discord: https://discord.gg/pHQMN2s2

[LouisR-P]

On iOS, while the system supports base64 image icons, it primarily uses UITabBarController which only displays UIImage, limiting the styling possibilities. I've successfully created a patch where I use UIGraphicsImageRenderer, allowing icon corner radius adjustment. Displaying rounded images on the tab bar.

Hi @nuno-vicente & @kkafar, any news on that UIGraphicsImageRenderer patch? Did it end up anywhere public, or did the Discord thread reach a conclusion? I'm hitting the same wall: a round avatar as a tab icon on iOS.