Code refactoring

Move text inputs and buttons into its own components.

App.js

@@ -1,14 +1,11 @@
 import React, { Component } from 'react';
 import {
-    StyleSheet,
-    KeyboardAvoidingView,
-    Text,
-    Keyboard,
-    TextInput,
-    TouchableOpacity,
-    Alert,
+    StyleSheet, KeyboardAvoidingView, Text, Keyboard, Alert,
 } from 'react-native';
 
+import FormTextInput from './js/components/FormTextInput';
+import FormButton from './js/components/FormButton';
+
 export default class App extends Component {
     constructor(props) {
         super(props);
@@ -64,32 +61,26 @@ export default class App extends Component {
         return (
             <KeyboardAvoidingView behavior="padding" style={styles.container}>
                 <Text style={styles.screenTitle}>Salary Calculator</Text>
-                <TextInput
-                    style={styles.textInput}
-                    placeholder="$/hour"
+                <FormTextInput
+                    placeholder="$0"
                     keyboardType="numeric"
                     returnKeyType="done"
                     blurOnSubmit
                     onChangeText={text => this.setState({ hourlyRate: text })}
                     value={hourlyRate}
+                    labelText="Hourly Rate"
                 />
-                <TextInput
-                    style={styles.textInput}
-                    placeholder="Hours/week"
+                <FormTextInput
+                    placeholder="0"
                     keyboardType="numeric"
                     returnKeyType="done"
                     blurOnSubmit
                     onChangeText={text => this.setState({ hoursPerWeek: text })}
                     value={hoursPerWeek}
+                    labelText="Hours / week"
                 />
-
-                <TouchableOpacity style={styles.button} onPress={this.handleSubmit}>
-                    <Text style={styles.buttonText}>Calculate</Text>
-                </TouchableOpacity>
-
-                <TouchableOpacity style={styles.button} onPress={this.resetForm}>
-                    <Text style={styles.buttonText}>Reset</Text>
-                </TouchableOpacity>
+                <FormButton onPress={this.handleSubmit}>Calculate</FormButton>
+                <FormButton onPress={this.resetForm}>Reset</FormButton>
             </KeyboardAvoidingView>
         );
     }
@@ -108,28 +99,4 @@ const styles = StyleSheet.create({
         margin: 10,
         color: '#FFF',
     },
-    textInput: {
-        height: 40,
-        borderColor: '#FFF',
-        borderWidth: 1,
-        borderRadius: 3,
-        backgroundColor: '#FFF',
-        paddingHorizontal: 10,
-        marginBottom: 10,
-        fontSize: 18,
-        color: '#3F4EA5',
-    },
-    button: {
-        backgroundColor: '#FD6592',
-        borderRadius: 3,
-        height: 40,
-        marginBottom: 10,
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    buttonText: {
-        color: '#FFF',
-        fontWeight: 'bold',
-        fontSize: 16,
-    },
 });

js/components/FormButton.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { TouchableOpacity, Text, StyleSheet } from 'react-native';
+
+/**
+ * A stateless function component which renders a button.
+ *
+ * @param {obj} props
+ */
+const FormButton = (props) => {
+    const { children, onPress } = props;
+
+    return (
+        <TouchableOpacity style={styles.button} onPress={onPress}>
+            <Text style={styles.buttonText}>{children}</Text>
+        </TouchableOpacity>
+    );
+};
+
+FormButton.propTypes = {
+    onPress: PropTypes.func,
+    children: PropTypes.string.isRequired,
+};
+
+FormButton.defaultProps = {
+    onPress: f => f,
+};
+
+const styles = StyleSheet.create({
+    button: {
+        backgroundColor: '#FD6592',
+        borderRadius: 3,
+        height: 40,
+        marginBottom: 15,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    buttonText: {
+        color: '#FFF',
+        fontWeight: 'bold',
+        fontSize: 16,
+    },
+});
+
+export default FormButton;

js/components/FormTextInput.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+    View, TextInput, Text, StyleSheet,
+} from 'react-native';
+
+/**
+ * A component which renders a TextInput with a label above it.
+ * Note: This component can easily be written as a stateless function
+ *      since it only includes the `render()` function and nothing else
+ *      (see FormButton component as an example).
+ */
+class FormTextInput extends React.Component {
+    render() {
+        const { labelText, ...inputProps } = this.props;
+
+        return (
+            <View style={styles.inputWrapper}>
+                {labelText && <Text style={styles.label}>{labelText}</Text>}
+                <TextInput style={styles.textInput} {...inputProps} />
+            </View>
+        );
+    }
+}
+
+FormTextInput.propTypes = {
+    labelText: PropTypes.string,
+};
+
+FormTextInput.defaultProps = {
+    labelText: null,
+};
+
+const styles = StyleSheet.create({
+    inputWrapper: {
+        marginBottom: 15,
+        flexDirection: 'column',
+    },
+    textInput: {
+        height: 40,
+        borderColor: '#FFF',
+        borderWidth: 1,
+        borderRadius: 3,
+        backgroundColor: '#FFF',
+        paddingHorizontal: 10,
+        fontSize: 18,
+        color: '#3F4EA5',
+    },
+    label: {
+        color: '#FFF',
+        marginBottom: 5,
+    },
+});
+
+export default FormTextInput;