React-native-navigation: TopBar button throttling

[guyca]

The problem

Clicking on TopBar buttons multiple times, emits multiple click events which is undesirable. Ideally we would want the button to be disabled until the onClick logic (both native and in Js) completes.

Proposed solutions

1. Time based throttling
   The naive approach is to throttle based on some arbitrary time frame, 300 ms for example. This approach is flawed due to the asynchronous nature of RN as some screens might take much longer to render then 300 ms.

2. Throttling based on button props (options) #256
   Again, this approach suffers from the same drawbacks, making it more of a workaround then a solution.

3. Disable buttons until action completes

4. When declaring a button, we can assign it a navigationCommand (push, showModal, mergeOptions etc). Since commands return promises, we can disable the button until the promise is resolved. As a bonus, this method lets us avoid the round trip over the bridge when clicking buttons.

• If the click is handled in Js, we can append an actionId to Js and have Js report when the action is complete. While the action is not complete, disable the button.

I'm opening the issue with the hope someone can propose a better solution, Until then I think we should go with option 3. This task hasn't been prioritised yet, but if you'd like to contribute please comment here or reach out on Discord.

[sorodrigo]

Happy to help! I just realised this is tagged as v2, will there be a v1 fix too?

[guyca]

Hey @sorodrigo 👋
We've stopped maintaining v1, so the sort answer is no. Meanwhile, If you're interested, you can migrate to v2 easily using this library.

[sorodrigo]

Didn't know about that lib, thanks! Will come back when we've migrated to v2 😛

[pribeh]

Sorry for the dumb question, but any update on this?

[guyca]

@pribeh This issue will be prioritized in the coming weeks. We're going to draw a roadmap for the upcoming quarter soon and this issue will be definitely be high priority.

[pribeh]

Wicked. We implemented a debounce which is working for now, but, as you pointed out, it's not ideal.

[meznaric]

Any updates?

[zabojad]

I've been using lodash.throttle directly on the navigationButtonPressed method and it works like a charm. Why did you decide to support throttling in rnn for the topbar buttons?

[nitzandayzz]

Any updates regarding this issue? Still happens on Android with RNNv2

[gaguirre]

I've experienced some issues related to this but just on Android.
For instance, if you push a screen that has the back button in the top bar and during the animation you press that button, then the push is cancelled but the options are not reset.
In iOS this is prevented disabling the back button during the animation.

I'd love to help on this, but don't know if v2 is still supported. @guyca

[markmoomoo]

I created an HOC including a debounce function to stop multiple clicks for them, the issue still existing in V4 (4.8.1 what i am using now) - BTW, this is Android only problem

[akemys]

can you share your HOC code?
@markmoomoo

[keeprock]

can you share your HOC code?
@markmoomoo

https://medium.com/@devmrin/debouncing-touch-events-in-react-native-prevent-navigating-twice-or-more-times-when-button-is-90687e4a8113