Intrinsic content size for ReactTextInput (aka autoexpandable <TextInput> on Android)

Summary:
After this diff the intrinsic content size of <TextInput> reflects the size of text inside EditText,
it means that if there is no additional style constraints, <TextInput> will grow with containing text.
If you want to constraint minimum or maximum height, just do it via Yoga styling.

Reviewed By: achen1

Differential Revision: D5828366

fbshipit-source-id: eccd0cb4ccf724c7096c947332a64a0a1e402673

RNTester/js/TextInputExample.android.js

@@ -18,6 +18,8 @@ var {
   TextInput,
   View,
   StyleSheet,
+  Slider,
+  Switch,
 } = ReactNative;
 
 class TextEventsExample extends React.Component<{}, $FlowFixMeState> {
@@ -70,27 +72,6 @@ class TextEventsExample extends React.Component<{}, $FlowFixMeState> {
   }
 }
 
-class AutoExpandingTextInput extends React.Component<$FlowFixMeProps, $FlowFixMeState> {
-  constructor(props) {
-    super(props);
-    this.state = {
-      height: 0,
-    };
-  }
-  render() {
-    return (
-      <TextInput
-        {...this.props}
-        multiline={true}
-        onContentSizeChange={(event) => {
-          this.setState({height: event.nativeEvent.contentSize.height});
-        }}
-        style={[styles.default, {height: Math.min(200, Math.max(35, this.state.height))}]}
-      />
-    );
-  }
-}
-
 class RewriteExample extends React.Component<$FlowFixMeProps, $FlowFixMeState> {
   constructor(props) {
     super(props);
@@ -330,12 +311,59 @@ class SelectionExample extends React.Component<$FlowFixMeProps, SelectionExample
   }
 }
 
+class AutogrowingTextInputExample extends React.Component<{}> {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      width: 100,
+      multiline: true,
+      text: '',
+    };
+  }
+
+  componentDidReceiveProps(props) {
+    this.setState({
+      multiline: props.multiline,
+    });
+  }
+
+  render() {
+    var {style, multiline, ...props} = this.props;
+    return (
+      <View>
+        <Text>Width:</Text>
+        <Slider
+          value={100}
+          minimumValue={0}
+          maximumValue={100}
+          step={10}
+          onValueChange={(value) => this.setState({width: value})}
+        />
+        <Text>Multiline:</Text>
+        <Switch
+          value={this.state.multiline}
+          onValueChange={(value) => this.setState({multiline: value})}
+        />
+        <Text>TextInput:</Text>
+        <TextInput
+          multiline={this.state.multiline}
+          style={[style, {width: this.state.width + '%'}]}
+          onChangeText={(value) => this.setState({text: value})}
+          {...props}
+        />
+        <Text>Plain text value representation:</Text>
+        <Text>{this.state.text}</Text>
+      </View>
+    );
+  }
+}
+
 var styles = StyleSheet.create({
   multiline: {
     height: 60,
     fontSize: 16,
-    padding: 4,
-    marginBottom: 10,
   },
   eventLabel: {
     margin: 3,
@@ -343,7 +371,6 @@ var styles = StyleSheet.create({
   },
   singleLine: {
     fontSize: 16,
-    padding: 4,
   },
   singleLineWithHeightTextInput: {
     height: 30,
@@ -363,7 +390,8 @@ exports.examples = [
       return (
         <TextInput
           autoFocus={true}
-          style={styles.singleLine}
+          multiline={true}
+          style={styles.input}
           accessibilityLabel="I am the accessibility label for text input"
         />
       );
@@ -613,12 +641,22 @@ exports.examples = [
     render: function() {
       return (
         <View>
-          <AutoExpandingTextInput
-            placeholder="height increases with content"
-            defaultValue="React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about — learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native."
+          <AutogrowingTextInputExample
             enablesReturnKeyAutomatically={true}
             returnKeyType="done"
-          />
+            multiline={true}
+            style={{maxHeight: 400, minHeight: 20, backgroundColor: '#eeeeee'}}
+          >
+            generic generic generic
+            <Text style={{fontSize: 6, color: 'red'}}>
+              small small small small small small
+            </Text>
+            <Text>regular regular</Text>
+            <Text style={{fontSize: 30, color: 'green'}}>
+              huge huge huge huge huge
+            </Text>
+            generic generic generic
+          </AutogrowingTextInputExample>
         </View>
       );
     }