Skip to content

Commit 26e8426

Browse files
janicduplessisFacebook Github Bot 1
janicduplessis
authored and
Facebook Github Bot 1
committed
Cross platform ActivityIndicator
Summary: The API for `ActivityIndiatorIOS` and `ProgressBarAndroid` is very similar and can be merged in a cross platform component that displays a circular indeterminate loading indicator. This deprecates `ActivityIndiatorIOS` and non-horizontal `ProgressBarAndroid` in favor of this new component. **Test plan (required)** Tested with the ActivityIndicator example in UIExplorer on android and ios. Also made sure that `ActivityIndicatorIOS` still works and displays a deprecation warning. Also tested that `ProgressBarAndroid` with `indeterminate == true` and `styleAttr != 'Horizontal'` displays a deprecation warning. Closes facebook/react-native#6897 Differential Revision: D3351607 Pulled By: dmmiller fbshipit-source-id: b107ce99d966359003e8b3118cd97b90fa1d3d7d
1 parent 98dd918 commit 26e8426

File tree

14 files changed

+229
-133
lines changed

14 files changed

+229
-133
lines changed

Examples/UIExplorer/ActivityIndicatorIOSExample.js renamed to Examples/UIExplorer/ActivityIndicatorExample.js

Lines changed: 53 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -15,41 +15,38 @@
1515
*/
1616
'use strict';
1717

