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...
fadils authored and Facebook Github Bot 5 committed Jul 28, 2016
1 parent 873c6ff commit 63d15af18d1f09db16aa4dbd5ed949b4307f37dd
@@ -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.