React-native-router-flux: Two Back Buttons For The Same Scene

[RedManBrasil]

Version

• react-native-router-flux 4.0.0-beta.21
• react-native v0.47.2

Expected behaviour

I expected the navigator to work normally, creating a navigation between the different scenes, with only one Back Button and the header at the top of the screen.

<Router>
      <Scene key="root">

        <Scene key="main" initial>
          <Scene key="home" component={Home} title="RedManBrasil" />
        </Scene>

        <Scene key="teams">
            <Scene key="league_list" component={LeagueList} title="Leagues" initial />
            <Scene key="team_list" component={TeamList} title="Teams" />
            <Scene key="soloteam" component={Team} />
        </Scene>

      </Scene>
    </Router>

Actual behaviour

It creates a blank space above the header, that is misplaced as well. A new back button appears on the screen, working like the one below him. I think this is happening because there is a Scene ( with the key="root") wrapping everything. I had to do this since, when I use the code without it, it gives an error message.

Code Without The Wrapping

    <Router>
        <Scene key="main" initial>
          <Scene key="home" component={Home} title="RedManBrasil" />
        </Scene>

        <Scene key="teams">
            <Scene key="league_list" component={LeagueList} title="Leagues" initial />
            <Scene key="team_list" component={TeamList} title="Teams" />
            <Scene key="soloteam" component={Team} />
        </Scene>
    </Router>

Error Message When It is Not Wrapped

[mcabs3]

@RedManBrasil it is required that you have only a single Scene as a child to Router, so your first lines of code in the beginning of this issue is correct. The two back buttons are appearing because both the root scene and the nested teams scene are controlling their navigators. I would try adding a hideNavBar which will hide a navigator from its scene.

[RedManBrasil]

It worked! But this feels like a work around, I remember that wrapping Scene's weren't necessary.

This code, for example, works perfectly

[ghost]

I am encountering the same issue and not sure how to resolve it. I am seeing the issue when I have deeply nested Scenes / Stacks, specifically at the settings stack.

 export default Actions.create(
  <Modal
    hideNavBar
    transitionConfig={() => ({
      screenInterpolator: CardStackStyleInterpolator.forFadeFromBottomAndroid,
    })}>

    <Scene hideNavBar key="landing" component={Landing} />

    <Scene key="auth">
      <Scene hideNavBar key="signup" component={SignUp} />
      <Scene hideNavBar key="login" component={Login} />
    </Scene>

    <Stack key="main" headerMode="screen">

      <Scene initial key="feed" component={Feed} title="App Title" {...feedSceneProps} />

      <Stack key="settings">

        <Scene
          initial
          key="settingsList"
          title="Settings"
          component={Settings}
          {...settingsSceneProps}
        />

        <Scene key="settingsEmail" title="Update Email" component={Email} {...settingsSceneProps} />

        <Scene
          key="settingsPassword"
          title="Change Password"
          component={Password}
          {...settingsSceneProps}
        />

      </Stack>

    </Stack>

  </Modal>,
);

[aksonov]

Each stack has own navBar. All tabs are wrapped within own navbar also. You may disable parent navbar by using hideNavBar or disable wrapping tabs by passing wrap={false} to Tabs scene.