Dispatching multiple actions within TabBar onSelect

[olliepop]

Version

• react-native-router-flux v3.26.16
• react-native v0.26.2

Expected behaviour

Within the TabBar onSelect method, the following code will dispatch actions for, and execute each of the following:

Actions.scene_1();
Actions.scene_2();
Actions.scene_3();

The following should pop three times:

Actions.pop();
Actions.pop();
Actions.pop();

Actual behaviour

The following code:

Actions.scene_1();
Actions.scene_2();
Actions.scene_3();

Will only execute the last action, Actions.scene_3(). Likewise the following will only pop once:

Actions.pop();
Actions.pop();
Actions.pop();

How can we execute Actions.pop() multiple times within the TabBar onSelect method?

Related: #717

[joenoon]

@olliepop what do you mean by "within the TabBar onSelect method"? How do you get that code (scene_1,scene_2,scene_3) to be executed inside onSelect in the first place? Did you fork the code and modify onSelect to run that code? As onSelect stands now, it executes the key name for the tab selected - thats it - no 1, 2, 3, pop, pop, pop, etc... so I'm trying to understand how I would even go about trying to reproduce what you are describing. Could you PR something in the Example app for me to check?

[olliepop]

@joenoon This isn't being used in production 🙂 I'm modifying the TabBar source for the purpose of submitting a pull request.

What i want to do is execute Actions.pop() for each child in the navigationState of a tab so that tapping a tab takes you back to the initial scene for that tab (functionality described in related issue #717)

Here's what i'm trying to achieve in my fork. This concept works in previous versions of RNRF (i.e 3.22.23).

[joenoon]

Ok I think I follow now. Here are a couple ideas:

• This "pop to root" should only happen if the active tab is tapped again. Not if switching among different tabs. I think thats the common convention.
• Maybe it should be something like Actions[key]({popChildren: popChildrenOnSelect}) and the children could be truncated in the reducer?

[olliepop]

This "pop to root" should only happen if the active tab is tapped again. Not if switching among different tabs. I think thats the common convention.

I agree. This is what i'm using in my fork which is running 3.22.23, and achieves this:

    const state = this.props.navigationState;
    let selected = state.children[state.index];

    if (selected.sceneKey === el.props.sceneKey && el.props.popChildrenOnSelect) {
      el.props.children.forEach(() => {
        Actions.pop();
      });
    }

The functionality is great but obviously popping each individual scene isn't the cleanest way to go about this.

Actions[key]({popChildren: popChildrenOnSelect}) i think this is a much cleaner pattern and will look into this further