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 https://github.com/facebook/react-native/pull/6897

Differential Revision: D3351607

Pulled By: dmmiller

fbshipit-source-id: b107ce99d966359003e8b3118cd97b90fa1d3d7d

Examples/UIExplorer/ActivityIndicatorExample.js

@@ -15,41 +15,38 @@
  */
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {
-  ActivityIndicatorIOS,
+const React = require('react');
+const ReactNative = require('react-native');
+const {
+  ActivityIndicator,
   StyleSheet,
   View,
 } = ReactNative;
-var TimerMixin = require('react-timer-mixin');
+const TimerMixin = require('react-timer-mixin');
 
-var ToggleAnimatingActivityIndicator = React.createClass({
+const ToggleAnimatingActivityIndicator = React.createClass({
   mixins: [TimerMixin],
 
-  getInitialState: function() {
+  getInitialState() {
     return {
       animating: true,
     };
   },
 
-  setToggleTimeout: function() {
-    this.setTimeout(
-      () => {
-        this.setState({animating: !this.state.animating});
-        this.setToggleTimeout();
-      },
-      1200
-    );
+  setToggleTimeout() {
+    this.setTimeout(() => {
+      this.setState({animating: !this.state.animating});
+      this.setToggleTimeout();
+    }, 2000);
   },
 
-  componentDidMount: function() {
+  componentDidMount() {
     this.setToggleTimeout();
   },
 
-  render: function() {
+  render() {
     return (
-      <ActivityIndicatorIOS
+      <ActivityIndicator
         animating={this.state.animating}
         style={[styles.centering, {height: 80}]}
         size="large"
@@ -60,31 +57,31 @@ var ToggleAnimatingActivityIndicator = React.createClass({
 
 exports.displayName = (undefined: ?string);
 exports.framework = 'React';
-exports.title = '<ActivityIndicatorIOS>';
+exports.title = '<ActivityIndicator>';
 exports.description = 'Animated loading indicators.';
 
 exports.examples = [
   {
     title: 'Default (small, white)',
-    render: function() {
+    render() {
       return (
-        <ActivityIndicatorIOS
-          style={[styles.centering, styles.gray, {height: 40}]}
+        <ActivityIndicator
+          style={[styles.centering, styles.gray]}
           color="white"
-          />
+        />
       );
     }
   },
   {
     title: 'Gray',
-    render: function() {
+    render() {
       return (
         <View>
-          <ActivityIndicatorIOS
-            style={[styles.centering, {height: 40}]}
+          <ActivityIndicator
+            style={[styles.centering]}
           />
-          <ActivityIndicatorIOS
-            style={[styles.centering, {backgroundColor: '#eeeeee', height: 40}]}
+          <ActivityIndicator
+            style={[styles.centering, {backgroundColor: '#eeeeee'}]}
           />
         </View>
       );
@@ -92,23 +89,23 @@ exports.examples = [
   },
   {
     title: 'Custom colors',
-    render: function() {
+    render() {
       return (
         <View style={styles.horizontal}>
-          <ActivityIndicatorIOS color="#0000ff" />
-          <ActivityIndicatorIOS color="#aa00aa" />
-          <ActivityIndicatorIOS color="#aa3300" />
-          <ActivityIndicatorIOS color="#00aa00" />
+          <ActivityIndicator color="#0000ff" />
+          <ActivityIndicator color="#aa00aa" />
+          <ActivityIndicator color="#aa3300" />
+          <ActivityIndicator color="#00aa00" />
         </View>
       );
     }
   },
   {
     title: 'Large',
-    render: function() {
+    render() {
       return (
-        <ActivityIndicatorIOS
-          style={[styles.centering, styles.gray, {height: 80}]}
+        <ActivityIndicator
+          style={[styles.centering, styles.gray]}
           color="white"
           size="large"
         />
@@ -117,22 +114,22 @@ exports.examples = [
   },
   {
     title: 'Large, custom colors',
-    render: function() {
+    render() {
       return (
         <View style={styles.horizontal}>
-          <ActivityIndicatorIOS
+          <ActivityIndicator
             size="large"
             color="#0000ff"
           />
-          <ActivityIndicatorIOS
+          <ActivityIndicator
             size="large"
             color="#aa00aa"
           />
-          <ActivityIndicatorIOS
+          <ActivityIndicator
             size="large"
             color="#aa3300"
           />
-          <ActivityIndicatorIOS
+          <ActivityIndicator
             size="large"
             color="#00aa00"
           />
@@ -142,16 +139,28 @@ exports.examples = [
   },
   {
     title: 'Start/stop',
-    render: function(): ReactElement<any> {
+    render() {
       return <ToggleAnimatingActivityIndicator />;
     }
   },
+  {
+    title: 'Custom size',
+    render() {
+      return (
+        <ActivityIndicator
+          style={[styles.centering, {transform: [{scale: 1.5}]}]}
+          size="large"
+        />
+      );
+    }
+  },
 ];
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   centering: {
     alignItems: 'center',
     justifyContent: 'center',
+    padding: 8,
   },
   gray: {
     backgroundColor: '#cccccc',
@@ -159,5 +168,6 @@ var styles = StyleSheet.create({
   horizontal: {
     flexDirection: 'row',
     justifyContent: 'space-around',
+    padding: 8,
   },
 });

Examples/UIExplorer/ProgressBarAndroidExample.android.js

@@ -49,41 +49,12 @@ var ProgressBarAndroidExample = React.createClass({
 
   statics: {
     title: '<ProgressBarAndroid>',
-    description: 'Visual indicator of progress of some operation. ' +
-        'Shows either a cyclic animation or a horizontal bar.',
+    description: 'Horizontal bar to show the progress of some operation.',
   },
 
   render: function() {
     return (
       <UIExplorerPage title="ProgressBar Examples">
-        <UIExplorerBlock title="Default ProgressBar">
-          <ProgressBar />
-        </UIExplorerBlock>
-
-        <UIExplorerBlock title="Normal ProgressBar">
-          <ProgressBar styleAttr="Normal" />
-        </UIExplorerBlock>
-
-        <UIExplorerBlock title="Small ProgressBar">
-          <ProgressBar styleAttr="Small" />
-        </UIExplorerBlock>
-
-        <UIExplorerBlock title="Large ProgressBar">
-          <ProgressBar styleAttr="Large" />
-        </UIExplorerBlock>
-
-        <UIExplorerBlock title="Inverse ProgressBar">
-          <ProgressBar styleAttr="Inverse" />
-        </UIExplorerBlock>
-
-        <UIExplorerBlock title="Small Inverse ProgressBar">
-          <ProgressBar styleAttr="SmallInverse" />
-        </UIExplorerBlock>
-
-        <UIExplorerBlock title="Large Inverse ProgressBar">
-          <ProgressBar styleAttr="LargeInverse" />
-        </UIExplorerBlock>
-
         <UIExplorerBlock title="Horizontal Indeterminate ProgressBar">
           <ProgressBar styleAttr="Horizontal" />
         </UIExplorerBlock>
@@ -92,10 +63,6 @@ var ProgressBarAndroidExample = React.createClass({
           <MovingBar styleAttr="Horizontal" indeterminate={false} />
         </UIExplorerBlock>
 
-        <UIExplorerBlock title="Large Red ProgressBar">
-          <ProgressBar styleAttr="Large" color="red" />
-        </UIExplorerBlock>
-
         <UIExplorerBlock title="Horizontal Black Indeterminate ProgressBar">
           <ProgressBar styleAttr="Horizontal" color="black" />
         </UIExplorerBlock>

Examples/UIExplorer/UIExplorerList.android.js

@@ -23,6 +23,10 @@ export type UIExplorerExample = {
 };
 
 var ComponentExamples: Array<UIExplorerExample> = [
+  {
+    key: 'ActivityIndicatorExample',
+    module: require('./ActivityIndicatorExample'),
+  },
   {
     key: 'SliderExample',
     module: require('./SliderExample'),

Examples/UIExplorer/UIExplorerList.ios.js

@@ -29,8 +29,8 @@ export type UIExplorerExample = {
 
 const ComponentExamples: Array<UIExplorerExample> = [
   {
-    key: 'ActivityIndicatorIOSExample',
-    module: require('./ActivityIndicatorIOSExample'),
+    key: 'ActivityIndicatorExample',
+    module: require('./ActivityIndicatorExample'),
   },
   {
     key: 'DatePickerIOSExample',