1. Add paginationLoadMoreView

 Improve paginationLoadMoreView function when `autoPagination={false}`.
 & Optimize `onEndReached`
 & Refactor `renderEmptyView`

Author: 1uokun

src/refreshableScrollView.ios.js

@@ -229,6 +229,7 @@ export default class RefreshableScrollView extends React.Component {
         onScroll={this.onScroll}
         onScrollEndDrag={this.onScrollEndDrag}
         onScrollBeginDrag={this.onScrollBeginDrag}
+        contentInset={{ top: 80 }}
       >
         {this.renderRefreshHeader()}
         {this.props.children}

src/ultimateListView.js

@@ -7,6 +7,7 @@ import {
   RefreshControl,
   ScrollView,
   StyleSheet,
+  Button,
   Text,
   View
 } from 'react-native'
@@ -16,9 +17,9 @@ import RefreshableScrollView from './refreshableScrollView'
 const { width, height } = Dimensions.get('window')
 const PaginationStatus = {
   firstLoad: 0,
-  waiting: 1,
+  waiting: 1, // Free process with user's doing-nothing
   allLoaded: 2,
-  fetching: 3
+  fetching: 3 // Waiting for fetch in `onRefresh()`
 }
 
 export default class UltimateListView extends Component {
@@ -37,6 +38,7 @@ export default class UltimateListView extends Component {
     paginationFetchingView: null,
     paginationAllLoadedView: null,
     paginationWaitingView: null,
+    paginationLoadMoreView: null,
     emptyView: null,
     separator: null,
 
@@ -99,6 +101,7 @@ export default class UltimateListView extends Component {
     paginationFetchingView: PropTypes.func,
     paginationAllLoadedView: PropTypes.func,
     paginationWaitingView: PropTypes.func,
+    paginationLoadMoreView: PropTypes.func,
     emptyView: PropTypes.func,
     separator: PropTypes.func,
 
@@ -162,7 +165,7 @@ export default class UltimateListView extends Component {
   componentDidMount() {
     this.mounted = true
     if (this.props.firstLoader) {
-      this.props.onFetch(this.getPage(), this.postRefresh, this.endFetch)
+      this.props.onFetch(1, this.postRefresh, this.endFetch)
     }
   }
 
@@ -171,27 +174,38 @@ export default class UltimateListView extends Component {
   }
 
   onRefresh = () => {
-    console.log('onRefresh()')
     if (this.mounted) {
       this.setState({
-        isRefreshing: true
+        isRefreshing: true,
+        paginationStatus: PaginationStatus.fetching
+      }, () => {
+        this.props.onFetch(1, this.postRefresh, this.endFetch)
       })
-      this.setPage(1)
-      this.props.onFetch(this.getPage(), this.postRefresh, this.endFetch)
+    }
+  }
+
+  /**
+   * onRefreshEnd
+   *
+   * @description Scroll to top before `onRefresh()` ending
+   * * */
+  onRefreshEnd = () => {
+    if (this.props.refreshableMode === 'advanced' && this._flatList._listRef._scrollRef.onRefreshEnd) {
+      this._flatList._listRef._scrollRef.onRefreshEnd()
+    } else if (this._flatList._listRef._scrollRef.scrollTo && this.state.isRefreshing) {
+      this._flatList._listRef._scrollRef.scrollTo({ x: 0, y: 0, animated: true })
     }
   }
 
   onPaginate = async () => {
     if (this.state.paginationStatus !== PaginationStatus.allLoaded && !this.state.isRefreshing) {
-      console.log('onPaginate()')
       await this.setState({ paginationStatus: PaginationStatus.fetching })
       this.props.onFetch(this.getPage() + 1, this.postPaginate, this.endFetch)
     }
   }
 
-  onEndReached = async () => {
-    // console.log('onEndReached()');
-    if (this.props.pagination && this.props.autoPagination && this.state.paginationStatus === PaginationStatus.waiting) {
+  onEndReached = ({ distanceFromEnd }) => {
+    if (distanceFromEnd > 0 && this.props.pagination && this.props.autoPagination && this.state.paginationStatus === PaginationStatus.waiting) {
       this.onPaginate()
     }
   }
@@ -232,17 +246,16 @@ export default class UltimateListView extends Component {
       if (rows.length < pageLimit) {
         paginationStatus = PaginationStatus.allLoaded
       }
-      this.updateRows(rows, paginationStatus)
+      this.setPage(1)
+      this.updateRows(rows.slice(), paginationStatus)
     }
   }
 
   endFetch = () => {
-    // console.log('endRefresh()');
     if (this.mounted) {
-      this.setState({ isRefreshing: false, paginationStatus: PaginationStatus.allLoaded })
-      if (this.props.refreshableMode === 'advanced' && this._flatList._listRef._scrollRef.onRefreshEnd) {
-        this._flatList._listRef._scrollRef.onRefreshEnd()
-      }
+      this.onRefreshEnd()
+
+      this.setState({ isRefreshing: false, paginationStatus: PaginationStatus.allLoaded, dataSource: [] })
     }
   }
 
@@ -261,6 +274,8 @@ export default class UltimateListView extends Component {
   }
 
   updateRows = (rows, paginationStatus) => {
+    this.onRefreshEnd()
+
     if (rows) {
       this.setRows(rows)
       this.setState({
@@ -275,10 +290,6 @@ export default class UltimateListView extends Component {
         paginationStatus
       })
     }
-
-    if (this.props.refreshableMode === 'advanced') {
-      this.endFetch()
-    }
   }
 
   updateDataSource(rows = []) {
@@ -318,11 +329,11 @@ export default class UltimateListView extends Component {
     return null
   }
 
-  paginationWaitingView = (paginateCallback) => {
+  paginationWaitingView = () => {
     if (this.props.pagination) {
-      if (this.props.autoPagination) {
+      if (!this.state.isRefreshing) {
         if (this.props.paginationWaitingView) {
-          return this.props.paginationWaitingView(paginateCallback)
+          return this.props.paginationWaitingView()
         }
 
         return (
@@ -340,6 +351,22 @@ export default class UltimateListView extends Component {
     return null
   }
 
+  paginationLoadMoreView = (paginateCallback) => {
+    if (this.props.pagination) {
+      if (!this.state.isRefreshing) {
+        if (this.props.paginationLoadMoreView) {
+          return this.props.paginationLoadMoreView(paginateCallback)
+        }
+
+        return (
+          <Button title={this.props.paginationBtnText} style={styles.paginationBtnText} onPress={paginateCallback} />
+        )
+      }
+    }
+
+    return null
+  }
+
   renderHeader = () => {
     if (this.props.header) {
       return this.props.header()
@@ -371,17 +398,17 @@ export default class UltimateListView extends Component {
   renderEmptyView = () => {
     if (this.state.paginationStatus !== PaginationStatus.firstLoad && this.props.emptyView) {
       return this.props.emptyView()
+    } else if (this.state.paginationStatus === PaginationStatus.firstLoad) {
+      return this.paginationFetchingView()
     }
 
     return null
   }
 
   renderFooter = () => {
-    if (this.state.paginationStatus === PaginationStatus.firstLoad) {
-      return this.paginationFetchingView()
-    } else if (this.state.paginationStatus === PaginationStatus.fetching && this.props.autoPagination === false) {
-      return this.paginationWaitingView(this.onPaginate)
-    } else if (this.state.paginationStatus === PaginationStatus.fetching && this.props.autoPagination === true) {
+    if (this.state.paginationStatus === PaginationStatus.waiting && this.props.autoPagination === false) {
+      return this.paginationLoadMoreView(this.onPaginate)
+    } else if (this.state.paginationStatus === PaginationStatus.fetching) {
       return this.paginationWaitingView()
     } else if (this.getRows().length !== 0 && this.state.paginationStatus === PaginationStatus.allLoaded) {
       return this.paginationAllLoadedView()
@@ -441,6 +468,7 @@ export default class UltimateListView extends Component {
         onEndReachedThreshold={0.1}
         {...this.props}
         ref={ref => this._flatList = ref}
+        paginationStatus={this.state.paginationStatus}// force update pure-component
         data={this.state.dataSource}
         renderItem={this.renderItem}
         ItemSeparatorComponent={this.renderSeparator}