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

Support platform customization of inverted VirtualizedList #32038

Closed
wants to merge 1 commit into from
Closed

Support platform customization of inverted VirtualizedList #32038

wants to merge 1 commit into from

Conversation

rozele
Copy link
Contributor

@rozele rozele commented Aug 18, 2021

Summary:
This change slightly modifies VirtualizedList to better support platform customization of inverted behavior. For example, on react-native-windows, the transform approach to inverted breaks some scrolling input behaviors (see https://github.com/microsoft/react-native-windows/issue/4098).

In react-native-windows, inverted behavior can be implemented using a combination of Yoga and platform native anchoring behaviors. When implemented this way, some assumptions in VirtualizedList are broken, namely that layouts of list items have monotonically increasing offsets on the scroll axis.

Rather than entirely overhauling VirtualizedList to eliminate this assumption, a more trivial workaround is to invert the scroll and list item layout metrics in JS so they appear to be monotonically increasing for features like data loading and onEndReached events, and using raw metrics for features like scrollToIndex.

We can accomplish most of this by overwriting the _getScrollMetrics() and _getFrameMetrics() functions in the platform VirtualizedList JS module.

Changelog:
[General][Added] - Support platform customization of inverted VirtualizedList

Differential Revision: D30398027

@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. p: Facebook Partner: Facebook Partner fb-exported labels Aug 18, 2021
@facebook-github-bot
Copy link
Contributor

This pull request was exported from Phabricator. Differential Revision: D30398027

@pull-bot
Copy link

pull-bot commented Aug 18, 2021

Messages
📖

📋 Missing Changelog - Can you add a Changelog? To do so, add a "## Changelog" section to your PR description. A changelog entry has the following format: [CATEGORY] [TYPE] - Message.

CATEGORY may be:
  • General
  • iOS
  • Android
  • JavaScript
  • Internal (for changes that do not need to be called out in the release notes)

TYPE may be:

  • Added, for new features.
  • Changed, for changes in existing functionality.
  • Deprecated, for soon-to-be removed features.
  • Removed, for now removed features.
  • Fixed, for any bug fixes.
  • Security, in case of vulnerabilities.

MESSAGE may answer "what and why" on a feature level. Use this to briefly tell React Native users about notable changes.

📖 📋 Missing Test Plan - Can you add a Test Plan? To do so, add a "## Test Plan" section to your PR description. A Test Plan lets us know how these changes were tested.
📖 📋 Missing Summary - Can you add a Summary? To do so, add a "## Summary" section to your PR description. This is a good place to explain the motivation for making this change.

Generated by 🚫 dangerJS against 9b0bc84

@analysis-bot
Copy link

Platform Engine Arch Size (bytes) Diff
ios - universal n/a --

Base commit: d3345f5

Summary:
Pull Request resolved: #32038

This change slightly modifies VirtualizedList to better support platform customization of inverted behavior. For example, on react-native-windows, the transform approach to inverted breaks some scrolling input behaviors (see https://github.com/microsoft/react-native-windows/issue/4098).

In react-native-windows, inverted behavior can be implemented using a combination of Yoga and platform native anchoring behaviors. When implemented this way, some assumptions in VirtualizedList are broken, namely that layouts of list items have monotonically increasing offsets on the scroll axis.

Rather than entirely overhauling VirtualizedList to eliminate this assumption, a more trivial workaround is to invert the scroll and list item layout metrics in JS so they appear to be monotonically increasing for features like data loading and onEndReached events, and using raw metrics for features like scrollToIndex.

We can accomplish most of this by overwriting the `_getScrollMetrics()` and `_getFrameMetrics()` functions in the platform VirtualizedList JS module.

## Changelog:
[General][Added] - Support platform customization of inverted VirtualizedList

Differential Revision: D30398027

fbshipit-source-id: 8ab3c2bdec29b7d9347fea1b89d034d1e7328393
@facebook-github-bot
Copy link
Contributor

This pull request was exported from Phabricator. Differential Revision: D30398027

@react-native-bot react-native-bot added the Type: Enhancement A new feature or enhancement of an existing feature. label Oct 1, 2021
@@ -1827,6 +1833,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {

_getFrameMetricsApprox = (
index: number,
useRawMetrics?: boolean,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

would an enum be better here for revealing intention at the call sites, and for auto-completion (per Framework Design Guidelines 2nd ed)?

@github-actions
Copy link

github-actions bot commented Apr 5, 2022

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.

@github-actions github-actions bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Apr 5, 2022
@matthargett
Copy link
Contributor

ping?

@cortinico cortinico removed the Stale There has been a lack of activity on this issue and it may be closed soon. label May 4, 2022
This pull request was closed.
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. fb-exported p: Facebook Partner: Facebook Partner Type: Enhancement A new feature or enhancement of an existing feature.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants