Add spinner to show the user something is happening on pressing button

Fix issue with onChangeText in Text input component.

Created Spinner component

Removed unnecessary component from app.js

Author: maumercado

App.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { AppRegistry, View, Text } from "react-native";
+import { AppRegistry, View } from "react-native";
 import firebase from "firebase";
 import { Header } from "./src/components/common";
 import LoginForm from "./src/components/LoginForm";

src/components/LoginForm.js

@@ -3,31 +3,57 @@ import { Text } from "react-native";
 
 import firebase from "firebase";
 
-import { Button, Card, CardSection, Input } from "./common";
+import { Button, Card, CardSection, Input, Spinner } from "./common";
 
 class LoginForm extends Component {
     constructor(props) {
         super(props);
+
         this.state = {
             email: "",
             password: "",
-            error: ""
+            error: "",
+            loading: false
         };
     }
 
+    onLoginSuccess = () => {
+        this.setState({
+            email: "",
+            password: "",
+            loading: false,
+            error: ""
+        });
+    };
+
     onButtonPress = async () => {
         const { email, password } = this.state;
+        this.setState({ error: "", loading: true });
         try {
             await firebase.auth().signInAndRetrieveDataWithEmailAndPassword(email, password);
+            this.onLoginSuccess();
         } catch (err) {
             try {
                 await firebase.auth().createUserWithEmailAndPassword(email, password);
+                this.onLoginSuccess();
             } catch (error) {
-                this.setState({ error: "Authentication Failed" });
+                this.onLoginFail();
             }
         }
     };
 
+    onLoginFail = () => {
+        this.setState({ error: "Authentication Failed", loading: false });
+    };
+
+    renderButton() {
+        if (this.state.loading) {
+            return <Spinner size="small" />;
+        }
+
+        return <Button onPress={this.onButtonPress}>Login</Button>;
+    }
+
     render() {
         return (
             <Card>
@@ -51,9 +77,7 @@ class LoginForm extends Component {
 
                 <Text style={styles.errorTextStyle}>{this.state.error}</Text>
 
-                <CardSection>
-                    <Button onPress={this.onButtonPress}>Login</Button>
-                </CardSection>
+                <CardSection>{this.renderButton()}</CardSection>
             </Card>
         );
     }

src/components/common/Input.js

@@ -9,7 +9,7 @@ const Input = ({ label, value, onChangeText, placeholder, secureTextEntry }) =>
             <TextInput
                 placeholder={placeholder}
                 value={value}
-                onChange={onChangeText}
+                onChangeText={onChangeText}
                 style={inputStyle}
                 autoCorrect={false}
                 secureTextEntry={secureTextEntry}

src/components/common/Spinner.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { View, ActivityIndicator } from "react-native";
+const Spinner = ({ size = "large" }) => {
+    return (
+        <View style={styles.spinnerStyle}>
+            <ActivityIndicator size={size} />
+        </View>
+    );
+};
+
+const styles = {
+    spinnerStyle: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center"
+    }
+};
+
+export { Spinner };

src/components/common/index.js

@@ -3,3 +3,4 @@ export * from "./Card";
 export * from "./CardSection";
 export * from "./Header";
 export * from "./Input";
+export * from "./Spinner";