Incorrect color of tab bar icon with conditional - Android Bubble Go

I am currently following along with the mobile app development tutorial and testing the app on Bubble Go on both Android and iOS. I’m experiencing an issue with tab bar icon colors that use conditionals, but only on the android version. The phosphor icons initially load in correctly, but when a navigation event occurs, the icon color changes unexpectedly to a version with a black background. I’ve done a little bit of research on the forum and elsewhere online and have found posts suggesting this may be an android specific issue relating to the icon tint. I believe the Bubble team may already know of this bug. I was hoping to confirm this and ask for an update if possible.

Summary

This text will be hidden

Hey,

You can do some tests to check if the problem is cleared.

1 -

  • Instead of using a conditional to change the icon color, try static icons in the desired color for each state.

  • You can swap the icon itself when the condition changes, rather than changing its tint dynamically.

2 -

  • Export your icons in the exact color you want (no transparency) and upload them as images.

  • This bypasses Android’s native icon tinting, which seems to be the culprit.

Please let me know if it helps

1 Like

Rafael, thanks for the suggestions! After some further experimenting, it seems the error arises from the conditional icon change to the filled variant, not the color change. Seeing as this is the case, I’ve just opted to just use the regular version instead, which works as expected with the color change. I’d still be interested to know if this is a known issue by the Bubble team though…

2 Likes

Im experiencing this as well!

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.