React-Native-Navigation (WIX) : How do I update the badge count for a bottomTab?

Question

I am using the Navigation.mergeOptions() function to try to update the badge count of the third tab (tabindex = 2), however, the badge count is not updating. Here's what my original layout object looks like for setRoot:

{
    root: {
        bottomTabs: {
            children: [
                {
                    stack: {
                        children: [
                            {
                                component: {
                                    name: 'navigation.main.Dispensaries',
                                },
                            }
                        ],
                        options: {
                            topBar,
                            bottomTab: NavStyles.tab('Dispensaries', dispensariesTabIcon),
                        }
                    }
                },
                {
                    stack: {
                        children: [
                            {
                                component: {
                                    name: 'navigation.main.Orders',
                                },
                            }
                        ],
                        options: {
                            bottomTab: NavStyles.tab('My BudBuddy', myBudbuddyTabIcon),
                            topBar,
                        }
                    }
                },
                {
                    stack: {
                        children: [
                            {
                                component: {
                                    name: 'navigation.main.Checkout',
                                },
                            }
                        ],
                        options: {
                            bottomTab: NavStyles.tab('Bag', bagTabIcon, badge),
                            topBar,
                        }
                    }
                },
            ], options: {
                //topBar,
                bottomTabs: {
                    currentTabIndex: 0,
                },
            },
        },
    }

Then, in one of my components, I did this, but it causes no effect on the badge count:

Navigation.mergeOptions(this.props.componentId, {
            bottomTabs: {
                children: [
                    {}, {},
                    {
                        stack: {
                            options: {
                                bottomTab: {
                                    badge: '31',
                                },
                            },
                        },
                    },
                ],
            },
        });

I'm quite sure that's wrong, and I even tried replicating the original layout object in the first code block above, except with a different badge count, and it doesn't do anything. Any ideas? Thank you!

Answer 1

Updating options for a specific tab

Hope this helps.