From 670f74b46ce2e4be6a72bb687a9c6c0a3392b3c6 Mon Sep 17 00:00:00 2001 From: Mubarak Awal Date: Fri, 8 May 2020 17:48:19 +0000 Subject: [PATCH 1/5] Wrap Flatlist with scrollview when invertedRefreshControlUp is set --- Libraries/Lists/FlatList.js | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/Libraries/Lists/FlatList.js b/Libraries/Lists/FlatList.js index d72228d33ceaa2..a0e114fc3c539c 100644 --- a/Libraries/Lists/FlatList.js +++ b/Libraries/Lists/FlatList.js @@ -16,6 +16,8 @@ const React = require('react'); const View = require('../Components/View/View'); const VirtualizedList = require('./VirtualizedList'); const StyleSheet = require('../StyleSheet/StyleSheet'); +const ScrollView = require('../Components/ScrollView/ScrollView'); +const RefreshControl = require('../Components/RefreshControl/RefreshControl'); const invariant = require('invariant'); @@ -615,7 +617,26 @@ class FlatList extends React.PureComponent, void> { render(): React.Node { const {numColumns, columnWrapperStyle, ...restProps} = this.props; - + let {inverted, invertedRefreshControlUp,onRefresh} = this.props; + if(inverted && invertedRefreshControlUp && onRefresh){ + let {numColumns, columnWrapperStyle, onRefresh, refreshing, ...restProps} = this.props; + return ( + } + > + + + ) + } return ( Date: Fri, 8 May 2020 17:56:05 +0000 Subject: [PATCH 2/5] add inverted scroll container style --- Libraries/Lists/FlatList.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/Libraries/Lists/FlatList.js b/Libraries/Lists/FlatList.js index a0e114fc3c539c..694847ea471b3a 100644 --- a/Libraries/Lists/FlatList.js +++ b/Libraries/Lists/FlatList.js @@ -653,6 +653,11 @@ class FlatList extends React.PureComponent, void> { const styles = StyleSheet.create({ row: {flexDirection: 'row'}, + invertedScrollContainerStyle: { + flexDirection: 'row', + alignSelf: 'flex-end', + flexGrow: 1 + } }); module.exports = FlatList; From 3929834a9d25c0b98856de499a58078a5bfb1cad Mon Sep 17 00:00:00 2001 From: Mubarak Awal Date: Fri, 8 May 2020 17:56:24 +0000 Subject: [PATCH 3/5] Add invertedRefreshControlUp test to RNTester --- RNTester/js/examples/FlatList/FlatListExample.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/RNTester/js/examples/FlatList/FlatListExample.js b/RNTester/js/examples/FlatList/FlatListExample.js index c452ace6040161..5605466c0ced8e 100644 --- a/RNTester/js/examples/FlatList/FlatListExample.js +++ b/RNTester/js/examples/FlatList/FlatListExample.js @@ -55,6 +55,7 @@ type State = {| filterText: string, fixedHeight: boolean, logViewable: boolean, + invertedRefreshControlUp:boolean, virtualized: boolean, empty: boolean, useFlatListItemComponent: boolean, @@ -67,6 +68,7 @@ class FlatListExample extends React.PureComponent { debug: false, horizontal: false, inverted: false, + invertedRefreshControlUp: false, filterText: '', fixedHeight: true, logViewable: false, @@ -130,6 +132,7 @@ class FlatListExample extends React.PureComponent { {renderSmallSwitchOption(this, 'fixedHeight')} {renderSmallSwitchOption(this, 'log')} {renderSmallSwitchOption(this, 'inverted')} + {renderSmallSwitchOption(this, 'invertedRefreshControlUp')} {renderSmallSwitchOption(this, 'empty')} {renderSmallSwitchOption(this, 'debug')} {renderSmallSwitchOption(this, 'useFlatListItemComponent')} @@ -165,6 +168,7 @@ class FlatListExample extends React.PureComponent { } horizontal={this.state.horizontal} inverted={this.state.inverted} + invertedRefreshControlUp={this.state.invertedRefreshControlUp} key={ (this.state.horizontal ? 'h' : 'v') + (this.state.fixedHeight ? 'f' : 'd') From 6b2d3d0a40e846b65506d52bc4f87722c38ca560 Mon Sep 17 00:00:00 2001 From: Mubarak Awal Date: Sat, 9 May 2020 13:27:49 +0000 Subject: [PATCH 4/5] fix flow errors --- Libraries/Lists/FlatList.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/Libraries/Lists/FlatList.js b/Libraries/Lists/FlatList.js index 694847ea471b3a..8217c8c4bf3092 100644 --- a/Libraries/Lists/FlatList.js +++ b/Libraries/Lists/FlatList.js @@ -119,6 +119,12 @@ type OptionalProps = {| * Reverses the direction of scroll. Uses scale transforms of -1. */ inverted?: ?boolean, + /** + * When refreshControl is enabled and list is inverted, default behavior is that, you'll have + * to swipe from bottom to enable refreshing and refresh control shows at the botton. + * This moves refresh control to the top and lets you swipe from the top enable refreshing. + */ + invertedRefreshControlUp?: boolean, /** * Used to extract a unique key for a given item at the specified index. Key is used for caching * and as the react key to track item re-ordering. The default extractor checks `item.key`, then @@ -623,7 +629,7 @@ class FlatList extends React.PureComponent, void> { return ( } + refreshControl={} > Date: Sat, 9 May 2020 13:44:52 +0000 Subject: [PATCH 5/5] fix eslint errors --- Libraries/Lists/FlatList.js | 34 ++++++++++++------- .../js/examples/FlatList/FlatListExample.js | 2 +- 2 files changed, 23 insertions(+), 13 deletions(-) diff --git a/Libraries/Lists/FlatList.js b/Libraries/Lists/FlatList.js index 8217c8c4bf3092..5ad21f70dd0c0c 100644 --- a/Libraries/Lists/FlatList.js +++ b/Libraries/Lists/FlatList.js @@ -120,10 +120,10 @@ type OptionalProps = {| */ inverted?: ?boolean, /** - * When refreshControl is enabled and list is inverted, default behavior is that, you'll have - * to swipe from bottom to enable refreshing and refresh control shows at the botton. - * This moves refresh control to the top and lets you swipe from the top enable refreshing. - */ + * When refreshControl is enabled and list is inverted, default behavior is that, you'll have + * to swipe from bottom to enable refreshing and refresh control shows at the botton. + * This moves refresh control to the top and lets you swipe from the top enable refreshing. + */ invertedRefreshControlUp?: boolean, /** * Used to extract a unique key for a given item at the specified index. Key is used for caching @@ -623,14 +623,24 @@ class FlatList extends React.PureComponent, void> { render(): React.Node { const {numColumns, columnWrapperStyle, ...restProps} = this.props; - let {inverted, invertedRefreshControlUp,onRefresh} = this.props; - if(inverted && invertedRefreshControlUp && onRefresh){ - let {numColumns, columnWrapperStyle, onRefresh, refreshing, ...restProps} = this.props; + let {inverted, invertedRefreshControlUp, onRefresh} = this.props; + if (inverted && invertedRefreshControlUp && onRefresh) { + let { + numColumns, + columnWrapperStyle, + onRefresh, + refreshing, + ...restProps + } = this.props; return ( } - > + refreshControl={ + + }> extends React.PureComponent, void> { {...this._renderer()} /> - ) + ); } return (