Skip to content

Instantly share code, notes, and snippets.

@nikki93
Created September 19, 2016 01:38
Show Gist options
  • Save nikki93/3dbfc8f28d9fc4280618527891edc5e3 to your computer and use it in GitHub Desktop.
Save nikki93/3dbfc8f28d9fc4280618527891edc5e3 to your computer and use it in GitHub Desktop.
/**
* 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 });
};
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment