Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add list viewability offset parameters #50178

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

IslamRustamov
Copy link
Contributor

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:

Image

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:

Image

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:

Image

This solution also works for horizontal lists.

@facebook-github-bot facebook-github-bot added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. labels Mar 20, 2025
@IslamRustamov IslamRustamov force-pushed the feature/add-more-viewability-config-params branch from 3365d82 to a5f71cd Compare March 20, 2025 17:55
@IslamRustamov IslamRustamov force-pushed the feature/add-more-viewability-config-params branch from a5f71cd to 9ef598d Compare March 20, 2025 17:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants