├── InfiniteList.js ├── LICENSE ├── README.md ├── demo2.gif └── package.json /InfiniteList.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { 3 | View, 4 | ScrollView, 5 | Text, 6 | } from 'react-native'; 7 | 8 | class InfiniteList extends ScrollView { 9 | constructor(props) { 10 | super(props); 11 | var newArray = props.dataModel.slice(0, props.bufferItems).concat(props.dataModel); 12 | this.state = { 13 | bodyHeight: (newArray.length - props.bufferItems) * props.itemHeight, 14 | dataModel: newArray, 15 | renderModel: [], 16 | }; 17 | this.itemHeight = props.itemHeight; 18 | this.bufferItems = props.bufferItems; 19 | this.displayItems = props.displayItems; 20 | } 21 | componentDidMount() { 22 | this.updateRenderModel({y: 0}); 23 | } 24 | updateRenderModel(contentOffset) { 25 | var listItemHeight = this.itemHeight; 26 | var firstVisibleItem = Math.max(0, Math.floor(contentOffset.y / listItemHeight)); 27 | var renderModelSize = this.bufferItems * 2 + this.displayItems; 28 | var nextPosition = (firstVisibleItem - this.bufferItems) * listItemHeight; 29 | var newRenderModel = this.state.dataModel.slice(firstVisibleItem, firstVisibleItem + renderModelSize).map((dataItem, index) => { 30 | return { 31 | key: index, 32 | data: dataItem, 33 | position: nextPosition + index * listItemHeight 34 | } 35 | }); 36 | this.setState({ 37 | renderModel: newRenderModel, 38 | }); 39 | } 40 | onScroll(e) { 41 | this.updateRenderModel(e.nativeEvent.contentOffset); 42 | } 43 | render() { 44 | var items = this.state.renderModel.map(renderItem => { 45 | const itemStyle = { 46 | position : 'absolute', 47 | height : this.itemHeight, 48 | left : 0, 49 | top : renderItem.position, 50 | }; 51 | return {this.props.renderItem(renderItem.data)}; 52 | }); 53 | return ( 54 | 55 | 56 | {items} 57 | 58 | 59 | ); 60 | } 61 | } 62 | 63 | module.exports = InfiniteList; 64 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Kenny Hartono 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 | # InfiniteList : ListView replacement for React Native 2 | 3 | Ideas and pseudos are taken from 4 | https://blog.getchop.io/fast-and-fluid-infinite-list-with-react-native-336d010e51f2 5 | 6 | Suitable for huge list. Only displayed items are rendered. 7 | ``` 8 | itemHeight : height per row 9 | bufferItems : add X number of items before and after the list / display items 10 | displayItems : show Y number of items at once 11 | dataModel : array 12 | renderItem : function 13 | ``` 14 | Recycler view 15 | 16 | ![InfiniteList](https://github.com/kenny1har/infinite-list/blob/master/demo2.gif?raw=true "InfiniteList") 17 | 18 | How to use : 19 | npm install --save react-native-infinite-list 20 | 21 | ```javascript 22 | constructor(props) { 23 | super(props); 24 | const data = []; 25 | for (i=0;i<1000;i++) { 26 | data.push({text:'HELLO WORLD '+i}); 27 | } 28 | this.state = { 29 | data: data, 30 | }; 31 | } 32 | ``` 33 | 34 | ``` 35 | ({renderItem.text})} 41 | /> 42 | ``` 43 | 44 | Debug / Dev mode will slow down the rendering when scrolling. 45 | -------------------------------------------------------------------------------- /demo2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenny1har/infinite-list/48d70e54786b8ed659414169512d61452b33f039/demo2.gif -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-infinite-list", 3 | "version": "0.0.2", 4 | "description": "InfiniteList : ListView replacement for React Native - Recycler View", 5 | "main": "InfiniteList.js", 6 | "keywords": [ 7 | "react-native", 8 | "infinite", 9 | "listview", 10 | "recyclerview", 11 | "recycler" 12 | ], 13 | "author": "Kenny Hartono ", 14 | "bugs": { 15 | "url": "https://github.com/kenny1har/infinite-list/issues" 16 | }, 17 | "homepage": "https://github.com/kenny1har/infinite-list", 18 | "repository": { 19 | "type": "git", 20 | "url": "https://github.com/kenny1har/infinite-list.git" 21 | } 22 | } 23 | --------------------------------------------------------------------------------