Permalink
Browse files

Activity indicator: add size prop

Summary:
**motivation**

Previously, size can only accept either 'small' or 'large'. And to obtain a custom size, scale transformation is used. This is to let users to possibly pass number value directly to define ActivityIndicator's size.

**Test plan**

I have also modified the current example to reflect the new size prop in action.
Closes #8935

Differential Revision: D3637910

fbshipit-source-id: 6b8e1d4504964916df327b2d3eaaef1bb8cd5112
  • Loading branch information...
1 parent 873c6ff commit 63d15af18d1f09db16aa4dbd5ed949b4307f37dd @fadils fadils committed with Facebook Github Bot 5 Jul 28, 2016
@@ -113,8 +113,8 @@ exports.examples = [
return (
<ActivityIndicator
style={[styles.centering, styles.gray]}
- color="white"
size="large"
+ color="white"
/>
);
}
@@ -161,8 +161,21 @@ exports.examples = [
);
}
},
+ {
+ platform: 'android',
+ title: 'Custom size (size: 75)',
+ render() {
+ return (
+ <ActivityIndicator
+ style={styles.centering}
+ size={75}
+ />
+ );
+ }
+ },
];
+
const styles = StyleSheet.create({
centering: {
alignItems: 'center',
@@ -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,14 +76,19 @@ const ActivityIndicator = React.createClass({
render() {
const {onLayout, style, ...props} = this.props;
let sizeStyle;
+
switch (props.size) {
case 'small':
sizeStyle = styles.sizeSmall;
break;
case 'large':
sizeStyle = styles.sizeLarge;
break;
+ default:
+ sizeStyle = {height: props.size, width: props.size};
+ break;
}
+
return (
<View
onLayout={onLayout}

0 comments on commit 63d15af

Please sign in to comment.