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.

Sign up for GitHub

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

Jump to bottom

Inverted scrollsToTop scrolls to bottom #21126

Closed
raphaelrk opened this issue Sep 14, 2018 · 5 comments
Closed

Inverted scrollsToTop scrolls to bottom #21126

raphaelrk opened this issue Sep 14, 2018 · 5 comments
Labels
Bug Impact: Regression Describes a behavior that used to work on a prior release, but stopped working recently.

Comments

@raphaelrk
Copy link

Environment

Environment:
  OS: macOS High Sierra 10.13.5
  Node: 10.4.1
  Yarn: 1.7.0
  npm: 6.4.1
  Watchman: 4.9.0
  Xcode: Xcode 9.4.1 Build version 9F2000
  Android Studio: Not Found

Packages: (wanted => installed)
  react: ^16.4.2 => 16.4.2
  react-native: https://github.com/expo/react-native/archive/sdk-29.0.0.tar.gz => 0.55.4

Description

When a FlatList has both scrollsToTop and inverted enabled, tapping on the iOS status bar scrolls to the bottom of the list, which isn't a behavior I've seen in any native apps. It would be great if this was either changed or it was possible to do e.g. scrollsToBottom={true} or scrollsToTopDirection={'inverted'}.

Reproducible Demo

Expo Snack
@raphaelrk
Copy link
Author

This has been an annoying UX issue since I started using React Native ~10 months ago, would be a really great fix for being able to quickly scroll to the top of a chat screen or other inverted screens!

@kelset
Copy link
Contributor

kelset commented Oct 5, 2018

It seems to me that you are using Expo, so I suggest you open a dedicated issue there 🤷‍♂️

Our can you reproduce on a new react-native init project with 0.57.2?

@raphaelrk
Copy link
Author

Tested with the same code from the snack on a new react-native init (0.57.4) and still have the issue that scrollsToTop scrolls to the bottom

@kelset kelset added Impact: Regression Describes a behavior that used to work on a prior release, but stopped working recently. 🔶Lists and removed 🔶Lists labels Nov 12, 2018
@MartinMasek
Copy link

Have you found any workaround while it's getting fixed?

@terrysahaidak terrysahaidak mentioned this issue Dec 6, 2018
Closed
@hramos hramos removed the 🔶Lists label Jan 25, 2019
@hramos hramos removed the Bug Report label Feb 6, 2019
@cpojer cpojer mentioned this issue Feb 26, 2019
Closed
@cpojer cpojer mentioned this issue Mar 19, 2019
Closed
This was referenced Dec 19, 2019
Closed
Merged
@emilioicai
Copy link
Contributor

This PR should fix it: #27574

alloy pushed a commit to alloy/react-native that referenced this issue Apr 3, 2020
@emilioicai @alloy
tapping on iOS status bar should scroll inverted ScrollViews to their…
30aad14 
… top (facebook#27574)

Summary:
React Native ScrollViews are flipped upside down when the prop inverted is set to true. This is the root of a bug: tapping on the status bar in iOS should scroll the Flatlist up to the top but currently it does to the bottom.

The solution proposed is to detect natively if the ScrollView is inverted, on such case, prevent it from scrolling it to the beginning of the ScrollView (as a non-inverted ScrollView would do) and force a scroll to the end of it.

I've been careful enough not to force the scroll if the user explicitly selected not to do it or if it's happening in a nested ScrollView, as it is the default behaviour in iOS.

Fixes facebook#21126

## Changelog

[iOS] [Fixed] - Inverted ScrollViews scroll to their bottom when the status bar is pressed
Pull Request resolved: facebook#27574

Test Plan:
- on iOS, add a ScrollView and put enough content to overflow the screen size so it can be scrolled
- add the prop `inverted={true}` to the ScrollView
- go to the screen the Scrollview is in and press the status bar
- it should scroll to top (previously it scrolled to the bottom)

![v](https://user-images.githubusercontent.com/807710/71188640-a0ac6680-2281-11ea-91a7-d1e46aba8b14.gif)

Differential Revision: D19185270

Pulled By: hramos

fbshipit-source-id: 5445093ff38f4ba4082f1d883d8ed087e9565eaf
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Bug Impact: Regression Describes a behavior that used to work on a prior release, but stopped working recently.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

tapping on iOS status bar should scroll inverted ScrollViews to their top emilioicai/react-native
6 participants
@hramos @emilioicai @raphaelrk @MartinMasek @kelset @react-native-bot