Cleanup android implementation and fix objc style

Examples/UIExplorer/RefreshControlExample.js

@@ -60,7 +60,7 @@ const Row = React.createClass({
 
 const RefreshControlExample = React.createClass({
   statics: {
-    title: '<RefreshControlExample>',
+    title: '<RefreshControl>',
     description: 'Adds pull-to-refresh support to a scrollview.'
   },
 

Libraries/Components/RefreshControl/RefreshControl.js

@@ -11,11 +11,8 @@
 'use strict';
 
 const React = require('React');
-const View = require('View');
 const Platform = require('Platform');
 
-const processColor = require('processColor');
-const onlyChild = require('onlyChild');
 const requireNativeComponent = require('requireNativeComponent');
 
 if (Platform.OS === 'ios') {
@@ -24,8 +21,6 @@ if (Platform.OS === 'ios') {
   var RefreshLayoutConsts = require('NativeModules').UIManager.AndroidSwipeRefreshLayout.Constants;
 }
 
-const NATIVE_REF = 'native_refreshcontrol';
-
 /**
  * This component is used inside a ScrollView to add pull to refresh
  * functionality. When the ScrollView is at `scrollY: 0`, swiping down
@@ -37,7 +32,6 @@ const RefreshControl = React.createClass({
   },
 
   propTypes: {
-    ...View.propTypes,
     /**
      * Called when the view starts refreshing.
      */
@@ -92,54 +86,24 @@ const RefreshControl = React.createClass({
         tintColor={this.props.tintColor}
         title={this.props.title}
         refreshing={this.props.refreshing}
-        onRefresh={this._onRefreshIOS}/>
+        onRefresh={this.props.onRefresh}/>
     );
   },
 
   _renderAndroid() {
-    // On Android we need to wrap the scrollview so if the element doesn't have
-    // a child (when the element is inside the scrollview) we don't
-    // render anything. The scrollview will then add itself as a child of this
-    // element and then we can render the native control.
-    if (!this.props.children) {
-      return null;
-    }
-    return (
-      <NativeRefreshControl
-        colors={this.props.colors && this.props.colors.map(processColor)}
-        enabled={this.props.enabled}
-        onRefresh={this._onRefreshAndroid}
-        progressBackgroundColor={this.props.progressBackgroundColor}
-        ref={NATIVE_REF}
-        refreshing={this.props.refreshing}
-        size={this.props.size}
-        style={this.props.style}>
-        {onlyChild(this.props.children)}
-      </NativeRefreshControl>
-    );
+    // On Android we need to wrap the ScrollView 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;
   },
-
-  _onRefreshIOS(endRefreshing) {
-    this._endRefreshing = endRefreshing;
-    this.props.onRefresh && this.props.onRefresh();
-  },
-
-  _onRefreshAndroid() {
-    this.props.onRefresh && this.props.onRefresh();
-    this.refs[NATIVE_REF].setNativeProps({refreshing: !!this.props.refreshing});
-  }
 });
 
 if (Platform.OS === 'ios') {
   var NativeRefreshControl = requireNativeComponent(
     'RCTRefreshControl',
     RefreshControl
   );
-} else if (Platform.OS === 'android') {
-  var NativeRefreshControl = requireNativeComponent(
-    'AndroidSwipeRefreshLayout',
-    RefreshControl
-  );
 }
 
 module.exports = RefreshControl;

Libraries/Components/ScrollView/ScrollView.js

@@ -31,6 +31,7 @@ var insetsDiffer = require('insetsDiffer');
 var invariant = require('invariant');
 var pointsDiffer = require('pointsDiffer');
 var requireNativeComponent = require('requireNativeComponent');
+var processColor = require('processColor');
 
 var PropTypes = React.PropTypes;
 
@@ -491,20 +492,23 @@ var ScrollView = React.createClass({
           </ScrollViewClass>
         );
       } else if (Platform.OS === 'android') {
-        // On Android we need to wrap the ScrollView with the RefreshControl.
+        // On Android we need to wrap the ScrollView with a AndroidSwipeRefreshLayout.
         // Since we are wrapping the ScrollView add the style props to the
-        // RefreshControl and use flex: 1 for the ScrollView.
+        // AndroidSwipeRefreshLayout and use flex: 1 for the ScrollView.
         const {
           style,
           ...others,
         } = props;
-        return React.cloneElement(
-          refreshControl, {
-            style,
-          },
-          <ScrollViewClass {...others} style={styles.base} ref={SCROLLVIEW}>
-            {contentContainer}
-          </ScrollViewClass>
+        const refreshProps = refreshControl.props;
+        return (
+          <AndroidSwipeRefreshLayout
+            {...refreshProps}
+            colors={refreshProps.colors && refreshProps.colors.map(processColor)}
+            style={style}>
+            <ScrollViewClass {...others} style={styles.base} ref={SCROLLVIEW}>
+              {contentContainer}
+            </ScrollViewClass>
+          </AndroidSwipeRefreshLayout>
         );
       }
     }
@@ -561,6 +565,7 @@ if (Platform.OS === 'android') {
     'AndroidHorizontalScrollView',
     ScrollView
   );
+  var AndroidSwipeRefreshLayout = requireNativeComponent('AndroidSwipeRefreshLayout');
 } else if (Platform.OS === 'ios') {
   var RCTScrollView = requireNativeComponent('RCTScrollView', ScrollView);
 }

React/Views/RCTRefreshControl.h

@@ -13,7 +13,7 @@
 
 @interface RCTRefreshControl : UIRefreshControl
 
-@property (nonatomic, assign) NSString* title;
+@property (nonatomic, assign) NSString *title;
 @property (nonatomic, copy) RCTDirectEventBlock onRefresh;
 
 @end

React/Views/RCTRefreshControl.m

@@ -23,11 +23,13 @@ - (instancetype)init
 
 RCT_NOT_IMPLEMENTED(- (instancetype)initWithCoder:(NSCoder *)aDecoder)
 
-- (NSString*) title {
+- (NSString *)title
+{
   return [self.attributedTitle string];
 }
 
-- (void) setTitle:(NSString *)title {
+- (void)setTitle:(NSString *)title
+{
   self.attributedTitle = [[NSAttributedString alloc] initWithString:title];
 }