Added index to start at specified index. Added fromIndex and toIndex to limit page indexes. Bug fixes.

Author: Bas Pellis

README.md

@@ -20,6 +20,9 @@ Simple Calendar example included.
 - **renderPage** - Required - (Function) - Must return a component representing the page for the provided index.
 - **horizontal** - Optional - (Boolean) - Scroll horizontal instead of vertical (default).
 - **offScreenPages** - Optional - (Integer) - Number of pages to render before and after the current page. Default is 1 (total 3 pages are rendered).
+- **index** - Optional - (Integer) - Start the scrollview with this index. Default is 0 or toIndex whichever is greater.
+- **toIndex** - Optional - (Integer) - Don't allow scrolling below this page index
+- **fromIndex** - Optional - (Integer) - Don't allow scrolling above this page index
 
 ### Questions?
 Feel free to contact me via

example/package.json

@@ -8,6 +8,6 @@
   "dependencies": {
     "moment": "^2.11.2",
     "react-native": "^0.20.0",
-    "react-native-infinite-scrollview": "^0.1.1"
+    "react-native-infinite-scrollview": "^0.2.0"
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-infinite-scrollview",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "ScrollView with infinte paged scrolling (no looping). The number of pages rendered before and after current page can be customized. Pages are rendered when user scrolled.",
   "main": "src/index.js",
   "scripts": {

src/index.js

@@ -7,31 +7,56 @@ import React, {
 export default class InfiniteScrollView extends Component {
   constructor(props) {
     super(props);
+
+    var fromIndex = props.fromIndex || Number.NEGATIVE_INFINITY;
+    var toIndex = props.toIndex || Number.POSITIVE_INFINITY;
+
+    var index = 0;
+    if(this.props.index) index = Math.min(Math.max(this.props.index, fromIndex), toIndex);
+    else index = Math.max(0, fromIndex);
+
     this._scrollView = null;
     this._offscreenPages = this.props.offScreenPages || 1;
+    this._renderedRange = {};
     this.state = {
-      index: 0,
+      index: index,
+      fromIndex: fromIndex,
+      toIndex: toIndex,
       size: {
         width: 0,
         height: 0,
       }
     }
   }
+  shouldComponentUpdate(nextProps, nextState) {
+    var range = this._pagesRange(nextState);
+    return (
+      nextState.size !== this.state.size ||  
+      range.to !== this._renderedRange.to || range.from !== this._renderedRange.from
+    );
+  }
+  componentDidUpdate() {
+    var scrollTo = {animated: false}
+    if(this.props.horizontal) scrollTo.x = (this.state.index - this._renderedRange.from) * this.state.size.width;
+    else scrollTo.y = (this.state.index - this._renderedRange.from) * this.state.size.height;
+    this._scrollView.scrollTo(scrollTo);    
+  }
   render() {
-    var pages = this._createPages();  
-    var contentOffset = {x:0,y:0};
-    if(this.props.horizontal) contentOffset.x = this._offscreenPages * this.state.size.width;
-    else contentOffset.y = this._offscreenPages * this.state.size.height;  
-  	return (
+    var pages = null;
+    if(this.state.size.width > 0 && this.state.size.width > 0) {
+      var range = this._pagesRange(this.state);
+      pages = this._createPages(range);  
+    }
+    return (
       <View style={this.props.style} onLayout={(event) => this._layoutChanged(event)}>
         <ScrollView 
+          style={{overflow: 'visible'}}
           ref={(scrollView) => { this._scrollView = scrollView; }}
           horizontal={this.props.horizontal}
           automaticallyAdjustContentInsets={false}
           showsHorizontalScrollIndicator={false}
           showsVerticalScrollIndicator={false}
           pagingEnabled={true}
-          contentOffset={contentOffset}
           onMomentumScrollEnd={(e) => this._scrollEnded(e)}>
           {pages}
         </ScrollView>
@@ -46,14 +71,21 @@ export default class InfiniteScrollView extends Component {
         width: width,
         height: height
       }
-    })
+    });
+  }
+  _pagesRange(state) {
+    var range = {};
+    range.from = Math.max(state.index - this._offscreenPages, state.fromIndex);
+    range.to = Math.min(range.from + 2 * this._offscreenPages, state.toIndex);
+    range.from = Math.min(range.from, range.to - 2 * this._offscreenPages);
+    return range;
   }
-  _createPages() {
+  _createPages(range) {
     var pages = [];
-    var numberOfPages = this._offscreenPages * 2 + 1;
-    for(i = 0; i < numberOfPages; i ++) {
-      pages.push(this._renderPage(i + this.state.index - this._offscreenPages));
+    for(i = range.from; i <= range.to; i++) {
+      pages.push(this._renderPage(i));
     }
+    this._renderedRange = range;
     return pages;
   }
   _renderPage(index) {
@@ -65,15 +97,7 @@ export default class InfiniteScrollView extends Component {
   }
   _scrollEnded(event) {
     var scrollIndex = Math.round(this.props.horizontal ? event.nativeEvent.contentOffset.x / this.state.size.width : event.nativeEvent.contentOffset.y / this.state.size.height);
-    var index = this.state.index + scrollIndex - this._offscreenPages; 
-    this._positionPages(index);
-  }
-  _positionPages(index) {
-    var scrollTo = {animated: false}
-    if(this.props.horizontal) scrollTo.x = this._offscreenPages * this.state.size.width;
-    else scrollTo.y = this._offscreenPages * this.state.size.height;
-
-    this._scrollView.scrollTo(scrollTo);    
+    var index = this.state.index + scrollIndex - Math.min(this._offscreenPages, this.state.index - this.state.fromIndex) - Math.max(0, this._offscreenPages + this.state.index - this.state.toIndex); 
     this.setState({index: index});
   }
 }