Flatlist with Tab menu [closed]

Question

I am trying to achieve something like this:

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, please let me know), so I've cut them down to sub-categories instead, where there are 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 doesn't 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 to follow along with the current shown sub-category list.

Dismast

Answer 1

Use Section List and react-native-fast-image

Old Answer:

1. I would suggest you use Flatlist with lazy loading
2. Please add pagination, load 50 items, when scroll ends load next 50. Even if you fetch all 3000 items at once, do render 50-100 at a time.
3. For images use react-native-fast-image

Do not render all 3000 items at once, it is unnecessary as the user may not scroll the whole list.

Companionship

The problem with lazy loading is that it wont be able to calculate the position of the tab to scroll with dynamic components. – Dismast

You are talking about lazy loading in Flatlist or Tab navigation? – Companionship

Lazy Loading in flatlist. I need to scroll to the given category in the tab navigation and find it's position. – Dismast

Use Section List to solve this issue reactnative.dev/docs/sectionlist – Companionship

Answer 2

First of all, keep away from ScrollView for this type of use case where you have to render lots of data dynamically, Scrollview is a scroll container that renders all the data once if you have lots of data which will cause performance issue and will make JS thread busy.

Now you have options to use

1. RecyclerView
2. FlatList
3. SectionList

Now all the above three list view provide onEndReached method and onEndReachedThreshold (Threshold to trigger the onEndReached or distance from bottom)

Before reaching to end of the list make a network call to your server and fetch newer data and add it to the list like this [...oldData, ...NewData]

• Set your initialNumToRender to 10 or 20 (Which covers the view and have some scrollable distance to the bottom)
• Set maxToRenderPerBatch so all of the renders will not be rendered even if it's loaded into the list.
• Set windowSize so List will maintain it's a view for a scrollable view and will not unmount the view when it goes out of the view.

Douma

But how would i achieve scrolling by tab at the top? – Dismast

Did you want to scroll to the top once to tap on the active tab? – Douma

No i want to scroll to the subcategory. Items are split into subcategories. Basically categories -> subcategories -> Items. – Dismast