Add behaviour to show user a logout button if it's logged in, and the login form if not.

Add log out functionality

Author: maumercado

App.js

@@ -1,10 +1,12 @@
 import React, { Component } from "react";
 import { AppRegistry, View } from "react-native";
 import firebase from "firebase";
-import { Header } from "./src/components/common";
+import { Header, Button, Spinner } from "./src/components/common";
 import LoginForm from "./src/components/LoginForm";
 
 export default class App extends Component {
+    state = { loggedIn: null };
+
     componentWillMount() {
         const config = {
             apiKey: "AIzaSyB-7ErC1c7WAmNxm6ZTufAtJpK8HP57yi8",
@@ -15,13 +17,32 @@ export default class App extends Component {
             messagingSenderId: "876070193723"
         };
         firebase.initializeApp(config);
+
+        firebase.auth().onAuthStateChanged(user => {
+            if (user) {
+                this.setState({ loggedIn: true });
+            } else {
+                this.setState({ loggedIn: false });
+            }
+        });
+    }
+
+    renderContent() {
+        switch (this.state.loggedIn) {
+            case true:
+                return <Button onPress={() => firebase.auth().signOut()}>Log Out</Button>;
+            case false:
+                return <LoginForm />;
+            default:
+                return <Spinner size="large" />;
+        }
     }
 
     render() {
         return (
             <View>
                 <Header headerText="Authentication" />
-                <LoginForm />
+                {this.renderContent()}
             </View>
         );
     }

src/components/LoginForm.js

@@ -77,7 +77,7 @@ class LoginForm extends Component {
 
                 <Text style={styles.errorTextStyle}>{this.state.error}</Text>
 
-                <CardSection>{this.renderButton()}</CardSection>
+                {this.renderButton()}
             </Card>
         );
     }

src/components/common/Header.js

@@ -21,10 +21,7 @@ const styles = {
         height: 60,
         paddingTop: 15,
         shadowColor: "#000",
-        shadowOffset: {
-            width: 0,
-            height: 2
-        },
+        shadowOffset: { width: 0, height: 2 },
         shadowOpacity: 0.2,
         elevation: 2,
         position: "relative"