[change] modernize TextInput

Rewrite TextInput to use function components and hooks.
Rewrite the unit tests to replace enzyme with testing-library.

Fix #1339

packages/docs/src/components/TextInput/examples/Multiline.js

@@ -1,12 +1,40 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { styles } from '../helpers';
 import { TextInput, View } from 'react-native';
 
+const MIN_HEIGHT = 24;
+
+function Autogrow() {
+  const [height, setHeight] = useState(MIN_HEIGHT);
+  const [value, setValue] = useState('');
+
+  function onContentSizeChange(e) {
+    const { height } = e.nativeEvent.contentSize;
+    setHeight(Math.max(MIN_HEIGHT, height));
+  }
+
+  function onChangeText(text) {
+    setValue(text);
+  }
+
+  return (
+    <View>
+      <TextInput
+        multiline={true}
+        onChangeText={onChangeText}
+        onContentSizeChange={onContentSizeChange}
+        style={[styles.multiline, { height }]}
+        value={value}
+      />
+    </View>
+  );
+}
+
 export default function Multiline() {
   return (
     <View>
       <TextInput multiline={true} style={styles.multiline} />
-      <TextInput multiline={true} style={styles.multiline} />
+      <Autogrow />
     </View>
   );
 }

packages/docs/src/components/TextInput/helpers.js

@@ -6,7 +6,6 @@ export const styles = StyleSheet.create({
     height: 26,
     borderWidth: 0.5,
     borderColor: '#0f0f0f',
-    flex: 1,
     padding: 4
   },
   eventLabel: {
@@ -16,7 +15,6 @@ export const styles = StyleSheet.create({
   multiline: {
     borderWidth: 0.5,
     borderColor: '#0f0f0f',
-    flex: 1,
     padding: 4,
     marginBottom: 4
   }