Updates from Mon 30 Mar

- [ReactNative] Clean up no longer needed reference to NavigationBarClass | Philipp von Weitershausen
- [TextInput] returnKeyType, enablesReturnKeyAutomatically, secureTextEntry, more keyboardTypes | Tadeu Zagallo
- [ReactNative] PropTypes for NavigationBars | Philipp von Weitershausen
- Changed LayoutAnimation to use ms instead of seconds for consistency | Nick Lockwood
- Better date support | Nick Lockwood
- Renamed throttleScrollCallbackMS to scrollEventThrottle | Nick Lockwood
- Fixed threading issues in RCTImageDownloader | Nick Lockwood
- [iOS][Assets]: Cleaning up more 1x png from Libraries | Radu Marin
- [ReactNative][docs] LinkingIOS | Tadeu Zagallo
- Fixing TouchableOpacity and TouchableHighlight documentation | Ben Alpert
- [react-native] Add React.addons.createFragment | Ben Alpert

Libraries/Components/ScrollResponder.js

@@ -11,7 +11,6 @@
  */
 'use strict';
 
-var NativeModules = require('NativeModules');
 var NativeModules = require('NativeModules');
 var RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');
 var Subscribable = require('Subscribable');

Libraries/Components/ScrollView/ScrollView.js

@@ -64,7 +64,7 @@ var ScrollView = React.createClass({
     showsHorizontalScrollIndicator: PropTypes.bool,
     showsVerticalScrollIndicator: PropTypes.bool,
     style: StyleSheetPropType(ViewStylePropTypes),
-    throttleScrollCallbackMS: PropTypes.number, // null
+    scrollEventThrottle: PropTypes.number, // null
 
     /**
      * When true, the scroll view bounces horizontally when it reaches the end
@@ -211,12 +211,12 @@ var ScrollView = React.createClass({
       );
     }
     if (__DEV__) {
-      if (this.props.onScroll && !this.props.throttleScrollCallbackMS) {
+      if (this.props.onScroll && !this.props.scrollEventThrottle) {
         var onScroll = this.props.onScroll;
         this.props.onScroll = function() {
           console.log(
             'You specified `onScroll` on a <ScrollView> but not ' +
-            '`throttleScrollCallbackMS`. You will only receive one event. ' +
+            '`scrollEventThrottle`. You will only receive one event. ' +
             'Using `16` you get all the events but be aware that it may ' +
             'cause frame drops, use a bigger number if you don\'t need as ' +
             'much precision.'
@@ -325,7 +325,7 @@ var validAttributes = {
   showsHorizontalScrollIndicator: true,
   showsVerticalScrollIndicator: true,
   stickyHeaderIndices: {diff: deepDiffer},
-  throttleScrollCallbackMS: true,
+  scrollEventThrottle: true,
   zoomScale: true,
 };
 

Libraries/Components/TextInput/TextInput.js

@@ -15,6 +15,7 @@ var DocumentSelectionState = require('DocumentSelectionState');
 var EventEmitter = require('EventEmitter');
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var RCTUIManager = require('NativeModules').UIManager;
+var Platform = require('Platform');
 var PropTypes = require('ReactPropTypes');
 var React = require('React');
 var ReactChildren = require('ReactChildren');
@@ -27,12 +28,12 @@ var TouchableWithoutFeedback = require('TouchableWithoutFeedback');
 
 var createReactIOSNativeComponentClass = require('createReactIOSNativeComponentClass');
 var emptyFunction = require('emptyFunction');
-var getObjectValues = require('getObjectValues');
 var invariant = require('invariant');
 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 +45,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 +70,27 @@ var notMultiline = {
   onSubmitEditing: true,
 };
 
+var TextInputAndroidAttributes = {
+  autoCapitalize: true,
+  autoCorrect: true,
+  autoFocus: true,
+  keyboardType: true,
+  multiline: true,
+  password: true,
+  placeholder: true,
+  value: true,
+  testID: true,
+};
+
+var AndroidTextInput = createReactIOSNativeComponentClass({
+  validAttributes: TextInputAndroidAttributes,
+  uiViewClassName: 'AndroidTextInput',
+});
+
+var crossPlatformKeyboardTypeMap = {
+  'numeric': 'decimal-pad',
+};
+
 type DefaultProps = {
   bufferDelay: number;
 };
@@ -138,8 +163,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.
      */
@@ -157,10 +221,15 @@ var TextInput = React.createClass({
      *
      * Callback that is called when the text input's text changes.
      */
+    onChange: PropTypes.func,
     onChangeText: PropTypes.func,
 
     onEndEditing: PropTypes.func,
     onSubmitEditing: PropTypes.func,
+    /**
+     * If true, the TextInput will be a password field. Default value is false.
+     */
+    password: PropTypes.bool,
     /**
      * The string that will be rendered before text input has been entered
      */
@@ -202,6 +271,10 @@ var TextInput = React.createClass({
     ]),
 
     style: Text.propTypes.style,
+    /**
+     * Used to locate this view in end-to-end tests.
+     */
+    testID: PropTypes.string,
   },
 
   /**
@@ -313,10 +386,24 @@ var TextInput = React.createClass({
   },
 
   render: function() {
+    if (Platform.OS === 'ios') {
+      return this._renderIOs();
+    } else if (Platform.OS === 'android') {
+      return this._renderAndroid();
+    }
+  },
+
+  _renderIOs: function() {
     var textContainer;
 
     var autoCapitalize = autoCapitalizeConsts[this.props.autoCapitalize];
-    var clearButtonMode = clearButtonModeConsts[this.props.clearButtonMode];
+    var clearButtonMode = RCTUIManager.UITextField.clearButtonMode[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 +418,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 +463,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}
@@ -398,6 +492,27 @@ var TextInput = React.createClass({
     );
   },
 
+  _renderAndroid: function() {
+    var autoCapitalize = autoCapitalizeConsts[this.props.autoCapitalize];
+    return (
+      <AndroidTextInput
+        ref="input"
+        style={[this.props.style]}
+        autoCapitalize={autoCapitalize}
+        autoCorrect={this.props.autoCorrect}
+        keyboardType={this.props.keyboardType}
+        multiline={this.props.multiline}
+        onFocus={this._onFocus}
+        onBlur={this._onBlur}
+        onChange={this._onChange}
+        password={this.props.password}
+        placeholder={this.props.placeholder}
+        value={this.props.value}
+        testID={this.props.testID}
+      />
+    );
+  },
+
   _onFocus: function(event: Event) {
     if (this.props.onFocus) {
       this.props.onFocus(event);

Libraries/Components/Touchable/TouchableHighlight.js

@@ -50,7 +50,7 @@ var DEFAULT_PROPS = {
  *         style={styles.button}
  *         source={require('image!myButton')}
  *       />
- *     </View>
+ *     </TouchableHighlight>
  *   );
  * },
  * ```

Libraries/Components/Touchable/TouchableOpacity.js

@@ -39,7 +39,7 @@ var onlyChild = require('onlyChild');
  *         style={styles.button}
  *         source={require('image!myButton')}
  *       />
- *     </View>
+ *     </TouchableOpacity>
  *   );
  * },
  * ```