diff --git a/Examples/UIExplorer/js/ActivityIndicatorExample.js b/Examples/UIExplorer/js/ActivityIndicatorExample.js
index 4832b1d0eb1958..905d548a246098 100644
--- a/Examples/UIExplorer/js/ActivityIndicatorExample.js
+++ b/Examples/UIExplorer/js/ActivityIndicatorExample.js
@@ -113,8 +113,8 @@ exports.examples = [
return (
);
}
@@ -151,12 +151,34 @@ exports.examples = [
}
},
{
- title: 'Custom size',
+ title: 'Custom size (size: 49)',
+ render() {
+ return (
+
+ );
+ }
+ },
+ {
+ title: 'Custom size (size: 57)',
+ render() {
+ return (
+
+ );
+ }
+ },
+ {
+ title: 'Custom size (size: 31, scale transform: 1.5)',
render() {
return (
);
}
diff --git a/Libraries/Components/ActivityIndicator/ActivityIndicator.js b/Libraries/Components/ActivityIndicator/ActivityIndicator.js
index 282960556e3174..c3f67b95c2246d 100644
--- a/Libraries/Components/ActivityIndicator/ActivityIndicator.js
+++ b/Libraries/Components/ActivityIndicator/ActivityIndicator.js
@@ -12,6 +12,7 @@
'use strict';
const ColorPropType = require('ColorPropType');
+const IndicatorSizePropType = require('IndicatorSizePropType');
const NativeMethodsMixin = require('react/lib/NativeMethodsMixin');
const Platform = require('Platform');
const PropTypes = require('react/lib/ReactPropTypes');
@@ -40,13 +41,9 @@ 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 20).
*/
- size: PropTypes.oneOf([
- 'small',
- 'large',
- ]),
+ size: IndicatorSizePropType,
/**
* Whether the indicator should hide when not animating (true by default).
*
@@ -60,21 +57,27 @@ const ActivityIndicator = React.createClass({
animating: true,
color: Platform.OS === 'ios' ? GRAY : undefined,
hidesWhenStopped: true,
- size: 'small',
};
},
render() {
const {onLayout, style, ...props} = this.props;
let sizeStyle;
- switch (props.size) {
- case 'small':
- sizeStyle = styles.sizeSmall;
- break;
- case 'large':
- sizeStyle = styles.sizeLarge;
- break;
+ if (isNaN(props.size)) {
+ switch (props.size) {
+ case null:
+ case undefined:
+ case 'small':
+ sizeStyle = styles.sizeSmall;
+ break;
+ case 'large':
+ sizeStyle = styles.sizeLarge;
+ break;
+ }
+ } else {
+ sizeStyle = {height: props.size, width: props.size};
}
+
return (
+ />
);
}
diff --git a/Libraries/StyleSheet/IndicatorSizePropType.js b/Libraries/StyleSheet/IndicatorSizePropType.js
new file mode 100644
index 00000000000000..e35f9ac755d91d
--- /dev/null
+++ b/Libraries/StyleSheet/IndicatorSizePropType.js
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule IndicatorSizePropType
+ */
+'use strict';
+
+var ReactPropTypeLocationNames = require('react/lib/ReactPropTypeLocationNames');
+
+var indicatorSizePropType = function(isRequired, props, propName, componentName, location, propFullName) {
+ var size = props[propName];
+
+ if (size !== undefined && size !== null && typeof size !== 'number' && size !== 'small' && size !== 'large') {
+ var locationName = ReactPropTypeLocationNames[location];
+ return new Error(
+ 'Invalid ' + ReactPropTypeLocationNames[location] + ' `' + (propFullName || propName) +
+ '` supplied to `' + componentName + '`: ' + size + '\n' +
+ `Valid size formats are
+ - 'small'
+ - 'large'
+ - positive number
+ `);
+ }
+
+ if (typeof size === 'number') {
+ if (size <= 0) {
+ return new Error(
+ 'Size number has to be greater than 0. Default size will be used'
+ );
+ }
+ }
+
+};
+
+var IndicatorSizePropType = indicatorSizePropType.bind(null, false);
+module.exports = IndicatorSizePropType;
diff --git a/Libraries/react-native/react-native.js b/Libraries/react-native/react-native.js
index 4ce701b3c89014..520cc93ac43323 100644
--- a/Libraries/react-native/react-native.js
+++ b/Libraries/react-native/react-native.js
@@ -121,6 +121,7 @@ const ReactNative = {
get ColorPropType() { return require('ColorPropType'); },
get EdgeInsetsPropType() { return require('EdgeInsetsPropType'); },
get PointPropType() { return require('PointPropType'); },
+ get IndicatorSizePropType() { return require('IndicatorSizePropType'); },
// See http://facebook.github.io/react/docs/addons.html
addons: {
diff --git a/Libraries/react-native/react-native.js.flow b/Libraries/react-native/react-native.js.flow
index 930ec4e04c6d96..3d3cb265fe1e22 100644
--- a/Libraries/react-native/react-native.js.flow
+++ b/Libraries/react-native/react-native.js.flow
@@ -133,6 +133,7 @@ var ReactNative = {
ColorPropType: require('ColorPropType'),
EdgeInsetsPropType: require('EdgeInsetsPropType'),
PointPropType: require('PointPropType'),
+ IndicatorSizePropType: require('IndicatorSizePropType'),
};
module.exports = ReactNative;
diff --git a/docs/IndicatorSize.md b/docs/IndicatorSize.md
new file mode 100644
index 00000000000000..67635de9bbc88a
--- /dev/null
+++ b/docs/IndicatorSize.md
@@ -0,0 +1,15 @@
+---
+id: indicatorSize
+title: Indicator Size
+layout: docs
+category: Guides
+permalink: docs/indicator-size.html
+next: images
+previous: integration-with-existing-apps
+---
+
+The following formats are supported:
+
+- `'small'` (size: 20)
+- `'large'` (size: 36)
+- `positive number`
diff --git a/website/layout/AutodocsLayout.js b/website/layout/AutodocsLayout.js
index ceebe4aca5488b..8bfb69309b95a6 100644
--- a/website/layout/AutodocsLayout.js
+++ b/website/layout/AutodocsLayout.js
@@ -74,6 +74,9 @@ function renderType(type) {
if (type.raw === 'ColorPropType') {
return color;
}
+ if (type.raw === 'IndicatorSizePropType') {
+ return indicator size;
+ }
if (type.raw === 'EdgeInsetsPropType') {
return '{top: number, left: number, bottom: number, right: number}';
}