React Native Router Flux: navigate from main scene to child

Question

Version

react-native-router-flux v3.35.0
react-native v0.31

I have few scenes. one of scenes have few sub-scenes. how can i navigate to one of sub-scenes from one of main scenes?

Example :

<Router createReducer={reducerCreate} getSceneStyle={getSceneStyle}>
        <Scene key="root">
          <Scene key="login" direction="vertical" component={Login} title="Login" hideTabBar hideNavBar />
          <Scene key="tabbar" initial={show}>
            <Scene key="main" tabs tabBarStyle={styles.tabBarStyle} tabBarSelectedItemStyle={styles.tabBarSelectedItemStyle} tabBarIconContainerStyle={styles.tabBarIconContainerStyle} >
              <Scene key="courses" component={Courses} title="Courses" icon={IconCourses} navigationBarStyle={styles.navigationBarStyle} titleStyle={styles.titleStyle} initial />
              <Scene key="register"  component={Register} title="Register" icon={IconRegister} navigationBarStyle={styles.navigationBarStyle} titleStyle={styles.titleStyle} />
              <Scene key="schedule" component={Schedule} title="Schedule" icon={IconSchedule} navigationBarStyle={styles.navigationBarStyle} titleStyle={styles.titleStyle} />
              <Scene key="evaluation" component={Schedule} title="Evaluation" icon={IconEvaluation} navigationBarStyle={styles.navigationBarStyle} titleStyle={styles.titleStyle} />
              <Scene key="profile"
              component={Profile}
              title="Profile"
              icon={IconProfile}
              navigationBarStyle={styles.navigationBarStyle}
              titleStyle={styles.titleStyle}
              onLeft={() => { Actions.login(); }}
              leftTitle="Add Account"
              onRight={() => { Actions.login({type: 'reset'}); }}
              rightTitle="Logout"
              rightButtonTextStyle={styles.ButtonTextStyle}
              leftButtonTextStyle={styles.ButtonTextStyle}
              leftButtonStyle={styles.leftButtonStyle} />
            </Scene>
          </Scene>
          <Scene key="terms" component={Terms} />
          <Scene key="details" component={Details} title="Details" navigationBarStyle={styles.navigationBarStyle} titleStyle={styles.titleStyle} backButtonTextStyle={styles.backButtonTextStyle} hideTabBar />
        </Scene>
      </Router>

I want to navigate from Details to Courses. but courses is a Tab under another. how can i do that?

I can navigate only to tabbar scene, not courses or register.

Did you try Actions.create to create the scenes prior to the render and pass it to the Router scenes prop? Also, try disabling any 'initial' props as that was causing issues for me. What issue did you have with the Switch? I had a lot of trouble but sorted it out... A trick that helped me force re-renders when Switch changed was setting Router key to something including part of the Switch state... ie authenticated vs guest... Make sure to change the key when the Switch changes. And don't forget about Actions.refresh. Seems hacky to me but seems to be used a lot as 'escape hatch'. — Travis White, Dec 15 '16 at 05:45

score 19 · Accepted Answer · answered Dec 09 '16 at 15:30

19

I've found that you can switch to inner tabs if you navigate to the tabbar first, e.g.:

<Button onPress={() => {
    Actions.tabbar({type:ActionConst.RESET});
    Actions.courses();
}} title="See Courses" />

The first scene transition resets the scene to your tab bar, and would by default show your initial scene, the second transition then replaces your current scene due to how react-native-router-flux handles tab scene transitions.

answered Dec 09 '16 at 15:30

Henry Bevan

314
2
8

would you know how to pop back from a nested child to main scene? – vma Mar 04 '17 at 11:47
How did you get to your nested child? Actions.pop() takes the current scene off the router stack... If your tabs are not your main navigation scene, then you could try ActionConst.REPLACE to not clear your current router stack... (I've not tried that though...) – Henry Bevan Mar 07 '17 at 17:26
@HenryBevan So in a case where someone pops back after navigating, using your answer, would this take the person back to the scene where the button in your example was pressed? – Daniel Barde Jun 18 '18 at 13:58
@DanielBarde I don't think so - in my situation the 'tabbar' scene was the root scene, so there was never anything to pop back to after this navigation action. Either way - the 'ActionConst.RESET' resets the view stack so the 'tabbar' becomes the root. – Henry Bevan Jun 22 '18 at 12:33

score 1 · Answer 2 · edited May 23 '17 at 12:18

1

I actually answered a very similar question here. The problem is that from the context of login you'd have access to Actions.tabbar and it would then route you to either a nested scene with the initial prop set to true, or the first nested scene in the stack. To see an example of what I am talking about refer to the link I included in the first line of this answer.

Hope this helps! :)

edited May 23 '17 at 12:18

Community

1
1

answered Aug 29 '16 at 15:51

Brian Polonia

66
5

Thanks for your answer. i know that. i can access from Details to tabbar. and when i access tabbar, first screen, Courses, is rendered. that's fine. problem is sometimes i need to navigate to other scene in tabbar not course. the solution is using switch function provided by router-flux but i couldn't get it to work. @brian-polonia – Ata Mohammadi Aug 30 '16 at 07:10

React Native Router Flux: navigate from main scene to child

Version

2 Answers2

Linked