How do I update the tab bar badge in React-Native using react-navigation without the navigation being reloaded?

Question

I'm working on a React-Native application and want to start adding a few extra features like tab bar badges for unread notification and message count.

I am using react-navigation for the tab bar and redux for my state store. I have an unread count in my notification and message states that I am retrieving and using to show the tab bar badge currently in the navigator.

The issue I am having is that I want to decrement the unread count if the user taps on a message or notification (marking it as read). When I do this it reloads the navigation throwing the user back to the main navigation from the screen they are currently on.

I have created a snack showing the issue by having the notification and message details screen have a button that decrements the unread count.

https://snack.expo.dev/@simplytrak/tab-bar-badges

How do I keep the user on the current screen but also update the badge on the tab bar?

Ongo Gablogian · Accepted Answer · 2023-03-07 01:13:18Z

2

I'm not sure if this is "best practice", but I was also able to manually update the badge count by using setOptions() on the navigation prop inside my screen component. This code snippet updates the badge count whenever the state variable, count, changes.

useEffect(() => {
    navigation.setOptions({
      tabBarBadge: count,
    });
  }, [navigation, count]);

https://reactnavigation.org/docs/navigation-prop/

answered Mar 7, 2023 at 1:13

Ongo Gablogian

214 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

satya164 · Accepted Answer · 2021-10-14 21:21:02Z

1

You're creating components inside your AppNavigator component. You need to move them outside.

Sometimes you might have noticed that your screens unmount/remount, or your local component state or the navigation state resets when you navigate. This might happen if you are creating React components during render.

https://reactnavigation.org/docs/troubleshooting/#screens-are-unmountingremounting-during-navigation

answered Oct 14, 2021 at 21:21

satya164

10.2k2 gold badges35 silver badges49 bronze badges

1 Comment

user2482671 Over a year ago

Thanks, @satya164 that worked a treat, I broke each navigation part into its own component!

Collectives™ on Stack Overflow

How do I update the tab bar badge in React-Native using react-navigation without the navigation being reloaded?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related