-1

Hello I am building an app and was wondering what the best option would be for optimizing a very large flatlist. It will take some time to load each element inside a flatlist since it contains images, a lot of text, etc. Would it be better to use just a plane flatlist or something like react-native-snap-carousel, react-native-reanimated-carousel?

Srki
  • 315
  • 1
  • 4
  • 13

2 Answers2

1

Use pagination technique to show large data from flatlist. Avoid third party libraries like react-native-snap-carousel. It may cause the issues as time passes and can also be the reason for large apk or ipa size.

Atif Aziz
  • 84
  • 4
  • What is pagination technique? Is it ```react-native-pagination```? – Srki Jul 31 '22 at 16:59
  • I mean fetch record on the basis of offset and limit through api. Forexample you fetch first 10 record and show to user. After that onEndReached prop of flat-list, you will call again api with 10 more records. – Atif Aziz Aug 01 '22 at 07:14
  • Aha, you mean I just use a flatlist and cycle through smaller chunks of data? – Srki Aug 01 '22 at 14:40
  • Yes.. It would be easy to handle the large amount of data. – Atif Aziz Aug 02 '22 at 07:33
0

If your flatlist will have large data, it is adviced to use pagination. You may use in-built Flatlist or packages like react-native-snap-carousel or react-native-reanimated-carousel. But since your data will have many images that will make the app UX slow if you load them all at once.

Better to use Pagination and use react-native-fast-image for faster loading of images via caching.

Rahul Dasgupta
  • 463
  • 8
  • 14
  • Okay, so pagination is for images. Is there a better option for pages without images, but with a lot of text and large components? – Srki Jul 31 '22 at 12:22