Horizontal ScrollView Resets Scroll Position (Android, RTL)

[FuadBalashov]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases
  • This was reproduced locally with 55 & 56 and on expo (53)

Environment

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.3
      CPU: x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
      Memory: 43.51 MB / 16.00 GB
      Shell: 4.4.12 - /usr/local/bin/bash
    Binaries:
      Node: 9.3.0 - /usr/local/bin/node
      Yarn: 1.3.2 - /usr/local/bin/yarn
      npm: 5.6.0 - /usr/local/bin/npm
      Watchman: 4.7.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.2, macOS 10.13, tvOS 11.2, watchOS 4.2
      Android SDK:
        Build Tools: 23.0.1, 23.0.3, 25.0.0, 25.0.2, 25.0.3, 26.0.0, 26.0.1, 26.0.2, 27.0.3
        API Levels: 19, 21, 22, 23, 24, 25, 26, 27
    IDEs:
      Android Studio: 2.3 AI-162.4069837
      Xcode: 9.2/9C40b - /usr/bin/xcodebuild
    npmPackages:
      react: 16.3.1 => 16.3.1
      react-native: 0.56.0-rc.4 => 0.56.0-rc.4
    npmGlobalPackages:
      react-native-cli: 2.0.1

Description

Horizontal ScrollViews reset their scroll position when their content size changes on Android in RTL.

That description is a mouthful so here is a gif showing the problem:

Reproducible Demo

Here is a snack from expo made by @megantracy93 https://snack.expo.io/@meganltracy/scrollview-scrolltoend-rtl-issue

Steps to Reproduce:

• Create a UI with a horizontal scroll view
• Introduce an event handler that adds content to the scroll view (eg a button that adds views to the scroll view.
• Change the device locale to RTL (Arabic) OR force rtl on the ui:

 componentWillMount() {
    I18nManager.forceRTL(true);
  }

• Scroll the horizontal scroll view to its end (left)
• Trigger the event handler causing the contents of the scroll view to grow

Observed

• The horizontal scroll position is set to the start (right side) of the view.

Expected

• The horizontal scroll position should be maintained

Additional Info

From some debugging, we think ReactHorizontalScrollContainerView is likely the class which is responsible for positioning the horizontal ScrollView onLayout. That method gets called whenever the size of the contents change and resets the scroll position of the view. Instead, it should be setting it back to where it was before.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[rikur]

Same problem with a ScrollView that has inverted property set.

[Majid110]

Same problem for me!

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[FadiAboMsalam]

can anyone verify that the fix in 0.58.6 commit #23233 did the fix ?

[ferrannp]

Hello there 👋

I tried this on 0.59.x with the code you provided and it seems to be fixed. But please, if it's actually still an issue with 0.59 please comment below and we can reopen it 😊

[hemedani]

I have the same problem
in horizontal scroll view content sticks to the left side even when set contentContainerStyle={{ flexDirection: "row-reverse" }}

[matinzd]

#23233

No I did not fix that!