jeremyfrancis / react-native-optimized-flatlist

Optimization for complex and slow React Native FlatLists

react-native-optimized-flatlist

Optimization for FlatLists. This is a fix over the FlatList that removed every item that is not inside the viewport. This will give a more stable and faster FlatList as performance dont drop! :)

Please also read more about the issue here: facebook/react-native#13413

Installation

npm i -S react-native-optimized-flatlist

or

yarn add react-native-optimized-flatlist

Usage

Just replace FlatList with OptimizedFlatList .. thats all! :)

Replace this:

render() {
  return (
  <FlatList
    data={[{name: 'fred', name: 'freddy'}]}
    renderItem={ ({item}) => <View>{item.name}</View>}
    />
...

With this:

...
import {OptimizedFlatList} from 'react-native-optimized-flatlist'

...
render() {
  return (
  <OptimizedFlatList
    data={[{name: 'fred', name: 'freddy'}]}
    renderItem={ ({item}) => <View>{item.name}</View>}
    />
...