Basic login form functionality with reusable input

Author: maumercado

App.js

@@ -1,7 +1,8 @@
 import React, { Component } from "react";
 import { AppRegistry, View, Text } from "react-native";
-import { Header } from "./src/components/common";
 import firebase from "firebase";
+import { Header } from "./src/components/common";
+import LoginForm from "./src/components/LoginForm";
 
 export default class App extends Component {
     componentWillMount() {
@@ -20,7 +21,7 @@ export default class App extends Component {
         return (
             <View>
                 <Header headerText="Authentication" />
-                <Text>An app</Text>
+                <LoginForm />
             </View>
         );
     }

src/components/LoginForm.js

@@ -0,0 +1,47 @@
+import React, { Component } from "react";
+import firebase from "firebase";
+import { Button, Card, CardSection, Input } from "./common";
+
+class LoginForm extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            email: "",
+            password: ""
+        };
+    }
+
+    onButtonPress = () => {
+        const { email, password } = this.state;
+        firebase.auth().signInAndRetrieveDataWithEmailAndPassword(email, password);
+    };
+
+    render() {
+        return (
+            <Card>
+                <CardSection>
+                    <Input
+                        value={this.state.email}
+                        onChangeText={email => this.setState({ email })}
+                        label="Email"
+                        placeholder="user@example.com"
+                    />
+                </CardSection>
+                <CardSection>
+                    <Input
+                        value={this.state.password}
+                        onChangeText={password => this.setState({ password })}
+                        label="Password"
+                        placeholder="password"
+                        secureTextEntry
+                    />
+                </CardSection>
+                <CardSection>
+                    <Button onPress={this.onButtonPress}>Login</Button>
+                </CardSection>
+            </Card>
+        );
+    }
+}
+
+export default LoginForm;

src/components/common/Input.js

@@ -0,0 +1,43 @@
+import React from "react";
+import { TextInput, View, Text } from "react-native";
+
+const Input = ({ label, value, onChangeText, placeholder, secureTextEntry }) => {
+    const { inputStyle, labelStyle, containerStyle } = styles;
+    return (
+        <View style={containerStyle}>
+            <Text style={labelStyle}>{label}</Text>
+            <TextInput
+                placeholder={placeholder}
+                value={value}
+                onChange={onChangeText}
+                style={inputStyle}
+                autoCorrect={false}
+                secureTextEntry={secureTextEntry}
+            />
+        </View>
+    );
+};
+
+const styles = {
+    inputStyle: {
+        color: "#000",
+        paddingRight: 5,
+        paddingLeft: 5,
+        fontSize: 18,
+        lineHeight: 23,
+        flex: 2
+    },
+    labelStyle: {
+        fontSize: 18,
+        paddingLeft: 20,
+        flex: 1
+    },
+    containerStyle: {
+        flex: 1,
+        height: 40,
+        flexDirection: "row",
+        alignItems: "center"
+    }
+};
+
+export { Input };

src/components/common/index.js

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