Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47908
Changelog: [General][Added] - Add support for `rn_rootThreshold` in Intersection Observer
`rn_rootThreshold` is a custom IntersectionObserver option and not part of the IntersectionObserver spec. We are adding it because it covers a specific use-case for measuring viewability that is robust for `target`s that are larger than the viewport or specified `root`.
The threshold ratio is of the intersection area (of `root` and `target`) to the total area of the `root`.
{F1960832959}
Source - EX314979
`rn_rootThreshold` is an optional threshold and can be combined with the `thresholds` option. An intersection will fire if any specified thresholds is met.
Note: If you use specify a `rn_rootThreshold`, the default `threshold` is no longer applied
The main use case of `rn_rootThreshold` is being able to specify a level of viewability independent of `target` size. For example, a `target` that is larger than the `root` (commonly the viewport) will not trigger the IntersectionObserver for a `threshold` of `1`. Setting `rn_rootThreshold` of `1`, will trigger once the item takes full size of the `root`.';
Reviewed By: yungsters
Differential Revision: D66031119
fbshipit-source-id: 7bdc871dc5b4e6c0edc7d6e17a0a0cfd51c4fe81
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/37863
This creates 2 examples for IntersectionObserver in RNTester:
* The first example is just a copy of the example provided by MDN in the documentation page for `IntersectionObserver` (https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). This example is useful to show how React Native behaves the same way with the same code.
* The second example is a "stress test" for the API: a screen with 500 simultaneous node being observed at the same time with different observers. As we compute the intersections after scroll (after "mounting" the state update with the updated scroll position) in the main thread, this highlights a possible impact on scroll performance.
IntersectionObserver isn't yet enabled by default, so no need to add a changelog entry about this. We'll add one when the API becomes generally available.
Changelog: [Internal]
Reviewed By: rshest
Differential Revision: D45736845
fbshipit-source-id: 40b6bce39f90e04653504b1033a4edfaa65e93ca
Luna Wei
Moti Zilberman
Rubén Norte