Input field component

email.input.js

onEmailChange(text) {
    this.emailAddress = text;
}

<Input
    label="Email"
    placeholder="email@gmail.com"
    onChangeText={this.onEmailChange.bind(this)}
/>

input.js

import React from 'react';
import { TextInput, View, Text } from 'react-native';

const Input = ({ label, value, onChangeText, placeholder, secureTextEntry }) => (
    <View style={styles.containerStyle}>
        <Text style={styles.labelStyle}>{label}</Text>
        <TextInput
            secureTextEntry={secureTextEntry}
            placeholder={placeholder}
            autoCorrect={false}
            value={value}
            onChangeText={onChangeText}
            style={styles.inputStyle}
        />
    </View>
);

const styles = {
    inputStyle: {
        color: '#000',
        paddingRight: 5,
        paddingLeft: 5,
        fontSize: 18,
        lineHeight: 23,
        flex: 2
    },
    labelStyle: {
        fontSize: 18,
        paddingLeft: 20,
        flex: 1
    },
    containerStyle: {
        height: 40,
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center'
    }
};

export default Input;

login-constructor.js

constructor() {
    super()
    this.emailAddress = '';
    this.password = '';
}

password.input.js

onPasswordChange(text) {
    this.password = text;
}

<Input
    secureTextEntry
    label="password"
    placeholder="password"
    onChangeText={this.onPasswordChange.bind(this)}
/>