React Navigation: Prevent multiple instances to navigate to same screen

Question

Let's say I have this screen:

And when the user clicks on the white tooltip, it redirects to another screen. Sometimes the app lags a little bit, and clicking on the tooltip takes like ~2s to see the screen change. The problem is, during those 2s, the user taps again on this tooltip to make it happen.

And the result I get is that there are two instances of the new screen in my StackNavigator. What I mean is that I see my new screen, but when I click on "Back" I don't return to this 'Hitchhiking Map' screen, but to another instance of that same screen.

If I clicked 5 times on the callout during those 2s, then I need to click 5 times "Back" to return to the Map screen. Any way to prevent that? To put only one instance into the StackNavigator?

I am using React Navigation, more precisely a StackNavigator. Here's my code:

The "click on tooltip" part:

<MapView.Marker
  onCalloutPress={() => this.props.navigation.navigate('spotDetails', { spotId: marker.id })}
/>

My screens:

const HMapNavigator = StackNavigator({
  HMap: { screen: HMapViewContainer },
  spotDetails: { screen: SpotDetailsViewContainer },
});

Answer 1

The issue of multiple navigations has been reported and there is more detail here.

react-navigation (v1.0.0-beta.7) is in beta and still being built, so until this feature is implemented, you will have to handle the debounce manually.

options

• disable the button once the navigation starts
• debouncing in the onPress logic or in the action if you are using redux

lodash provides a useful debounce utility, if you are looking for one.