[TextInput] returnKeyType, enablesReturnKeyAutomatically, more keyboardTypes

Examples/UIExplorer/TextInputExample.js

@@ -174,6 +174,89 @@ exports.examples = [
       );
     }
   },
+  {
+    title: 'Keyboard types',
+    render: function() {
+      var keyboardTypes = [
+        'default',
+        'ascii-capable',
+        'numbers-and-punctuation',
+        'url',
+        'number-pad',
+        'phone-pad',
+        'name-phone-pad',
+        'email-address',
+        'decimal-pad',
+        'twitter',
+        'web-search',
+        'numeric',
+      ];
+      var examples = keyboardTypes.map((type) => {
+        return (
+          <WithLabel key={type} label={type}>
+            <TextInput
+              keyboardType={type}
+              style={styles.default}
+            />
+          </WithLabel>
+        );
+      });
+      return <View>{examples}</View>;
+    }
+  },
+  {
+    title: 'Return key types',
+    render: function() {
+      var returnKeyTypes = [
+        'default',
+        'go',
+        'google',
+        'join',
+        'next',
+        'route',
+        'search',
+        'send',
+        'yahoo',
+        'done',
+        'emergency-call',
+      ];
+      var examples = returnKeyTypes.map((type) => {
+        return (
+          <WithLabel key={type} label={type}>
+            <TextInput
+              returnKeyType={type}
+              style={styles.default}
+            />
+          </WithLabel>
+        );
+      });
+      return <View>{examples}</View>;
+    }
+  },
+  {
+    title: 'Enable return key automatically',
+    render: function() {
+      return (
+        <View>
+          <WithLabel label="true">
+            <TextInput enablesReturnKeyAutomatically={true} style={styles.default} />
+          </WithLabel>
+        </View>
+      );
+    }
+  },
+  {
+    title: 'Secure text entry',
+    render: function() {
+      return (
+        <View>
+          <WithLabel label="true">
+            <TextInput secureTextEntry={true} style={styles.default} value="abc" />
+          </WithLabel>
+        </View>
+      );
+    }
+  },
   {
     title: 'Event handling',
     render: function(): ReactElement { return <TextEventsExample /> },

Libraries/Components/TextInput/TextInput.ios.js

@@ -33,6 +33,8 @@ var merge = require('merge');
 
 var autoCapitalizeConsts = RCTUIManager.UIText.AutocapitalizationType;
 var clearButtonModeConsts = RCTUIManager.UITextField.clearButtonMode;
+var keyboardTypeConsts = RCTUIManager.UIKeyboardType;
+var returnKeyTypeConsts = RCTUIManager.UIReturnKeyType;
 
 var RCTTextViewAttributes = merge(ReactIOSViewAttributes.UIView, {
   autoCorrect: true,
@@ -44,6 +46,9 @@ var RCTTextViewAttributes = merge(ReactIOSViewAttributes.UIView, {
   fontStyle: true,
   fontWeight: true,
   keyboardType: true,
+  returnKeyType: true,
+  enablesReturnKeyAutomatically: true,
+  secureTextEntry: true,
   mostRecentEventCounter: true,
   placeholder: true,
   placeholderTextColor: true,
@@ -66,6 +71,10 @@ var notMultiline = {
   onSubmitEditing: true,
 };
 
+var crossPlatformKeyboardTypeMap = {
+  'numeric': 'decimal-pad',
+};
+
 type DefaultProps = {
   bufferDelay: number;
 };
@@ -138,8 +147,47 @@ var TextInput = React.createClass({
      */
     keyboardType: PropTypes.oneOf([
       'default',
+      // iOS
+      'ascii-capable',
+      'numbers-and-punctuation',
+      'url',
+      'number-pad',
+      'phone-pad',
+      'name-phone-pad',
+      'email-address',
+      'decimal-pad',
+      'twitter',
+      'web-search',
+      // Cross-platform
       'numeric',
     ]),
+    /**
+     * Determines how the return key should look.
+     */
+    returnKeyType: PropTypes.oneOf([
+      'default',
+      'go',
+      'google',
+      'join',
+      'next',
+      'route',
+      'search',
+      'send',
+      'yahoo',
+      'done',
+      'emergency-call',
+    ]),
+    /**
+     * If true, the keyboard disables the return key when there is no text and
+     * automatically enables it when there is text. Default value is false.
+     */
+    enablesReturnKeyAutomatically: PropTypes.bool,
+
+    /**
+     * If true, the text input obscures the text entered so that sensitive text
+     * like passwords stay secure. Default value is false.
+     */
+    secureTextEntry: PropTypes.bool,
     /**
      * If true, the text input can be multiple lines. Default value is false.
      */
@@ -317,6 +365,11 @@ var TextInput = React.createClass({
 
     var autoCapitalize = autoCapitalizeConsts[this.props.autoCapitalize];
     var clearButtonMode = clearButtonModeConsts[this.props.clearButtonMode];
+    var keyboardType = keyboardTypeConsts[
+      crossPlatformKeyboardTypeMap[this.props.keyboardType] ||
+      this.props.keyboardType
+    ];
+    var returnKeyType = returnKeyTypeConsts[this.props.returnKeyType];
 
     if (!this.props.multiline) {
       for (var propKey in onlyMultiline) {
@@ -331,7 +384,10 @@ var TextInput = React.createClass({
           ref="input"
           style={[styles.input, this.props.style]}
           enabled={this.props.editable}
-          keyboardType={this.props.keyboardType}
+          keyboardType={keyboardType}
+          returnKeyType={returnKeyType}
+          enablesReturnKeyAutomatically={this.props.enablesReturnKeyAutomatically}
+          secureTextEntry={this.props.secureTextEntry}
           onFocus={this._onFocus}
           onBlur={this._onBlur}
           onChange={this._onChange}
@@ -373,6 +429,10 @@ var TextInput = React.createClass({
           children={children}
           mostRecentEventCounter={this.state.mostRecentEventCounter}
           editable={this.props.editable}
+          keyboardType={keyboardType}
+          returnKeyType={returnKeyType}
+          enablesReturnKeyAutomatically={this.props.enablesReturnKeyAutomatically}
+          secureTextEntry={this.props.secureTextEntry}
           onFocus={this._onFocus}
           onBlur={this._onBlur}
           onChange={this._onChange}

README.md

@@ -1,11 +1,11 @@
-# React Native [![Build Status](https://magnum.travis-ci.com/facebook/react-native.svg?token=L5Egb3B4dyQzH5wDijCB&branch=master)](https://magnum.travis-ci.com/facebook/react-native)
+# React Native [![Build Status](https://travis-ci.org/facebook/react-native.svg?branch=master)](https://travis-ci.org/facebook/react-native)
 
 React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and
 [React](http://facebook.github.io/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.
 
 ## Native iOS Components
 
-With React Native, you can use the standard platform components such as UITabBar and UINavigationController on iOS.  This gives your app a consistent look and feel with the rest of the platform ecosystem, and keeps the quality bar high.  These components are easily incorporated into your app using their React component counterparts, such as TabBarIOS and NavigatorIOS.
+With React Native, you can use the standard platform components such as `UITabBar` and `UINavigationController` on iOS.  This gives your app a consistent look and feel with the rest of the platform ecosystem, and keeps the quality bar high.  These components are easily incorporated into your app using their React component counterparts, such as _TabBarIOS_ and _NavigatorIOS_.
 
 ```javascript
 var React = require('react-native');
@@ -54,7 +54,7 @@ var TouchDemo = React.createClass({
 
 
 ## Flexbox and Styling
-Laying out views should be easy, which is why we brought the flexbox layout model from the web to React Native.  Flexbox makes it simple to build the most common UI layouts, such as stacked and nested boxes with margin and padding.  React Native also supports common web syles, such as `fontWeight`, and the `StyleSheet` abstraction provides an optimized mechanism to declare all your styles and layout right along with the components that use them and apply them inline.
+Laying out views should be easy, which is why we brought the flexbox layout model from the web to React Native.  Flexbox makes it simple to build the most common UI layouts, such as stacked and nested boxes with margin and padding.  React Native also supports common web styles, such as `fontWeight`, and the `StyleSheet` abstraction provides an optimized mechanism to declare all your styles and layout right along with the components that use them and apply them inline.
 
 ```javascript
 var React = require('react-native');
@@ -161,7 +161,7 @@ var Message = React.createClass({
 });
 ```
 
-Custom iOS views can be exposed by subclassing `RCTViewManager`, implementing a `- (UIView *)view` method, and exporting properties with the `RCT_EXPORT_VIEW_PROPERTY` macro.  Then a simple JavaScript file connects the dots.
+Custom iOS views can be exposed by subclassing `RCTViewManager`, implementing a `-view` method, and exporting properties with the `RCT_EXPORT_VIEW_PROPERTY` macro.  Then a simple JavaScript file connects the dots.
 
 ```objc
 // Objective-C

React/Base/RCTConvert.h

@@ -51,6 +51,7 @@
 + (UITextFieldViewMode)UITextFieldViewMode:(id)json;
 + (UIScrollViewKeyboardDismissMode)UIScrollViewKeyboardDismissMode:(id)json;
 + (UIKeyboardType)UIKeyboardType:(id)json;
++ (UIReturnKeyType)UIReturnKeyType:(id)json;
 
 + (UIViewContentMode)UIViewContentMode:(id)json;
 + (UIBarStyle)UIBarStyle:(id)json;

React/Base/RCTConvert.m

@@ -116,10 +116,33 @@ + (NSURLRequest *)NSURLRequest:(id)json
 }), UIScrollViewKeyboardDismissModeNone, integerValue)
 
 RCT_ENUM_CONVERTER(UIKeyboardType, (@{
-  @"numeric": @(UIKeyboardTypeDecimalPad),
   @"default": @(UIKeyboardTypeDefault),
+  @"ascii-capable": @(UIKeyboardTypeASCIICapable),
+  @"numbers-and-punctuation": @(UIKeyboardTypeNumbersAndPunctuation),
+  @"url": @(UIKeyboardTypeURL),
+  @"number-pad": @(UIKeyboardTypeNumberPad),
+  @"phone-pad": @(UIKeyboardTypePhonePad),
+  @"name-phone-pad": @(UIKeyboardTypeNamePhonePad),
+  @"email-address": @(UIKeyboardTypeEmailAddress),
+  @"decimal-pad": @(UIKeyboardTypeDecimalPad),
+  @"twitter": @(UIKeyboardTypeTwitter),
+  @"web-search": @(UIKeyboardTypeWebSearch),
 }), UIKeyboardTypeDefault, integerValue)
 
+RCT_ENUM_CONVERTER(UIReturnKeyType, (@{
+  @"default": @(UIReturnKeyDefault),
+  @"go": @(UIReturnKeyGo),
+  @"google": @(UIReturnKeyGoogle),
+  @"join": @(UIReturnKeyJoin),
+  @"next": @(UIReturnKeyNext),
+  @"route": @(UIReturnKeyRoute),
+  @"search": @(UIReturnKeySearch),
+  @"send": @(UIReturnKeySend),
+  @"yahoo": @(UIReturnKeyYahoo),
+  @"done": @(UIReturnKeyDone),
+  @"emergency-call": @(UIReturnKeyEmergencyCall),
+}), UIReturnKeyDefault, integerValue)
+
 RCT_ENUM_CONVERTER(UIViewContentMode, (@{
   @"scale-to-fill": @(UIViewContentModeScaleToFill),
   @"scale-aspect-fit": @(UIViewContentModeScaleAspectFit),

React/Modules/RCTUIManager.m

@@ -1291,6 +1291,32 @@ - (NSDictionary *)constantsToExport
         @"always": @(UITextFieldViewModeAlways),
       },
     },
+    @"UIKeyboardType": @{
+      @"default": @(UIKeyboardTypeDefault),
+      @"ascii-capable": @(UIKeyboardTypeASCIICapable),
+      @"numbers-and-punctuation": @(UIKeyboardTypeNumbersAndPunctuation),
+      @"url": @(UIKeyboardTypeURL),
+      @"number-pad": @(UIKeyboardTypeNumberPad),
+      @"phone-pad": @(UIKeyboardTypePhonePad),
+      @"name-phone-pad": @(UIKeyboardTypeNamePhonePad),
+      @"decimal-pad": @(UIKeyboardTypeDecimalPad),
+      @"email-address": @(UIKeyboardTypeEmailAddress),
+      @"twitter": @(UIKeyboardTypeTwitter),
+      @"web-search": @(UIKeyboardTypeWebSearch),
+    },
+    @"UIReturnKeyType": @{
+      @"default": @(UIReturnKeyDefault),
+      @"go": @(UIReturnKeyGo),
+      @"google": @(UIReturnKeyGoogle),
+      @"join": @(UIReturnKeyJoin),
+      @"next": @(UIReturnKeyNext),
+      @"route": @(UIReturnKeyRoute),
+      @"search": @(UIReturnKeySearch),
+      @"send": @(UIReturnKeySend),
+      @"yahoo": @(UIReturnKeyYahoo),
+      @"done": @(UIReturnKeyDone),
+      @"emergency-call": @(UIReturnKeyEmergencyCall),
+    },
     @"UIView": @{
       @"ContentMode": @{
         @"ScaleToFill": @(UIViewContentModeScaleToFill),

React/Views/RCTTextField.m

@@ -31,7 +31,6 @@ - (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher
     [self addTarget:self action:@selector(_textFieldEndEditing) forControlEvents:UIControlEventEditingDidEnd];
     [self addTarget:self action:@selector(_textFieldSubmitEditing) forControlEvents:UIControlEventEditingDidEndOnExit];
     _reactSubviews = [[NSMutableArray alloc] init];
-    self.returnKeyType = UIReturnKeyDone;
   }
   return self;
 }

React/Views/RCTTextFieldManager.m

@@ -29,6 +29,9 @@ - (UIView *)view
 RCT_EXPORT_VIEW_PROPERTY(text, NSString)
 RCT_EXPORT_VIEW_PROPERTY(clearButtonMode, UITextFieldViewMode)
 RCT_EXPORT_VIEW_PROPERTY(keyboardType, UIKeyboardType)
+RCT_EXPORT_VIEW_PROPERTY(returnKeyType, UIReturnKeyType)
+RCT_EXPORT_VIEW_PROPERTY(enablesReturnKeyAutomatically, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(secureTextEntry, BOOL)
 RCT_REMAP_VIEW_PROPERTY(color, textColor, UIColor)
 RCT_REMAP_VIEW_PROPERTY(autoCapitalize, autocapitalizationType, UITextAutocapitalizationType)
 RCT_CUSTOM_VIEW_PROPERTY(fontSize, CGFloat, RCTTextField)

packager/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-cli",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Build native apps with React!",
   "repository": {
     "type": "git",

react-native-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-cli",
-  "version": "0.0.0",
+  "version": "0.1.3",
   "description": "The ReactNative cli tools",
   "main": "index.js",
   "bin": {