Add list viewability offset parameters

[IslamRustamov]

Summary:

Below I will present a proposal given at react-native-community/discussions-and-proposals#891

Let's bring up an example.

1. We have a FlatList of images;
2. We have a viewabilityConfig with itemVisiblePercentThreshold: 15;
3. We have an absolutely positioned View above the FlatList. This View is serving a purpose of some custom header and we add paddingTop: HEADER_HEIGHT to the contentContainerStyle of the FlatList so that we see all of the list;
4. Every time an image becomes "not visible" we want to make it slightly opaque.

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:

1. In ViewabilityConfig (@react-native/virtualized-lists/Lists/VirtualizedList.d.ts) interface we add absoluteStartOffset and absoluteEndOffset;
2. In 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.

[danyasnov]

I have the same issue

[react-native-bot]

This PR is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[react-native-bot]

This PR was closed because it has been stalled for 7 days with no activity.