react-native-router-flux: How to prevent Tab Scene history stack from being reset when changing between tabs?

Question

I have a Router setup with 2 tab scenes:

• Tab 1: have 2 navigable scenes (static screens);
  • Screen A: have a button to navigate to Screen B;
  • Screen B: just have a text;
• Tab 2: just have 1 static screen.
  • Screen C: just have a text;

The code is as follows.

app.js:

import React from 'react';
import { Router, Scene } from 'react-native-router-flux';
import Tab from '../tab';
import ScreenA from './a';
import ScreenB from './b';
import ScreenC from './c';


export default class App extends React.Component {
  render(){
    return (
      <Router>
        <Scene key="root">
          <Scene key="tabbar" tabs={true}>

            <Scene key="tab1" title="Tab 1" icon={Tab}>
              <Scene key="a" title="Screen A" component={ScreenA} />
              <Scene key="b" title="Screen B" component={ScreenB} />
            </Scene>

            <Scene key="tab2" title="Tab 2" icon={Tab}>
              <Scene key="c" title="Screen C" component={ScreenC} />
            </Scene>

          </Scene>
        </Scene>
      </Router>
    );
  }
}

The screens are pretty simple too.

a.js:

export default class ScreenA extends React.Component {
  render(){
    return (
      <View>
        <Text>This is Screen A</Text>
        <TouchableHighlight onPress={() => Actions.b()}>
          <Text>Go to Screen B</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

b.js:

export default class ScreenB extends React.Component {
  render(){
    return (
      <View>
        <Text>This is Screen B</Text>
      </View>
    );
  }
}

c.js:

export default class ScreenC extends React.Component {
  render(){
    return (
      <View>
        <Text>This is Screen C</Text>
      </View>
    );
  }
}

Use case:

• The app renders Screen A (in Tab 1);
• Click on button in Screen A: the app navigates to Screen B (still in Tab 1);
• Click on Tab 2: the app navigates to Screen C (in Tab 2).
• Click on Tab 1: the app navigates to Screen A (in Tab 1) and NOT to Screen B, as expected.

react-native-router-flux is not retaining the Tabs' history stack when we get back to them. Or am I doing something wrong here?

Packages versions:

• react v15.3.2
• react-native v0.34.1
• react-native-router-flux v3.36.0

Answer 1

Turns out this was a bug in react-native-router-flux package, and it was fixed in this pull request.