-
Notifications
You must be signed in to change notification settings - Fork 24.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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 #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: #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
- Loading branch information
1 parent
4ad4426
commit bc1e602
Showing
11 changed files
with
158 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
112 changes: 112 additions & 0 deletions
112
packages/rn-tester/js/examples/ScrollView/ScrollViewIndicatorInsetsExample.ios.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,112 @@ | ||
| /** | ||
| * 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. | ||
| */ | ||
|
|
||
| 'use strict'; | ||
|
|
||
| import * as React from 'react'; | ||
|
|
||
| import { | ||
| Button, | ||
| Modal, | ||
| ScrollView, | ||
| StyleSheet, | ||
| Switch, | ||
| Text, | ||
| View, | ||
| useWindowDimensions, | ||
| } from 'react-native'; | ||
|
|
||
| export function ScrollViewIndicatorInsetsExample() { | ||
| const [automaticallyAdjustsScrollIndicatorInsets, setAutomaticallyAdjustsScrollIndicatorInsets] = React.useState(true); | ||
| const [modalVisible, setModalVisible] = React.useState(false); | ||
| const { height, width } = useWindowDimensions(); | ||
|
|
||
| return ( | ||
| <View> | ||
| <Modal | ||
| animationType="slide" | ||
| visible={modalVisible} | ||
| onRequestClose={() => setModalVisible(false)} | ||
| presentationStyle="fullScreen" | ||
| statusBarTranslucent={false} | ||
| supportedOrientations={['portrait', 'landscape']}> | ||
| <View style={styles.modal}> | ||
| <ScrollView | ||
| contentContainerStyle={[ | ||
| styles.scrollViewContent, | ||
| { | ||
| height: (height * 1.2), | ||
| width: (width * 1.2), | ||
| }, | ||
| ]} | ||
| automaticallyAdjustsScrollIndicatorInsets={automaticallyAdjustsScrollIndicatorInsets} | ||
| style={styles.scrollView}> | ||
| <View style={styles.description}> | ||
| <Text>When <Text style={styles.code}>automaticallyAdjustsScrollIndicatorInsets</Text> is true, the scrollbar is inset to the status bar. When false, it reaches the edge of the modal.</Text> | ||
| <Text>Check out the UIScrollView docs to learn more about <Text style={styles.code}>automaticallyAdjustsScrollIndicatorInsets</Text></Text> | ||
| </View> | ||
| <View style={styles.toggle}> | ||
| <Text><Text style={styles.code}>automaticallyAdjustsScrollIndicatorInsets</Text> is {automaticallyAdjustsScrollIndicatorInsets + ''}</Text> | ||
| <Switch | ||
| onValueChange={v => setAutomaticallyAdjustsScrollIndicatorInsets(v)} | ||
| value={automaticallyAdjustsScrollIndicatorInsets} | ||
| style={styles.switch}/> | ||
| </View> | ||
| <Button | ||
| onPress={() => setModalVisible(false)} | ||
| title="Close"/> | ||
| </ScrollView> | ||
| </View> | ||
| </Modal> | ||
| <Text /> | ||
| <Button | ||
| onPress={() => setModalVisible(true)} | ||
| title="Present Fullscreen Modal with ScrollView"/> | ||
| </View> | ||
| ); | ||
| } | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| modal: { | ||
| flex: 1, | ||
| }, | ||
| scrollView: { | ||
| flex: 1, | ||
| height: 1000, | ||
| }, | ||
| scrollViewContent: { | ||
| alignItems: 'center', | ||
| backgroundColor: '#ffaaaa', | ||
| justifyContent: 'flex-start', | ||
| paddingTop: 200, | ||
| }, | ||
| switch: { | ||
| marginBottom: 40, | ||
| }, | ||
| toggle:{ | ||
| margin: 20, | ||
| alignItems: 'center', | ||
| }, | ||
| description: { | ||
| marginHorizontal: 80, | ||
| }, | ||
| code: { | ||
| fontSize: 10, | ||
| fontFamily: 'Courier', | ||
| }, | ||
| }); | ||
|
|
||
| exports.title = 'ScrollViewIndicatorInsets'; | ||
| exports.category = 'iOS'; | ||
| exports.description = | ||
| 'ScrollView automaticallyAdjustsScrollIndicatorInsets adjusts scroll indicator insets using OS-defined logic on iOS 13+.'; | ||
| exports.examples = [ | ||
| { | ||
| title: '<ScrollView> automaticallyAdjustsScrollIndicatorInsets Example', | ||
| render: (): React.Node => <ScrollViewIndicatorInsetsExample/>, | ||
| }, | ||
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters