From 4a89c64dc9e252502793e38d97ffd3c5551c017e Mon Sep 17 00:00:00 2001
From: Janic Duplessis <janicduplessis@gmail.com>
Date: Sat, 12 Mar 2016 14:39:14 -0500
Subject: [PATCH 1/3] Make the resfresing prop controlled

---
 .../RefreshControl/RefreshControl.js          | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/Libraries/Components/RefreshControl/RefreshControl.js b/Libraries/Components/RefreshControl/RefreshControl.js
index ee285a3c752bee..7ed6f762330161 100644
--- a/Libraries/Components/RefreshControl/RefreshControl.js
+++ b/Libraries/Components/RefreshControl/RefreshControl.js
@@ -11,9 +11,10 @@
  */
 'use strict';
 
-const React = require('React');
-const Platform = require('Platform');
 const ColorPropType = require('ColorPropType');
+const NativeMethodsMixin = require('NativeMethodsMixin');
+const Platform = require('Platform');
+const React = require('React');
 const View = require('View');
 
 const requireNativeComponent = require('requireNativeComponent');
@@ -34,6 +35,8 @@ const RefreshControl = React.createClass({
     SIZE: RefreshLayoutConsts.SIZE,
   },
 
+  mixins: [NativeMethodsMixin],
+
   propTypes: {
     ...View.propTypes,
     /**
@@ -76,8 +79,21 @@ const RefreshControl = React.createClass({
     size: React.PropTypes.oneOf(RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE),
   },
 
+  _nativeRef: undefined,
+
   render() {
-    return <NativeRefreshControl {...this.props} />;
+    return (
+      <NativeRefreshControl
+        {...this.props}
+        ref={ref => this._nativeRef = ref}
+        onRefresh={this._onRefresh}
+      />
+    );
+  },
+
+  _onRefresh() {
+    this.props.onRefresh && this.props.onRefresh();
+    this._nativeRef.setNativeProps({refreshing: this.props.refreshing});
   },
 });
 

From c2d44196c8c678baa6dbb0a55a8a55ba1d8d48e6 Mon Sep 17 00:00:00 2001
From: Janic Duplessis <janicduplessis@gmail.com>
Date: Sat, 12 Mar 2016 15:19:17 -0500
Subject: [PATCH 2/3] Improve resfresh control doc

---
 .../RefreshControl/RefreshControl.js          | 42 ++++++++++++++++++-
 website/layout/AutodocsLayout.js              |  8 ++--
 2 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/Libraries/Components/RefreshControl/RefreshControl.js b/Libraries/Components/RefreshControl/RefreshControl.js
index 7ed6f762330161..7d3182baf82c88 100644
--- a/Libraries/Components/RefreshControl/RefreshControl.js
+++ b/Libraries/Components/RefreshControl/RefreshControl.js
@@ -26,9 +26,49 @@ if (Platform.OS === 'android') {
 }
 
 /**
- * This component is used inside a ScrollView to add pull to refresh
+ * This component is used inside a ScrollView or ListView to add pull to refresh
  * functionality. When the ScrollView is at `scrollY: 0`, swiping down
  * triggers an `onRefresh` event.
+ *
+ * ### Usage example
+ *
+ * ``` js
+ * class RefreshableList extends Component {
+ *   constructor(props) {
+ *     super(props);
+ *     this.state = {
+ *       refreshing: false,
+ *     };
+ *   }
+ *
+ *   _onRefresh() {
+ *     this.setState({refreshing: true});
+ *     fetchData().then(() => {
+ *       this.setState({refreshing: false});
+ *     });
+ *   }
+ *
+ *   render() {
+ *     return (
+ *       <ListView
+ *         refreshControl={
+ *           <RefreshControl
+ *             refreshing={this.state.refreshing}
+ *             onRefresh={this._onRefresh.bind(this)}
+ *           />
+ *         }
+ *         ...
+ *       >
+ *       ...
+ *       </ListView>
+ *     );
+ *   }
+ *   ...
+ * }
+ * ```
+ *
+ * __Note:__ `refreshing` is a controlled prop, this is why it needs to be set to true
+ * in the `onRefresh` function otherwise the refresh indicator will stop immediatly.
  */
 const RefreshControl = React.createClass({
   statics: {
diff --git a/website/layout/AutodocsLayout.js b/website/layout/AutodocsLayout.js
index 269314cb1e0443..e48212e586d71a 100644
--- a/website/layout/AutodocsLayout.js
+++ b/website/layout/AutodocsLayout.js
@@ -41,12 +41,12 @@ function renderType(type) {
     return '{' + Object.keys(type.value).map((key => key + ': ' + renderType(type.value[key]))).join(', ') + '}';
   }
 
-  if (type.name == 'union') {
+  if (type.name === 'union') {
     return type.value.map(renderType).join(', ');
   }
 
   if (type.name === 'arrayOf') {
-    return '[' + renderType(type.value) + ']';
+    return <span>[{renderType(type.value)}]</span>;
   }
 
   if (type.name === 'instanceOf') {
@@ -56,10 +56,10 @@ function renderType(type) {
   if (type.name === 'custom') {
     if (styleReferencePattern.test(type.raw)) {
       var name = type.raw.substring(0, type.raw.indexOf('.'));
-      return <a href={'docs/' + slugify(name) + '.html#style'}>{name}#style</a>
+      return <a href={'docs/' + slugify(name) + '.html#style'}>{name}#style</a>;
     }
     if (type.raw === 'ColorPropType') {
-      return <a href={'docs/colors.html'}>color</a>
+      return <a href={'docs/colors.html'}>color</a>;
     }
     if (type.raw === 'EdgeInsetsPropType') {
       return '{top: number, left: number, bottom: number, right: number}';

From f5bccb7f2fde1b4ad3c4582f28c7e06c96a7daff Mon Sep 17 00:00:00 2001
From: Janic Duplessis <janicduplessis@gmail.com>
Date: Sat, 12 Mar 2016 17:45:06 -0500
Subject: [PATCH 3/3] Fix flow

---
 Libraries/Components/RefreshControl/RefreshControl.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Libraries/Components/RefreshControl/RefreshControl.js b/Libraries/Components/RefreshControl/RefreshControl.js
index 7d3182baf82c88..64e9a76ea83c3c 100644
--- a/Libraries/Components/RefreshControl/RefreshControl.js
+++ b/Libraries/Components/RefreshControl/RefreshControl.js
@@ -119,7 +119,7 @@ const RefreshControl = React.createClass({
     size: React.PropTypes.oneOf(RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE),
   },
 
-  _nativeRef: undefined,
+  _nativeRef: {},
 
   render() {
     return (