React Native - Change background color in tabnavig

Question

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

Answer 1

What you need to do is set your tab component as a function and send the color as a parameter to that function. Try this:

const MyTabnav = color => 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: {
        //use the color you passed in the prop here:
        style: {
            backgroundColor: color,
            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 MyTabNav;

Then where you use MyTabnav pass the color as a param to it. for example

export default class App extends Component<{}> {
    constructor(props) {
        super(props);
        this.state = {
            color: 'black'
        };
    }
    getRandomColor = () => {
        var letters = '0123456789ABCDEF';
        var color = '#';
        for (var i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    };
    onPress = () => {
        this.setState({
            color: this.getRandomColor()
        });
    };
    render() {
        const Tabs = MyTabnav(this.state.color);
        return (
            <View style={{ flex: 1 }}>
                <Button onPress={this.onPress} title="Click me" />
                <Tabs />
            </View>
        );
    }
}

Answer 2

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.