ScrollView weird behaviour when there are less items #42874

shreyanshgoel9 · 2024-02-05T14:52:27Z

Description

When the scrollview container is bigger than total item width, on scroll the items start sticking on right on android.
Tested on physical device as well

Screen.Recording.2024-02-05.at.8.20.01.PM.mov

Steps to reproduce

Installed React Native macOs, android simulator
Write this code
<ScrollView horizontal={true} style={{backgroundColor: 'green'}}> <View style={{ height: 40, width: 50, marginRight: 20, backgroundColor: 'red', }} /> <View style={{ height: 40, width: 50, marginRight: 20, backgroundColor: 'red', }} /> </ScrollView>
Scroll horizontal to reproduce

React Native Version

0.73.3

Affected Platforms

Runtime - Android

Output of `npx react-native info`

System:
  OS: macOS 14.1.2
  CPU: (8) arm64 Apple M1 Pro
  Memory: 87.98 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.12.1
    path: ~/.nvm/versions/node/v18.12.1/bin/node
  Yarn:
    version: 1.22.19
    path: ~/.nvm/versions/node/v18.12.1/bin/yarn
  npm:
    version: 8.19.2
    path: ~/.nvm/versions/node/v18.12.1/bin/npm
  Watchman:
    version: 2023.08.14.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.14.2
    path: /opt/homebrew/opt/ruby/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.2
      - iOS 17.2
      - macOS 14.2
      - tvOS 17.2
      - visionOS 1.0
      - watchOS 10.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2022.3 AI-223.8836.35.2231.10811636
  Xcode:
    version: 15.2/15C500b
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 20.0.2
    path: /opt/homebrew/opt/openjdk/bin/javac
  Ruby:
    version: 3.2.2
    path: /opt/homebrew/opt/ruby/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.3
    wanted: 0.73.3
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Stacktrace or Logs

Reproducer

snack.expo.dev/@uvrubel/rn-scrollview-horizontal

Screenshots and Videos

No response

The text was updated successfully, but these errors were encountered:

github-actions · 2024-02-05T14:52:41Z

⚠️	Missing Reproducible Example
ℹ️	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

Myst1024 · 2024-02-13T23:49:02Z

Running into the same issue, using React Native 0.73.4. I have only been able to reproduce on physical Android devices.

RakaDoank · 2024-02-16T19:37:37Z

I also have this issue. I can reproduce this in physical Android device (API 33) and Android simulator (API 34). So far, no problem on iOS simulator.

I actually wanted to write this earlier. I remember i get this issue since i upgraded the RN to 0.73.0 from 0.72.7, until now currently on 0.73.4.

kemplaw · 2024-02-17T03:13:15Z

Running into the same issue, using React Native 0.72.10.

ulyavrubel · 2024-02-27T10:25:59Z

Running into the same issue, using React Native 0.73.4. Reproducible on Android only

Steps to Reproduce

     <ScrollView horizontal>
       ...
      </ScrollView>

Demo

https://snack.expo.dev/@uvrubel/rn-scrollview-horizontal

screen-20240227-111557.mp4

Titozzz · 2024-03-12T14:24:41Z

Can confirm this is not something that was here before (but cannot easily bisect).
I can reproduce on 0.73.2 and 0.73.6

Titozzz · 2024-03-12T14:48:43Z

After testing with Snack, doesn't happen with SDK 49 but happens on 50. Looking through the commits now.

Titozzz · 2024-03-12T17:40:00Z

30c7e9d is the culprit!

NickGerleman · 2024-03-12T18:03:56Z

Whoah, that's a crazy effect.

The interesting logic here is gated on:

mReactScrollViewScrollState.getLayoutDirection() == LAYOUT_DIRECTION_RTL

react-native/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollView.java

Line 1308 in 30c7e9d

adjustPositionForContentChangeRTL(left, right, oldLeft, oldRight);

@Titozzz is this path being hit on physical device?

Titozzz · 2024-03-12T18:19:09Z

I'll have to check tomorrow ! I'm home now 😬

Titozzz · 2024-03-13T09:54:51Z

30c7e9d#diff-067e69cd88e616e9605533a4be612685b607a7d1cd29f854ee77d713113cb170R612-R614 is the change that breaks things

NickGerleman · 2024-03-13T19:54:20Z

