Skip to content

Commit

Permalink
Support RefreshControl in RecyclerViewBackedScrollView in Android
Browse files Browse the repository at this point in the history
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 facebook#7134.
Closes facebook#8639

Differential Revision: D3564158

fbshipit-source-id: c10a880ea61cd80b8af789b00be90d46d63eaf9a
  • Loading branch information
tegon authored and Morgan Pretty committed Aug 24, 2016
1 parent e701c69 commit e0eed5d
Showing 1 changed file with 18 additions and 4 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ var RecyclerViewBackedScrollView = React.createClass({
},

render: function() {
var props = {
var recyclerProps = {
...this.props,
onTouchStart: this.scrollResponderHandleTouchStart,
onTouchMove: this.scrollResponderHandleTouchMove,
Expand All @@ -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) => {
Expand All @@ -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>
);
Expand All @@ -128,6 +139,9 @@ var styles = StyleSheet.create({
left: 0,
right: 0,
},
base: {
flex: 1,
},
});

var NativeAndroidRecyclerView = requireNativeComponent(
Expand Down

0 comments on commit e0eed5d

Please sign in to comment.