diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js index 1ef2d9b2f7a28b..2fa1a103d29618 100644 --- a/Libraries/Components/TextInput/TextInput.js +++ b/Libraries/Components/TextInput/TextInput.js @@ -168,6 +168,7 @@ const DataDetectorTypes = [ * or control this param programmatically with native code. * */ + // $FlowFixMe(>=0.41.0) const TextInput = createReactClass({ displayName: 'TextInput', @@ -207,6 +208,12 @@ const TextInput = createReactClass({ * The default value is `false`. */ autoFocus: PropTypes.bool, + /** + * If true, will increase the height of the textbox if need be. If false, + * the textbox will become scrollable once the height is reached. The + * default value is false. + */ + autoGrow: PropTypes.bool, /** * If `false`, text is not editable. The default value is `true`. */ @@ -306,6 +313,11 @@ const TextInput = createReactClass({ * instead of implementing the logic in JS to avoid flicker. */ maxLength: PropTypes.number, + /** + * If autogrow is `true`, limits the height that the TextInput box can grow + * to. Once it reaches this height, the TextInput becomes scrollable. + */ + maxHeight: PropTypes.number, /** * Sets the number of lines for a `TextInput`. Use it with multiline set to * `true` to be able to fill the lines. @@ -541,6 +553,10 @@ const TextInput = createReactClass({ */ mixins: [NativeMethodsMixin, TimerMixin], + getInitialState: function() { + return {nativeHeight: this._originalNativeHeight}; + }, + /** * Returns `true` if the input is currently focused; `false` otherwise. */ @@ -558,6 +574,7 @@ const TextInput = createReactClass({ _focusSubscription: (undefined: ?Function), _lastNativeText: (undefined: ?string), _lastNativeSelection: (undefined: ?Selection), + _originalNativeHeight: (-1: number), componentDidMount: function() { this._lastNativeText = this.props.value; @@ -673,6 +690,7 @@ const TextInput = createReactClass({ children = [children, props.inputView]; } props.style.unshift(styles.multilineInput); + props.style.push({height: this.state.nativeHeight}); textContainer = ; } - return ( 1) { children = {children}; } - if (props.selection && props.selection.end == null) { props.selection = {start: props.selection.start, end: props.selection.start}; } - const textContainer =