├── LICENSE
├── README.md
├── index.js
└── package.json


/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Ye Yint Ko Ko
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | InfiniteScroll
 2 | ==============
 3 | 
 4 | React native scroll view (infnite). This is a really working react native infinite scroll view component.
 5 | Compatable with both IOS & Android. Fine with all react native versions.
 6 | 
 7 | ## Install
 8 | npm i infinite-scroll-x --save
 9 | 
10 | ## Usage
11 | ```js
12 | <InfiniteScroll
13 | 	onLoadMoreAsync={this.loadMorePage()}
14 | 	horizontal={false}  //true - if you want in horizontal
15 | 	style={styles.scrollView}
16 | 	{...prop}
17 | 	>
18 | {...children}
19 | </InfiniteScroll>
20 | ```
21 | 
22 | 
23 | ### Example
24 | 
25 | ```js
26 | var React = require('react');
27 | var {
28 | 	Text,
29 | 	ListView
30 | } = require('react-native');
31 | var InfiniteScroll = require('infinite-scroll-x');
32 | 
33 | var Example = React.createClass({
34 | 	getInitialState(){
35 | 		var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
36 | 		var rows = ["China","Korea","Singapore","Malaysia"]
37 | 		return {
38 | 			data: rows,
39 | 			dataSource: ds.cloneWithRows(rows)
40 | 		}
41 | 	},
42 | 	loadMorePage(){
43 | 		//here .. collect the data from server somehow
44 | 		let new_data = ['Japan','Myanmar','India','Thailand'];
45 | 		let rows = this.state.data;
46 | 		rows.push.apply(rows, new_data);
47 | 		this.setState({
48 | 			data: rows,
49 | 			dataSource: this.state.dataSource.cloneWithRows(rows)
50 | 		});
51 | 	},
52 | 	render(){
53 | 		return (
54 | 			<InfiniteScroll
55 | 			horizontal={false}	//true - if you want in horizontal
56 | 			onLoadMoreAsync={this.loadMorePage()}
57 | 			style={styles.scrollView}>
58 | 			          <ListView
59 | 					enableEmptySections={true}
60 | 					dataSource={this.state.dataSource}
61 | 					renderRow={(data)=><Text>{data}</Text>}
62 | 					/>
63 | 		        </InfiniteScroll>
64 | 		);
65 | 	}
66 | });
67 | 
68 | 
69 | module.exports = Example
70 | ```
71 | 
72 | ## Support on Beerpay
73 | Hey dude! Help me out for a couple of :beers:!
74 | 
75 | [![Beerpay](https://beerpay.io/yeyintkoko/infinite-scroll-react-native/badge.svg?style=beer-square)](https://beerpay.io/yeyintkoko/infinite-scroll-react-native)  [![Beerpay](https://beerpay.io/yeyintkoko/infinite-scroll-react-native/make-wish.svg?style=flat-square)](https://beerpay.io/yeyintkoko/infinite-scroll-react-native?focus=wish)
76 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import React, { Component } from 'react';
 4 | import {
 5 |   ScrollView
 6 | } from 'react-native';
 7 | 
 8 | var InfiniteScroll = React.createClass({
 9 | 
10 |     _handleScroll(event) {
11 |       if(this.props.onScroll){
12 |         this.props.onScroll(event);
13 |       }
14 |       if (this._shouldLoadMore(event)) {
15 |         if(this.props.onLoadMoreAsync){
16 |           this.props.onLoadMoreAsync();
17 |         }
18 |       }
19 |     },
20 | 
21 |     _shouldLoadMore(event) {
22 |       if(this.props.horizontal) return this._distanceFromEnd(event) < 1;
23 |       return this._distanceFromEnd(event) < 5;
24 |     },
25 | 
26 |     _distanceFromEnd(event): number {
27 |       let {
28 |         contentSize,
29 |         contentInset,
30 |         contentOffset,
31 |         layoutMeasurement,
32 |       } = event.nativeEvent;
33 | 
34 |       let contentLength;
35 |       let trailingInset;
36 |       let scrollOffset;
37 |       let viewportLength;
38 |       let horizontal = this.props.horizontal || false;
39 |       if (horizontal) {
40 |         contentLength = contentSize.width;
41 |         trailingInset = contentInset.right;
42 |         scrollOffset = contentOffset.x;
43 |         viewportLength = layoutMeasurement.width;
44 |       } else {
45 |         contentLength = contentSize.height;
46 |         trailingInset = contentInset.bottom;
47 |         scrollOffset = contentOffset.y;
48 |         viewportLength = layoutMeasurement.height;
49 |       }
50 | 
51 |       return contentLength + trailingInset - scrollOffset - viewportLength;
52 |     },
53 | 
54 |     render() {
55 |       return (
56 |         <ScrollView
57 |         {...this.props}
58 |         automaticallyAdjustContentInsets={false}
59 |         onScroll={this._handleScroll}
60 |         scrollEventThrottle={200}
61 |         >
62 |           {this.props.children}
63 |         </ScrollView>
64 |       );
65 |     }
66 | });
67 | 
68 | 
69 | export default InfiniteScroll;
70 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "infinite-scroll-x",
 3 |   "version": "1.0.5",
 4 |   "description": "Infinite Scroll View React Native",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/yeyintkoko/infinite-scroll-x.git"
12 |   },
13 |   "keywords": [
14 |     "infinite",
15 |     "scroll",
16 |     "view",
17 |     "react",
18 |     "native",
19 |     "react-native",
20 |     "end less",
21 | 		"ScrollView",
22 | 		"react native",
23 |     "infinite scroll view react native"
24 |   ],
25 |   "author": "Ye Yint Ko Ko",
26 |   "license": "MIT",
27 |   "bugs": {
28 |     "url": "https://github.com/yeyintkoko/infinite-scroll-x/issues"
29 |   },
30 |   "homepage": "https://github.com/yeyintkoko/infinite-scroll-x#readme"
31 | }
32 | 


--------------------------------------------------------------------------------