Huh. That was to fix another bug, where flinging to the edge would sometimes start scrolling backwards (#38236 is one report, though I think I saw others after the fact).

The version clamp was based on a linked Android bug report being fixed, and seeing incorrect behavior in emulator. So I think there might be a couple possibilities:

Different behavior on another Android version. @Titozzz do you remember version in emulator vs device where you could or couldn’t repro this? If we can only repro on some devices, I wonder if this might be the case.
There are more bugs here, that the issue ended up masking.

Regin99 · 2024-03-18T13:50:03Z

30c7e9d#diff-067e69cd88e616e9605533a4be612685b607a7d1cd29f854ee77d713113cb170R612-R614 is the change that breaks things

Even if i fully downgrade android scroll logic (ReactAndroid/src/.../views/scroll) to 0.72.4 version, bug is still reproduced. Interesting fact, that shopify's flashlist reproduce this bug too.
Are u sure that this changes breaks things?

Tested on emulator 30, 34 api RN 0.73.5

Titozzz · 2024-03-18T18:03:57Z

Yep you are using prefab probably!
https://reactnative.dev/contributing/how-to-build-from-source#update-your-project-to-build-from-source
Did you do that ?

Titozzz · 2024-03-18T18:06:07Z

This is the line that breaks it for me 30c7e9d#diff-067e69cd88e616e9605533a4be612685b607a7d1cd29f854ee77d713113cb170R612-R614.

(Verified with breakpoints)

Regin99 · 2024-03-18T19:36:39Z

Yep you are using prefab probably! https://reactnative.dev/contributing/how-to-build-from-source#update-your-project-to-build-from-source Did you do that ?

Yeah, my mistake. I'm forgot bout prefabs. Thank you

…Less Length than Scrolling View Summary: Fixes facebook#42874 ## Sumary D9405703 added some custom logic for Flings, to support FlatList scenarios where content is being added on the fly, during Fling animation. This works by allowing start Fling to not have bounds, then correcting/cancelling Fling when overscroll happens over a bound that would normally be allowed. This has some math to try to determine max content length, and will clamp to this when scrolling over it. This logic is incorrect when content length is less than scrollview length, and we end up snapping to a negative offset. This change adds clamping, so that we don't snap to negative position in horizontal scroll view. This clamping was already indirectly present on vertical scroll view. https://www.internalfb.com/code/fbsource/[b43cdf9b2fec71f5341ec8ff2d47e28a066f052e]/xplat/js/react-native-github/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollView.java?lines=609 ## Test Plan Above issue no longer reproes. Flinging while content is being added to horizontal FlatList still works correctly. Changelog: [Android][Fixed] - Fix Android Horizontal ScrollView OverScroll Fling when Content View Less Length than Scrolling View Differential Revision: D55108818

hjun555 · 2024-03-21T11:23:36Z

same issue here, any solutions?

Regin99 · 2024-03-21T11:57:54Z

same issue here, any solutions?

Look above

…ScrollView length (#43563) Summary: Pull Request resolved: #43563 Fixes #42874 ## Sumary D9405703 added some custom logic for Flings, to support FlatList scenarios where content is being added on the fly, during Fling animation. This works by allowing start Fling to not have bounds, then correcting/cancelling Fling when overscroll happens over a bound that would normally be allowed. This has some math to try to determine max content length, and will clamp to this when scrolling over it. This logic is incorrect when content length is less than scrollview length, and we end up snapping to a negative offset. This change adds clamping, so that we don't snap to negative position in horizontal scroll view. This clamping was already indirectly present on vertical scroll view. https://www.internalfb.com/code/fbsource/[b43cdf9b2fec71f5341ec8ff2d47e28a066f052e]/xplat/js/react-native-github/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollView.java?lines=609 ## Test Plan Above issue no longer reproes. Flinging while content is being added to horizontal FlatList still works correctly. Changelog: [Android][Fixed] - Fix Android HorizontalScrollView fling when content length less than ScrollView length Reviewed By: javache Differential Revision: D55108818 fbshipit-source-id: 7cf0065f9f92832cc2606d1c7534fc150407b9c9

baez97 · 2024-04-15T15:56:33Z

In case someone needs a fix without upgrading, setting contentContainerStyle to full width worked for me

<ScrollView horizontal contentContainerStyle={{ width: "100%" }}>

…ScrollView length (#43563) Summary: Pull Request resolved: facebook/react-native#43563 Fixes facebook/react-native#42874 ## Sumary D9405703 added some custom logic for Flings, to support FlatList scenarios where content is being added on the fly, during Fling animation. This works by allowing start Fling to not have bounds, then correcting/cancelling Fling when overscroll happens over a bound that would normally be allowed. This has some math to try to determine max content length, and will clamp to this when scrolling over it. This logic is incorrect when content length is less than scrollview length, and we end up snapping to a negative offset. This change adds clamping, so that we don't snap to negative position in horizontal scroll view. This clamping was already indirectly present on vertical scroll view. https://www.internalfb.com/code/fbsource/[b43cdf9b2fec71f5341ec8ff2d47e28a066f052e]/xplat/js/react-native-github/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollView.java?lines=609 ## Test Plan Above issue no longer reproes. Flinging while content is being added to horizontal FlatList still works correctly. Changelog: [Android][Fixed] - Fix Android HorizontalScrollView fling when content length less than ScrollView length Reviewed By: javache Differential Revision: D55108818 fbshipit-source-id: 7cf0065f9f92832cc2606d1c7534fc150407b9c9

RobinBobin · 2024-05-02T15:04:53Z

Was it fixed in both 0.73 and 0.74? What are the versions, please?
I still see this bug in 0.73.4.

NickGerleman · 2024-05-02T22:09:40Z

Was it fixed in both 0.73 and 0.74? What are the versions, please? I still see this bug in 0.73.4.

Available in 0.73.7+

Arjun059 · 2024-10-29T10:07:31Z

Quick Fix;
contentContainerStyle={{flexGrow: 1}}

shreyanshgoel9 added the Needs: Triage 🔍 label Feb 5, 2024

github-actions bot added Needs: Author Feedback Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. labels Feb 5, 2024

github-actions bot added Component: ScrollView Needs: Attention Issues where the author has responded to feedback. and removed Needs: Author Feedback labels Feb 5, 2024

cortinico added Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. and removed Needs: Triage 🔍 Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. labels Mar 5, 2024

cortinico assigned NickGerleman Mar 13, 2024

NickGerleman mentioned this issue Mar 20, 2024

Fix Android Horizontal ScrollView OverScroll Fling when Content View Less Length than Scrolling View #43563

Closed

facebook-github-bot closed this as completed in 7d180d7 Mar 21, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ScrollView weird behaviour when there are less items #42874

ScrollView weird behaviour when there are less items #42874

shreyanshgoel9 commented Feb 5, 2024 •

edited by cortinico

Loading

github-actions bot commented Feb 5, 2024

Myst1024 commented Feb 13, 2024 •

edited

Loading

RakaDoank commented Feb 16, 2024

kemplaw commented Feb 17, 2024

ulyavrubel commented Feb 27, 2024

Titozzz commented Mar 12, 2024

Titozzz commented Mar 12, 2024

Titozzz commented Mar 12, 2024

NickGerleman commented Mar 12, 2024

Titozzz commented Mar 12, 2024

Titozzz commented Mar 13, 2024

NickGerleman commented Mar 13, 2024 •

edited

Loading

Regin99 commented Mar 18, 2024 •

edited

Loading

Titozzz commented Mar 18, 2024

Titozzz commented Mar 18, 2024

Regin99 commented Mar 18, 2024

hjun555 commented Mar 21, 2024

Regin99 commented Mar 21, 2024

baez97 commented Apr 15, 2024

RobinBobin commented May 2, 2024

NickGerleman commented May 2, 2024

Arjun059 commented Oct 29, 2024 •

edited

Loading

ScrollView weird behaviour when there are less items #42874

ScrollView weird behaviour when there are less items #42874

Comments

shreyanshgoel9 commented Feb 5, 2024 • edited by cortinico Loading

Description

Steps to reproduce

React Native Version

Affected Platforms

Output of npx react-native info

Stacktrace or Logs

Reproducer

Screenshots and Videos

github-actions bot commented Feb 5, 2024

Myst1024 commented Feb 13, 2024 • edited Loading

RakaDoank commented Feb 16, 2024

kemplaw commented Feb 17, 2024

ulyavrubel commented Feb 27, 2024

Steps to Reproduce

Demo

Titozzz commented Mar 12, 2024

Titozzz commented Mar 12, 2024

Titozzz commented Mar 12, 2024

NickGerleman commented Mar 12, 2024

Titozzz commented Mar 12, 2024

Titozzz commented Mar 13, 2024

NickGerleman commented Mar 13, 2024 • edited Loading

Regin99 commented Mar 18, 2024 • edited Loading

Titozzz commented Mar 18, 2024

Titozzz commented Mar 18, 2024

Regin99 commented Mar 18, 2024

hjun555 commented Mar 21, 2024

Regin99 commented Mar 21, 2024

baez97 commented Apr 15, 2024

RobinBobin commented May 2, 2024

NickGerleman commented May 2, 2024

Arjun059 commented Oct 29, 2024 • edited Loading

shreyanshgoel9 commented Feb 5, 2024 •

edited by cortinico

Loading

Output of `npx react-native info`

Myst1024 commented Feb 13, 2024 •

edited

Loading

NickGerleman commented Mar 13, 2024 •

edited

Loading

Regin99 commented Mar 18, 2024 •

edited

Loading

Arjun059 commented Oct 29, 2024 •

edited

Loading