Activity indicator: add size prop

Summary:
**motivation**

Previously, size can only accept either 'small' or 'large'. And to obtain a custom size, scale transformation is used. This is to let users to possibly pass number value directly to define ActivityIndicator's size.

**Test plan**

I have also modified the current example to reflect the new size prop in action.
Closes https://github.com/facebook/react-native/pull/8935

Differential Revision: D3637910

fbshipit-source-id: 6b8e1d4504964916df327b2d3eaaef1bb8cd5112

Examples/UIExplorer/js/ActivityIndicatorExample.js

@@ -113,8 +113,8 @@ exports.examples = [
       return (
         <ActivityIndicator
           style={[styles.centering, styles.gray]}
-          color="white"
           size="large"
+          color="white"
         />
       );
     }
@@ -161,8 +161,21 @@ exports.examples = [
       );
     }
   },
+  {
+    platform: 'android',
+    title: 'Custom size (size: 75)',
+    render() {
+      return (
+        <ActivityIndicator
+          style={styles.centering}
+          size={75}
+        />
+      );
+    }
+  },
 ];
 
+
 const styles = StyleSheet.create({
   centering: {
     alignItems: 'center',

Libraries/Components/ActivityIndicator/ActivityIndicator.js

@@ -23,6 +23,15 @@ const requireNativeComponent = require('requireNativeComponent');
 
 const GRAY = '#999999';
 
+type IndicatorSize = number | 'small' | 'large';
+
+type DefaultProps = {
+  animating: boolean;
+  color: any;
+  hidesWhenStopped: boolean;
+  size: IndicatorSize;
+}
+
 /**
  * Displays a circular loading indicator.
  */
@@ -40,12 +49,12 @@ 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 'small').
+     * Passing a number to the size prop is only supported on Android.
      */
-    size: PropTypes.oneOf([
-      'small',
-      'large',
+    size: PropTypes.oneOfType([
+      PropTypes.oneOf([ 'small', 'large' ]),
+      PropTypes.number,
     ]),
     /**
      * Whether the indicator should hide when not animating (true by default).
@@ -55,7 +64,7 @@ const ActivityIndicator = React.createClass({
     hidesWhenStopped: PropTypes.bool,
   },
 
-  getDefaultProps() {
+  getDefaultProps(): DefaultProps {
     return {
       animating: true,
       color: Platform.OS === 'ios' ? GRAY : undefined,
@@ -67,6 +76,7 @@ const ActivityIndicator = React.createClass({
   render() {
     const {onLayout, style, ...props} = this.props;
     let sizeStyle;
+
     switch (props.size) {
       case 'small':
         sizeStyle = styles.sizeSmall;
@@ -74,7 +84,11 @@ const ActivityIndicator = React.createClass({
       case 'large':
         sizeStyle = styles.sizeLarge;
         break;
+      default:
+        sizeStyle = {height: props.size, width: props.size};
+        break;
     }
+
     return (
       <View
         onLayout={onLayout}