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
