title: Handling logout properly with React Native
body: <p>I have a react native application that show's different navigators based on whether or not there is an authenticated firebase user.</p>
  
  <p>Here's my main App class:</p>
  
  <pre><code>export default class App extends Component {
    state = { loggedIn: null }
  
    componentWillMount() {
      firebase.initializeApp({...});
  
      firebase.auth().onAuthStateChanged(user =&gt; {
        if (user) {
          this.setState({ loggedIn: true });
        } else {
          this.setState({ loggedIn: false });
        }
      });
    }
  
    renderContent() {
      switch (this.state.loggedIn) {
        case true:
          return (
            &lt;MenuContext&gt;
              &lt;MainNavigator /&gt;
            &lt;/MenuContext&gt;
          );
        case false:
          return (
            &lt;AuthNavigator /&gt;
          );
        default:
          return (
            &lt;View style={styles.spinnerStyle}&gt;
              &lt;Spinner size="large" /&gt;
            &lt;/View&gt;
          );
      }
    }
  
    render() {
      return (
        &lt;Provider store={store}&gt;
          {this.renderContent()}
        &lt;/Provider&gt;
      );
    }
  }
  </code></pre>
  
  <p>Now this works perfectly fine with re-rendering the correct Navigator when a user logs in.</p>
  
  <p>The problem I have is with logging out. In my <code>MainNavigator</code> (the one that shows when a user is logged in), I have a logout button which logs the user out. Implemented like this:</p>
  
  <pre><code>signOutUser = async () =&gt; {
      try {
          await firebase.auth().signOut();
      } catch (e) {
          console.log(e);
      }
  }
  
  render() {
      return (
          ...
          &lt;Button title="logout" onPress={() =&gt; this.signOutUser()} /&gt;
      )
  }
  </code></pre>
  
  <p>This does what is expected, however, I get the following warning which I want to resolve:</p>
  
  <blockquote>
    <p>Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState or forceUpdate on an unmounted component. This is a no-op.</p>
  </blockquote>
  
  <p>What is the best practice way of implementing this logout functionality?</p>
  
  <p><strong>Edit:</strong> I'm using the <code>react-navigation</code> library for managing my application navigation.</p>