Modern TextInput's render function for iOS

Reviewed By: sahrens Differential Revision: D6690930 fbshipit-source-id: a6ce5f006b4e6d63feef0f9c0743fb19b0e546fa
facebook · Jan 15, 2018 · 5dbb3c5 · 5dbb3c5
1 parent a5af841
commit 5dbb3c5
Showing 1 changed file with 55 additions and 2 deletions.
diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js
@@ -669,7 +669,9 @@ const TextInput = createReactClass({
 
   render: function() {
     if (Platform.OS === 'ios') {
-      return this._renderIOS();
+      return UIManager.RCTVirtualText
+        ? this._renderIOS()
+        : this._renderIOSLegacy();
     } else if (Platform.OS === 'android') {
       return this._renderAndroid();
     }
@@ -687,7 +689,7 @@ const TextInput = createReactClass({
     this._inputRef = ref;
   },
 
-  _renderIOS: function() {
+  _renderIOSLegacy: function() {
     var textContainer;
 
     var props = Object.assign({}, this.props);
@@ -778,6 +780,57 @@ const TextInput = createReactClass({
     );
   },
 
+  _renderIOS: function() {
+    var props = Object.assign({}, this.props);
+    props.style = [this.props.style];
+
+    if (props.selection && props.selection.end == null) {
+      props.selection = {
+        start: props.selection.start,
+        end: props.selection.start,
+      };
+    }
+
+    const RCTTextInputView = props.multiline
+      ? RCTMultilineTextInputView
+      : RCTSinglelineTextInputView;
+
+    if (props.multiline) {
+      props.style.unshift(styles.multilineInput);
+    }
+
+    const textContainer = (
+      <RCTTextInputView
+        ref={this._setNativeRef}
+        {...props}
+        onFocus={this._onFocus}
+        onBlur={this._onBlur}
+        onChange={this._onChange}
+        onContentSizeChange={this.props.onContentSizeChange}
+        onSelectionChange={this._onSelectionChange}
+        onTextInput={this._onTextInput}
+        onSelectionChangeShouldSetResponder={emptyFunction.thatReturnsTrue}
+        text={this._getText()}
+        dataDetectorTypes={this.props.dataDetectorTypes}
+        onScroll={this._onScroll}
+      />
+    );
+
+    return (
+      <TouchableWithoutFeedback
+        onLayout={props.onLayout}
+        onPress={this._onPress}
+        rejectResponderTermination={true}
+        accessible={props.accessible}
+        accessibilityLabel={props.accessibilityLabel}
+        accessibilityTraits={props.accessibilityTraits}
+        nativeID={this.props.nativeID}
+        testID={props.testID}>
+        {textContainer}
+      </TouchableWithoutFeedback>
+    );
+  },
+
   _renderAndroid: function() {
     const props = Object.assign({}, this.props);
     props.style = [this.props.style];