18-
var React = require('react');
19-
var ReactNative = require('react-native');
20-
var {
21-
ActivityIndicatorIOS,
18+
const React = require('react');
19+
const ReactNative = require('react-native');
20+
const {
21+
ActivityIndicator,
2222
StyleSheet,
2323
View,
2424
} = ReactNative;
25-
var TimerMixin = require('react-timer-mixin');
25+
const TimerMixin = require('react-timer-mixin');
2626

27-
var ToggleAnimatingActivityIndicator = React.createClass({
27+
const ToggleAnimatingActivityIndicator = React.createClass({
2828
mixins: [TimerMixin],
2929

30-
getInitialState: function() {
30+
getInitialState() {
3131
return {
3232
animating: true,
3333
};
3434
},
3535

36-
setToggleTimeout: function() {
37-
this.setTimeout(
38-
() => {
39-
this.setState({animating: !this.state.animating});
40-
this.setToggleTimeout();
41-
},
42-
1200
43-
);
36+
setToggleTimeout() {
37+
this.setTimeout(() => {
38+
this.setState({animating: !this.state.animating});
39+
this.setToggleTimeout();
40+
}, 2000);
4441
},
4542

46-
componentDidMount: function() {
43+
componentDidMount() {
4744
this.setToggleTimeout();
4845
},
4946

50-
render: function() {
47+
render() {
5148
return (
52-
<ActivityIndicatorIOS
49+
<ActivityIndicator
5350
animating={this.state.animating}
5451
style={[styles.centering, {height: 80}]}
5552
size="large"
@@ -60,55 +57,55 @@ var ToggleAnimatingActivityIndicator = React.createClass({
6057

6158
exports.displayName = (undefined: ?string);
6259
exports.framework = 'React';
63-
exports.title = '<ActivityIndicatorIOS>';
60+
exports.title = '<ActivityIndicator>';
6461
exports.description = 'Animated loading indicators.';
6562

6663
exports.examples = [
6764
{
6865
title: 'Default (small, white)',
69-
render: function() {
66+
render() {
7067
return (
71-
<ActivityIndicatorIOS
72-
style={[styles.centering, styles.gray, {height: 40}]}
68+
<ActivityIndicator
69+
style={[styles.centering, styles.gray]}
7370
color="white"
74-
/>
71+
/>
7572
);
7673
}
7774
},
7875
{
7976
title: 'Gray',
80-
render: function() {
77+
render() {
8178
return (
8279
<View>
83-
<ActivityIndicatorIOS
84-
style={[styles.centering, {height: 40}]}
80+
<ActivityIndicator
81+
style={[styles.centering]}
8582
/>
86-
<ActivityIndicatorIOS
87-
style={[styles.centering, {backgroundColor: '#eeeeee', height: 40}]}
83+
<ActivityIndicator
84+
style={[styles.centering, {backgroundColor: '#eeeeee'}]}
8885
/>
8986
</View>
9087
);
9188
}
9289
},
9390
{
9491
title: 'Custom colors',
95-
render: function() {
92+
render() {
9693
return (
9794
<View style={styles.horizontal}>
98-
<ActivityIndicatorIOS color="#0000ff" />
99-
<ActivityIndicatorIOS color="#aa00aa" />
100-
<ActivityIndicatorIOS color="#aa3300" />
101-
<ActivityIndicatorIOS color="#00aa00" />
95+
<ActivityIndicator color="#0000ff" />
96+
<ActivityIndicator color="#aa00aa" />
97+
<ActivityIndicator color="#aa3300" />
98+
<ActivityIndicator color="#00aa00" />
10299
</View>
103100
);
104101
}
105102
},
106103
{
107104
title: 'Large',
108-
render: function() {
105+
render() {
109106
return (
110-
<ActivityIndicatorIOS
111-
style={[styles.centering, styles.gray, {height: 80}]}
107+
<ActivityIndicator
108+
style={[styles.centering, styles.gray]}
112109
color="white"
113110
size="large"
114111
/>
@@ -117,22 +114,22 @@ exports.examples = [
117114
},
118115
{
119116
title: 'Large, custom colors',
120-
render: function() {
117+
render() {
121118
return (
122119
<View style={styles.horizontal}>
123-
<ActivityIndicatorIOS
120+
<ActivityIndicator
124121
size="large"
125122
color="#0000ff"
126123
/>
127-
<ActivityIndicatorIOS
124+
<ActivityIndicator
128125
size="large"
129126
color="#aa00aa"
130127
/>
131-
<ActivityIndicatorIOS
128+
<ActivityIndicator
132129
size="large"
133130
color="#aa3300"
134131
/>
135-
<ActivityIndicatorIOS
132+
<ActivityIndicator
136133
size="large"
137134
color="#00aa00"
138135
/>
@@ -142,22 +139,35 @@ exports.examples = [
142139
},
143140
{
144141
title: 'Start/stop',
145-
render: function(): ReactElement<any> {
142+
render() {
146143
return <ToggleAnimatingActivityIndicator />;
147144
}
148145
},
146+
{
147+
title: 'Custom size',
148+
render() {
149+
return (
150+
<ActivityIndicator
151+
style={[styles.centering, {transform: [{scale: 1.5}]}]}
152+
size="large"
153+
/>
154+
);
155+
}
156+
},
149157
];
150158

151-
var styles = StyleSheet.create({
159+
const styles = StyleSheet.create({
152160
centering: {
153161
alignItems: 'center',
154162
justifyContent: 'center',
163+
padding: 8,
155164
},
156165
gray: {
157166
backgroundColor: '#cccccc',
158167
},
159168
horizontal: {
160169
flexDirection: 'row',
161170
justifyContent: 'space-around',
171+
padding: 8,
162172
},
163173
});

‎Examples/UIExplorer/ProgressBarAndroidExample.android.js‎

Lines changed: 1 addition & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -49,41 +49,12 @@ var ProgressBarAndroidExample = React.createClass({
4949

5050
statics: {
5151
title: '<ProgressBarAndroid>',
52-
description: 'Visual indicator of progress of some operation. ' +
53-
'Shows either a cyclic animation or a horizontal bar.',
52+
description: 'Horizontal bar to show the progress of some operation.',
5453
},
5554

5655
render: function() {
5756
return (
5857
<UIExplorerPage title="ProgressBar Examples">
59-
<UIExplorerBlock title="Default ProgressBar">
60-
<ProgressBar />
61-
</UIExplorerBlock>
62-
63-
<UIExplorerBlock title="Normal ProgressBar">
64-
<ProgressBar styleAttr="Normal" />
65-
</UIExplorerBlock>
66-
67-
<UIExplorerBlock title="Small ProgressBar">
68-
<ProgressBar styleAttr="Small" />
69-
</UIExplorerBlock>
70-
71-
<UIExplorerBlock title="Large ProgressBar">
72-
<ProgressBar styleAttr="Large" />
73-
</UIExplorerBlock>
74-
75-
<UIExplorerBlock title="Inverse ProgressBar">
76-
<ProgressBar styleAttr="Inverse" />
77-
</UIExplorerBlock>
78-
79-
<UIExplorerBlock title="Small Inverse ProgressBar">
80-
<ProgressBar styleAttr="SmallInverse" />
81-
</UIExplorerBlock>
82-
83-
<UIExplorerBlock title="Large Inverse ProgressBar">
84-
<ProgressBar styleAttr="LargeInverse" />
85-
</UIExplorerBlock>
86-
8758
<UIExplorerBlock title="Horizontal Indeterminate ProgressBar">
8859
<ProgressBar styleAttr="Horizontal" />
8960
</UIExplorerBlock>
@@ -92,10 +63,6 @@ var ProgressBarAndroidExample = React.createClass({
9263
<MovingBar styleAttr="Horizontal" indeterminate={false} />
9364
</UIExplorerBlock>
9465

95-
<UIExplorerBlock title="Large Red ProgressBar">
96-
<ProgressBar styleAttr="Large" color="red" />
97-
</UIExplorerBlock>
98-
9966
<UIExplorerBlock title="Horizontal Black Indeterminate ProgressBar">
10067
<ProgressBar styleAttr="Horizontal" color="black" />
10168
</UIExplorerBlock>

‎Examples/UIExplorer/UIExplorerList.android.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,10 @@ export type UIExplorerExample = {
2323
};
2424

2525
var ComponentExamples: Array<UIExplorerExample> = [
26+
{
27+
key: 'ActivityIndicatorExample',
28+
module: require('./ActivityIndicatorExample'),
29+
},
2630
{
2731
key: 'SliderExample',
2832
module: require('./SliderExample'),

‎Examples/UIExplorer/UIExplorerList.ios.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@ export type UIExplorerExample = {
2929

3030
const ComponentExamples: Array<UIExplorerExample> = [
3131
{
32-
key: 'ActivityIndicatorIOSExample',
33-
module: require('./ActivityIndicatorIOSExample'),
32+
key: 'ActivityIndicatorExample',
33+
module: require('./ActivityIndicatorExample'),
3434
},
3535
{
3636
key: 'DatePickerIOSExample',

0 commit comments

Comments
 (0)