react-nativetabnavigatorstack-navigator

React Native - Change background color in tabnavigator dynamically

i want to change my tab navigator background color dynamically in based on my API response so below is my code

_TabNavigator.js

const MyTabnav = TabNavigator({
ScreenOne: {
    screen: ({ navigation, screenProps }) => <ScreenOneNav screenProps={{ tabbarNavigation: navigation, ...screenProps }} onNavigationStateChange={null} />,
    navigationOptions: {
        tabBarLabel: 'ScreenOne',
        tabBarIcon: ({ tintColor }) => (
            <View style={[styles.tabViewBox]}>
                 <Text style={[styles.tabText, { color: tintColor }]}>ScreenOne</Text>
            </View>
        )
    }
},
ScreenTwo: {
    screen: ({ navigation, screenProps }) => <ScreenOneNav screenProps={{ tabbarNavigation: navigation, ...screenProps, }} onNavigationStateChange={null} />,
    navigationOptions: {
        tabBarLabel: 'ScreenOne',
        tabBarIcon: ({ tintColor }) => (
            <View style={[styles.tabViewBox]}>
                <Text style={[styles.tabText, { color: tintColor }]}>ScreenTwo</Text>
            </View>
        )
    }
},
ScreenThree: {
    screen: ({ navigation, screenProps }) => <StockNotificationNav screenProps={{ tabbarNavigation: navigation, ...screenProps }} onNavigationStateChange={null} />,
    navigationOptions: {
        tabBarLabel: 'Notifications',
        tabBarIcon: ({ tintColor }) => (
            <View style={[styles.tabViewBox]}>
                 <Text style={[styles.tabText, { color: tintColor }]}>ScreenThree</Text>
            </View>
        )
    }
},
},
 {

    tabBarOptions: {

        style: {
            backgroundColor: white,
            height: 55,
            borderTopColor: 'transparent',
            borderTopWidth: 1,
            paddingRight: 10,
            paddingLeft: 10,
            borderTopWidth: 1,
            borderTopColor: grayPlaceHolder
        },
        showLabel: false,
        showIcon : true,
    },
    tabBarComponent : TabBarBottom,

    initialRouteName: 'ScreenTwo',
    tabBarPosition: 'bottom',
    animationEnabled: false,
    swipeEnabled: false
}, []);


var styles = StyleSheet.create({
tabText: {
    fontSize: 10,
    fontWeight: "600",
    flex: 4,
},
tabViewBox: {
    flex: 1,
    alignItems: "center",
},
 tabIcon: {
    flex: 5,
    alignSelf: "center",
    marginTop: 10
  },
});
export default StocksTabNav;

I want to change my tabnavigtor background color in my ScreenTwo.js file which include API response code on it as per that it tabnavigator background color (backgroundColor) should change as black or white as per API response so how can i achieve this? your all suggestions are appreciable

After update code as per Rahul suggests give below warning message

enter image description here

Solution

  • what you can do is make one custom tabBar component and using javaScript immutability concept you can override style of tabBarOptions.

         const MyTabnav = TabNavigator({ScreenOne: {
        screen: ({ navigation, screenProps }) => <ScreenOneNav screenProps={{ tabbarNavigation: navigation, ...screenProps }} onNavigationStateChange={null} />,
        navigationOptions: {
            tabBarLabel: 'ScreenOne',
            tabBarIcon: ({ tintColor }) => (
                <View style={[styles.tabViewBox]}>
                     <Text style={[styles.tabText, { color: tintColor }]}>ScreenOne</Text>
                </View>
            )
        }
    },
    ScreenTwo: {
        screen: ({ navigation, screenProps }) => <ScreenOneNav screenProps={{ tabbarNavigation: navigation, ...screenProps, }} onNavigationStateChange={null} />,
        navigationOptions: {
            tabBarLabel: 'ScreenOne',
            tabBarIcon: ({ tintColor }) => (
                <View style={[styles.tabViewBox]}>
                    <Text style={[styles.tabText, { color: tintColor }]}>ScreenTwo</Text>
                </View>
            )
        }
    },
    ScreenThree: {
        screen: ({ navigation, screenProps }) => <StockNotificationNav screenProps={{ tabbarNavigation: navigation, ...screenProps }} onNavigationStateChange={null} />,
        navigationOptions: {
            tabBarLabel: 'Notifications',
            tabBarIcon: ({ tintColor }) => (
                <View style={[styles.tabViewBox]}>
                     <Text style={[styles.tabText, { color: tintColor }]}>ScreenThree</Text>
                </View>
            )
        }
    },
    },
     {

        tabBarOptions: {

            style: {
                backgroundColor: white,
                height: 55,
                borderTopColor: 'transparent',
                borderTopWidth: 1,
                paddingRight: 10,
                paddingLeft: 10,
                borderTopWidth: 1,
                borderTopColor: grayPlaceHolder
            },
            showLabel: false,


         showIcon : true,
        },

//Here Goes Your CustomTabBar Component 
        tabBarComponent : CustomTabBarComponent,
        initialRouteName: 'ScreenTwo',
        tabBarPosition: 'bottom',
        animationEnabled: false,
        swipeEnabled: false
    }, []);

    CustomTabBarComponent.js

         const TabBar = (props) => {
          const { navigationState } = props;
          let newProps = props;

            newProps = Object.assign(
              {},
              props,
              {
                style: {

         // get value from redux store and set it here 
                  backgroundColor: 'rgba(0,0,0,0.1)',
                  position: 'absolute',
                  bottom: 0,
                  left: 0,
                  right: 0
                },
                activeTintColor: '#fff',
                inactiveTintColor: '#bbb',
              },
            );


          return <TabBarBottom {...newProps} />;
        };

    Now You can connect this CustomTabBarComponent with Redux store and can change the value of whatever Property you want.