mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Justin Huntington
bc1e602e0c
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):   Reviewed By: p-sun Differential Revision: D28229603 Pulled By: lunaleaps fbshipit-source-id: 2e774ae150b1dc41680b8b7886c7ceac8808136a
84 lines
2.2 KiB
JavaScript
84 lines
2.2 KiB
JavaScript
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow strict-local
|
|
* @format
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
import type {PartialViewConfig} from '../../Renderer/shims/ReactNativeTypes';
|
|
|
|
const ScrollViewViewConfig = {
|
|
uiViewClassName: 'RCTScrollView',
|
|
bubblingEventTypes: {},
|
|
directEventTypes: {
|
|
topScrollToTop: {
|
|
registrationName: 'onScrollToTop',
|
|
},
|
|
},
|
|
validAttributes: {
|
|
alwaysBounceHorizontal: true,
|
|
alwaysBounceVertical: true,
|
|
automaticallyAdjustContentInsets: true,
|
|
automaticallyAdjustsScrollIndicatorInsets: true,
|
|
bounces: true,
|
|
bouncesZoom: true,
|
|
canCancelContentTouches: true,
|
|
centerContent: true,
|
|
contentInset: {
|
|
diff: require('../../Utilities/differ/pointsDiffer'),
|
|
},
|
|
contentOffset: {
|
|
diff: require('../../Utilities/differ/pointsDiffer'),
|
|
},
|
|
contentInsetAdjustmentBehavior: true,
|
|
decelerationRate: true,
|
|
directionalLockEnabled: true,
|
|
disableIntervalMomentum: true,
|
|
endFillColor: {
|
|
process: require('../../StyleSheet/processColor'),
|
|
},
|
|
fadingEdgeLength: true,
|
|
indicatorStyle: true,
|
|
inverted: true,
|
|
keyboardDismissMode: true,
|
|
maintainVisibleContentPosition: true,
|
|
maximumZoomScale: true,
|
|
minimumZoomScale: true,
|
|
nestedScrollEnabled: true,
|
|
onMomentumScrollBegin: true,
|
|
onMomentumScrollEnd: true,
|
|
onScroll: true,
|
|
onScrollBeginDrag: true,
|
|
onScrollEndDrag: true,
|
|
onScrollToTop: true,
|
|
overScrollMode: true,
|
|
pagingEnabled: true,
|
|
persistentScrollbar: true,
|
|
pinchGestureEnabled: true,
|
|
scrollEnabled: true,
|
|
scrollEventThrottle: true,
|
|
scrollIndicatorInsets: {
|
|
diff: require('../../Utilities/differ/pointsDiffer'),
|
|
},
|
|
scrollPerfTag: true,
|
|
scrollToOverflowEnabled: true,
|
|
scrollsToTop: true,
|
|
sendMomentumEvents: true,
|
|
showsHorizontalScrollIndicator: true,
|
|
showsVerticalScrollIndicator: true,
|
|
snapToAlignment: true,
|
|
snapToEnd: true,
|
|
snapToInterval: true,
|
|
snapToOffsets: true,
|
|
snapToStart: true,
|
|
zoomScale: true,
|
|
},
|
|
};
|
|
|
|
module.exports = (ScrollViewViewConfig: PartialViewConfig);
|