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!

score 1 · Accepted Answer · answered Jul 29 '18 at 06:28

1

Updating options for a specific tab

Hope this helps.

answered Jul 29 '18 at 06:28

guy.gc

3,359
2
24
39

I don't think you read my question above completely. Notice that I already use the function in your link. – Kristoph Matthews Jul 31 '18 at 01:08
Right, but you are passing some kind of a layout structure to `mergeOptions` while that method expects a simple options object as second argument. – guy.gc Jul 31 '18 at 04:48
Yes good point. So if I put in a simple options object with a property `bottomTab`, containing an object that contains a property `badge` (just like in the example here: https://wix.github.io/react-native-navigation/v2/#/docs/styling?id=options-object-format), it updates the badge on my first tab (index = 0), but I have no way of updating the badge count on my third tab (index = 2). Is it possible to update the badge count on my third tab using mergeOptions? If so, can you show me a minimal example please? – Kristoph Matthews Aug 01 '18 at 23:54
mergeOptions accepts a componentId as first argument, the bade is updated for the tab this component is located in. If, for example, the componentId represents a component pushed to a stack in the second tab - then the second tab's badge should update. – guy.gc Aug 02 '18 at 14:16
1

This solved it thank you for pointing it out, because it wasn't obvious in the docs. It's working perfectly now. – Kristoph Matthews Aug 08 '18 at 19:53
@guy.gc perfect clear, your link was updated to : https://wix.github.io/react-native-navigation/#/docs/layout-types?id=updating-options-for-a-specific-tab! Without the v2, may you could update it. – Cassio Seffrin Jan 05 '19 at 13:57

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

1 Answers1