Friday 11 December 2020

Flatlist with Tab menu

I am trying to achieve something like this: enter image description here

The data is something like: Root Category -> Sub Category -> Products. We have something like 3000+ products. Showing all products slows down the device (if there is something i can do to render faster, pls let me know), so i've cut them down to sub-categories instead, where there is about 5-12 sub-categories within each category, and about 200 products within each sub-category.

The Code

List Component: https://gist.github.com/Fl4zher/5e6f90d3d10e494d0f19395231f25946

TabBar: https://gist.github.com/Fl4zher/f42afbbc6a57602d0ed4c682d5ac0a20

What i've experienced

  • The list will be a bit laggy even with 200 products.
  • When i press on sub-category at tab menu, it takes a bit while to take action (about 1-2 sec).
  • When i scroll, the tab menu doesnt follow up quite well.
  • After using the tab menu few times, it goes slower than before.

What i want

  1. When i press on a category from tab menu, i want it to scroll to the chosen sub-category list.
  2. When i scroll, i want the tab menu follow along with the current shown sub-category list.

Best regards



from Flatlist with Tab menu

No comments:

Post a Comment