GrowingTextInput.js

/**
 * Copyright 2015-present 650 Industries. All rights reserved.
 *
 * @providesModule GrowingTextInput
 */
import React, { PropTypes } from 'react';
import {
  TextInput,
} from 'react-native';

export default class GrowingTextInput extends React.Component {
  static propTypes = {
    minHeight: PropTypes.number,
    onChange: PropTypes.func,
    ...TextInput.propTypes,
  };

  static defaultProps = {
    minHeight: 20,
  };

  constructor(props, context) {
    super(props, context);

    this.state = {
      height: props.minHeight,
    };
  }

  focus() {
    this._ref.focus();
  }

  blur() {
    this._ref.blur();
  }

  clear() {
    this._ref.clear();
  }

  measure(callback) {
    this._ref.measure(callback);
  }

  setNativeProps(props) {
    this._ref.setNativeProps(props);
  }

  render() {
    let onChangeContentSize = this.props.multiline !== false ? this._onChangeContentSize : null;

    return (
      <TextInput
        ref={c => { this._ref = c; }}
        multiline
        underlineColorAndroid="rgba(0, 0, 0, 0)"
        {...this.props}
        onChangeContentSize={onChangeContentSize}
        onChange={(e) => {
          if (this.props.onChange) {
            this.props.onChange(e);
          }
        }}
        style={[
          this.props.style,
          { height: Math.max(this.props.minHeight, this.state.height) },
        ]}
      />
    );
  }

  _onChangeContentSize = (e) => {
    this.setState({ height: e.nativeEvent.contentSize.height });
  };
}