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

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

Answer 3

1) Yes, move it to method, componentWillReceiveProps is probably not correct. It’s difficult to refactor that part for you as I would not have that logic from that method on that component, i.e. the signinComp should receive state of whether it has an auth session or not (and not figure it out for itself). It leads to it getting processed for no reason; since if he is logged in you redirect. I would personally do that check in renderScene, since the nav gets passed down you can just make a push/pop on child components and handle all your logic in one renderScene.
2) See the navigation stack like a deck of cards. When you set the scene it is one card, but when you push it adds another card to the pile. So when you push and have two cards, it checks to make sure that all the cards are face up and rendered so that when you press back or pop it moves back to a completed card or scene. Imagine pushing 5 scenes immediately onto the stack. So when you change the stack it checks to ensure everthing is rendered and ready for that back button. Personally I don’t find that optimal (but it has to since you can pass different properties with each scene that you push).
You can probably change this line to:
renderScene={this.renderScene}

Answer 4

Question1:
I recommend you process navigator logic in shouldComponentUpdate method, like below,
shouldComponentUpdate(nextProps, nextState){
if(nextProps.isLoggedIn != this.props.isLoggedIn && nextProps.isLoggedIn === true){
//will redirect
// do redirect option
return false;
}
return true;
}
The Question 2:
I think this is the bug of react-native.