Inverted flatlist refresh control

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<ItemT> = {|
    * 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<ItemT> extends React.PureComponent<Props<ItemT>, 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 (
+        <ScrollView
+          contentContainerStyle={styles.invertedScrollContainerStyle}
+          refreshControl={
+            <RefreshControl
+              refreshing={this.props.refreshing || false}
+              onRefresh={this.props.onRefresh}
+            />
+          }>
+          <VirtualizedList
+            {...restProps}
+            getItem={this._getItem}
+            getItemCount={this._getItemCount}
+            keyExtractor={this._keyExtractor}
+            ref={this._captureRef}
+            viewabilityConfigCallbackPairs={this._virtualizedListPairs}
+            {...this._renderer()}
+          />
+        </ScrollView>
+      );
+    }
     return (
       <VirtualizedList
         {...restProps}
@@ -632,6 +669,11 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
 
 const styles = StyleSheet.create({
   row: {flexDirection: 'row'},
+  invertedScrollContainerStyle: {
+    flexDirection: 'row',
+    alignSelf: 'flex-end',
+    flexGrow: 1,
+  },
 });
 
 module.exports = FlatList;

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<Props, State> {
     debug: false,
     horizontal: false,
     inverted: false,
+    invertedRefreshControlUp: false,
     filterText: '',
     fixedHeight: true,
     logViewable: false,
@@ -130,6 +132,7 @@ class FlatListExample extends React.PureComponent<Props, State> {
               {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<Props, State> {
             }
             horizontal={this.state.horizontal}
             inverted={this.state.inverted}
+            invertedRefreshControlUp={this.state.invertedRefreshControlUp}
             key={
               (this.state.horizontal ? 'h' : 'v') +
               (this.state.fixedHeight ? 'f' : 'd')