Search code examples
reactjsreact-nativereact-navigationtabnavigator

Preventing bleedthrough of colours on transparent TabNavigator component

I was having a problem rendering text in a TabNavigator with a transparent TabBar, because I wanted to show the background Image. That image was mostly red, and I wanted pure white text for the labels, but they were coming out pink. The problem was that RN was blending then background colour with the text colour. Essentially, RN was not giving the text view 100% opacity.

Solution

  • To fix this, I added 

       backgroundColor: '#ffffff00', 
        opacity:100

    to tabStylein tabBarOptions.