[MOO-2029]: fix for virtual scrolling issue.

[MxKevinBeqo]

Checklist

• Contains unit tests ❌
• Contains breaking changes ❌
• Compatible with: MX 10
• Did you update version and changelog? ✅
• PR title properly formatted ([XX-000]: description)? ✅
• Works in Android ✅
• Works in iOS ✅
• Works in Tablet ✅

Feature specific

• Comply with designs ✅
• Comply with PM's requirements ✅

Please remove unnecessary emojis and sections and this comment before proceeding

This PR contains

• Bug fix
• Feature
• Refactor
• Documentation
• Other (describe)

What is the purpose of this PR?

Fixing an issue with the virtual scroll in the Gallery widget.

Relevant changes

Addition of a prop in the FlatList component to control the onEndReachedThreshold value.

What should be covered while testing?

Case of fast scrolling through a list of over 50 items.

[UrazAkgultan]

LGTM 👍

[UrazAkgultan]

Hi, thanks for the fix!
I noticed that a new style called listContainer has been added with a default padding of 250px. Could you clarify why such a large default value was chosen?

Also, since this is a new style, it should be added to Atlas as well.
Additionally, please make sure to update the documentation in the mendix/docs repository and include an explanation of this new style there.

[MxKevinBeqo]

Hi @UrazAkgultan , true that the padding is actually a 'suspiciously big' value. In the sample app because of the bottom navigation bar overlaying on top of the list, I believe it is affecting the visible part of the list; therefore causing the scrolling issue.
For this scenario the padding would only work with higher value, but after the commit I made some extra checks because ideally I would opt for a solution where adding extra padding is not required. I will retest by changing some layout configurations in the sample app to see if the overlay issue is causing issues with the scrollview of the Gallery widget.

And thanks for the extra information about Atlas and updating the docs for these types of changes.

[MxKevinBeqo]

As a conclusion, the fix will include only 'quick scrolling does not render/load items'. Fixed using the onEndReachedThreshold in combination with memoizing the renderItem function as a minor improvement.

From testing with the gallery widget, we found another issue where it appears as if the Gallery widget's height remains fixed and overflows vertically (in this case).
This causes elements to not appear on the window, regardless of how far down you scroll (as seen on the screenshot).

A new bug can be opened for this to continue investigation.