Horizontal Scroll

[ariona]

Just wondering, Is it hard to implement horizontal & paged scroll?

[godness84]

Horizontal is not hard, I think. But if you need paged scroll why don't you use a FlatList/ScrollView?

[ariona]

Yeah, I use flatlist.

Here is the case. I have 30 pages built with FlatList (Horizontal Paged), Each page have your library which is the awesome recyclerview-list 😉 .

The pain part is navigating between pages. it's really slow and ruin the experience, i don't know if it's the FlatList or recyclerview-list issue ☹️ . checkout the video here

[godness84]

It seems a deep rendering issue. When you press the "Go to Juz" button probably you update the prop of a component that renders again the horizontal flatlist and then all the recyclerviews. Since there are 30 recyclerviews, the process is quite slow. You should not re-render all the components, but just call the scrollToIndex method of the FlatList. Do you do that?

[ariona]

Yes, the onPress props only contain the scrollToIndex method for changing the page, there is no updating props.

[godness84]

Mmm... you should investigate more on what's going on.

• If you replace recyclerview-list with a colored View does the issue appear?
• Try putting a console.log for each recyclerview-list when it renders. Are the recyclerview-list rendered many times?
• Try putting a console.log for each item of the recyclerview-list when it renders. Are the items rendered many times?

[godness84]

Another idea... maybe the modal that contains the "Go to Juz" button when it closes it triggers a new render of the whole page

[ariona]

There is no action to trigger a new render. From my experience, it comes from the flatlist, if we navigate to the item that not in the view boundary it kinda have a delay from rendering.

Just like the vertical scroll, unlike your library, flatlist will show blank page if we navigate far down the list and sometimes it stop before the target 😁.

[godness84]

Ok understood. Try tweaking the props initialNumToRender and windowSize of the FlatList, and initialListSize and windowSize of the RecyclerviewList. For example, I see from the video that your items are quite big, a value of 3 for initialListSize should be ok, and 6 or 9 for windowSize (of the RecyclerviewList).

[ariona]

Already did that, there still slight delay. 👍

I tried adding maxToRenderPerBatch = {2} to FlatList and

windowSize   = {5}
initialListSize = {4}

A bit faster now. But i am still hoping for horizontal,paging props on your libs to see the performance difference :)