title: React Native + Firebase - How to navigate to login screen after log-out?
body: <p>I want to set up authentication in my app, so I'm using firebase (I'm new to Firebase and authentication in react native in general). </p>
  
  <p>When I open the app, for some reason it is already logged in, and displays AppStack, instead of AuthStack which is supposed to be the LoginScreen. When I run this code inside my AppStack on a component: </p>
  
  <pre><code>onPress={() =&gt; {firebase.auth().signOut().then(function() {
    console.log('Signed Out');
  }, function(error) {
    console.error('Sign Out Error', error);
  });}}&gt;
  </code></pre>
  
  <p>it successfully logs 'Signed Out', but it doesn't switch screens.</p>
  
  <p>I know the problem lies in my state variable, <code>isLoggedIn</code>, but I don't know how to fix it. </p>
  
  <p>So this is my app.js, would really appreciate any feedback on how to make this work.</p>
  
  <pre><code>import * as React from "react";
  ...
  import * as firebase from 'firebase';
  
  var firebaseConfig = {
      ...
  };
  
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  
  const Stack = createStackNavigator();
  const Tab = createBottomTabNavigator();
  
  function AuthStack() {
  
      return(
      &lt;Stack.Navigator&gt;
          &lt;Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} /&gt;
      &lt;/Stack.Navigator&gt;)}
  
  function AppStack() {
      return (
      &lt;Tab.Navigator
          screenOptions={({ route }) =&gt; ({
              tabBarIcon: ({ focused, color, size }) =&gt; {
                  if (route.name === 'Order') {
                      return (
                          &lt;IconWithBadge
                              name={focused ? 'ios-book' : 'ios-book'}
                              size={size}
                              color={color}
                          /&gt;
                      );
                  } else if (route.name === 'Map') {
                      return (
                          &lt;Ionicons
                              name={focused ? 'md-globe' : 'md-globe'}
                              size={size}
                              color={color}
                          /&gt;
                      );
                  } else if (route.name === 'Profile') {
                      return (
                          &lt;Ionicons
                              name={focused ? 'md-contact' : 'md-contact'}
                              size={size}
                              color={color}
                          /&gt;
                      )
                  } else if (route.name === 'Notifications') {
                      return (
                          &lt;Ionicons
                              name={focused ? 'ios-notifications-outline' : 'ios-notifications-outline'}
                              size={size}
                              color={color}
                          /&gt;
                      )
                  }
              },
          })}
          tabBarOptions={{
              activeTintColor: 'orange',
              inactiveTintColor: 'gray',
          }}&gt;
          &lt;Tab.Screen name="Order" component={OrderScreen} /&gt;
          &lt;Tab.Screen name="Map" component={MapScreen} /&gt;
          &lt;Tab.Screen name="Profile" component={ProfileScreen} /&gt;
          &lt;Tab.Screen name="Notifications" component={Notifications} /&gt;
      &lt;/Tab.Navigator&gt;)}
  
  
  export default class App extends React.Component {
      state = {
          isLoggedIn: firebase.auth().onAuthStateChanged(user =&gt; { return user}),
      }
  
      render() {
      return(
          &lt;NavigationContainer&gt;
              { this.state.isLoggedIn ? (&lt;AppStack /&gt;) : (&lt;AuthStack /&gt;) }
          &lt;/NavigationContainer&gt;
      )}
  }
  
  
  function Notifications() {
      return (
          &lt;View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}&gt;
              &lt;Text&gt;Notifications&lt;/Text&gt;
          &lt;/View&gt;
      );
  }
  </code></pre>