Vertical scrollbar of FlatList not correctly vertically aligned

[jasperkuperus]

As reported in #26610 but now following the issue template as discussed with @safaiyeh and @hramos

Description:

The vertical scrollbar of a FlatList does not always render correctly to the right side of the screen. See all the screenshots in this issue.

For me. This happened even when I slimmed down my code into a <FlatList /> with only <Text />. It only happened though when my list was longer than the height of the screen. The scrollbar then suddenly moves to the left. The longer the list, the further the scrollbar moves to the left.

Also another condition for me. Upon a fresh first render of my <FlatList />, this behaviour appeared. When navigating away, effectively unmounting this component, and back, the scrollbar is suddenly OK. Close and open the app: The scrollbar is at the wrong position again.

React Native version:

info Fetching system and libraries information...
System:
    OS: macOS 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 2.26 GB / 32.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.12.0 - /var/folders/_9/nh0gc1bs08qd9p3kqshr3f0h0000gn/T/yarn--1581784553520-0.7678366513125479/node
    Yarn: 1.19.1 - /var/folders/_9/nh0gc1bs08qd9p3kqshr3f0h0000gn/T/yarn--1581784553520-0.7678366513125479/yarn
    npm: 6.11.3 - ~/.nvm/versions/node/v12.12.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5791312
    Xcode: 11.2.1/11B500 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.5 => 0.61.5

Steps To Reproduce

1. Create a <FlatList /> with <Text /> items in it
2. Make sure the list is longer than the screen
3. Check the first render of this list, scroll

Expected Results

Scrollbar should stick to the right of the screen.

Snack, code example, screenshot, or link to a repository:

Screenshots and more information can be found here: #26610

[safaiyeh]

react-native-webview/react-native-webview#1077

[chrisheninger]

Copying these additional details from the other issue in hopes it helps others:

• This bug only occurs on iOS 13
• This bug only occurs when a FlatList or ScrollView is scrolling into an "inset" area

The current workaround with the most 👍 is adding the prop scrollIndicatorInsets={{ right: 1 }} to your FlatList or ScrollView. (thanks @sbycrosz)

[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 a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.