react-navigation: How to change tabBar color based on current tab
10,330
import React from 'react';
import { Image, View } from 'react-native';
import { StackNavigator, TabNavigator, TabBarBottom } from 'react-navigation';
const Screen = () => <View />;
const Tabs = TabNavigator(
{
Tab1: {
screen: Screen,
navigationOptions: {
title: 'Tab1',
tabBarIcon: ({ tintColor }) =>
(<Image
source={require('../images/iconNotificationNew.png')}
style={[{ tintColor }]}
/>),
},
},
Tab2: {
screen: Screen,
navigationOptions: {
title: 'Tab2',
tabBarIcon: ({ tintColor }) =>
(<Image
source={require('../images/iconNotificationNew.png')}
style={[{ tintColor }]}
/>),
},
},
Tab3: {
screen: Screen,
navigationOptions: {
title: 'Tab3',
tabBarIcon: ({ tintColor }) =>
(<Image
source={require('../images/iconNotificationNew.png')}
style={[{ tintColor }]}
/>),
},
},
},
{
lazy: true,
tabBarComponent: props => {
const backgroundColor = props.position.interpolate({
inputRange: [0, 1, 2],
outputRange: ['orange', 'white', 'green'],
})
return (
<TabBarBottom
{...props}
style={{ backgroundColor: backgroundColor }}
/>
);
},
swipeEnabled: true,
animationEnabled: true,
tabBarPosition: 'bottom',
initialRouteName: 'Tab2',
tabBarOptions: {
activeTintColor: 'blue',
inactiveTintColor: 'grey',
},
},
);
Output
Author by
sigmazen
Updated on June 26, 2022Comments
-
sigmazen almost 2 years
I'm getting started with react-navigation.
How do I change the tabBar background color when I change tab?Here is some pseudo-code showing what I'm hoping for:
_backgroundColor = function() { switch (this.routeName) { case 'tabHome': return { backgroundColor: '#002663' }; case 'tabRewards': return { backgroundColor: '#3F9C35' }; default: return { backgroundColor: 'white' } } } // Tabs setup export const TabStack = TabNavigator({ tabHome: { screen: HomeStack, }, tabRewards: { screen: RewardsStack, }, }, { tabBarOptions: { style: _backgroundColor(), } });
At the minute it's always defaulting to white ( which is fine because my code is wrong :-) so how do I pass in something which triggers this logic either on routeName or iconLabel or whatever.
Any help would be most appreciated.
Thanks in advance.
Cheers -
sigmazen over 6 yearsFantastic :-) Thank you so very much @AshokR . The expo snack is a really nice treat as well
-
sejn about 4 years@Ashok R I need to change the activeTint color to different colors. How can I achieve that
-
sejn about 4 yearsChanged by adding tabBarOptions in the components