https://github.com/lexor90/react-native-infinite-scroll
A simple implementation of infinite scrolling for React Native.
https://github.com/lexor90/react-native-infinite-scroll
android ios react-native scrolling
Last synced: 9 months ago
JSON representation
A simple implementation of infinite scrolling for React Native.
- Host: GitHub
- URL: https://github.com/lexor90/react-native-infinite-scroll
- Owner: lexor90
- License: mit
- Created: 2016-12-13T17:16:05.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-10-31T14:48:43.000Z (over 7 years ago)
- Last Synced: 2025-09-13T17:37:27.127Z (10 months ago)
- Topics: android, ios, react-native, scrolling
- Language: JavaScript
- Size: 4.88 KB
- Stars: 20
- Watchers: 1
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Infinite Scroll
React native infinite scroll component for Android & iOS.
Tested with Android 4.1+ and iOS 10.
## Install
npm install --save react-native-infinite-scroll
## Usage
```js
{...children}
```
### Example
```js
import React, { Component } from 'react';
import { Text, ListView } from 'react-native';
import InfiniteScroll from 'react-native-infinite-scroll';
class Example extends Component ({
getInitialState(){
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
var rows = ["China","Korea","Singapore","Malaysia"]
return {
data: rows,
dataSource: ds.cloneWithRows(rows)
}
},
loadMorePage(){
//here .. collect the data from server somehow
let new_data = ['Japan','Myanmar','India','Thailand'];
let rows = this.state.data;
rows.push.apply(rows, new_data);
this.setState({
data: rows,
dataSource: this.state.dataSource.cloneWithRows(rows)
});
},
render(){
return (
{data}}
/>
);
}
});
export default Example;
```
### API
You can pass any [ScrollView](https://facebook.github.io/react-native/docs/scrollview.html) property here.
Plus you can provide the following:
* `onLoadMoreAsync` [Function] *no default* reference callback to be executed whenever we reach the end of our scrolling area (the end is not represented by the right border but it's the right border - offset defined by `distanceFromEnd`)
* `distanceFromEnd` [Number] *10* the distance we should call `onLoadMoreAsync` before to reach the right border, useful to get the content before the user hits the end (causing it to stop scrolling while content is loading). You should calculate this with regard to the needed time to render new content (network latency/computing time) and estimate your average item size. The right amount of dp is up to you.
## Credits
Originally based on [infinite-scroll-x](https://github.com/yeyintkoko/infinite-scroll-react-native)