react native how to pass this.state to tabBarComponent - reactjs

Question

I customize TabBarCompenet and trying to pass cart value so that could keep updated cart on value change. But app throws error
Undefined is not an object '_this.state.cartAmount'
App.js
var {height, width} = Dimensions.get('window');
const DashboardTabNavigator = createBottomTabNavigator({
Tab1: {screen: FoodCategoryStack},
Tab2: {screen: EventsStack}
},
{
tabBarComponent:({ props }) => (
<AddTabButton {...props} cartAmount={this.state.cartAmount} />
)});
const DashboardStackNavigator = createStackNavigator({
DashboardTabNavigator: DashboardTabNavigator
},
{
defaultNavigationOptions: ({ navigation }) => {
return {
header: null,
headerLeft: <MaterialIcons
onPress={() => navigation.openDrawer()}
style={{ paddingLeft: 10 }}
name="menu"
size={30}
/>
};
}
}
);
const CustomDrawerComponent = (props) => (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ height: 150, backgroundColor: 'white', alignItems: 'center', justifyContent: 'center', marginTop: 20 }}>
</View>
<ScrollView>
<DrawerItems {...props} />
</ScrollView>
</SafeAreaView>
)
const AppDrawerNavigator = createDrawerNavigator({
Home: {
screen: DashboardStackNavigator,
},
Events: {
screen: EventScreen
}
},
{
contentComponent: CustomDrawerComponent,
drawerWidth: width * 0.85
});
const AppSwitchNavigator = createSwitchNavigator({
Welcome: { screen: splashScreen },
Dashboard: { screen: AppDrawerNavigator }
});
const AppContainer = createAppContainer(AppSwitchNavigator);
export default class App extends React.Component {
constructor(props){
super(props)
this.state = {
cartAmount: '18.50'
}
}
componentWillMount() {
console.log('componentWillMount Tab View')
}
componentDidMount() {
console.log('componentDidMount Tab View')
console.log(this.state.cartAmount)
}
HandleTabPressOne () {
console.log('Cart function called')
this.setState({ cartAmount: '12.20' });
alert(this.state.cartAmount)
}
render() {
return ( <AppContainer{...this.props} />);
}
}
AddTabButton.js
import React, {Component} from 'react';
import {StyleSheet, Animated, Text, TouchableOpacity, View, Dimensions} from "react-native";
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
var {height, width} = Dimensions.get('window');
const AddTabButton = (props) => {
return (
<View style={{flex: 0.1, backgroundColor: '#FF0000', borderColor: '#FF0000', borderWidth: 1}}>
<View style={{flexDirection:'row', justifyContent: 'space-around', alignItems: 'center', paddingTop: 5}}>
<TouchableOpacity onPress={() => navigation.navigate('Tab1')} style={{alignItems: 'center', marginLeft: 5}}>
<MaterialIcons name="local-pizza" size={24} color="#FFFFFF" />
<Text style={styles.textFAB}>Menu</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.HandleTabPressOne}style={{alignItems: 'center'}}>
<MaterialIcons name="event-available" size={24} color="#FFFFFF" />
<Text style={styles.textFAB}>Event</Text>
</TouchableOpacity>
<View style={styles.cartFAB}>
<MaterialIcons name="shopping-basket" size={24} color="#FFFFFF" style={{marginTop: 10}} />
<Text style={styles.totalCart}>$ {(this.props.cartAmount != null) ? this.props.cartAmount : '12.55'}</Text>
</View>
</View>
</View>
);
};
export default AddTabButton;

Answer 1

As per suggestion of Andrew I implemented redux to overcome the scenario.