Files
react-native/packages/react-native/Libraries/Components/ScrollView/ScrollViewNativeComponent.js
T
Hanno J. Gödecke 22c9739042 Add workaround for android API 33 ANR when inverting ScrollView (#38071)
Summary:
This PR is a result of this PR, which got merged but then reverted:

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

We are trying to implement a workaround for https://github.com/facebook/react-native/issues/35350, so react-native users on android API 33+ can use `<FlatList inverted={true} />` without running into ANRs.

This is the native part, where we add a new internal prop named `isInvertedVirtualizedList`, which can in a follow up change be used to achieve the final fix as proposed in https://github.com/facebook/react-native/pull/37913

However as NickGerleman pointed out, its important that we first ship the native change.

## Changelog:

<!-- Help reviewers and the release process by writing your own changelog entry.

Pick one each for the category and type tags:

[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->

[ANDROID] [ADDED] - Native part of fixing ANR when having an inverted FlatList on android API 33+

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

Test Plan:
- Check the RN tester app and see that scrollview is still working as expected
- Add the `isInvertedVirtualizedList` prop as test to a scrollview and see how the scrollbar will change position.

Reviewed By: rozele

Differential Revision: D47062200

Pulled By: NickGerleman

fbshipit-source-id: d20eebeec757d9aaeced8561f53556bbb4a492e4
2023-08-07 10:43:18 -07:00

176 lines
5.6 KiB
JavaScript

/**
* Copyright (c) Meta Platforms, Inc. and 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
*/
import type {
HostComponent,
PartialViewConfig,
} from '../../Renderer/shims/ReactNativeTypes';
import type {ScrollViewNativeProps as Props} from './ScrollViewNativeComponentType';
import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
import {ConditionallyIgnoredEventHandlers} from '../../NativeComponent/ViewConfigIgnore';
import Platform from '../../Utilities/Platform';
export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
Platform.OS === 'android'
? {
uiViewClassName: 'RCTScrollView',
bubblingEventTypes: {},
directEventTypes: {
topMomentumScrollBegin: {
registrationName: 'onMomentumScrollBegin',
},
topMomentumScrollEnd: {
registrationName: 'onMomentumScrollEnd',
},
topScroll: {
registrationName: 'onScroll',
},
topScrollBeginDrag: {
registrationName: 'onScrollBeginDrag',
},
topScrollEndDrag: {
registrationName: 'onScrollEndDrag',
},
},
validAttributes: {
contentOffset: {
diff: require('../../Utilities/differ/pointsDiffer'),
},
decelerationRate: true,
disableIntervalMomentum: true,
pagingEnabled: true,
scrollEnabled: true,
showsVerticalScrollIndicator: true,
snapToAlignment: true,
snapToEnd: true,
snapToInterval: true,
snapToOffsets: true,
snapToStart: true,
borderBottomLeftRadius: true,
borderBottomRightRadius: true,
sendMomentumEvents: true,
borderRadius: true,
nestedScrollEnabled: true,
borderStyle: true,
borderRightColor: {
process: require('../../StyleSheet/processColor').default,
},
borderColor: {
process: require('../../StyleSheet/processColor').default,
},
borderBottomColor: {
process: require('../../StyleSheet/processColor').default,
},
persistentScrollbar: true,
endFillColor: {
process: require('../../StyleSheet/processColor').default,
},
fadingEdgeLength: true,
overScrollMode: true,
borderTopLeftRadius: true,
scrollPerfTag: true,
borderTopColor: {
process: require('../../StyleSheet/processColor').default,
},
removeClippedSubviews: true,
borderTopRightRadius: true,
borderLeftColor: {
process: require('../../StyleSheet/processColor').default,
},
pointerEvents: true,
isInvertedVirtualizedList: true,
},
}
: {
uiViewClassName: 'RCTScrollView',
bubblingEventTypes: {},
directEventTypes: {
topMomentumScrollBegin: {
registrationName: 'onMomentumScrollBegin',
},
topMomentumScrollEnd: {
registrationName: 'onMomentumScrollEnd',
},
topScroll: {
registrationName: 'onScroll',
},
topScrollBeginDrag: {
registrationName: 'onScrollBeginDrag',
},
topScrollEndDrag: {
registrationName: 'onScrollEndDrag',
},
topScrollToTop: {
registrationName: 'onScrollToTop',
},
},
validAttributes: {
alwaysBounceHorizontal: true,
alwaysBounceVertical: true,
automaticallyAdjustContentInsets: true,
automaticallyAdjustKeyboardInsets: true,
automaticallyAdjustsScrollIndicatorInsets: true,
bounces: true,
bouncesZoom: true,
canCancelContentTouches: true,
centerContent: true,
contentInset: {
diff: require('../../Utilities/differ/insetsDiffer'),
},
contentOffset: {
diff: require('../../Utilities/differ/pointsDiffer'),
},
contentInsetAdjustmentBehavior: true,
decelerationRate: true,
directionalLockEnabled: true,
disableIntervalMomentum: true,
indicatorStyle: true,
inverted: true,
keyboardDismissMode: true,
maintainVisibleContentPosition: true,
maximumZoomScale: true,
minimumZoomScale: true,
pagingEnabled: true,
pinchGestureEnabled: true,
scrollEnabled: true,
scrollEventThrottle: true,
scrollIndicatorInsets: {
diff: require('../../Utilities/differ/insetsDiffer'),
},
scrollToOverflowEnabled: true,
scrollsToTop: true,
showsHorizontalScrollIndicator: true,
showsVerticalScrollIndicator: true,
snapToAlignment: true,
snapToEnd: true,
snapToInterval: true,
snapToOffsets: true,
snapToStart: true,
zoomScale: true,
...ConditionallyIgnoredEventHandlers({
onScrollBeginDrag: true,
onMomentumScrollEnd: true,
onScrollEndDrag: true,
onMomentumScrollBegin: true,
onScrollToTop: true,
onScroll: true,
}),
},
};
const ScrollViewNativeComponent: HostComponent<Props> =
NativeComponentRegistry.get<Props>(
'RCTScrollView',
() => __INTERNAL_VIEW_CONFIG,
);
export default ScrollViewNativeComponent;