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

Libraries/Components/ActivityIndicator/ActivityIndicator.js

@@ -0,0 +1,127 @@
+/**
+ * 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 ActivityIndicator
+ * @flow
+ */
+'use strict';
+
+const ColorPropType = require('ColorPropType');
+const NativeMethodsMixin = require('NativeMethodsMixin');
+const Platform = require('Platform');
+const PropTypes = require('ReactPropTypes');
+const React = require('React');
+const StyleSheet = require('StyleSheet');
+const View = require('View');
+
+const requireNativeComponent = require('requireNativeComponent');
+
+const GRAY = '#999999';
+
+/**
+ * Displays a circular loading indicator.
+ */
+const ActivityIndicator = React.createClass({
+  mixins: [NativeMethodsMixin],
+
+  propTypes: {
+    ...View.propTypes,
+    /**
+     * Whether to show the indicator (true, the default) or hide it (false).
+     */
+    animating: PropTypes.bool,
+    /**
+     * The foreground color of the spinner (default is gray).
+     */
+    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: PropTypes.oneOf([
+      'small',
+      'large',
+    ]),
+    /**
+     * Whether the indicator should hide when not animating (true by default).
+     *
+     * @platform ios
+     */
+    hidesWhenStopped: PropTypes.bool,
+  },
+
+  getDefaultProps() {
+    return {
+      animating: true,
+      color: GRAY,
+      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;
+    }
+    return (
+      <View
+        onLayout={onLayout}
+        style={[styles.container, style]}>
+        <RCTActivityIndicator
+          {...props}
+          style={sizeStyle}
+          styleAttr="Normal"
+          indeterminate
+        />
+      </View>
+    );
+  }
+});
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  sizeSmall: {
+    width: 20,
+    height: 20,
+  },
+  sizeLarge: {
+    width: 36,
+    height: 36,
+  },
+});
+
+if (Platform.OS === 'ios') {
+  var RCTActivityIndicator = requireNativeComponent(
+    'RCTActivityIndicatorView',
+    ActivityIndicator,
+    {nativeOnly: {activityIndicatorViewStyle: true}},
+  );
+} else if (Platform.OS === 'android') {
+  var RCTActivityIndicator = requireNativeComponent(
+    'AndroidProgressBar',
+    ActivityIndicator,
+    // Ignore props that are specific to non inderterminate ProgressBar.
+    {nativeOnly: {
+      indeterminate: true,
+      progress: true,
+      styleAttr: true,
+    }},
+  );
+}
+
+module.exports = ActivityIndicator;

Libraries/Components/ActivityIndicator/ActivityIndicatorIOS.ios.js

@@ -7,27 +7,18 @@
  * of patent rights can be found in the PATENTS file in the same directory.
  *
  * @providesModule ActivityIndicatorIOS
- * @flow
  */
 'use strict';
 
+var ActivityIndicator = require('ActivityIndicator');
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var PropTypes = require('ReactPropTypes');
 var React = require('React');
-var StyleSheet = require('StyleSheet');
 var View = require('View');
 
-var requireNativeComponent = require('requireNativeComponent');
-
-var GRAY = '#999999';
-
-type DefaultProps = {
-  animating: boolean;
-  color: string;
-  hidesWhenStopped: boolean;
-  size: 'small' | 'large';
-};
-
+/**
+ * Deprecated, use ActivityIndicator instead.
+ */
 var ActivityIndicatorIOS = React.createClass({
   mixins: [NativeMethodsMixin],
 
@@ -60,47 +51,13 @@ var ActivityIndicatorIOS = React.createClass({
     onLayout: PropTypes.func,
   },
 
-  getDefaultProps: function(): DefaultProps {
-    return {
-      animating: true,
-      color: GRAY,
-      hidesWhenStopped: true,
-      size: 'small',
-    };
+  componentDidMount: function() {
+    console.warn('ActivityIndicatorIOS is deprecated. Use ActivityIndicator instead.');
   },
 
   render: function() {
-    var {onLayout, style, ...props} = this.props;
-    var sizeStyle = (this.props.size === 'large') ? styles.sizeLarge : styles.sizeSmall;
-    return (
-      <View
-        onLayout={onLayout}
-        style={[styles.container, style]}>
-        <RCTActivityIndicatorView {...props} style={sizeStyle} />
-      </View>
-    );
+    return <ActivityIndicator {...this.props} />;
   }
 });
 
-var styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  sizeSmall: {
-    width: 20,
-    height: 20,
-  },
-  sizeLarge: {
-    width: 36,
-    height: 36,
-  }
-});
-
-var RCTActivityIndicatorView = requireNativeComponent(
-  'RCTActivityIndicatorView',
-  ActivityIndicatorIOS,
-  {nativeOnly: {activityIndicatorViewStyle: true}},
-);
-
 module.exports = ActivityIndicatorIOS;

Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.android.js

@@ -13,7 +13,6 @@
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var React = require('React');
 var ReactPropTypes = require('ReactPropTypes');
-var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
 var View = require('View');
 var ColorPropType = require('ColorPropType');
 
@@ -107,11 +106,24 @@ var ProgressBarAndroid = React.createClass({
 
   mixins: [NativeMethodsMixin],
 
+  componentDidMount: function() {
+    if (this.props.indeterminate && this.props.styleAttr !== 'Horizontal') {
+      console.warn(
+        'Circular indeterminate `ProgressBarAndroid`' +
+        'is deprecated. Use `ActivityIndicator` instead.'
+      );
+    }
+  },
+
   render: function() {
     return <AndroidProgressBar {...this.props} />;
   },
 });
 
-var AndroidProgressBar = requireNativeComponent('AndroidProgressBar', ProgressBarAndroid);
+var AndroidProgressBar = requireNativeComponent(
+  'AndroidProgressBar',
+  ProgressBarAndroid,
+  {nativeOnly: {animating: true}},
+);
 
 module.exports = ProgressBarAndroid;

Libraries/react-native/react-native.js

@@ -27,6 +27,7 @@ if (__DEV__) {
 // Export React, plus some native additions.
 const ReactNative = {
   // Components
+  get ActivityIndicator() { return require('ActivityIndicator'); },
   get ActivityIndicatorIOS() { return require('ActivityIndicatorIOS'); },
   get ART() { return require('ReactNativeART'); },
   get DatePickerIOS() { return require('DatePickerIOS'); },

Libraries/react-native/react-native.js.flow

@@ -25,6 +25,7 @@
 //
 var ReactNative = Object.assign(Object.create(require('ReactNative')), {
   // Components
+  ActivityIndicator: require('ActivityIndicator'),
   ActivityIndicatorIOS: require('ActivityIndicatorIOS'),
   ART: require('ReactNativeART'),
   DatePickerIOS: require('DatePickerIOS'),