diff --git a/Examples/UIExplorer/js/ActivityIndicatorExample.js b/Examples/UIExplorer/js/ActivityIndicatorExample.js index 4832b1d0e..ae3edd729 100644 --- a/Examples/UIExplorer/js/ActivityIndicatorExample.js +++ b/Examples/UIExplorer/js/ActivityIndicatorExample.js @@ -113,8 +113,8 @@ exports.examples = [ return ( ); } @@ -161,8 +161,21 @@ exports.examples = [ ); } }, + { + platform: 'android', + title: 'Custom size (size: 75)', + render() { + return ( + + ); + } + }, ]; + const styles = StyleSheet.create({ centering: { alignItems: 'center', diff --git a/Libraries/Components/ActivityIndicator/ActivityIndicator.js b/Libraries/Components/ActivityIndicator/ActivityIndicator.js index 282960556..94e41c306 100644 --- a/Libraries/Components/ActivityIndicator/ActivityIndicator.js +++ b/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 (