react-native-router-flux: How to prevent Tab Scene history stack from being reset when changing between tabs?
react-native, react-native-router-flux
Solution
Turns out this was a bug in react-native-router-flux package, and it was fixed in this pull request.
Problem
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