React-native: ScrollView.scrollIndicatorInsets behavior changed in iOS 13

[justinwh]

When running on iOS 13, ScrollViews set their scrollIndicatorInsets automatically to be inside the device's "safe area" (i.e. inside the "notch"). On older iOS versions this did not happen—users needed to take steps to accommodate the notch (either setting the scrollIndicatorInsets directly or nesting ScrollView inside SafeAreaView).

The difference is clear using a basic test app with a fullscreen ScrollView. On an iOS 13 device (this is easiest to see on a phone with a notch, e.g. an iPhone X), when you scroll the view and reveal the indicators, they start/stop inside the notch.

On an iOS 12 device, the indicators start/stop at the edge of the view.

(Both of these screenshots are taken just as the scrolling reaches the top of the view.)

Here's the App.js I used in a brand new, latest version (0.61.5) RN project to generate the above screenshots:

import React from 'react';
import * as RN from 'react-native';

const a20 = new Array(20).fill({}, 0, 20);

export default function App (props) {
  return (
    <RN.ScrollView automaticallyAdjustContentInsets={false}
      contentInsetAdjustmentBehavior='never'
      style={{flex: 1}}>
      {a20.map((o, i) => (
        <RN.View key={i}
          style={{backgroundColor: ((i % 2 === 0) ? 'red' : 'blue'), height: 75}}/>
      ))}
    </RN.ScrollView>
  );
}

You cannot set negative scrollIndicatorInsets to replicate the iOS 12 behavior on iOS 13. And any scrollIndicatorInsets you do assign are added to the ones automatically chosen by the OS, so if you set them directly to a value that worked correctly on iOS 12, you'll get broken-looking results on iOS 13 (extra large insets).

This behavior is not affected by the ScrollView.automaticallyAdjustContentInsets or ScrollView.contentInsetAdjustmentBehavior properties (as far as I can tell).

React Native version:

System:
    OS: macOS 10.15.3
    CPU: (4) x64 Intel(R) Core(TM) i5-4258U CPU @ 2.40GHz
    Memory: 194.42 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.18.1 - /usr/local/bin/node
    Yarn: 1.19.1 - /usr/local/bin/yarn
    npm: 6.12.1 - /usr/local/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
    Android SDK:
      API Levels: 28, 29
      Build Tools: 28.0.3, 29.0.2
      System Images: android-29 | Google APIs Intel x86 Atom
      Android NDK: 20.0.5594570
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5977832
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.5 => 0.61.5

[justinwh]

I've found it's possible to set the iOS 13 behavior to match iOS <=12 behavior by setting automaticallyAdjustsScrollIndicatorInsets to false in ScrollView's init code. This is a new property in iOS 13, and it's true by default.

Apple Documentation:
https://developer.apple.com/documentation/uikit/uiscrollview/3198043-automaticallyadjustsscrollindica?language=objc

[react-native-bot]

Thanks for submitting your issue. Please run react-native info in your terminal and copy the results into your issue description after "React Native version:". If you have already done this, please disregard this message.

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

[justinwh]

It's possible this is related to these other iOS 13 scroll indicator inset-related issues, though those are referring to horizontal insets, not the vertical (notch) insets. The fix might be the same.

https://github.com/facebook/react-native/issues/26610

https://github.com/facebook/react-native/issues/28085

[justinwh]

My exploratory hack/fix was to add this snippet to RCTScrollView.m inside initWithEventDispatcher():

if (@available(iOS 13.0, *)) {
    _scrollView.automaticallyAdjustsScrollIndicatorInsets = NO;
}

[outaTiME]

Hi guys,
in into the same issue with ios 13 im using the following configuration (with FlatList too):

<NativeScrollView
  {...extra}
  {...(safeArea && {
    contentInset: { bottom: Layout.IPHONE_X_PADDING },
  })}
  automaticallyAdjustContentInsets={false}
  contentInsetAdjustmentBehavior="never"
>
  {children}
</NativeScrollView>

@justinwh this is a core issue, do yo found something else about that?

[justinwh]

I've confirmed this issue still exists in RN 0.62.0, and my proposed fix still works.

Can someone from the project weigh in on this? Does disabling the automatic adjustment sound like an appropriate fix? Should I submit a PR?

[adbl]

Also seeing this, not able to get the scrollIndicators look correct on a plain react-navigation (latest to date) StackView with floating/transparent header, even if I figure out some workaround in my screen, it will probably have to be separate for iOS 13, seems like a pretty big issue.

@justinwh I will try out your suggestion. Since you haven't gotten any attention from maintainers, maybe just submit a PR and hope to get attention?

[adbl]

@justinwh maybe add the react-native info to issue description which the bot suggested in order for the issue to get some human treatment?

[adbl]

Fix proposed by @justinwh seems to work well. Here is a branch that can be used as a PR if you want: https://github.com/adbl/react-native/tree/v0.62.2-fix-scroll-indicators

[stale[bot]]

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.

[justinwh]

I've confirmed (again) that this issue still exists in RN 0.63.2, and my proposed fix still works.

I've been shipping my own app with a patched RN since February to "fix" this issue. My patch is pretty dumb—it just makes iOS 13 devices match the pre-iOS 13 behavior. That approach eliminates the need for OS version-specific workarounds, which is "good enough" for a one-off hack.

I don't think it's necessarily the best global fix for RN, which is why I didn't submit it as a PR. It feels to me like this requires some consideration.

[justinwh]

Okay, I've submitted a PR for this

https://github.com/facebook/react-native/pull/29809