title: Redirect loggedIn Firebase user to Main Component with react-native-router-flux
body: <p>I'm trying to direct the user to Main Component every time the app starts up.</p>
  
  <p>I use react-native-router-flux as my navigation wrapper, Firebase as backend and Redux as state management library.</p>
  
  <p>Here's the problem. I do <code>firebase.auth().onAuthStateChanged()</code> in my Router Component to determine whether the user is loggedIn. </p>
  
  <p>If there is no user, then return Login component.</p>
  
  <p>If there is a user logged in, return Main Component, as the base component in the stack.</p>
  
  <p>This <a href="https://stackoverflow.com/questions/38687199/react-native-redirect-logged-in-firebase-user-to-home-component">SO POST</a> has the exact problem and the answer proposed suggests using <a href="https://github.com/aksonov/react-native-router-flux/blob/master/docs/OTHER_INFO.md#switch-new-feature" rel="nofollow noreferrer">Switch Feature</a> from react-native-router-flux. I gave it a shot, not helpful.</p>
  
  <p>Here is my code.</p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  
  import firebase from 'firebase';
  import { Provider } from 'react-redux';
  import { createStore, applyMiddleware } from 'redux';
  import ReduxThunk from 'redux-thunk'
  import reducers from './reducers';
  
  import Router from './Router';
  
  class App extends Component {
  
    componentWillMount() {
      firebase.initializeApp({
        //my firebase config
      });
    }
  
    render() {
      const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
  
      return (
        &lt;Provider store={store}&gt;
          &lt;Router /&gt;
        &lt;/Provider&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>Router.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { isLoggedIn } from './actions';
  import { Scene, Router, Actions, Switch } from 'react-native-router-flux';
  
  import firebase from 'firebase';
  
  import Login from './components/auth/Login';
  import Register from './components/auth/Register';
  import Main from './components/Main';
  
  class RouterComponent extends Component {
  
    state = { loggedIn: false }
  
    componentWillMount() {
      this.props.isLoggedIn();
    }
  
    render() {
      return(
        &lt;Router sceneStyle={{ }} hideNavBar={true}&gt;
          &lt;Scene key="root"&gt;
            &lt;Scene key="authContainer" initial&gt;
              &lt;Scene key="login" component={Login} title="Login Page" /&gt;
              &lt;Scene key="register" component={Register} title="Register Page" /&gt;
            &lt;/Scene&gt;
  
            &lt;Scene key="mainContainer"&gt;
              &lt;Scene key="main" component={Main} title="Main Page" /&gt;
            &lt;/Scene&gt;
          &lt;/Scene&gt;
        &lt;/Router&gt;
      )
    }
  }
  
  export default connect(null, { isLoggedIn })(RouterComponent);
  </code></pre>
  
  <p><strong>Some of my redux action creators</strong></p>
  
  <pre><code>export const isLoggedIn = (dispatch) =&gt; {
    return(dispatch) =&gt; {
      firebase.auth().onAuthStateChanged((user) =&gt; loginUserSuccess(dispatch, user));
    };
  };
  
  const loginUserSuccess = (dispatch, user) =&gt; {
    dispatch({
      type: LOGIN_USER_SUCCESS,
      payload: user
    });
    Actions.mainContainer({ type: 'reset'});
  };
  </code></pre>
  
  <p>I understand the exact motivation can be achieved with the async snippet below:</p>
  
  <pre><code>firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
      // return &lt;Main /&gt;
    } else {
      // Stay at login screen
    }
  });
  </code></pre>
  
  <p>but I'm trying to recreate it with react-native-router-flux.</p>
  
  <p>Here's a gif-shot of my app to help you guys understand more. 
  A user has already logged in. The Main screen is being dispatched after some time. Any thought?
  <a href="https://i.stack.imgur.com/snoco.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/snoco.gif" alt="GIF"></a></p>