React Native - Change background color in tabnavigator dynamically

Question

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

_TabNavigator.js

cons         


        

Answer 1

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 }) => ,
        navigationOptions: {
            tabBarLabel: 'ScreenOne',
            tabBarIcon: ({ tintColor }) => (
                
                     ScreenOne
                
            )
        }
    },
    ScreenTwo: {
        screen: ({ navigation, screenProps }) => ,
        navigationOptions: {
            tabBarLabel: 'ScreenOne',
            tabBarIcon: ({ tintColor }) => (
                
                    ScreenTwo
                
            )
        }
    },
    ScreenThree: {
        screen: ({ navigation, screenProps }) => ,
        navigationOptions: {
            tabBarLabel: 'Notifications',
            tabBarIcon: ({ tintColor }) => (
                
                     ScreenThree
                
            )
        }
    },
    },
     {

        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 ;
        };

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