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'?

Conquest

Answer 1

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'});

Turnstile

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 – Conquest

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'? – Conquest

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'? – Conquest

Let me do some test, I'll post results here. – Turnstile

Just checking in to see if you had the chance – Conquest