React-native: about ScrollView on ios 13 . scroll bar will be center sometimes for ios 13 and can move to phone left

[KarenQiao]

"react": "16.8.3",
"react-native": "0.59.9",
Platforms: iOS 13.0,

[react-native-bot]

Thanks for submitting your issue. Can you take another look at your description and make sure the issue template has been filled in its entirety?

👉 Click here if you want to take another look at the Bug Report issue template.

[KarenQiao]

System:
OS: macOS 10.14.5
CPU: (4) x64 Intel(R) Core(TM) m3-7Y32 CPU @ 1.10GHz
Memory: 43.45 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.13.0 - /usr/local/bin/node
Yarn: 1.16.0 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 13.0, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
Android SDK:
API Levels: 23, 26, 27, 28
Build Tools: 27.0.3, 28.0.3
System Images: android-26 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom
IDEs:
Android Studio: 3.4 AI-183.6156.11.34.5522156
Xcode: 11.0/11A420a - /usr/bin/xcodebuild
npmPackages:
react: 16.8.3 => 16.8.3
react-native: 0.59.9 => 0.59.9
npmGlobalPackages:
react-native-cli: 2.0.1

[fahmidme]

Same issue here

[amsdamsgram]

Hey, I have the same issue with FlatList component.

[cernadasjuan]

Same issue here

[losh11]

I'm actually experiencing this with react-native-webview from react-native-community... didn't know it affected more than just the webview.

[edo1493]

I can see the same on react-native 0.60.5 with SectionList.

[fahmidme]

I don't know if this happened with anyone else or is that related but incase anyone experienced it: I saw my custom contact list for a second and then it changed to something like this with the scroll bar in the middle and then the thing disappeared.

[mobitar]

This appears to have something to do with SafeAreaView's forceInset property, at least in my case. Removing that property causes this issue to not appear anymore.

Changing <SafeAreaView forceInset={{ bottom: 'never'}}> to <SafeAreaView forceInset={{ bottom: 'never', vertical: 'never'}}> also fixed the issue for me.

Possibly related: https://github.com/facebook/react-native/issues/16997

[sbycrosz]

