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?

CodePudding user response：

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