How do i pass value from screen to bottomtab icon badge? - react-native

Question

I want to be able to have badges for one of the icons for my bottom tabs (Reminders) but i do not know how to pass the value such that the badge will show the number from the value given from the reminderscreen.
So how would I go about this? Im quite confused with how react navigation works. Any help would be much appreciated! Thanks!
In App.js
const TabStack = createBottomTabNavigator(
{
Home : { screen: HomeStack },
Reminders: { screen: ReminderStack,
navigationOptions: ({ screenProps }) => ({
tabBarIcon: ({tintColor}) =>
<View style={{flexDirection: 'row',alignItems: 'center',justifyContent: 'center',}}>
<IconBadge
MainElement={
<View style={{
marginRight:15
}}>
<Ionicons name={`ios-alarm`} size={30} color={tintColor} />
</View>
}
BadgeElement={
<Text style={{color:'#FFFFFF'}}>{screenProps.notifCount}</Text>
}
Hidden={true}
IconBadgeStyle={
{width:20,
height:20,
backgroundColor: 'red'}
}
/>
</View>
})
},
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state;
let IconComponent = Ionicons;
let iconName;
if (routeName === 'Home') {
iconName = `ios-home`;
} else if (routeName === 'Reminders') {
iconName = `ios-alarm`;
}
return <IconComponent name={iconName} size={25} color={tintColor} />;
},
}),
tabBarOptions: {
activeTintColor: '#0892d0',
inactiveTintColor: 'gray',
},
}
);
In ReminderScreen.js
import React from 'react';
import { Text, View, TouchableOpacity, StyleSheet,Image,ScrollView,Dimensions} from 'react-native';
import { ListItem, withBadge,Badge, } from 'react-native-elements';
import { Container, Header, Tab, Tabs, ScrollableTab } from 'native-base';
import R_Equipment from './rEquipmentTab';
import R_Room from './rRoomTab';
import axios from 'axios';
export default class ReminderScreen extends React.Component {
render() {
return (
//I want to pass a notifCount variable back to Tabstack
//e.g. notifCount = 5
<Container>
<Tabs renderTabBar={()=> <ScrollableTab />}>
<Tab heading="Rooms">
<R_Room navigation={this.props.navigation} />
</Tab>
<Tab heading="Equipment">
<R_Equipment navigation={this.props.navigation} />
</Tab>
</Tabs>
</Container>
);
}
}
const styles = StyleSheet.create({
displayImage: {
height: 50,
width: 100,
borderRadius: 10,
},
});

Answer 1

You can send it as parent to child, or you can use state, if it's easier you can use Redux
//This use vanilla.js or state common
<YourComponent = badgeData={this.state.badgedata} />
// In your second class/child, get the data as props
this.props.badgeData
Or for more detail, you cant follow the link below :
Here