alternate to FlatList in react native

Question

How to use FlatList feature in older react native versions ,my react native version is 0.41.2. Please suggest.I want to use flatlist in the collapsible sets to render large data.

Answer 1

FlatList was released on 0.44. For previously versions you should use ListView. Simple example from the official docs:

class MyComponent extends Component {
  constructor() {
    super();
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(['row 1', 'row 2']),
    };
  }

  render() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={(rowData) => <Text>{rowData}</Text>}
      />
    );
  }
}

https://facebook.github.io/react-native/docs/listview.html

Answer 2

Trust me, there is no way that you can use FlatList component without using RN version 0.43 and newer. The only way that you can do is upgrade your RN version.

Answer 3

Just use RecyclerListView instead. It is faster than FlatList and battle tested at Flipkart. Works 0.30+

Link: https://github.com/Flipkart/ReactEssentials

You can read more about it here: https://medium.com/@naqvitalha/recyclerlistview-high-performance-listview-for-react-native-and-web-e368d6f0d7ef

Answer 4

use react-native-optimized-flatlist for stable and faster response.

npm i react-native-optimized-flatlist