Add support for multiline TextInput via UITextView

Examples/UIExplorer/TextInputExample.js

@@ -88,16 +88,31 @@ var styles = StyleSheet.create({
     height: 26,
     borderWidth: 0.5,
     borderColor: '#0f0f0f',
-    padding: 4,
     flex: 1,
     fontSize: 13,
+    padding: 4,
   },
   multiline: {
     borderWidth: 0.5,
     borderColor: '#0f0f0f',
     flex: 1,
     fontSize: 13,
     height: 50,
+    padding: 4,
+  },
+  multilineWithFontStyles: {
+    color: 'purple',
+    fontWeight: 'bold',
+    fontSize: 18,
+    fontFamily: 'Cochin',
+    height: 80,
+  },
+  multilineChild: {
+    width: 50,
+    height: 40,
+    position: 'absolute',
+    right: 5,
+    backgroundColor: 'red',
   },
   eventLabel: {
     margin: 3,
@@ -118,7 +133,7 @@ var styles = StyleSheet.create({
 });
 
 exports.title = '<TextInput>';
-exports.description = 'Single-line text inputs.';
+exports.description = 'Single and multi-line text inputs.';
 exports.examples = [
   {
     title: 'Auto-focus',
@@ -313,7 +328,7 @@ exports.examples = [
   },
   {
     title: 'Clear and select',
-    render: function () {
+    render: function() {
       return (
         <View>
           <WithLabel label="clearTextOnFocus">
@@ -336,4 +351,51 @@ exports.examples = [
       );
     }
   },
+  {
+    title: 'Multiline',
+    render: function() {
+      return (
+        <View>
+          <WithLabel label="multiline">
+            <TextInput
+              value="plain multiline text input"
+              multiline={true}
+              style={styles.multiline}
+            />
+          </WithLabel>
+          <WithLabel label="multilineStyled">
+            <TextInput
+              placeholder="mutliline text input with font styles and placeholder"
+              multiline={true}
+              clearTextOnFocus={true}
+              autoCorrect={true}
+              autoCapitalize="words"
+              placeholderTextColor="red"
+              keyboardType="url"
+              style={[styles.multiline, styles.multilineWithFontStyles]}
+            />
+          </WithLabel>
+          <WithLabel label="multilineDisabled">
+            <TextInput
+              placeholder="uneditable mutliline text input"
+              editable={false}
+              multiline={true}
+              style={styles.multiline}
+            />
+          </WithLabel>
+
+          <WithLabel label="multilineChildren">
+            <TextInput
+              placeholder="multiline with children"
+              multiline={true}
+              enablesReturnKeyAutomatically={true}
+              returnKeyType='go'
+              style={styles.multiline}>
+              <View style={styles.multilineChild} />
+            </TextInput>
+          </WithLabel>
+        </View>
+      )
+    }
+  }
 ];

Libraries/Components/TextInput/TextInput.js

@@ -38,6 +38,7 @@ var returnKeyTypeConsts = RCTUIManager.UIReturnKeyType;
 var RCTTextViewAttributes = merge(ReactIOSViewAttributes.UIView, {
   autoCorrect: true,
   autoCapitalize: true,
+  clearTextOnFocus: true,
   color: true,
   editable: true,
   fontFamily: true,
@@ -48,6 +49,7 @@ var RCTTextViewAttributes = merge(ReactIOSViewAttributes.UIView, {
   returnKeyType: true,
   enablesReturnKeyAutomatically: true,
   secureTextEntry: true,
+  selectTextOnFocus: true,
   mostRecentEventCounter: true,
   placeholder: true,
   placeholderTextColor: true,
@@ -58,8 +60,6 @@ var RCTTextFieldAttributes = merge(RCTTextViewAttributes, {
   caretHidden: true,
   enabled: true,
   clearButtonMode: true,
-  clearTextOnFocus: true,
-  selectTextOnFocus: true,
 });
 
 var onlyMultiline = {
@@ -498,6 +498,8 @@ var TextInput = React.createClass({
           autoCapitalize={autoCapitalize}
           autoCorrect={this.props.autoCorrect}
           clearButtonMode={clearButtonMode}
+          selectTextOnFocus={this.props.selectTextOnFocus}
+          clearTextOnFocus={this.props.clearTextOnFocus}
         />;
     }
 

Libraries/Text/RCTText.xcodeproj/project.pbxproj

@@ -12,6 +12,8 @@
 		58B511D01A9E6C5C00147676 /* RCTShadowText.m in Sources */ = {isa = PBXBuildFile; fileRef = 58B511CB1A9E6C5C00147676 /* RCTShadowText.m */; };
 		58B511D11A9E6C5C00147676 /* RCTTextManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 58B511CD1A9E6C5C00147676 /* RCTTextManager.m */; };
 		58B512161A9E6EFF00147676 /* RCTText.m in Sources */ = {isa = PBXBuildFile; fileRef = 58B512141A9E6EFF00147676 /* RCTText.m */; };
+		BBD12D921AEF2D7900F7DEDD /* RCTTextView.m in Sources */ = {isa = PBXBuildFile; fileRef = BBD12D8F1AEF2D7900F7DEDD /* RCTTextView.m */; };
+		BBD12D931AEF2D7900F7DEDD /* RCTTextViewManager.m in Sources */ = {isa = PBXBuildFile; fileRef = BBD12D911AEF2D7900F7DEDD /* RCTTextViewManager.m */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXCopyFilesBuildPhase section */
@@ -38,6 +40,10 @@
 		58B511CD1A9E6C5C00147676 /* RCTTextManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTTextManager.m; sourceTree = "<group>"; };
 		58B512141A9E6EFF00147676 /* RCTText.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTText.m; sourceTree = "<group>"; };
 		58B512151A9E6EFF00147676 /* RCTText.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTText.h; sourceTree = "<group>"; };
+		BBD12D8E1AEF2D7900F7DEDD /* RCTTextView.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTTextView.h; sourceTree = "<group>"; };
+		BBD12D8F1AEF2D7900F7DEDD /* RCTTextView.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTTextView.m; sourceTree = "<group>"; };
+		BBD12D901AEF2D7900F7DEDD /* RCTTextViewManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTTextViewManager.h; sourceTree = "<group>"; };
+		BBD12D911AEF2D7900F7DEDD /* RCTTextViewManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTTextViewManager.m; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -64,6 +70,10 @@
 				58B512141A9E6EFF00147676 /* RCTText.m */,
 				58B511CC1A9E6C5C00147676 /* RCTTextManager.h */,
 				58B511CD1A9E6C5C00147676 /* RCTTextManager.m */,
+				BBD12D8E1AEF2D7900F7DEDD /* RCTTextView.h */,
+				BBD12D8F1AEF2D7900F7DEDD /* RCTTextView.m */,
+				BBD12D901AEF2D7900F7DEDD /* RCTTextViewManager.h */,
+				BBD12D911AEF2D7900F7DEDD /* RCTTextViewManager.m */,
 				58B5119C1A9E6C1200147676 /* Products */,
 			);
 			indentWidth = 2;
@@ -135,8 +145,10 @@
 			buildActionMask = 2147483647;
 			files = (
 				58B511D11A9E6C5C00147676 /* RCTTextManager.m in Sources */,
+				BBD12D921AEF2D7900F7DEDD /* RCTTextView.m in Sources */,
 				58B511CE1A9E6C5C00147676 /* RCTRawTextManager.m in Sources */,
 				58B512161A9E6EFF00147676 /* RCTText.m in Sources */,
+				BBD12D931AEF2D7900F7DEDD /* RCTTextViewManager.m in Sources */,
 				58B511CF1A9E6C5C00147676 /* RCTShadowRawText.m in Sources */,
 				58B511D01A9E6C5C00147676 /* RCTShadowText.m in Sources */,
 			);

Libraries/Text/RCTTextView.h

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+#import <UIKit/UIKit.h>
+#import "RCTView.h"
+#import "UIView+React.h"
+
+@class RCTEventDispatcher;
+
+@interface RCTTextView : RCTView <UITextViewDelegate>
+
+@property (nonatomic, assign) BOOL autoCorrect;
+@property (nonatomic, assign) UIEdgeInsets contentInset;
+@property (nonatomic, assign) BOOL automaticallyAdjustContentInsets;
+@property (nonatomic, strong) UIColor *placeholderTextColor;
+@property (nonatomic, assign) UIFont *font;
+
+- (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher NS_DESIGNATED_INITIALIZER;
+
+
+@end