Accept number for size prop in ActivityIndicator

Examples/UIExplorer/js/ActivityIndicatorExample.js

@@ -113,8 +113,8 @@ exports.examples = [
       return (
         <ActivityIndicator
           style={[styles.centering, styles.gray]}
-          color="white"
           size="large"
+          color="white"
         />
       );
     }
@@ -151,12 +151,34 @@ exports.examples = [
     }
   },
   {
-    title: 'Custom size',
+    title: 'Custom size (size: 49)',
+    render() {
+      return (
+        <ActivityIndicator
+          style={styles.centering}
+          size={49}
+        />
+      );
+    }
+  },
+  {
+    title: 'Custom size (size: 57)',
+    render() {
+      return (
+        <ActivityIndicator
+          style={styles.centering}
+          size={57}
+        />
+      );
+    }
+  },
+  {
+    title: 'Custom size (size: 31, scale transform: 1.5)',
     render() {
       return (
         <ActivityIndicator
           style={[styles.centering, {transform: [{scale: 1.5}]}]}
-          size="large"
+          size={31}
         />
       );
     }

Libraries/Components/ActivityIndicator/ActivityIndicator.js

@@ -12,6 +12,7 @@
 'use strict';
 
 const ColorPropType = require('ColorPropType');
+const IndicatorSizePropType = require('IndicatorSizePropType');
 const NativeMethodsMixin = require('react/lib/NativeMethodsMixin');
 const Platform = require('Platform');
 const PropTypes = require('react/lib/ReactPropTypes');
@@ -40,13 +41,9 @@ const ActivityIndicator = React.createClass({
      */
     color: ColorPropType,
     /**
-     * Size of the indicator. Small has a height of 20, large has a height of 36.
-     * Other sizes can be obtained using a scale transform.
+     * Size of the indicator (default is 20).
      */
-    size: PropTypes.oneOf([
-      'small',
-      'large',
-    ]),
+    size: IndicatorSizePropType,
     /**
      * Whether the indicator should hide when not animating (true by default).
      *
@@ -60,21 +57,27 @@ const ActivityIndicator = React.createClass({
       animating: true,
       color: Platform.OS === 'ios' ? GRAY : undefined,
       hidesWhenStopped: true,
-      size: 'small',
     };
   },
 
   render() {
     const {onLayout, style, ...props} = this.props;
     let sizeStyle;
-    switch (props.size) {
-      case 'small':
-        sizeStyle = styles.sizeSmall;
-        break;
-      case 'large':
-        sizeStyle = styles.sizeLarge;
-        break;
+    if (isNaN(props.size)) {
+      switch (props.size) {
+        case null:
+        case undefined:
+        case 'small':
+          sizeStyle = styles.sizeSmall;
+          break;
+        case 'large':
+          sizeStyle = styles.sizeLarge;
+          break;
+      }
+    } else {
+      sizeStyle = {height: props.size, width: props.size};
     }
+
     return (
       <View
         onLayout={onLayout}
@@ -84,7 +87,7 @@ const ActivityIndicator = React.createClass({
           style={sizeStyle}
           styleAttr="Normal"
           indeterminate
-        />
+         />
       </View>
     );
   }

Libraries/StyleSheet/IndicatorSizePropType.js

@@ -0,0 +1,41 @@
+/**
+ * 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.
+ *
+ * @providesModule IndicatorSizePropType
+ */
+'use strict';
+
+var ReactPropTypeLocationNames = require('react/lib/ReactPropTypeLocationNames');
+
+var indicatorSizePropType = function(isRequired, props, propName, componentName, location, propFullName) {
+  var size = props[propName];
+
+  if (size !== undefined && size !== null && typeof size !== 'number' && size !== 'small' && size !== 'large') {
+    var locationName = ReactPropTypeLocationNames[location];
+    return new Error(
+        'Invalid ' + ReactPropTypeLocationNames[location] + ' `' + (propFullName || propName) +
+        '` supplied to `' + componentName + '`: ' + size + '\n' +
+  `Valid size formats are
+    - 'small'
+    - 'large'
+    - positive number
+  `);
+  }
+
+  if (typeof size === 'number') {
+    if (size <= 0) {
+      return new Error(
+        'Size number has to be greater than 0. Default size will be used'
+      );
+    }
+  }
+
+};
+
+var IndicatorSizePropType = indicatorSizePropType.bind(null, false);
+module.exports = IndicatorSizePropType;

Libraries/react-native/react-native.js

@@ -121,6 +121,7 @@ const ReactNative = {
   get ColorPropType() { return require('ColorPropType'); },
   get EdgeInsetsPropType() { return require('EdgeInsetsPropType'); },
   get PointPropType() { return require('PointPropType'); },
+  get IndicatorSizePropType() { return require('IndicatorSizePropType'); },
 
   // See http://facebook.github.io/react/docs/addons.html
   addons: {

Libraries/react-native/react-native.js.flow

@@ -133,6 +133,7 @@ var ReactNative = {
   ColorPropType: require('ColorPropType'),
   EdgeInsetsPropType: require('EdgeInsetsPropType'),
   PointPropType: require('PointPropType'),
+  IndicatorSizePropType: require('IndicatorSizePropType'),
 };
 
 module.exports = ReactNative;

docs/IndicatorSize.md

@@ -0,0 +1,15 @@
+---
+id: indicatorSize
+title: Indicator Size
+layout: docs
+category: Guides
+permalink: docs/indicator-size.html
+next: images
+previous: integration-with-existing-apps
+---
+
+The following formats are supported:
+
+- `'small'` (size: 20)
+- `'large'` (size: 36)
+- `positive number`

website/layout/AutodocsLayout.js

@@ -74,6 +74,9 @@ function renderType(type) {
     if (type.raw === 'ColorPropType') {
       return <a href={'docs/colors.html'}>color</a>;
     }
+    if (type.raw === 'IndicatorSizePropType') {
+      return <a href={'docs/indicator-size.html'}>indicator size</a>;
+    }
     if (type.raw === 'EdgeInsetsPropType') {
       return '{top: number, left: number, bottom: number, right: number}';
     }