Add list viewability offset parameters #50178
Open
+26
−3
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary:
Below I will present a proposal given at react-native-community/discussions-and-proposals#891
Let's bring up an example.
paddingTop: HEADER_HEIGHT
to the contentContainerStyle of the FlatList so that we see all of the list;Here is the result:
We can see that the image AT THE BOTTOM is getting slightly opaque, when less than 15% of it is not visible. However, we can't say the same thing about the images on top of the screen. (couldn't upload gifs for some reason so bear with my screenshots)
Why is this happening? Because our header is an absolute View and the image is continuing to be visible underneath the header. And FlatList cannot correctly computate the offset from top.
You may say that it's my fault that I'm using an absolute view as a header for some reason, but there are real-life scenarios where this is being used with more complicated UI than I showed in the examples above (the reason why I suggest this change is exactly because it fixes the problem for my application which has some animations on top and rebuilding UI is not as easy as simply adding these changes).
Adding custom getItemLayout with different offset is not a solution to this problem.
Changelog:
computeViewableItems
(@react-native/virtualized-lists/Lists/ViewabilityHelper.js) change the viewability computation logic according to absoluteStartOffset and absoluteEndOffset.[INTERNAL] [ADDED] - Add list viewability offset parameters
Test Plan:
Gist of the example https://gist.github.com/IslamRustamov/653747e65be5f59dcce953345f3dff2a
Now, if I pass my absoluteStartOffset to the viewabilityConfig - we will see the next result:
We can see that both TOP and BOTTOM images are opaque, which means that viewability calculations are correct now.
We can also make it work with absolute views, located at the bottom of the screen by utilising absoluteEndOffset:
This solution also works for horizontal lists.