react-native-router-flux: How can I retain parent navbar when switching tabs?

Question

I currently have the following in my router:

<Scene key="results" title="Query Results"
    tabs={true} tabBarStyle={style.tabBarStyle}>
    <Scene
      key="listResultsTab"
      title="List"
      icon={TabIcon}
    >
      <Scene key="listResults" component={ListResultsScene} title="Results List" />
    </Scene>

    <Scene
      key="mapResultsTab"
      title="Map"
      icon={TabIcon}
    >
      <Scene key="mapResults" component={MapResultsScene} title="Results Map" />
    </Scene>
</Scene>

So far, it creates a tab bar with two tabs that alternate between the ListResults and MapResults components, which is what I want. However, the tabs each maintain their own navbar. This isn't necessarily an issue except that it overrides the parent navbar so I lose access to anything that came before query results.

My ideal setup would be something like:

launchScreen --> queryResults----->listResults -> ... ->
                   |
                   -->mapResults-> ... ->

Is there any way to keep queryResults's navbar while switching between the tabs?

The docs say

Every tab has its own navigation bar. However, if you do not set its parent with hideNavBar={true}, the tabs' navigation bar will be overrided by their parent.

However this does not seem to be the case. I am not using hideNavBar and the parent's navigation bar is still being overridden by the tab's. I thought perhaps I could use hideNavBar on the tab's, but that only just removes the navBar entirely.

Edit: Updating with more detailed information.

This is my full Scenes list.

import React from 'react';
import {StyleSheet, Text } from 'react-native';
import { Actions, Scene, ActionConst } from 'react-native-router-flux';
import LaunchScene from '../scenes/LaunchScene';
import LoginScene from '../scenes/LoginScene';
import WorkspaceSelectionScene from '../scenes/WorkspaceSelectionScene';
import QuerySelectionScene from '../scenes/QuerySelectionScene';
import EditQueryScene from '../scenes/EditQueryScene';
import ListResultsScene from '../scenes/ListResultsScene';
import MapResultsScene from '../scenes/MapResultsScene';

const style = StyleSheet.create({
        tabBarStyle: {
            borderTopWidth : .5,
            borderColor    : '#b7b7b7',
            backgroundColor: 'white',
            opacity: 1
        },
        padForNavBar: {
          paddingTop: 64
        }
});

const TabIcon = ({ selected, title }) => {
  return (
    <Text style={{color: selected ? 'red' :'black'}}>{title}</Text>
  );
}

const scenes = Actions.create(
  <Scene key="root">
    <Scene key="login" component={LoginScene} title="Login" sceneStyle={style.padForNavBar} />
    <Scene key="workspaceSelection" component={WorkspaceSelectionScene}
      title="Workspace Selection" sceneStyle={style.padForNavBar} />
    <Scene key="querySelection" component={QuerySelectionScene}
      title="Query Selection" sceneStyle={style.padForNavBar} />
    <Scene key="launch" component={LaunchScene} title="Launch" sceneStyle={style.padForNavBar} />
    <Scene key="editQuery" component={EditQueryScene} title="Edit Query" sceneStyle={style.padForNavBar} />
    <Scene key="results" title="Query Results"
        tabs={true} tabBarStyle={style.tabBarStyle}>
        <Scene
          key="listResultsTab"
          title="List"
          icon={TabIcon}
        >
          <Scene key="listResults" component={ListResultsScene} title="Results List" sceneStyle={style.padForNavBar} />
        </Scene>

        <Scene
          key="mapResultsTab"
          title="Map"
          icon={TabIcon}
        >
          <Scene key="mapResults" component={MapResultsScene} title="Results Map" sceneStyle={style.padForNavBar} />
        </Scene>
    </Scene>
  </Scene>
);

export default scenes

This is what my tabs look like when I hit the listResults tab nested inside the results scene. Note that I can still return to the previous pages.

But when I switch tabs to the mapResults tab, still within the results scene, the navbar is reset. I no longer have access to the back button. Switching back to listResults will not restore it.

Answer 1

As an update, this turned out to be an issue with the library. An issue was opened and it was corrected in a subsequent commit.

Answer 2

I have something for you buddy, add this to your scene it will prevent your state to reset . type={ActionConst.REFRESH}

This will refresh your stack or you can do this:

componentDidMount(){
Actions.refresh({backTitle: ()=> this.props.title})
}

Where you want to pop from the stack.

Cheers :)