I'd like to be able to add / remove the badge icon from a BottomTabNavigator based on certain conditions:

  • Badge should clear when associated tab is in focus
  • Badge should reappear when a particular form is filled out on another screen, and when push notifications come in related to this badge

Not sure how to pass state values or retrieve AsyncStorage values within createBottomTabNavigator with my current setup, or if this would even be best practice as I'm not sure that the state within the navigator would ever be updated since the action technically happens outside the scope of the navigator? Really confused.

Navigation stacks are created in router.js

export const AppStack = createBottomTabNavigator({
    Bookings: {
        screen: BookingsScreen,
        navigationOptions: {
            tabBarIcon: ({ tintColor }) => (
                    MainElement={<FontAwesome5Pro name={'inbox'} light size={24} color={tintColor} />}
                    BadgeElement={<FontAwesome5Pro name={'exclamation-circle'} light size={12} color='#1a1a1a' />}
                    Hidden={AsyncStorage.getItem('unreadNotifications') === '0' || AsyncStorage.getItem('unreadNotifications') === undefined}
                        backgroundColor: '#00cccc',
                        marginRight: -20,
                        marginTop: -15,

These stacks are then called by App.js:

export default createAppContainer(createSwitchNavigator(
        App: AppStack,

The idea would be to update a value (like AsyncStorage, for example) that would trigger the badge to be hidden when the screen is in focus:

export default class BookingsScreen extends React.Component {
    constructor(props) {
    _bootstrapAsync = async () => {
        const setNotifications = await AsyncStorage.setItem('unreadNotifications', '0');

What is the best way to pass in and update a (global?) value that can be triggered dynamically to update the badge visibility?

I'm aware of screenProps and HOC but not sure that they would work with this code structure?

0 Answers