react-native-macos/packages/rn-tester/js
Justin Huntington bc1e602e0c Add ScrollView.automaticallyAdjustsScrollIndicatorInsets prop (on iOS) (#29809)
Summary:
iOS 13 added a new property to `UIScrollView`: `automaticallyAdjustsScrollIndicatorInsets`, which is `YES` by default.  The property changes the meaning of the `scrollIndicatorInsets` property.  When `YES`, any such insets are **in addition to** whatever insets would be applied by the device's safe area.  When `NO`, the iOS <13 behavior is restored, which is for such insets to not account for safe area.

In other words, this effects ScrollViews that underlay the device's safe area (i.e. under the notch).  When `YES`, the OS "automatically" insets the scroll indicators, when `NO` it does not.

There are two problems with the default `YES` setting:

1. It means applying `scrollIndicatorInsets` to a `ScrollView` has a different effect on iOS 13 versus iOS 12.
2. It limits developers' control over `scrollIndicatorInsets`.  Since negative insets are not supported, if the insets the OS chooses are too large for your app, you cannot fix it.

Further explanation & sample code is available in issue https://github.com/facebook/react-native/issues/28140 .

This change sets the default for this property to `NO`, making the behavior consistent across iOS versions, and allowing developers full control.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[iOS] [Changed] - ScrollView scrollIndicatorInsets to not automatically add safe area on iOS13+

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

Test Plan:
Updated the RNTester example to explain what to expect. Also removed the `pageScreen` modal example for now as mentioned in my Github comment.

{F628636466}

Here are screenshots of the demo app (from the original bug) before (with safe area applied to insets) & after (without safe area applied to insets):

![before](https://user-images.githubusercontent.com/428831/91644197-ea03a700-ea07-11ea-9489-be27820930eb.png)

![after](https://user-images.githubusercontent.com/428831/91644200-eff98800-ea07-11ea-8788-daf1e783639d.png)

Reviewed By: p-sun

Differential Revision: D28229603

Pulled By: lunaleaps

fbshipit-source-id: 2e774ae150b1dc41680b8b7886c7ceac8808136a
2021-07-07 20:23:36 -07:00
..
assets Fix a couple of places RNTester is using non-theme values (#31479) 2021-06-03 07:46:28 -07:00
components Styling updates and typo fixes 2021-07-07 13:58:28 -07:00
examples Add ScrollView.automaticallyAdjustsScrollIndicatorInsets prop (on iOS) (#29809) 2021-07-07 20:23:36 -07:00
types Styling updates and typo fixes 2021-07-07 13:58:28 -07:00
utils Add ScrollView.automaticallyAdjustsScrollIndicatorInsets prop (on iOS) (#29809) 2021-07-07 20:23:36 -07:00
RNTesterApp.android.js Remove "use strict" directive from ES Modules 2021-02-02 11:12:56 -08:00
RNTesterApp.ios.js Rename things in RNTester 2021-07-01 14:35:30 -07:00
RNTesterAppShared.js Rename header to titlebar 2021-07-07 13:58:28 -07:00