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 https://github.com/facebook/react-native/pull/8639

Differential Revision: D3564158

fbshipit-source-id: c10a880ea61cd80b8af789b00be90d46d63eaf9a
This commit is contained in:
Leonardo Tegon 2016-07-14 14:39:37 -07:00 committed by Facebook Github Bot 8
parent b0c023c85c
commit 0c0ac6e21c
1 changed files with 18 additions and 4 deletions

View File

@ -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(