slap-react-native-toggle/components/TextArea.js

import React, { Component } from 'react';
import { TextInput, View } from 'react-native';
import PropTypes from 'prop-types';

export default class TextArea extends Component {
  static propTypes = {
    placeholder: PropTypes.string,
    onChange: PropTypes.func,
    selectionColor: PropTypes.string,
    value: PropTypes.string,
    max: PropTypes.number,
    textColor: PropTypes.string,
    placeholderColor: PropTypes.string,
    backgroundColor: PropTypes.string,
    height: PropTypes.number,
    marginTop: PropTypes.number,
    name: PropTypes.string
  };

  static defaultProps = {
    placeholder: '',
    onChange: () => {},
    selectionColor: '#4d4d4d',
    value: '',
    max: 500,
    textColor: '#4d4d4d',
    placeholderColor: '#3c4f5e',
    backgroundColor: '#f6f6f6',
    height: 200,
    marginTop: 0,
    name: ''
  };

  onChange = (value) => {
    this.props.onChange(value, this.props.name);
  };

  render() {
    return (
      <View style={{ height: this.props.height, marginTop: this.props.marginTop }}>
        <TextInput
          selectionColor={this.props.selectionColor}
          multiline
          autoCorrect={false}
          autoCapitalizer="none"
          placeholder={this.props.placeholder}
          style={{ backgroundColor: this.props.backgroundColor, flex: 1, color: this.props.textColor, padding: 12, fontSize: 14 }}
          placeholderTextColor={this.props.placeholderColor}
          onChangeText={this.onChange}
          value={this.props.value}
          maxLength={this.props.max}
          underlineColorAndroid="transparent"
        />
      </View>
    );
  }
}