React-native-router-flux: From Nested Scene To Other Nested Scene Navigate

[yasemincidem]

Version

Tell us which versions you are using:

• react-native-router-flux v3.38.0
• react-native v0.42.3

Expected behaviour

I have a nested scenes.I want to navigate from nested scene to other nested scene.But i didn't navigate.Actually here is example :

<Scene>
           <Scene key="scene1">
                <Scene key="scene2" hideNavBar component={Scene2}/>
            </Scene>
            <Scene key="scene3">
                <Scene key="scene4" hideNavBar component={Scene4}/>
            </Scene>
</Scene>

I want go to scene4 page on scene2 page.Here is code block that i have tried:

on `Scene2` component:
Actions.scene4();

i have tried that but i didn't happen anything also it did not throw an error.

Actual behaviour

Actually when i try this code block, it is wanted to navigate to Scene4 page
Actions.scene4() ===> Scene4 page

[yasemincidem]

@aksonov can you check this issue ?

[KevinHu2014]

If you want to navigate from scene2 to scene4.
You should try from scene2 to scene3 instead.

[yasemincidem]

Yes,I agree with you for parent key that has one child.But if parent scene called scene3 has multiple children,your recommendation is fail.Let me give an example for this situation that I mean.

<Scene>
           <Scene key="scene1">
                <Scene key="scene2" hideNavBar component={Scene2}/>
            </Scene>
            <Scene key="scene3">
                <Scene key="scene4" hideNavBar component={Scene4}/>
                <Scene key="scene5" hideNavBar component={Scene5}/>
                <Scene key="scene6" hideNavBar component={Scene6}/>
            </Scene>
</Scene>

Parent scene has multiple children in this example.When I want to navigate from scene2 to scene5,your recommendation is fail because of I use Actions.scene3.if i use this code block ,I go to scene4 not scene5.Because if you navigate parent key of scene3, you will go to the page that parent key has first child.I hope I explain clearly myself.Have you any idea for this situation ?

[yusmarcastro]

I had the same problem!!! any solution guys?????????????????

please @aksonov how can we do this???

[kirillpisarev]

Same problem. I tried to set initial scene prop of nested scenes dynamically to point the navigator which nested scene to render when navigating to the parent but has no luck. Has anyone any appropriate solution?

dirty solution is to perform 2 transitions:

Actions.scene3({type: ActionConst.RESET})
Actions.scene4({type: ActionConst.RESET}')

The problem is that we initialise the Scene3 component before we move to the scene4 and i cant sleep with that

[jamalx31]

+1

[0mkara]

<Scene>
           <Scene key="scene1">
                <Scene key="scene2" hideNavBar component={Scene2}/>
            </Scene>
            <Scene key="scene3">
                <Scene key="scene4" hideNavBar component={Scene4}/>
                <Scene key="scene5" hideNavBar component={Scene5}/>
                <Scene key="scene6" hideNavBar component={Scene6}/>
            </Scene>
</Scene>

To route from scene2 to scene4 you need to do following

Actions.scene3()
Actions.scene4()

Another working example

<Scene key="root">
    <Scene key="auth" tabs={false} hideNavBar>
        <Scene key="login" component={LoginComponent} title="Login"/>
    </Scene>
    <Scene key="drawer" component={NavigationDrawer} close>
        <Scene key="main" tabs={false}>
            <Scene key="home" component={HomeComponent} initial/>
        </Scene>
    </Scene>
</Scene>

Here to go from login scene to home scene I had to do

Actions.drawer();
Actions.main();
Actions.home();

[kirillpisarev]

@0mkara as i wrote above this solution has much overhead

[0mkara]

@kirillpisarev that is true, I think it is costing my app much more time to move from scene to scene. Does anyone else experiences that behaviour ?

[petervavro]

Really don't like double , triple calling ... Is there better solution ? Thanks

[Vladislav-Vinnikov-Narvar]

+1

[tuononh]

Any update on this?

[ravalikarumuri]

Hello Aksonov,
I want to send data from one router child to another router child in React Native Router flux, the call is happening after sometime, meanwhile the page is rendering, so I am not getting data populated, Can you help me to fix this issue.
Here is how my router structure.

[jhon-andrew]

I tried figuring this out and I came out with the following. Given this example:

<Stack key="group1">
  <Scene key="scene1" component={Scene1} />
  <Scene key="scene2" component={Scene2} />
</Stack>
<Stack key="group2">
  <Scene key="scene3" component={Scene3} />
  <Scene key="scene4" component={Scene4} />
  <Scene key="scene5" component={Scene5} />
</Stack>

To navigate from scene1 to scene5, I just call Actions.jump('scene5').

As said in the documentation, Actions.jump is for Tabs only.

But apparently it works with Stack or nested navigation as well.

One thing I just noticed is for example when you navigate from scene1 to scene5, the initial scene (which is scene3) of the stack destination is also being added to the stack.

So when you do Actions.pop from scene5, you'll go through scene3 first before proceeding to the expected scene where you actually navigated from.