React Native TextInput as TextArea

textArea.js

import React, { Component } from 'react';
import { View, StyleSheet, Picker, TouchableOpacity, Text, TextInput } from 'react-native';
import { withNavigation } from 'react-navigation';

const MAX_LENGTH = 150;

const styles = StyleSheet.create({
    header: {
        color: '#9EA0A1',
        fontSize: 18,
        fontWeight: 'bold',
        marginLeft: 10,
        marginRight: 10
    },
    container: {
        flex: 1,
        backgroundColor: '#122d36',
        height: '100%'
    },
    inputContainer: {
        flex: 95,
    },
    input: {
        color: 'white',
        height: '100%',
        textAlignVertical: 'top'
    },
    labelContainer: {
        flex: 5,
        flexDirection:'row',
        height: '100%',
        backgroundColor: '#122d36',
        padding: 10
    },
    label: {
        flex: 1, 
        alignItems: 'stretch',
        color: 'white'
    }
});

class StoryPromptScreen extends Component {

    static navigationOptions = ({ navigation }) => {
        return {
            headerLeft: (
                <TouchableOpacity onPress={ () => navigation.goBack() }>
                    <Text style={ styles.header}>X</Text>
                </TouchableOpacity>
            ),
            headerRight: (
                <TouchableOpacity onPress={ () => console.log('save me') }>
                    <Text style={ styles.header }> Save</Text>
                </TouchableOpacity>
            )
        }
    };

    constructor(props) {
        super(props);
        this.state = { text: '', characters: 0, height: 0 };
    }
   
    render() {
        const length = this.state.text.length;
        const charLeft = MAX_LENGTH - length;

        return (
            <View style={ styles.container }>
                <View style={ styles.inputContainer }>
                    <TextInput
                        style={ styles.input }
                        onChangeText={ text => this.setState({ text, characters: this.state.text.length })}
                        multiline={ true }
                        numberOfLines={ 30 }
                        maxLength={ MAX_LENGTH }
                        value={ this.state.text }
                        placeholder={ this.props.placeholder }
                        editable={ true }
                    />
                </View>
                <View style={[ styles.labelContainer ]}>
                    <Text style={ styles.label }>{ charLeft } characters left.</Text>
                </View>
            </View>
        );
    }
};

export default withNavigation(StoryPromptScreen);