How to nest Scene and navigate with direction='vertical' in React Native Router Flux?

Question

I would like to nest react-native-router-flux's <Scene/> and attempted the following, but I am not able to navigate to the <Scene component={Home}/> from <Scene component={Profile}/>:

<Scene
  component={Home}
  initial={true}
  key='home'
  title='Home'
  type='reset'
>
    <Scene
      component={Profile}
      direction='vertical'
      key='sell'
      title='Sell'
    />
</Scene>

I would like to nest Profile component inside Home component, because it can only be accessed via Home component.

So how can properly I nest Profile component inside Home component?

When I also navigate to Profile component, it navigates with the vertical direction, but when it tries to navigate to another component (e.g. Actions.test()), which does not have direction='vertical' set, from Profile component, it navigates horizontally when it should be vertically, whereas hitting back button within Profile component navigates back with vertical direction.

Since I navigated to Profile component vertically, how can I get the Profile component to be unmounted vertically when navigating, even when navigating to a component without direction='vertical'?

Ata Mohammadi · Answer 1 · 2016-10-27T07:10:13.053

This is how i make it work in my app :

<Router createReducer={reducerCreate} getSceneStyle={getSceneStyle}>
        <Scene key="root">
          <Scene key="login" direction="vertical" component={Login} title={I18n.t("login_page_nav_title")} hideTabBar hideNavBar initial={!this.state.isLoggedIn}/>
          <Scene key="addaccount" direction="vertical" component={Login} title={I18n.t("login_page_nav_title")} navigationBarStyle={styles.navigationBarStyle} titleStyle={styles.titleStyle} backButtonTextStyle={styles.backButtonTextStyle} backTitle={I18n.t("back_button")} hideTabBar />
          <Scene key="tabbar">
            <Scene key="main" tabs tabBarStyle={styles.tabBarStyle} tabBarSelectedItemStyle={styles.tabBarSelectedItemStyle} tabBarIconContainerStyle={styles.tabBarIconContainerStyle} >
              <Scene key="courses" component={Courses} title={I18n.t("courses_tab_title")} icon={IconCourses} navigationBarStyle={styles.navigationBarStyle} titleStyle={styles.titleStyle} />
              <Scene key="register"  component={Register} title={I18n.t("register_tab_nav_title")} icon={IconRegister} navigationBarStyle={styles.navigationBarStyle} titleStyle={styles.titleStyle} />
              <Scene key="schedule" component={Schedule} title={I18n.t("schedule_page_nav_title")} icon={IconSchedule} navigationBarStyle={styles.navigationBarStyle} titleStyle={styles.titleStyle} />
              <Scene key="evaluation" component={Evaluation} title={I18n.t("evaluation_page_nav_title")} icon={IconEvaluation} navigationBarStyle={styles.navigationBarStyle} titleStyle={styles.titleStyle} />
              <Scene key="profile" component={Profile} title={I18n.t("profile_page_nav_title")} icon={IconProfile} navigationBarStyle={styles.navigationBarStyle} titleStyle={styles.titleStyle}/>
            </Scene>
          </Scene>
          <Scene key="terms" component={Terms} hideTabBar hideNavBar />
          <Scene key="grab" component={Grab} hideTabBar hideNavBar initial={this.state.isLoggedIn}/>
          <Scene key="rdetails" component={RDetails} title={I18n.t("details_page_nav_title")} navigationBarStyle={styles.navigationBarStyle} titleStyle={styles.titleStyle} backButtonTextStyle={styles.backButtonTextStyle} backTitle={I18n.t("back_button")} hideTabBar />
          <Scene key="cdetails" component={CDetails} title={I18n.t("details_page_nav_title")} navigationBarStyle={styles.navigationBarStyle} titleStyle={styles.titleStyle} backButtonTextStyle={styles.backButtonTextStyle} backTitle={I18n.t("back_button")} hideTabBar />
        </Scene>
      </Router>

This way i can navigate to and from all scenes nested in tabbar/main i can navigate from courses to register or for example profile. i can also navigate to terms grab rdetails and cdetails. But navigating from cdetails to courses or profile is not possible as i know. i can only navigate to tabbar from terms or grab. But since grab and terms are declared in higher levels, they are accessible in deeper levels.

Hope it helps.

Update :

Since I navigated to Profile component vertically, how can I get the Profile component to be unmounted vertically when navigating, even when navigating to a component without direction='vertical'?

Not sure but i think when you navigate from profile to another component, you cant see profile is unmounting. if you want to unmount it vertically, you need to do Action.pop() that way should work. You can also use few actions together like this :

Action.pop();
Action.SomeComponent({type: 'reset'});

Appreciate the example. I'll be giving it a try by today. In the meantime, if you can take a look at the second question as well, would really appreciate it. Thanks in advance — , Oct 26 '16 at 17:03
Profile component has `direction='vertical'`, so it navigates to it vertically. But from Profile component, if I were to navigate to another component (SomeComponent) that does not have `direction='vertical'` set via Action.SomeComponent(), the Profile component would disappear horizontally, rather than vertically. But if I were to just use the default back button on the Profile component, the Profile component would disappear vertically but go to the previous component. How can get the Profile component to disappear vertically even if it navigates to without `direction='vertical'`? — , Oct 28 '16 at 05:09
`Action.pop()` would make the Profile component disappear vertically, but wouldn't it navigate me to the previous page, and then wouldn't I be navigating to `SomeComponent`, but in that case, horizontally since `SomeComponent` doesn't have `direction='vertical'`? — , Oct 28 '16 at 05:11

How to nest Scene and navigate with direction='vertical' in React Native Router Flux?

1 Answers1