We can reproduce this on 59.10 on a ScrollView with contentContainerStyle={[{ paddingBottom: 60 ]} prop.

We're not sure why but removing the prop, or navigating to another page and back fix the scroll indicator somehow.

[sbycrosz]

Updates:

• We found that adding scrollIndicatorInsets={{ right: 1 }} will force the scrollbar to be rendered correctly
• Additionally, adding scrollIndicatorInsets={{ right: 0 }} does nothing. So we guess there's buggy code in iOS 13 that overrides contentInsets default since we didn't use SafeAreaView in our app.

[esdrasevt]

This appears to have something to do with SafeAreaView's forceInset property, at least in my case. Removing that property causes this issue to not appear anymore.

Changing <SafeAreaView forceInset={{ bottom: 'never'}}> to <SafeAreaView forceInset={{ bottom: 'never', vertical: 'never'}}> also fixed the issue for me.

Possibly related: #16997

I'm not sure about the forceInset property, but it's definitely related to the SafeAreaView. I did some tests with different device sizes on the simulator, and the problem only occurs on devices that have the "notch" on the top of the screen, thus, devices that use the SafeAreaView.

[Elijen]

Same issue here. It's not possible to reproduce with 100% success, but so far we noticed this on iPhone Xs running iOS 13.0 and 13.1 on [email protected] & [email protected]

[marlti7]

Same issue here

[dingyongg]

Same issue here with ios 13.1.3 "react": "16.3.1", "react-native": "0.55.3",

[seedalri]

Hey, I have the same issue with FlatList component.

Same happened to me, but the issue was with ScrollView. Removed the as we used FlatList and the problem was gone.

[rachelyao]

Same issue here with ios 13, react 16.9.0, react-native 0.61.2

[chrisheninger]

I initially dug into this thinking it was something I did incorrectly– after stripping away SafeAreaView, using different versions of react-native, digging into react-navigation, and a million other little tests– I narrowed it down to the following:

• Only occurs on iOS 13
• Only occurs when a FlatList/ScrollView is scrolling into an "inset" area

Fiddling with SafeAreaView props and everything else didn't help– but @sbycrosz's workaround of adding scrollIndicatorInsets={{ right: 1 }} to the FlatList worked perfectly. (thanks sbycrosz! 🙇)

[stephenheron]

We just ran into this issue as well. On a physical iPhone Xs (iOS 13.2.3) the issue does not appear but on the iPhone 11 Pro (iOS 13.3) using the simulator it does appear. We are updating the physical iPhone at the moment to iOS 13.3 to see if we can replicate the issue.

@sbycrosz's workaround fixes it but a bit annoying having to update our ScrollViews.

[EdPutans]

I had the same issue both on an iPhone XR 13.1.3 and in the Simulator - iPhone 11 13.3. Occurred when a View component with style={{ flex: 1 }} was the highest component in the component tree.
Replacing it with ScrollView with contentContainerStyle={{ flex: 1 }} seems to have "fixed" it.

[asakalou-exadel]

I am experiencing the same issue on iOS13 iPhone Xs .How did you fix it for react-native-webview?
Thanks!

[damianrodrigues]

Had the same problem for iPhone XR in Simulator (13.3) using ScrollView. Adding scrollIndicatorInsets={{ right: 1 }} put the scrollbar in its place.

[hramos]

Closing after several months without followup from the author. Please make sure to fill in the issue template if you decide to file a new issue.

[shirohana]

Is it any related issue tracking this? I don't think that it is a out of date problem :/

---

Device: iPhone 11 Pro Max with iOS 13.3/Simulator
Version: [email protected], [email protected]

---

[ManAnRuck]

@hramos i also have still the same issue 🤨

[jasperkuperus]

Also still seeing this issue. Using RN 0.61.5. The scrollIndicatorInsets={{ right: 1 }} solution suggested by @sbycrosz also works for me.

@hramos Although the author has not used the issue template correctly, the issue is very clear to me and the others in here. Please re-open this. Here's a full issue template filled out for you:

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 can be found in this issue.

[safaiyeh]

Hi @jasperkuperus can you open a new issue with the template you just provided and reference this one.

We have a PR from @billxie1988 https://github.com/react-native-community/react-native-webview/pull/1077 in react-native-webview that might be more appropriate to add to ScrollView instead

[jasperkuperus]

Sure, done. I'm curious though. Why can't you guys not simply re-open an issue? Opening a new issue and keeping this one closed only introduces more clutter and possible confusion for people searching for these issues, I'd say. @hramos @safaiyeh

[Elijen]

@jasperkuperus Gotta hit the KPIs!

[Rajibshrestha59]

Is it any related issue tracking this? I don't think that it is a out of date problem :/

Device: iPhone 11 Pro Max with iOS 13.3/Simulator
Version: [email protected], [email protected]

Please add scrollIndicatorInsets={{ right: 0 }} inside ScrollView tag

[outaTiME]

Same here guys,
thanks @sbycrosz for save my day, to preserve the pixel proportions, it would be better to use top/ bottom instead of right, here my code:

<ScrollView
  scrollIndicatorInsets={{ top: 1, bottom: 1 }}
  contentInsetAdjustmentBehavior="always"
  {...props}
/>

before fix:

after @sbycrosz workaround:

@hramos any update with this issue?

[349989153]

Same issue

[chesovnik]

I have experienced the same issue with WebView on iOS 13.
The issue was resolved by replacing WebView's prop "style" with "containerStyle"
containerStyle={{ flex: 1 }}

[danilo900]

I have experienced the same issue with WebView on iOS 13.
The issue was resolved by replacing WebView's prop "style" with "containerStyle"
containerStyle={{ flex: 1 }}

I tried here with no results on webview =/

[moh3n9595]

Same issue

[danilo900]

Nothing here?

[jimishshah]

Containing the app in SafeAreaView fixed my problem.

[Daniel-Griffiths]

I can also confirm that adding scrollIndicatorInsets={{ right: 1 }} to the ScrollView fixed the issue for me :slightly_smiling_face:

[Donhv]

I have experienced the same issue with WebView on iOS 13.
The issue was resolved by replacing WebView's prop "style" with "containerStyle"
containerStyle={{ flex: 1 }}

I have same issue with react-native-webview and i tried your solution but it didn't work

[danilo900]

Yea. A bad issue on Webview and no solution till now.

[Donhv]

Yea. A bad issue on Webview and no solution till now.

it maybe work if you wrap webview in SafeAreaView. but my solution is hide vertical scroll :D

[dani-mp]

Hi, @hramos. Sorry, I'm about to be a bit critical here. I can't believe this issue has been closed like that. This is not a minor bug, and I would say it's super important for React Native itself, not just its scroll view: this is the kind of bug that a native iOS/Flutter dev posts on Twitter and the React Native community gets one week of public shaming. I hope you understand what I mean.

[RageBill]

I agree with @dani-mp.

This issue should not be closed without having a proper solution yet.

This is very frustrating to see a bug from almost one year ago to still haunt me till these days.

I tried the fixes given by @sbycrosz and @outaTiME , and neither of them worked in my case.

I am on RN 0.63.2 right now.

[safaiyeh]

Since this is coming up again, I'll reopen.

We had a PR open in webview to be ported to core: https://github.com/react-native-community/react-native-webview/pull/1077

Could someone open a PR and test if this fix would work for RN Core?

[renielDev]

Same issue I've been experiencing and adding scrollIndicatorInsets={{ right: 1 }} to the ScrollView fixed it.

[billxie1988]

Since this is coming up again, I'll reopen.

We had a PR open in webview to be ported to core: react-native-community/react-native-webview#1077

Could someone open a PR and test if this fix would work for RN Core?

updated

[kylerc]

Currently seeing this issue with WebViews on iOS14, looks like all the solutions suggested so far haven't resolved it for me.

[hengkx]

IOS 14 sectionlist same