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.

score 1 · Answer 1 · answered Sep 07 '17 at 13:08

1

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.

answered Sep 07 '17 at 13:08

Wanda Ichsanul Isra

2,142
10
19

So could you please guide me impacts of upgrading to latest one with steps . – Mobile Safaltek Sep 07 '17 at 14:07
1

You can easily follow the steps from here https://facebook.github.io/react-native/docs/upgrading.html – Wanda Ichsanul Isra Sep 07 '17 at 14:13

score 1 · Answer 2 · answered Oct 05 '17 at 13:43

1

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

answered Oct 05 '17 at 13:43

naqvitalha

793
5
9

with dynamic item height dont work well, even slower than flatlist. – Muhammad Feb 10 '20 at 06:15
doesn't work on dynamic height. for flatlist like facebook posts, this is useless – TomSawyer May 08 '21 at 18:06
If you set forceNonDeterministicRendering to true it will treat given dimensions as estimates and will work with dynamic heights. Flipkart's most lists are dynamic. – naqvitalha Jun 02 '21 at 14:14

score 0 · Answer 3 · answered Sep 07 '17 at 10:43

0

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

answered Sep 07 '17 at 10:43

soutot

3,531
1
18
22

yes I'm using but have some performance issue, that's way i'm asking for FlatList – Mobile Safaltek Sep 07 '17 at 10:46
Listview do not support multiple columns display which Flatlist do. – Tony Wu Apr 08 '18 at 09:48
For versions below 0.44 the option for rendering lists is ListView, but it doesn’t mean that it has all features that FlatList does. If you need FlatList features, you should update your RN version and use it – soutot Apr 08 '18 at 12:50

score 0 · Answer 4 · answered Aug 27 '19 at 14:00

0

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

npm i react-native-optimized-flatlist

answered Aug 27 '19 at 14:00

Raj Gohel

999
7
14

alternate to FlatList in react native

4 Answers4