All ScrollView properties are exposed now. Removed wrapping View.

Author: Bas Pellis

README.md

@@ -17,8 +17,8 @@ Simple Calendar example included.
 ![react-native-infinite-scrollview demo](https://raw.githubusercontent.com/baspellis/react-native-infinite-scrollview/master/example/video/demo.gif)
 
 ### API
+Component wraps ScrollView so all ScrollView properties are available.
 - **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

example/package.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-infinite-scrollview",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "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

@@ -51,30 +51,36 @@ export default class InfiniteScrollView extends Component {
       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}
-          onMomentumScrollEnd={(e) => this._scrollEnded(e)}>
-          {pages}
-        </ScrollView>
-      </View>
+      <ScrollView 
+        {...this.props}
+        ref={(scrollView) => {this._scrollView = scrollView}}
+        onLayout={(e) => this._layoutChanged(e)}
+        pagingEnabled={true}
+        onMomentumScrollEnd={(e) => this._onMomentumScrollEnd(e)}>
+        {pages}
+      </ScrollView>
     );
   }
   _layoutChanged(event) {
     var {x, y, width, height} = event.nativeEvent.layout;
-
     this.setState({
       size: {
         width: width,
         height: height
       }
     });
+    if(this.props.onLayout) {
+      this.props.onLayout(event);
+    }
+  }
+  _onMomentumScrollEnd(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 - 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});
+
+    if(this.props.onMomentumScrollEnd) {
+      this.props.onMomentumScrollEnd(event);
+    }
   }
   _pagesRange(state) {
     var range = {};
@@ -98,9 +104,4 @@ export default class InfiniteScrollView extends Component {
       </View>
     );
   }
-  _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 - 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});
-  }
 }