Allow customized refreshControl in ScrollView for Android

Summary:
Original Android's refreshControl in ScrollView is tightly coupled with AndroidSwipeRefreshLayout. If someone use `ref=` for RefreshControl in ScrollView, it does nothing since RefreshControl in Android return null.

This change allows customized  RefreshControl especially for `ref=` as well as making ScrollView's code clearer.
Closes https://github.com/facebook/react-native/pull/5623

Reviewed By: svcscm

Differential Revision: D2890072

Pulled By: nicklockwood

fb-gh-sync-id: a8fc7746bcc050a6e46fedf3583979f4cb9021b6

Libraries/Components/RefreshControl/RefreshControl.js

@@ -13,6 +13,7 @@
 const React = require('React');
 const Platform = require('Platform');
 const ColorPropType = require('ColorPropType');
+const View = require('View');
 
 const requireNativeComponent = require('requireNativeComponent');
 
@@ -33,6 +34,7 @@ const RefreshControl = React.createClass({
   },
 
   propTypes: {
+    ...View.propTypes,
     /**
      * Called when the view starts refreshing.
      */
@@ -74,15 +76,7 @@ const RefreshControl = React.createClass({
   },
 
   render() {
-    if (Platform.OS === 'ios') {
-      return <NativeRefreshControl {...this.props}/>;
-    } else {
-      // On Android the ScrollView is wrapped so this component doesn't render
-      // anything and only acts as a way to configure the wrapper view.
-      // ScrollView will wrap itself in a AndroidSwipeRefreshLayout using props
-      // from this.
-      return null;
-    }
+    return <NativeRefreshControl {...this.props} />;
   },
 });
 
@@ -91,6 +85,11 @@ if (Platform.OS === 'ios') {
     'RCTRefreshControl',
     RefreshControl
   );
+} else if (Platform.OS === 'android') {
+  var NativeRefreshControl = requireNativeComponent(
+    'AndroidSwipeRefreshLayout',
+    RefreshControl
+  );
 }
 
 module.exports = RefreshControl;

Libraries/Components/ScrollView/ScrollView.js

@@ -32,7 +32,6 @@ var insetsDiffer = require('insetsDiffer');
 var invariant = require('invariant');
 var pointsDiffer = require('pointsDiffer');
 var requireNativeComponent = require('requireNativeComponent');
-var processColor = require('processColor');
 var processDecelerationRate = require('processDecelerationRate');
 var PropTypes = React.PropTypes;
 
@@ -507,16 +506,12 @@ var ScrollView = React.createClass({
         // On Android wrap the ScrollView with a AndroidSwipeRefreshLayout.
         // Since the ScrollView is wrapped add the style props to the
         // AndroidSwipeRefreshLayout and use flex: 1 for the ScrollView.
-        var refreshProps = refreshControl.props;
-        return (
-          <AndroidSwipeRefreshLayout
-            {...refreshProps}
-            colors={refreshProps.colors && refreshProps.colors.map(processColor)}
-            style={props.style}>
-            <ScrollViewClass {...props} style={styles.base} ref={SCROLLVIEW}>
-              {contentContainer}
-            </ScrollViewClass>
-          </AndroidSwipeRefreshLayout>
+        return React.cloneElement(
+          refreshControl,
+          {style: this.props.style},
+          <ScrollViewClass {...props} style={styles.base} ref={SCROLLVIEW}>
+            {contentContainer}
+          </ScrollViewClass>
         );
       }
     }
@@ -574,7 +569,6 @@ if (Platform.OS === 'android') {
     'AndroidHorizontalScrollView',
     ScrollView
   );
-  var AndroidSwipeRefreshLayout = requireNativeComponent('AndroidSwipeRefreshLayout');
 } else if (Platform.OS === 'ios') {
   var RCTScrollView = requireNativeComponent('RCTScrollView', ScrollView);
 }

Libraries/PullToRefresh/PullToRefreshViewAndroid.android.js

@@ -16,7 +16,6 @@ var RefreshLayoutConsts = require('UIManager').AndroidSwipeRefreshLayout.Constan
 var View = require('View');
 
 var onlyChild = require('onlyChild');
-var processColor = require('processColor');
 var requireNativeComponent = require('requireNativeComponent');
 
 var NATIVE_REF = 'native_swiperefreshlayout';
@@ -68,7 +67,7 @@ var PullToRefreshViewAndroid = React.createClass({
   render: function() {
     return (
       <NativePullToRefresh
-        colors={this.props.colors && this.props.colors.map(processColor)}
+        colors={this.props.colors}
         enabled={this.props.enabled}
         onRefresh={this._onRefresh}
         progressBackgroundColor={this.props.progressBackgroundColor}

Libraries/ReactIOS/requireNativeComponent.js

@@ -121,6 +121,7 @@ var TypeToProcessorMap = {
   RCTImageSource: resolveAssetSource,
   // Android Types
   Color: processColor,
+  ColorArray: processColorArray,
 };
 
 module.exports = requireNativeComponent;

ReactAndroid/src/main/java/com/facebook/react/views/swiperefresh/SwipeRefreshLayoutManager.java

@@ -47,7 +47,7 @@ public class SwipeRefreshLayoutManager extends ViewGroupManager<ReactSwipeRefres
     view.setEnabled(enabled);
   }
 
-  @ReactProp(name = "colors")
+  @ReactProp(name = "colors", customType = "ColorArray")
   public void setColors(ReactSwipeRefreshLayout view, @Nullable ReadableArray colors) {
     if (colors != null) {
       int[] colorValues = new int[colors.size()];