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 =