React-native-router-flux: Create scenes within a scene

[alexmngn]

My application is divided in multiple sub applications that has its own route.
For example, the Login page is a part of the app that work completely independently of the rest of the app. So I am trying to do the following:

_index.js_

const scenes = Actions.create(
    <Scene key="start" hideNavBar={true}>
        <Scene key="landing" component={Landing} initial={true} />
        <Scene key="login" schema="modal" direction="vertical" component={Login}></Scene>
    </Scene>
);

The Landing component calls Login to open a new modal with the login scene.
Login should have its own route, the parent shouldn't be aware of what the Login scene does, so I am trying to create new scenes in this file.
But if I call Actions with the name of a scene from index.js, in my case I try to go back to the start scene, it doesn't recognize it, so I can't go back. I also tried to use Actions.pop() but it doesn't work either.

_login.js_

const scenes = Actions.create(
    <Scene key="loginContainer">
        <Scene key="loginPage1" component={LoginPage1} title="Login" initial={true} leftTitle="Cancel" onLeft={() => {
                Actions.startContainer(); // Want to go back to the previous page, this doesn't work
            }} />
        <Scene key="loginPage2" component={LoginPage2}></Scene>
    </Scene>
);

class Login extends Component {
    render() {
        return (
            <Router scenes={scenes} />
        );
    }
}

Any suggestion how I could do that?
Thanks

[aksonov]

Sorry, it is not supported behaviour.

[alexmngn]

@aksonov That is really something I think you should support, that is the main philosophy behind React, to be able to have component within a component, without the parent having the need of being aware what the child does exactly, as long as it does it.
For this reason I will stop using your component for sure, as it doesn't support this very-important feature that most well-developed large mobile applications really need.

[aksonov]

Scene setup is analog of iOS storyboards. You could split it to many smaller 'storyboards' by including own components that contains Scenes. But config should be static like iOS storyboards.

Pavel.

20 марта 2016 г., в 15:35, Alexis [email protected] написал(а):

@aksonov That is really something I think you should support, that is the main philosophy behind React, to be able to have component within a component, without the parent having the need of being aware what the child does exactly, as long as it does it.
For this reason I will stop using your component for sure, as it doesn't support this very-important feature that most well-developed large mobile applications really need.

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub

[Ansalibrahim]

@aksonov any plans to support this feature in future? I think this will really boosts the usages of this library.

[alexmngn]

Agree with @Ansalibrahim. I myself wrote an article about how great is it to have modular/feature based architecture with React. https://medium.com/@alexmngn/how-to-better-organize-your-react-applications-2fd3ea1920f1
With such restrictions of the need to define all the routes in one place, it forced me to use different solutions.

[Ansalibrahim]

@alexmngn How did you solved your problem? I think sharing it here may help someone visits here in future.

[alexmngn]

@Ansalibrahim I stopped to use this library and used the Navigator component provided by react-native: https://facebook.github.io/react-native/docs/navigator.html

[Ansalibrahim]

@alexmngn I think, it is a bit complicated for anyone to handle whole navigations using the _Navigator_ component in a project. So at least for me, it can't be considered as a better alternative.
@aksonov Do you have any idea to implement this behavior in the library?

[alexmngn]

@Ansalibrahim I thought the same, until I tried and it's actually not that difficult to use.
Have a look to my repo here: https://github.com/alexmngn/react-native-authentication/blob/master/client/MobileApp/src/App.js You can see how it works and how easy it is to setup.

[Ansalibrahim]

@alexmngn For me, I have almost completed the project and my client needs a change now. Throwing the whole lib out of the project will not feasible for my client. It will be good if I could find some way using this library. So I am behind some workarounds. Thanks for your valuable replies :-)

[afshinm]

I fixed the issue by adding a condition to my origin scene, so I conditionally render a view instead of changing the router to, say control panel, after login.