title: React Native - NavigationActions.navigate() not navigating from within redux
body: <p>I have two navigators one is stackNavigator and another is drawerNavigator. 
  what I want to do is dispatch an action and login is successfull and redirect the user to drawer navigator. I have used react-navigation.
  What I have done is I am dispatching the action login success in saga.
  Using <code>NavigationActions.navigate({ routeName: 'drawerStack' })</code> to dispatch the action.
  The action dispatches successfully but it doesn't navigate to drawerNavigator as shown in the picture below. What am I doing wrong?</p>
  
  <p><a href="https://i.stack.imgur.com/xjFWy.png" rel="noreferrer"><img src="https://i.stack.imgur.com/xjFWy.png" alt="enter image description here"></a></p>
  
  <blockquote>
    <p>saga.js</p>
  </blockquote>
  
  <pre><code>function* watchLoginRequest() {
    while (true) {
      const { state } = yield take(LOGIN_REQUEST);
  
      try {
        const payload = {
          state
        };
        const response = yield call(loginCall, payload);
        yield put(loginSuccess(response));
        yield setUser(response.user);
        yield put(NavigationActions.navigate({ routeName: 'drawerStack' }));
      } catch (err) {
        yield put(loginFailure(err.status));
      }
    }
  }
  </code></pre>
  
  <blockquote>
    <p>drawerNavigation.js</p>
  </blockquote>
  
  <pre><code>// drawer stack
  const DrawerStack = DrawerNavigator({
    testComponent: { screen: TestComponent },
  });
  
  const DrawerNav = StackNavigator({
    drawerStack: { screen: DrawerStack }
  }, {
    headerMode: 'float',
    navigationOptions: ({ navigation }) =&gt; ({
      headerStyle: { backgroundColor: 'green' },
      title: 'Logged In to your app!',
      headerLeft: &lt;Text onPress={() =&gt; navigation.navigate('DrawerOpen')}&gt;Menu&lt;/Text&gt;
    })
  });
  
  export default DrawerNav;
  </code></pre>
  
  <blockquote>
    <p>loginNavigation.js</p>
  </blockquote>
  
  <pre><code>// login stack
  const LoginStack = StackNavigator({
  
    startScreen: { screen: StartScreen },
    loginScreen: { screen: LoginScreen },
    personalInformation: { screen: PersonalInformation },
    vehicleInformation: { screen: VehicleInformation },
    availability: { screen: Availability },
    selectRegisteration: { screen: SelectRegisteration },
    serviceAddress: { screen: ServiceAddress },
  
  }, {
    headerMode: 'none',
    transitionConfig: TransitionConfiguration
  
  });
  
  
  export default LoginStack;
  </code></pre>
  
  <blockquote>
    <p>ReduxNavigation.js</p>
  </blockquote>
  
  <pre><code>class ReduxNavigation extends React.Component {
    constructor(props) {
      super(props);
      const { dispatch, nav } = props;
      const navigation = ReactNavigation.addNavigationHelpers({
        dispatch,
        state: nav
      });
      this.state = {
        loggedInStatus: false,
        checkedSignIn: false
      };
    }
  
    componentWillMount() {
      isSignedIn()
        .then(res =&gt; {
          if (res !== null) {
            this.setState({
              loggedInStatus: true,
              checkedSignIn: true
            });
          } else {
            console.log(res);
          }
        })
        .catch(err =&gt; console.log(err));
    }
  
    render() {
      return &lt;LoginNavigation navigation={this.navigation} /&gt;;
    }
  }
  
  const mapStateToProps = state =&gt; ({ nav: state.nav });
  export default connect(mapStateToProps)(ReduxNavigation);
  </code></pre>