title: React Navigation goes to initial route while navigating
body: <p>I use expo, redux and react navigation. </p>
  
  <p>The following is my initial route <strong>Preloader.js</strong></p>
  
  <pre><code>    class PreloaderScreen extends React.Component {
      constructor(props) {
          super(props);
      }
  
      componentWillMount() {
          console.log("CWM --", this.props.auth);
          this.props.getLocalToken();
      }
  
      componentWillReceiveProps(nextProps) {
          console.log("NXT props - PL", nextProps);
          if (nextProps.auth.localTokenStatus == 1) {
              console.log("Navigating to main");
              this.props.navigation.navigate('Main');
          }
          else if (nextProps.auth.localTokenStatus == -1) {
              console.log("Navigating to Login !!!!");
              this.props.navigation.navigate('Login');
          }
          else {
              console.log("Nothing is happening !");
          }
  
      }
  
      render() {
          const { navigate } = this.props.navigation;
          return (
              &lt;View&gt;
              &lt;/View&gt;
          )
  
      }
  }
  
  function mapStateToProps(state) {
      return {
          auth: state.auth,
      };
  }
  function mapDispatchToProps(dispatch) {
      return bindActionCreators({ getLocalToken: getLocalToken, storeLocalToken: storeLocalToken }, dispatch)
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(PreloaderScreen)
  </code></pre>
  
  <p>I check for an AsyncStorage variable on this page and redirect accordingly. I check the AsyncStorage in the following AuthAction. </p>
  
  <pre><code>export function getLocalTokenSuccess(localStore) {
      console.log('Got Local Token', localStore);
      return {
          type: types.GET_LOCALTOKEN_SUCCESS,
          payload: localStore
      }
  
  }
  
  export function getLocalTokenFail(error) {
      return {
          type: types.GET_LOCALTOKEN_FAIL
      }
  }
  
  
  export const getLocalToken = (dispatch) =&gt; {
      return (dispatch) =&gt; {
  
          AsyncStorage.getItem('localToken')
              .then((localStore) =&gt; dispatch(getLocalTokenSuccess(localStore)))
              .catch((error) =&gt; dispatch(getLocalTokenFail(error)))
      }
  }
  </code></pre>
  
  <p>The following is my reducer, <strong>reducer-auth.js</strong></p>
  
  <pre><code>case types.GET_LOCALTOKEN_SUCCESS:
        localTokenJSON = JSON.parse(action.payload);
        console.log("localStore ", action.payload);
        return { ...state, key: localTokenJSON.key, mobileNumber: localTokenJSON.mobileNumber, localTokenStatus: 1 };
        break;
  
      case types.GET_LOCALTOKEN_FAIL:
        console.log("gltf --");
        return { ...state, localTokenStatus: -1 }
        break;
  </code></pre>
  
  <p>Following is my <strong>Login.js</strong> where I land if there's no local token found.</p>
  
  <pre><code>class LoginScreen extends React.Component {
  
    constructor(props) {
      super(props);
  
    }
  
    submitButton(isValid) {
      return (
        &lt;Button backgroundColor='#0000b2' style={LoginStyle.buttonStyle}
          onPress={() =&gt; { console.log("Pressed"); this.props.submitOTPMobileNumber(this.props.auth.mobileNumber) }}
          disabled={!isValid}
          title='Login' /&gt;
      );
    }
  
    state = {
      keyboardHeight: new Animated.Value(0)
    };
  
    animateKeyboardHeight = (toValue, duration) =&gt; {
      Animated.timing(
        this.state.keyboardHeight,
        { toValue, duration },
      ).start();
    };
  
    componentWillMount() {
  
      if (Platform.OS === "android") {
        this.keyboardShowListener = Keyboard.addListener("keyboardDidShow", ({ endCoordinates }) =&gt; {
          this.animateKeyboardHeight(endCoordinates.height, 0)
        });
        this.keyboardHideListener = Keyboard.addListener("keyboardDidHide", () =&gt; {
          this.animateKeyboardHeight(0, 300)
        })
  
      }
    }
    componentWillReceiveProps(nextProps) {
      if (nextProps.auth.OTPAPISubmissionSuccess)
        this.props.navigation.navigate('Otp');
    }
  
    scrollToInput = (reactNode) =&gt; {
      this.view.scrollToFocusedInput(reactNode)
    };
  
    handleOnFocus = (e) =&gt; {
      if (Platform.OS === "android") {
        this.scrollToInput(ReactNative.findNodeHandle(e.target))
      }
    };
  
    render() {
  
      const { navigate } = this.props.navigation;
      return (
        &lt;KeyboardAwareScrollView
          ref={ref =&gt; this.view = ref}
          enableOnAndroid
          extraHeight={Platform.OS === "android" ? 10 : undefined}
        &gt;
          &lt;View&gt;
            &lt;Image style={LoginStyle.backgroundImage} source={require('../Images/Icons/login.jpeg')} /&gt;
          &lt;/View&gt;
          &lt;Card style={LoginStyle.loginBox}&gt;
            &lt;Text style={LoginStyle.subtitle}&gt;India (+91)&lt;/Text&gt;
            &lt;TextInput
              onFocus={this.handleOnFocus}
              style={LoginStyle.textInput}
              keyboardType='numeric'
              placeholder="Mobile Number"
              maxLength={10} minLength={10}
              onChangeText={(mobileNumber) =&gt; { this.props.OTPMobileNumberEntered(mobileNumber) }}
              value={this.props.auth.mobileNumber}&gt;
            &lt;/TextInput&gt;
            &lt;Text&gt;{"\n"}&lt;/Text&gt;
            &lt;Text style={LoginStyle.subText}&gt;We will send you a one time SMS message&lt;/Text&gt;
            &lt;Text&gt;{"\n"}&lt;/Text&gt;
            {this.submitButton(this.props.auth.mobileIsValid)}
          &lt;/Card&gt;
          &lt;Animated.View style={{ height: this.state.keyboardHeight }} /&gt;
  
        &lt;/KeyboardAwareScrollView&gt;
  
      );
    }
  }
  
  function mapStateToProps(state) {
    return {
      auth: state.auth,
    };
  }
  function mapDispatchToProps(dispatch) {
    return bindActionCreators({
      OTPMobileNumberEntered: OTPMobileNumberEntered,
      submitOTPMobileNumber: submitOTPMobileNumber,
    }, dispatch)
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(LoginScreen)
  </code></pre>
  
  <p>But when I run this code. The app navigates like this 
  <strong>Preloader</strong> > finding no localtoken goes to <strong>Login</strong> > On submit of phone number it goes to <strong>Preloader</strong> > then <strong>Login</strong> > then finally <strong>OTP</strong></p>
  
  <p>Why won't it navigate directly to <strong>OTP</strong> without going to <strong>Preloader</strong> page? </p>
  
  <p>Following is the log on the expo console </p>
  
  <pre><code>FB Initialized
  21:23:51
  CWM -- Object {
    "OTPAPISubmissionSuccess": false,
    "OTPIsValid": true,
    "OTPNumber": "9000",
    "firebaseToken": "",
    "key": "",
    "localToken": "",
    "localTokenStatus": 0,
    "loginSuccess": 0,
    "mobileIsValid": true,
    "mobileNumber": "8891468710",
    "store": "",
    "user": "",
  }
  21:23:51
  Got Local Token null
  21:23:51
  localStore  null
  21:23:51
  gltf --
  21:23:51
  NXT props - PL Object {
    "auth": Object {
      "OTPAPISubmissionSuccess": false,
      "OTPIsValid": true,
      "OTPNumber": "9000",
      "firebaseToken": "",
      "key": "",
      "localToken": "",
      "localTokenStatus": -1,
      "loginSuccess": 0,
      "mobileIsValid": true,
      "mobileNumber": "8891468710",
      "store": "",
      "user": "",
    },
    "getLocalToken": [Function anonymous],
    "navigation": Object {
      "dispatch": [Function anonymous],
      "goBack": [Function goBack],
      "navigate": [Function navigate],
      "setParams": [Function setParams],
      "state": Object {
        "key": "Init-id-1507132425968-0",
        "routeName": "Preloader",
      },
    },
    "screenProps": undefined,
    "storeLocalToken": [Function anonymous],
  }
  21:23:51
  Navigating to Login !!!!
  21:23:51
  Navigation Dispatch:
  21:23:51
  Action:  Object {
    "action": undefined,
    "params": undefined,
    "routeName": "Login",
    "type": "Navigation/NAVIGATE",
  }
  21:23:51
  New State:  Object {
    "index": 1,
    "routes": Array [
      Object {
        "key": "Init-id-1507132425968-0",
        "routeName": "Preloader",
      },
      Object {
        "key": "id-1507132425968-1",
        "params": undefined,
        "routeName": "Login",
      },
    ],
  }
  21:23:51
  Last State:  Object {
    "index": 0,
    "routes": Array [
      Object {
        "key": "Init-id-1507132425968-0",
        "routeName": "Preloader",
      },
    ],
  }
  21:23:51
  21:34:09
  Pressed
  21:34:09
  HTTP request =&gt;  8891468710
  21:34:09
  Requesting HTTP
  21:34:09
  HTTP response, Object {
    "message": "OTP sent successfully",
    "status": "OK",
  }
  21:34:09
  checkOTPAPIStatus OK
  21:34:09
  checkOTPAPIStatus OK
  21:34:09
  OTP SEND -- Reducer !
  21:34:09
  NXT props - PL Object {
    "auth": Object {
      "OTPAPISubmissionSuccess": true,
      "OTPIsValid": true,
      "OTPNumber": "9000",
      "firebaseToken": "",
      "key": "",
      "localToken": "",
      "localTokenStatus": -1,
      "loginSuccess": 0,
      "mobileIsValid": true,
      "mobileNumber": "8891468710",
      "store": "",
      "user": "",
    },
    "getLocalToken": [Function anonymous],
    "navigation": Object {
      "dispatch": [Function anonymous],
      "goBack": [Function goBack],
      "navigate": [Function navigate],
      "setParams": [Function setParams],
      "state": Object {
        "key": "Init-id-1507132425968-0",
        "routeName": "Preloader",
      },
    },
    "screenProps": undefined,
    "storeLocalToken": [Function anonymous],
  }
  21:34:09
  Navigating to Login !!!!
  21:34:09
  Navigation Dispatch:
  21:34:09
  Action:  Object {
    "action": undefined,
    "params": undefined,
    "routeName": "Login",
    "type": "Navigation/NAVIGATE",
  }
  21:34:09
  New State:  Object {
    "index": 2,
    "routes": Array [
      Object {
        "key": "Init-id-1507132425968-0",
        "routeName": "Preloader",
      },
      Object {
        "key": "id-1507132425968-1",
        "params": undefined,
        "routeName": "Login",
      },
      Object {
        "key": "id-1507132425968-2",
        "params": undefined,
        "routeName": "Login",
      },
    ],
  }
  21:34:09
  Last State:  Object {
    "index": 1,
    "routes": Array [
      Object {
        "key": "Init-id-1507132425968-0",
        "routeName": "Preloader",
      },
      Object {
        "key": "id-1507132425968-1",
        "params": undefined,
        "routeName": "Login",
      },
    ],
  }
  21:34:09
  21:34:09
  Navigation Dispatch:
  21:34:09
  Action:  Object {
    "action": undefined,
    "params": undefined,
    "routeName": "Otp",
    "type": "Navigation/NAVIGATE",
  }
  21:34:09
  New State:  Object {
    "index": 3,
    "routes": Array [
      Object {
        "key": "Init-id-1507132425968-0",
        "routeName": "Preloader",
      },
      Object {
        "key": "id-1507132425968-1",
        "params": undefined,
        "routeName": "Login",
      },
      Object {
        "key": "id-1507132425968-2",
        "params": undefined,
        "routeName": "Login",
      },
      Object {
        "key": "id-1507132425968-3",
        "params": undefined,
        "routeName": "Otp",
      },
    ],
  }
  21:34:09
  Last State:  Object {
    "index": 2,
    "routes": Array [
      Object {
        "key": "Init-id-1507132425968-0",
        "routeName": "Preloader",
      },
      Object {
        "key": "id-1507132425968-1",
        "params": undefined,
        "routeName": "Login",
      },
      Object {
        "key": "id-1507132425968-2",
        "params": undefined,
        "routeName": "Login",
      },
    ],
  }
  </code></pre>