add rn-tester ScrollViewIndicatorInsets example to demonstrate the af…

…fect of iOS 13 automaticallyAdjustsScrollIndicatorInsets=NO

packages/rn-tester/js/examples/ScrollView/ScrollViewIndicatorInsetsExample.ios.js

@@ -0,0 +1,85 @@
+'use strict';
+
+const React = require('react');
+
+const {
+ Button,
+ DeviceInfo,
+ Modal,
+ ScrollView,
+ StyleSheet,
+ Switch,
+ Text,
+ View,
+} = require('react-native');
+
+class ScrollViewIndicatorInsetsExample extends React.Component<
+ {...},
+ {|
+ modalVisible: boolean
+ |},
+> {
+ state = {
+ modalVisible: false
+ };
+
+ _setModalVisible = visible => {
+ this.setState({modalVisible: visible});
+ };
+
+ render() {
+ return (
+ <View>
+ <Modal
+ visible={this.state.modalVisible}
+ onRequestClose={() => this._setModalVisible(false)}
+ animationType="slide"
+ supportedOrientations={['portrait', 'landscape']}>
+ <View style={styles.modal}>
+ <ScrollView
+ style={styles.scrollView}>
+ <View style={styles.scrollViewContent}>
+ <Button
+ onPress={() => this._setModalVisible(false)}
+ title="Close"
+ />
+ </View>
+ </ScrollView>
+ </View>
+ </Modal>
+ <Button
+ onPress={() => this._setModalVisible(true)}
+ title="Present Modal Screen with ScrollView"
+ />
+ </View>
+ );
+ }
+}
+
+const styles = StyleSheet.create({
+ modal: {
+ flex: 1,
+ },
+ scrollView: {
+ flex: 1,
+ height: 1000,
+ },
+ scrollViewContent: {
+ alignItems: 'center',
+ backgroundColor: '#ffaaaa',
+ height: 2000,
+ justifyContent: 'flex-start',
+ paddingTop: 200,
+ },
+});
+
+exports.title = 'ScrollViewIndicatorInsets';
+exports.category = 'iOS';
+exports.description =
+ 'ScrollView indicator insets should ignore the device\'s safe area on all iOS versions.';
+exports.examples = [
+ {
+ title: '<ScrollView> Indicator Insets Example',
+ render: (): React.Node => <ScrollViewIndicatorInsetsExample/>,
+ }
+];

packages/rn-tester/js/utils/RNTesterList.ios.js

@@ -118,6 +118,10 @@ const ComponentExamples: Array<RNTesterExample> = [
  module: require('../examples/ScrollView/ScrollViewAnimatedExample'),
  supportsTVOS: true,
  },
+ {
+ key: 'ScrollViewIndicatorInsetsExample',
+ module: require('../examples/ScrollView/ScrollViewIndicatorInsetsExample'),
+ },
  {
  key: 'SectionList-inverted',
  module: require('../examples/SectionList/SectionList-inverted'),