[add] support numeric ActivityIndicator size value

docs/components/ActivityIndicator.md

@@ -6,17 +6,17 @@
 
 **animating**: bool = true
 
-Whether to show the indicator (true, the default) or hide it (false).
+Whether to show the indicator or hide it.
 
-**color**: string = #999999
+**color**: string = '#1976D2'
 
-The foreground color of the spinner (default is gray).
+The foreground color of the spinner.
 
 **hidesWhenStopped**: bool = true
 
-Whether the indicator should hide when not animating (true by default).
+Whether the indicator should hide when not animating.
 
-**size**: oneOf('small, 'large')
+**size**: oneOf('small, 'large') | number = 'small'
 
 Size of the indicator. Small has a height of `20`, large has a height of `36`.
 

examples/components/ActivityIndicator/ActivityIndicatorExample.js

@@ -68,21 +68,6 @@ const examples = [
       );
     }
   },
-  {
-    title: 'Gray',
-    render() {
-      return (
-        <View>
-          <ActivityIndicator
-            style={[styles.centering]}
-          />
-          <ActivityIndicator
-            style={[styles.centering, styles.gray]}
-          />
-        </View>
-      );
-    }
-  },
   {
     title: 'Custom colors',
     render() {
@@ -143,10 +128,13 @@ const examples = [
     title: 'Custom size',
     render() {
       return (
-        <ActivityIndicator
+        <View style={[styles.horizontal, styles.centering]}>
-          style={[styles.centering, {transform: [{scale: 1.5}]}]}
+          <ActivityIndicator size="40" />
-          size="large"
+          <ActivityIndicator
-        />
+            style={{ marginLeft: 20, transform: [ {scale: 1.5} ] }}
+            size="large"
+          />
+        </View>
       );
     }
   },

src/components/ActivityIndicator/index.js

@@ -5,24 +5,22 @@ import StyleSheet from '../../apis/StyleSheet';
 import View from '../View';
 import React, { Component, PropTypes } from 'react';
 
-const DEFAULT_COLOR = '#1976D2';
 const rotationInterpolation = { inputRange: [ 0, 1 ], outputRange: [ '0deg', '360deg' ] };
 
 class ActivityIndicator extends Component {
   static propTypes = {
+    ...View.propTypes,
     animating: PropTypes.bool,
     color: PropTypes.string,
     hidesWhenStopped: PropTypes.bool,
-    size: PropTypes.oneOf([ 'small', 'large' ]),
+    size: PropTypes.oneOfType([ PropTypes.oneOf([ 'small', 'large' ]), PropTypes.number ])
-    style: View.propTypes.style
   };
 
   static defaultProps = {
     animating: true,
-    color: DEFAULT_COLOR,
+    color: '#1976D2',
     hidesWhenStopped: true,
-    size: 'small',
+    size: 'small'
-    style: {}
   };
 
   constructor(props) {
@@ -81,7 +79,11 @@ class ActivityIndicator extends Component {
     );
 
     return (
-      <View {...other} style={[ styles.container, style ]}>
+      <View {...other} style={[
+        styles.container,
+        style,
+        size && { height: size, width: size }
+      ]}>
         <Animated.View
           children={svg}
           style={[
@@ -103,13 +105,11 @@ class ActivityIndicator extends Component {
 
     const cycleAnimation = () => {
       animation.setValue(0);
-      Animated.sequence([
+      Animated.timing(animation, {
-        Animated.timing(animation, {
+        duration: 750,
-          duration: 750,
+        easing: Easing.inOut(Easing.linear),
-          easing: Easing.inOut(Easing.linear),
+        toValue: 1
-          toValue: 1
+      }).start((event) => {
-        })
-      ]).start((event) => {
         if (event.finished) {
           cycleAnimation();
         }