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 (