rni
react-native-infinite-list
npm i react-native-infinite-list
rni

react-native-infinite-list

InfiniteList : ListView replacement for React Native - Recycler View

by Kenny Hartono

0.0.2 (see all)TypeScript:Not Found
npm i react-native-infinite-list
Readme

InfiniteList : ListView replacement for React Native

Ideas and pseudos are taken from https://blog.getchop.io/fast-and-fluid-infinite-list-with-react-native-336d010e51f2

Suitable for huge list. Only displayed items are rendered.

itemHeight : height per row
bufferItems : add X number of items before and after the list / display items
displayItems : show Y number of items at once
dataModel : array
renderItem : function

Recycler view

InfiniteList

How to use : npm install --save react-native-infinite-list

constructor(props) {
  super(props);
  const data = [];
  for (i=0;i<1000;i++) {
    data.push({text:'HELLO WORLD '+i});
  }
  this.state = {
    data: data,
  };
}
<InfiniteList
  itemHeight={20}
  bufferItems={10}
  displayItems={50}
  dataModel={this.state.data}
  renderItem={(renderItem)=>(<Text>{renderItem.text}</Text>)}
/>

Debug / Dev mode will slow down the rendering when scrolling.

Downloads/wk

10

GitHub Stars

17

LAST COMMIT

5yrs ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
0.0.2
latest
5yrs ago
No alternatives found
No tutorials found
Add a tutorial