Permalink
Browse files

Support RefreshControl in RecyclerViewBackedScrollView in Android

Summary:
In Android, `RecyclerViewBackedScrollView` wasn't using `refreshControl` prop.
If a ListView were created with `RecyclerViewBackedScrollView` as its `renderScrollComponent`, then the `refreshControl` wouldn't work.
example:
```js
        <ListView
          dataSource={this.props.dataSource}
          renderRow={this._renderRow.bind(this)}
          refreshControl={
            <RefreshControl
              refreshing={this.props.isRefreshing}
              onRefresh={this._onRefresh.bind(this)}
            />
          }
          renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />}/>;
```
This works in iOS, since the `RecyclerViewBackedScrollView` just returns an `ScrollView`.

This pull request uses the `refreshControl` to decide whether it should wrap the `NativeAndroidRecyclerView` with an
`AndroidSwipeRefreshLayout` or not.

This fixes the issue #7134.
Closes #8639

Differential Revision: D3564158

fbshipit-source-id: c10a880ea61cd80b8af789b00be90d46d63eaf9a
  • Loading branch information...
1 parent b0c023c commit 0c0ac6e21c196a1d66e5c5b2b190eb6071e3df2a @tegon tegon committed with Facebook Github Bot 8 Jul 14, 2016
Showing with 18 additions and 4 deletions.
  1. +18 −4 Libraries/Components/ScrollView/RecyclerViewBackedScrollView.android.js
@@ -76,7 +76,7 @@ var RecyclerViewBackedScrollView = React.createClass({
},
render: function() {
- var props = {
+ var recyclerProps = {
...this.props,
onTouchStart: this.scrollResponderHandleTouchStart,
onTouchMove: this.scrollResponderHandleTouchMove,
@@ -92,12 +92,11 @@ var RecyclerViewBackedScrollView = React.createClass({
onResponderRelease: this.scrollResponderHandleResponderRelease,
onResponderReject: this.scrollResponderHandleResponderReject,
onScroll: this.scrollResponderHandleScroll,
- style: ([{flex: 1}, this.props.style]: ?Array<any>),
ref: INNERVIEW,
};
if (this.props.onContentSizeChange) {
- props.onContentSizeChange = this._handleContentSizeChange;
+ recyclerProps.onContentSizeChange = this._handleContentSizeChange;
}
var wrappedChildren = React.Children.map(this.props.children, (child) => {
@@ -113,8 +112,20 @@ var RecyclerViewBackedScrollView = React.createClass({
);
});
+ const refreshControl = this.props.refreshControl;
+ if (refreshControl) {
+ // Wrap the NativeAndroidRecyclerView with a AndroidSwipeRefreshLayout.
+ return React.cloneElement(
+ refreshControl,
+ {style: [styles.base, this.props.style]},
+ <NativeAndroidRecyclerView {...recyclerProps} style={styles.base}>
+ {wrappedChildren}
+ </NativeAndroidRecyclerView>
+ );
+ }
+
return (
- <NativeAndroidRecyclerView {...props}>
+ <NativeAndroidRecyclerView {...recyclerProps} style={[styles.base, this.props.style]}>
{wrappedChildren}
</NativeAndroidRecyclerView>
);
@@ -128,6 +139,9 @@ var styles = StyleSheet.create({
left: 0,
right: 0,
},
+ base: {
+ flex: 1,
+ },
});
var NativeAndroidRecyclerView = requireNativeComponent(

0 comments on commit 0c0ac6e

Please sign in to comment.