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 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 }) => ,
        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: {
        //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 (
            
                
                
            
        );
    }
}