Avoid two nav bars when navigate from tabs Scene to another Scene

[ErickVoodoo]

Version

• react-native-router-flux v4.0.0-beta.24 (v3 is not supported)
• react-native v0.50.4

Expected behaviour

The navigation bars do not stack

Actual behaviour

The navigation bars stacks

Steps to reproduce

So, guys I have this:

  <Router>
    <Modal>
      <Scene key="root">
        <Scene 
          tabs
          renderRightButton={} // NAVIGATE FROM THIS BUTTON TO settings
          hideNavBar
        >
          <Scene
            title='tab 1'
          >
            <Scene 
              title={'Остановки'}
              panHandlers={null}
              initial
            />
          </Scene>

          <Scene
            title='tab 2'
          >
            <Scene 
              panHandlers={null}
              initial
            />
          </Scene>
        </Scene>
        <Scene 
          key={'settings'}
          title={'Настройки'}
          // => HERE I HAVE TWO NAV BARS
        />
        <Scene 
          hideNavBar
        />
      </Scene>
      <Scene 
        hideNavBar={false}
      />
    </Modal>
  </Router>

As you see when I try to navigate from navBar right button to <Scene key={'settings'} /> I see two navBars, how to avoid this? I think I should change my route's structure. But I dont know how.

[samcole1992]

I also experienced this, add hideNavBar to root should fix the double nav bar

[samcole1992]

See also #2375

[aksonov]

You need to use hideNavBar to the root.