react: navigator passing to one of component functions results in loop

Question

So I have this weird issue. When passing navigator object to one of the 2 React component functions and utilizing it as property it goes into infinite loop

LoginSide:

componentWillReceiveProps(nextProps){
if(nextProps.status == 200) {
  this.props.onLoginPress.push({
    component: HomeScene,
    passProps: {
        title: "HomeScene",
    },
    type: "Normal",
  })
}
}

this is how I call it:

<LoginSide onLoginPress= { this.props.navigator } />

also happens with componentDidMount.

props updating is done with Redux, but state to props mapping happens only one, as it supposed to.

Could I get advice how to navigate to other view when property of the component changes?

App is in react-native to be precise. Let me know if any other info needed

Answer 1

If I understood you you have a LoginSide component, that has an onClick handler that changes the redux state, and the react components get new props. And then you have a then you in the componentWillReceiveProps metod want to update the props?

Without knowing the details of the implementation, you basically want to do all the state changes in redux, and avoid changing props or state on render, the should be pure

I think/hope this article should help you along the way React Native’s NavigationExperimental with Redux