Updates from Wed Mar 4

- [react-packager] Start converting options to query params | Amjad Masad
- [ReactNative] Replace js long constants with strings | Tadeu Zagallo
- React Native: Remove Unnecessary `document.body` Shim | Tim Yung
- [ReactNative] Use spread operator and .propTypes for ScrollView/ListView | Christopher Chedeau

Examples/Movies/SearchScreen.js

@@ -282,7 +282,7 @@ var SearchBar = React.createClass({
     return (
       <View style={styles.searchBar}>
         <TextInput
-          autoCapitalize={TextInput.autoCapitalizeMode.none}
+          autoCapitalize="none"
           autoCorrect={false}
           onChange={this.props.onSearchChange}
           placeholder="Search a movie..."

Examples/UIExplorer/ActivityIndicatorExample.js

@@ -41,7 +41,7 @@ var ToggleAnimatingActivityIndicator = React.createClass({
       <ActivityIndicatorIOS
         animating={this.state.animating}
         style={[styles.centering, {height: 80}]}
-        size={ActivityIndicatorIOS.size.large}
+        size="large"
       />
     );
   }
@@ -98,7 +98,7 @@ exports.examples = [
         <ActivityIndicatorIOS
           style={[styles.centering, styles.gray, {height: 80}]}
           color="white"
-          size={ActivityIndicatorIOS.size.large}
+          size="large"
         />
       );
     }
@@ -109,19 +109,19 @@ exports.examples = [
       return (
         <View style={styles.horizontal}>
           <ActivityIndicatorIOS
-            size={ActivityIndicatorIOS.size.large}
+            size="large"
             color="#0000ff"
           />
           <ActivityIndicatorIOS
-            size={ActivityIndicatorIOS.size.large}
+            size="large"
             color="#aa00aa"
           />
           <ActivityIndicatorIOS
-            size={ActivityIndicatorIOS.size.large}
+            size="large"
             color="#aa3300"
           />
           <ActivityIndicatorIOS
-            size={ActivityIndicatorIOS.size.large}
+            size="large"
             color="#00aa00"
           />
         </View>

Examples/UIExplorer/PointerEventsExample.js

@@ -61,7 +61,7 @@ var NoneExample = React.createClass({
           A: unspecified
         </DemoText>
         <View
-          pointerEvents={View.pointerEvents.none}
+          pointerEvents="none"
           onTouchStart={() => this.props.onLog('B none touched')}
           style={[styles.box, styles.boxPassedThrough]}>
           <DemoText style={[styles.text, styles.textPassedThrough]}>
@@ -87,7 +87,7 @@ var NoneExample = React.createClass({
 var DemoText = React.createClass({
   render: function() {
     return (
-      <View pointerEvents={View.pointerEvents.none}>
+      <View pointerEvents="none">
         <Text
           style={this.props.style}>
           {this.props.children}
@@ -107,11 +107,11 @@ var BoxNoneExample = React.createClass({
           A: unspecified
         </DemoText>
         <View
-          pointerEvents={View.pointerEvents.boxNone}
-          onTouchStart={() => this.props.onLog('B boxNone touched')}
+          pointerEvents="box-none"
+          onTouchStart={() => this.props.onLog('B box-none touched')}
           style={[styles.box, styles.boxPassedThrough]}>
           <DemoText style={[styles.text, styles.textPassedThrough]}>
-            B: boxNone
+            B: box-none
           </DemoText>
           <View
             onTouchStart={() => this.props.onLog('C unspecified touched')}
@@ -121,7 +121,7 @@ var BoxNoneExample = React.createClass({
             </DemoText>
           </View>
           <View
-            pointerEvents={View.pointerEvents.unspecified}
+            pointerEvents="auto"
             onTouchStart={() => this.props.onLog('C explicitly unspecified touched')}
             style={[styles.box]}>
             <DemoText style={[styles.text]}>
@@ -144,11 +144,11 @@ var BoxOnlyExample = React.createClass({
           A: unspecified
         </DemoText>
         <View
-          pointerEvents={View.pointerEvents.boxOnly}
-          onTouchStart={() => this.props.onLog('B boxOnly touched')}
+          pointerEvents="box-only"
+          onTouchStart={() => this.props.onLog('B box-only touched')}
           style={styles.box}>
           <DemoText style={styles.text}>
-            B: boxOnly
+            B: box-only
           </DemoText>
           <View
             onTouchStart={() => this.props.onLog('C unspecified touched')}
@@ -158,7 +158,7 @@ var BoxOnlyExample = React.createClass({
             </DemoText>
           </View>
           <View
-            pointerEvents={View.pointerEvents.unspecified}
+            pointerEvents="auto"
             onTouchStart={() => this.props.onLog('C explicitly unspecified touched')}
             style={[styles.box, styles.boxPassedThrough]}>
             <DemoText style={[styles.text, styles.textPassedThrough]}>
@@ -179,13 +179,13 @@ var exampleClasses = [
   },
   {
     Component: BoxNoneExample,
-    title: '`boxNone`',
-    description: '`boxNone` causes touch events on the container to pass through and will only detect touch events on its child components.',
+    title: '`box-none`',
+    description: '`box-none` causes touch events on the container to pass through and will only detect touch events on its child components.',
   },
   {
     Component: BoxOnlyExample,
-    title: '`boxOnly`',
-    description: '`boxOnly` causes touch events on the container\'s child components to pass through and will only detect touch events on the container itself.',
+    title: '`box-only`',
+    description: '`box-only` causes touch events on the container\'s child components to pass through and will only detect touch events on the container itself.',
   }
 ];
 

Examples/UIExplorer/TextInputExample.js

@@ -45,7 +45,7 @@ var TextEventsExample = React.createClass({
     return (
       <View>
         <TextInput
-          autoCapitalize={TextInput.autoCapitalizeMode.none}
+          autoCapitalize="none"
           placeholder="Enter text to see events"
           autoCorrect={false}
           onFocus={() => this.updateText('onFocus')}
@@ -123,25 +123,25 @@ exports.examples = [
         <View>
           <WithLabel label="none">
             <TextInput
-              autoCapitalize={TextInput.autoCapitalizeMode.none}
+              autoCapitalize="none"
               style={styles.default}
             />
           </WithLabel>
           <WithLabel label="sentences">
             <TextInput
-              autoCapitalize={TextInput.autoCapitalizeMode.sentences}
+              autoCapitalize="sentences"
               style={styles.default}
             />
           </WithLabel>
           <WithLabel label="words">
             <TextInput
-              autoCapitalize={TextInput.autoCapitalizeMode.words}
+              autoCapitalize="words"
               style={styles.default}
             />
           </WithLabel>
           <WithLabel label="characters">
             <TextInput
-              autoCapitalize={TextInput.autoCapitalizeMode.characters}
+              autoCapitalize="characters"
               style={styles.default}
             />
           </WithLabel>
@@ -193,25 +193,25 @@ exports.examples = [
           <WithLabel label="never">
             <TextInput
               style={styles.default}
-              clearButtonMode={TextInput.clearButtonModeTypes.never}
+              clearButtonMode="never"
             />
           </WithLabel>
           <WithLabel label="while editing">
             <TextInput
               style={styles.default}
-              clearButtonMode={TextInput.clearButtonModeTypes.whileEditing}
+              clearButtonMode="while-editing"
             />
           </WithLabel>
           <WithLabel label="unless editing">
             <TextInput
               style={styles.default}
-              clearButtonMode={TextInput.clearButtonModeTypes.unlessEditing}
+              clearButtonMode="unless-editing"
             />
           </WithLabel>
           <WithLabel label="always">
             <TextInput
               style={styles.default}
-              clearButtonMode={TextInput.clearButtonModeTypes.always}
+              clearButtonMode="always"
             />
           </WithLabel>
         </View>

Libraries/Components/ActivityIndicatorIOS/ActivityIndicatorIOS.ios.js

@@ -6,7 +6,7 @@
 'use strict';
 
 var NativeMethodsMixin = require('NativeMethodsMixin');
-var NativeModulesDeprecated = require('NativeModulesDeprecated');
+var NativeModules = require('NativeModules');
 var PropTypes = require('ReactPropTypes');
 var React = require('React');
 var ReactIOSViewAttributes = require('ReactIOSViewAttributes');
@@ -37,12 +37,11 @@ var ActivityIndicatorIOS = React.createClass({
      * The foreground color of the spinner (default is gray).
      */
     color: PropTypes.string,
-    /**
-     * The size of the spinner, must be one of:
-     * - ActivityIndicatorIOS.size.large
-     * - ActivityIndicatorIOS.size.small (default)
-     */
-    size: PropTypes.oneOf([SpinnerSize.large, SpinnerSize.small]),
+
+    size: PropTypes.oneOf([
+      'small', // default
+      'large',
+    ]),
   },
 
   getDefaultProps: function() {
@@ -53,15 +52,11 @@ var ActivityIndicatorIOS = React.createClass({
     };
   },
 
-  statics: {
-    size: SpinnerSize,
-  },
-
   render: function() {
     var style = styles.sizeSmall;
-    var NativeConstants = NativeModulesDeprecated.RKUIManager.UIActivityIndicatorView.Constants;
+    var NativeConstants = NativeModules.RKUIManager.UIActivityIndicatorView.Constants;
     var activityIndicatorViewStyle = NativeConstants.StyleWhite;
-    if (this.props.size == SpinnerSize.large) {
+    if (this.props.size === 'large') {
       style = styles.sizeLarge;
       activityIndicatorViewStyle = NativeConstants.StyleWhiteLarge;
     }