How to change the backgroundColor of a Tabnavigator in React-Native

Asked

Viewed 1,164 times

1

class TelaInicial extends Component {
    static navigationOptions = ({ navigation }) => ({
        tabBarLabel: 'Trevo',
        tabBarOptions: {
            activeTintColor: '#fff',
            inactiveTintColor: '#eee',
            showIcon: true,
            showLabel: true,
            animationEnabled: false,
            lazyLoad: true,
            upperCaseLabel: false,
        }
    })

I made this block but continues with the default colors.

react-native

1 answer

1

You can use the property style within the tabBarOptions to set the backgroundColor to your tabBar, just as it shows the documentation of React-navigation.

class TelaInicial extends Component {
    static navigationOptions = ({ navigation }) => ({
        tabBarLabel: 'Trevo',
        tabBarOptions: {
            activeTintColor: '#fff',
            inactiveTintColor: '#eee',
            showIcon: true,
            showLabel: true,
            animationEnabled: false,
            lazyLoad: true,
            upperCaseLabel: false,
            style: { //Adição do style
                backgroundColor: '#00ff00', // Aplicando a cor ao background
            }
        }
    })
}

  • It worked first! Thank you so much! :)

  • @Alinelisboa If it worked as needed and supplied your question, please mark as correct.

Browser other questions tagged react-native

You are not signed in. Login or sign up in order to post.