diff --git a/Libraries/Lists/FlatList.js b/Libraries/Lists/FlatList.js index d72228d33ceaa2..5ad21f70dd0c0c 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'); @@ -117,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 @@ -615,7 +623,36 @@ 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 ( extends React.PureComponent, void> { const styles = StyleSheet.create({ row: {flexDirection: 'row'}, + invertedScrollContainerStyle: { + flexDirection: 'row', + alignSelf: 'flex-end', + flexGrow: 1, + }, }); module.exports = FlatList; diff --git a/RNTester/js/examples/FlatList/FlatListExample.js b/RNTester/js/examples/FlatList/FlatListExample.js index c452ace6040161..ef4b64c633135d 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')