diff --git a/docs/components/ActivityIndicator.md b/docs/components/ActivityIndicator.md index 575a46c8..f8f88272 100644 --- a/docs/components/ActivityIndicator.md +++ b/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`. diff --git a/examples/components/ActivityIndicator/ActivityIndicatorExample.js b/examples/components/ActivityIndicator/ActivityIndicatorExample.js index d7b3ae0a..66595b56 100644 --- a/examples/components/ActivityIndicator/ActivityIndicatorExample.js +++ b/examples/components/ActivityIndicator/ActivityIndicatorExample.js @@ -68,21 +68,6 @@ const examples = [ ); } }, - { - title: 'Gray', - render() { - return ( - - - - - ); - } - }, { title: 'Custom colors', render() { @@ -143,10 +128,13 @@ const examples = [ title: 'Custom size', render() { return ( - + + + + ); } }, diff --git a/src/components/ActivityIndicator/index.js b/src/components/ActivityIndicator/index.js index 4aa52f93..b9453cf9 100644 --- a/src/components/ActivityIndicator/index.js +++ b/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' ]), - style: View.propTypes.style + size: PropTypes.oneOfType([ PropTypes.oneOf([ 'small', 'large' ]), PropTypes.number ]) }; static defaultProps = { animating: true, - color: DEFAULT_COLOR, + color: '#1976D2', hidesWhenStopped: true, - size: 'small', - style: {} + size: 'small' }; constructor(props) { @@ -81,7 +79,11 @@ class ActivityIndicator extends Component { ); return ( - + { animation.setValue(0); - Animated.sequence([ - Animated.timing(animation, { - duration: 750, - easing: Easing.inOut(Easing.linear), - toValue: 1 - }) - ]).start((event) => { + Animated.timing(animation, { + duration: 750, + easing: Easing.inOut(Easing.linear), + toValue: 1 + }).start((event) => { if (event.finished) { cycleAnimation(); }