Solvedreact native router flux Double-tapping fires Actions twice

Version

Tell us which versions you are using:

  • react-native-router-flux v4.0.17 (v3 is not supported)
  • react-native v0.46.4

Expected behaviour

When an navigation action is fired through an onPress (pop or regular Actions.key) there is no possibility that the navigation action is fired twice. The first press should disable all other presses until the transition is done.

Actual behaviour

When you click a back button or another button to which you have bound a navigation action in rapid succession, the event gets fired twice. When I press the back button twice, I pop two scenes and when I press my own button with an onPress of Actions.key rapidly the scene gets mounted twice, which means I have to go back twice to my original scene.

Steps to reproduce

Really easy: just open the RNRF example and click twice like a madman. Sometimes the events fires once, sometimes twice.

30 Answers

✔️Accepted Answer

This is a workaround I use for the moment:

For every button that triggers a navigation action, you can wrap all of it process in a if condition like so:

if(Actions.currentScene == currentSceneKey) {

// Do your treatement here

}

Where currentSceneKey is the key of the scene from where the action is triggered.

This only triggers once since when you do it for the first time, it is still on the current scene, but for all the other extra taps you could perform, the stack scene is already updated (by adding the new scene you navigate to or by popping the current scene if you navigate back) therefore Actions.currentScene won't be equal to the current scene more than once.

For a cleaner code, I have created a structure that holds all my scene keys I use in Router.js and for this trick, It allows me to easily handle key scene renaming and adding new scenes:

import { sceneKeys } from './const/sceneKeys'

if(Actions.currentScene == sceneKeys.currentSceneKey) {

// Do your treatement here

}

It also work for the header buttons defined directly in the Router.js (I prefer defining them in their own scene trough static navigation).

Note: Works with tabbar scenes too, but be aware that the key generated by Actions.currentScenes for tabbar scenes is the key you specified for it in Router.js prefixed with '_' so be sure to add it in your currentSceneKey

Hope it will help you ;)

Other Answers:

@hammooooody this worked nicely for me.

Read through react-navigation/react-navigation#3393 but couldn't find any built-in way to get it to work - could have missed something obvious...(?)

I'm following your workaround by using a helper file to define a method that can be used globally.

Example Usage

import * as actions from './config/actions';

<TouchableOpacity
    onPress={() =>
        actions.push('venueItemView', { id, summary: this.props.venueData })
    }
>

actions.js (helper file)

import { Actions } from 'react-native-router-flux';

export const push = (destinationScene, props) => {
    // console.log('push', destinationScene, Actions.currentScene, props);
    if (Actions.currentScene === destinationScene) {
        return;
    }
    return Actions[destinationScene](props);
};

Hmm, I don't fully understand what you're trying to say. In my own app it happens on literally every button to which I have bound Actions.key. In the example it's also happening on every possible transition (as you can see in the GIF, it's not only on login but also on register). How can it be that it's because of the componentDidMount of login but also appears on other scenes?

I'm sorry if I don't understand it correctly, but I'm having a hard time figuring this out.

Probably the simplest workaround used for every Actions.xxx() instance

<Button onPress={() => Actions.currentScene !== "page1" ? Actions.page1() : {}} >Page 1</Button>

Enjoy

I still have the same problem

react-native-router-flux v4.0.0-beta.18
react-native v0.46.4