Description
Version
Tell us which versions you are using:
- react-native-router-flux v3.35.0 (4f2a2c7)
- react-native v0.32.0
Expected behaviour
When clicking on a tab, the scene should change to the new tab, and the tabbar should still show all tabs
Actual behaviour
When a tab is clicked, the new scene is shown, but now only the selected tab is shown in the tab bar
I'm upgrading from RNRF 3.24.1 and RN 0.24.1 to RNRF 3.35.0 and RN 0.32.0
I know there is a huge difference between these versions of RNRF but
I've got it mostly working... When the app comes up all three tabs show initially but
when a tab is clicked, navigationState.children only contains the selected tab instead of all three tabs.
My router looks like this:
<Router createReducer={reducerCreate} >
<Scene key="root" hideNavBar={true}>
<Scene key="register" component={Register} title="Register" hideNavBar={true}/>
<Scene key="login" component={Login} title="Login" hideNavBar={true}/>
<Scene key="switch" initial={true} hideNavBar={true} component={MySwitch} >
<Scene key="tabbar" component={MyTabBar} tabs={true} initial={true} default="button"
hideNavBar={true}>
<Scene key="history" type="jump" component={MalaHist} title="History" icon={TabIcon}
hideNavBar={true}/>
<Scene type="jump" key="button" component={MalaMain} title="Counter" icon={TabIcon}
initial={true} hideNavBar={true} foo="bar" />
<Scene type="jump" key="settings" component={MalaSettings} title="Settings" icon={TabIcon}
hideNavBar={true} />
</Scene>
</Scene>
</Scene>
</Router>
<MySwitch> is modeled after the RNRF Switch component... Basically it checks to see whether the app startup process is finished yet. If not it renders a Please Wait page, and when everything is ready it renders:
<DefaultRenderer navigationState={this.state.navigationState} onNavigate={this.props.onNavigate}/>
<MyTabbar> is basically a copy of the RNRF TabBar component that transfers a few extra props into <Tabs>. It expects that navigationState.children should always contain all three tabs.
The problem is that the navigationState prop coming into <MySwitch> only has one child after a tab is pressed.
I've tried a couple of things... In the previous version I was passing tabs={true} to <MySwitch> but it wasn't actually using it and removing the prop made no difference. I also added the explicit type="jump" props to the tabs but they already seemed to be that type by default.
I also tried simplifying by eliminating <MySwitch> and moving its functionality into <MyTabBar>. Still, when a tab is clicked, navigationState.children has only one child in the render method of <MyTabBar>.