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
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.