Proper way to navigate with React Native, Redux, and Navigator

Question

I have a React Native app using the Redux framework and I'm using the Navigator component to handle navigation. I've had a little bit of trouble getting the navigation working and I'm not able to find any good examples of how to do it correctly so I'm looking for some help and clarification.

Here's the gist of what I currently have, which is working but I don't know if I'm doing it right:

Root Component

...
renderScene(route, navigator) {
    console.log('RENDER SCENE', route);
    const Component = route.component;
    return (
        <Component navigator={navigator} route={route} {...this.props} />
    )
}

render() {
    return (
        <Navigator
            renderScene={(route, nav) => this.renderScene(route, nav)}
            initialRoute={{ name: 'Signin', component: Signin }} />
    )
}

Signin Component

...
componentWillReceiveProps(nextProps) {
    if (!this.props.signedIn && nextProps.signedIn) {
        console.log('PUSHING TO MAIN');
        nextProps.navigator.push({ name: 'Main', component: Main });
    }
}

Questions:

1: My first thought here is that I should probably move the navigator.push code into an action. However is componentWillReceiveProps the right place to call the action? When the Signin component is loaded it fires an action to sign in the user if they already have an active session. By default they are not signed in so when the next props come through I check if it changed and then push to Main.

2: In my console log immediately after 'PUSH TO MAIN' is logged I see two 'RENDER SCENE' logs:

[info] 'RENDER SCENE', { name: 'Signin', component: [Function: Signin] } (EXPECTED)
[info] 'PUSHING TO MAIN'
[info] 'RENDER SCENE', { name: 'Signin', component: [Function: Signin] } (WHY?)
[info] 'RENDER SCENE', { name: 'Main', component: [Function: Main] }

I'm curious as to why RENDER SCENE is called twice (the first one being the Signin component) if I'm only pushing the Main component.

Also originally in the componentWillReceiveProps method I was only checking:

if (nextProps.signedIn) {
    nextProps.navigator.push({ name: 'Main', component: Main });
}

but this caused the Main component to be pushed twice.

Answer 1

NOTE: The GitHub link below is now deprecated, in the comments the author suggested react-native-router-flux which is by the same author.

I've just added support for Redux, with my new component https://github.com/aksonov/react-native-redux-router with makes navigation pretty easy, like calling Actions.login

Answer 2

This is not a redux implementation but for routing I found react-native-router-flux to be really useful.

You can do things like call

Actions.login 

to navigate to the login view. The routes are defined in your index file and have optional schemas to define navbar elements.

https://github.com/aksonov/react-native-router-flux