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

feat: [ScrollView,FlatList] Add ref.scrollToStart({animated?: boolean}) method #45202

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

Conversation

retyui
Copy link
Contributor

@retyui retyui commented Jun 27, 2024

Summary:

scrollToEnd(options?: {animated?: boolean}) is available out of the box, and it's surprising that scrollToStart wasn't added yet

Changelog:

[GENERAL] [ADDED] - [ScrollView, FlatList] Add ref.scrollToStart({animated?: boolean}) method

Test Plan:

Manual + types tests

Android iOS
Screen.Recording.2024-06-27.at.12.27.29.mov
Screen.Recording.2024-06-27.at.12.23.52.mov
@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: Callstack Partner: Callstack Partner Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. labels Jun 27, 2024
@retyui retyui force-pushed the feat/retyui/scroll-to-start branch from e5f52f3 to 88aa470 Compare June 27, 2024 11:58
@retyui retyui force-pushed the feat/retyui/scroll-to-start branch from 88aa470 to 8a8e141 Compare June 27, 2024 12:09
@NickGerleman
Copy link
Contributor

NickGerleman commented Jul 3, 2024

This seems like a sane addition, but current implementation is not correct for horizontal lists in RTL.

@retyui
Copy link
Contributor Author

retyui commented Jul 3, 2024

This seems like a sane addition, but current implementation is not correct for horizontal lists in RTL.

Let me create a demo and test it https://reactnative.dev/blog/2016/08/19/right-to-left-support-for-react-native-apps#making-an-app-rtl-ready

@NickGerleman
Copy link
Contributor

The RNTester FlatList example has a checkbox for RTL which will apply forceRTL. That is what I usually use. But, the gist is that, as of recent versions, all the events and commands are aligned so that x coordinate space is not inverted.

This can be a bit tricky, since as more content is added to the list, the x coordinate will change alongside. scrollToIndex will try to find where the item is, but this will only works reliably in combination with getItemLayout.

scrollToEnd has some logic to do this based on metrics IIRC, but I think the reliable way to do this everywhere would be adding a scrollToStart native command.

@@ -146,6 +146,11 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
this.scrollToOffset({animated, offset});
}

scrollToStart(params?: ?{animated?: ?boolean, ...}) {
const animated = params ? params.animated : true;
this.scrollToOffset({animated, offset: 0});
Copy link
Contributor

Choose a reason for hiding this comment

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

how does this behave if ScrollView has insets?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

how I can add inserts?

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. p: Callstack Partner: Callstack Partner Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team.
4 participants