diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewManager.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewManager.java index 46e0ccf36c6e9d..34e21553d39343 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewManager.java +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewManager.java @@ -379,4 +379,22 @@ public void setPointerEvents(ReactScrollView view, @Nullable String pointerEvent public void setScrollEventThrottle(ReactScrollView view, int scrollEventThrottle) { view.setScrollEventThrottle(scrollEventThrottle); } + + @ReactProp(name = "inverted") + public void setInverted(ReactScrollView view, boolean inverted) { + // Usually when inverting the scroll view we are using scaleY: -1 on the list + // and on the parent container. HOWEVER, starting from android API 33 there is + // a bug that can cause an ANR due to that. Thus we are using different transform + // commands to circumvent the ANR. This however causes the vertical scrollbar to + // be on the wrong side. Thus we are moving it to the other side, when the list + // is inverted. + // See also: + // - https://github.com/facebook/react-native/issues/35350 + // - https://issuetracker.google.com/issues/287304310 + if (inverted) { + view.setVerticalScrollbarPosition(View.SCROLLBAR_POSITION_LEFT); + } else { + view.setVerticalScrollbarPosition(View.SCROLLBAR_POSITION_DEFAULT); + } + } } diff --git a/packages/react-native/ReactCommon/react/renderer/components/scrollview/ScrollViewProps.cpp b/packages/react-native/ReactCommon/react/renderer/components/scrollview/ScrollViewProps.cpp index e60623e4900e02..652f9e36b77e5f 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/scrollview/ScrollViewProps.cpp +++ b/packages/react-native/ReactCommon/react/renderer/components/scrollview/ScrollViewProps.cpp @@ -319,6 +319,15 @@ ScrollViewProps::ScrollViewProps( rawProps, "scrollToOverflowEnabled", sourceProps.scrollToOverflowEnabled, + {})), + inverted( + CoreFeatures::enablePropIteratorSetter + ? sourceProps.inverted + : convertRawProp( + context, + rawProps, + "inverted", + sourceProps.inverted, {})) {} void ScrollViewProps::setProp( @@ -368,6 +377,7 @@ void ScrollViewProps::setProp( RAW_SET_PROP_SWITCH_CASE_BASIC(snapToEnd); RAW_SET_PROP_SWITCH_CASE_BASIC(contentInsetAdjustmentBehavior); RAW_SET_PROP_SWITCH_CASE_BASIC(scrollToOverflowEnabled); + RAW_SET_PROP_SWITCH_CASE_BASIC(inverted); } } @@ -492,7 +502,9 @@ SharedDebugStringConvertibleList ScrollViewProps::getDebugProps() const { debugStringConvertibleItem( "snapToStart", snapToStart, defaultScrollViewProps.snapToStart), debugStringConvertibleItem( - "snapToEnd", snapToEnd, defaultScrollViewProps.snapToEnd)}; + "snapToEnd", snapToEnd, defaultScrollViewProps.snapToEnd), + debugStringConvertibleItem( + "inverted", inverted, defaultScrollViewProps.inverted)}; } #endif diff --git a/packages/react-native/ReactCommon/react/renderer/components/scrollview/ScrollViewProps.h b/packages/react-native/ReactCommon/react/renderer/components/scrollview/ScrollViewProps.h index dea44da3af5d2b..a734c14d5687ed 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/scrollview/ScrollViewProps.h +++ b/packages/react-native/ReactCommon/react/renderer/components/scrollview/ScrollViewProps.h @@ -68,6 +68,7 @@ class ScrollViewProps final : public ViewProps { ContentInsetAdjustmentBehavior contentInsetAdjustmentBehavior{ ContentInsetAdjustmentBehavior::Never}; bool scrollToOverflowEnabled{false}; + bool inverted{false}; #pragma mark - DebugStringConvertible diff --git a/packages/virtualized-lists/Lists/VirtualizedList.js b/packages/virtualized-lists/Lists/VirtualizedList.js index 0c078e085957c3..30f456d52b4df5 100644 --- a/packages/virtualized-lists/Lists/VirtualizedList.js +++ b/packages/virtualized-lists/Lists/VirtualizedList.js @@ -14,6 +14,7 @@ import type { LayoutEvent, ScrollEvent, } from 'react-native/Libraries/Types/CoreEventTypes'; +import Platform from 'react-native/Libraries/Utilities/Platform'; import type {ViewToken} from './ViewabilityHelper'; import type { Item, @@ -1969,7 +1970,15 @@ class VirtualizedList extends StateSafePureComponent { const styles = StyleSheet.create({ verticallyInverted: { - transform: [{scaleY: -1}], + transform: + // Android 13 Bug Workaround: + // On Android, we need to invert both axes to mitigate a native bug + // that could lead to ANRs. + // Simply using scaleY: -1 leads to the application of scaleY and + // rotationX natively, resulting in the ANR. + // For more information, refer to the following Android tracking issue: + // https://issuetracker.google.com/issues/287304310 + Platform.OS === 'android' ? [{scale: -1}] : [{scaleY: -1}], }, horizontallyInverted: { transform: [{scaleX: -1}],