Modal just rendering the half

[ivportilla]

Version

• "react-native-router-flux": "^3.37.0",
• "react-native": "0.39.2",

Expected behaviour

Actual behaviour

Steps to reproduce

These are my current routes:

<Router
  name="base"
  navigationBarStyle={styles.navBar}
  titleStyle={styles.navTitle}
  leftButtonIconStyle={{ tintColor: 'white' }}
>
  <Scene key="modal" component={Modal}>
    <Scene key="root">
      <Scene
        key="SignIn"
        component={SignInContainer}
        initial
        hideNavBar
      />
      <Scene
        key="registerForm"
        component={AccountRegisterContainer}
        hideNavBar
      />
      <Scene
        key="Login"
        component={LoginContainer}
        hideNavBar
      />
      <Scene key="drawer" component={Drawer} type={ActionConst.RESET}>
        <Scene key="main" tabs={false}>
          <Scene
            key="Expenses"
            component={ExpensesContainer}
            title="Mis gastos"
            sceneStyle={styles.routerScene}
            renderLeftButton={App.menuButton}
          />
          <Scene
            key="Vehicles"
            component={VehiclesContainer}
            title="Mis vehículos"
            sceneStyle={styles.routerScene}
            renderLeftButton={App.menuButton}
          />
          <Scene
            key="NewExpense"
            component={NewExpense}
            title="Nuevo gasto"
            sceneStyle={styles.routerScene}
          />
        </Scene>
      </Scene>
    </Scene>
    <Scene
      key="AddVehicle"
      component={AddVehicleContainer}
      title="Nuevo vehículo"
      hideNavBar={false}
      direction="vertical"
    />
  </Scene>
</Router>

Modal code:

class AddVehicle extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, marginTop: 55 }}>
        <Text>Add Vehicle</Text>
      </View>
    );
  }
}

In my case, my modal is AddVehicle, however if i put it inside the root Scene, it works as expected. Why don't just use it in that way? Because the documentation say i should put it at "modal" Scene leve.

I also tried remove the Drawer part just getting the same result. Any help will be appreciated!

[jimmykwok]

#1141 might help you.

[ivportilla]

@jimmykwok thank you for the suggestion. Really i have tried using fixed width and height to cover the entire screen and it works, but also i need the NavigationBar; doing that the NavigationBar is not showed even using hideNavBar={false}.

[AndrewHenderson]

@Ivykp The original issue was due to the modal being nested in the scene stack. If your view now takes up the full screen, you likely moved it up the hierarchy.

In order to provide it with its own NavBar, you'll need to wrap your modal scene in another Scene to nest it back down another level.

It's a very fragile hierarchy but one I think iOS developers understand better than JS devs writing their first iOS app. I myself am in that category and have been learning the hard way.

Just keep playing with the hierarchy. You'll likely be surprised by the outcome of moving Scenes.

[ryancoughlin]

@Ivykp Were you ever able to get a navigation bar to present with your modal? I am in the same boat here.