From 984dbe83d8de76fd94c191173dc23897d31edcd8 Mon Sep 17 00:00:00 2001 From: Sandeep Kumar Date: Wed, 25 Feb 2026 13:05:13 -0800 Subject: [PATCH] Reset contentInset in scroll view prepareForRecycle (#55733) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/55733 React Native's Fabric view recycling pools UIScrollView instances by component type, meaning vertical and horizontal scroll views share the same pool. When a scroll view is recycled via prepareForRecycle, contentInset is not reset. This causes stale bottom insets set at runtime (e.g., by the floating tab bar's content inset adjustment) to leak into recycled scroll views. This manifests as horizontal FlatLists allowing vertical/diagonal scrolling because they inherit a non-zero bottom contentInset from a previously vertical scroll view. Fix: Reset contentInset to UIEdgeInsetsZero in prepareForRecycle, consistent with how contentOffset, zoomScale, and contentInsetAdjustmentBehavior are already reset. Changelog: Internal More Context: https://fb.workplace.com/groups/rn.support/posts/30810820418539846/?comment_id=30811286738493214&reply_comment_id=30821628410792380 Reviewed By: cipolleschi Differential Revision: D93342311 fbshipit-source-id: 84c4597596e36a535f9a10840b1ddf280f6402df --- .../ScrollView/RCTScrollViewComponentView.mm | 2 + .../components/scrollview/ScrollViewState.h | 2 +- .../scrollview/tests/ScrollViewTest.cpp | 86 ++++++++++++++++++- 3 files changed, 86 insertions(+), 4 deletions(-) diff --git a/packages/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.mm b/packages/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.mm index 03d3b23c64c..b1af0887b35 100644 --- a/packages/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.mm +++ b/packages/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.mm @@ -684,6 +684,8 @@ static inline UIViewAnimationOptions animationOptionsWithCurve(UIViewAnimationCu _scrollView.contentOffset = RCTCGPointFromPoint(props.contentOffset); // Reset zoom scale to default _scrollView.zoomScale = 1.0; + // Reset contentInset to prevent stale insets leaking into recycled scroll views. + _scrollView.contentInset = UIEdgeInsetsZero; // We set the default behavior to "never" so that iOS // doesn't do weird things to UIScrollView insets automatically // and keeps it as an opt-in behavior. diff --git a/packages/react-native/ReactCommon/react/renderer/components/scrollview/ScrollViewState.h b/packages/react-native/ReactCommon/react/renderer/components/scrollview/ScrollViewState.h index 25a02f60fdb..72d706a1abd 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/scrollview/ScrollViewState.h +++ b/packages/react-native/ReactCommon/react/renderer/components/scrollview/ScrollViewState.h @@ -28,7 +28,7 @@ class ScrollViewState final { Point contentOffset; Rect contentBoundingRect; - int scrollAwayPaddingTop; + int scrollAwayPaddingTop{0}; /* * View Culling has to be disabled when accessibility features are used. diff --git a/packages/react-native/ReactCommon/react/renderer/components/scrollview/tests/ScrollViewTest.cpp b/packages/react-native/ReactCommon/react/renderer/components/scrollview/tests/ScrollViewTest.cpp index 1b64ed7ac06..8912b5373bc 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/scrollview/tests/ScrollViewTest.cpp +++ b/packages/react-native/ReactCommon/react/renderer/components/scrollview/tests/ScrollViewTest.cpp @@ -5,10 +5,90 @@ * LICENSE file in the root directory of this source tree. */ -#include +#include #include -TEST(ScrollViewTest, testSomething) { - // TODO +namespace facebook::react { + +TEST(ScrollViewStateTest, defaultConstructor) { + ScrollViewState state; + + EXPECT_EQ(state.contentOffset.x, 0); + EXPECT_EQ(state.contentOffset.y, 0); + EXPECT_EQ(state.scrollAwayPaddingTop, 0); + EXPECT_FALSE(state.disableViewCulling); } + +TEST(ScrollViewStateTest, parameterizedConstructor) { + Point contentOffset{.x = 10.0f, .y = 20.0f}; + Rect contentBoundingRect{ + .origin = {.x = 0.0f, .y = 0.0f}, + .size = {.width = 100.0f, .height = 200.0f}}; + int scrollAwayPaddingTop = 5; + + ScrollViewState state( + contentOffset, contentBoundingRect, scrollAwayPaddingTop); + + EXPECT_EQ(state.contentOffset.x, 10.0f); + EXPECT_EQ(state.contentOffset.y, 20.0f); + EXPECT_EQ(state.scrollAwayPaddingTop, 5); + EXPECT_FALSE(state.disableViewCulling); +} + +TEST(ScrollViewStateTest, getContentSize) { + Point contentOffset{.x = 0.0f, .y = 0.0f}; + Rect contentBoundingRect{ + .origin = {.x = 0.0f, .y = 0.0f}, + .size = {.width = 150.0f, .height = 300.0f}}; + int scrollAwayPaddingTop = 0; + + ScrollViewState state( + contentOffset, contentBoundingRect, scrollAwayPaddingTop); + + Size contentSize = state.getContentSize(); + EXPECT_EQ(contentSize.width, 150.0f); + EXPECT_EQ(contentSize.height, 300.0f); +} + +TEST(ScrollViewStateTest, disableViewCulling) { + ScrollViewState state; + + // Default should be false + EXPECT_FALSE(state.disableViewCulling); + + // Can be set to true + state.disableViewCulling = true; + EXPECT_TRUE(state.disableViewCulling); +} + +TEST(ScrollViewStateTest, contentOffsetWithNegativeValues) { + Point contentOffset{.x = -10.0f, .y = -20.0f}; + Rect contentBoundingRect{ + .origin = {.x = 0.0f, .y = 0.0f}, + .size = {.width = 100.0f, .height = 200.0f}}; + int scrollAwayPaddingTop = 0; + + ScrollViewState state( + contentOffset, contentBoundingRect, scrollAwayPaddingTop); + + EXPECT_EQ(state.contentOffset.x, -10.0f); + EXPECT_EQ(state.contentOffset.y, -20.0f); +} + +TEST(ScrollViewStateTest, zeroSizeContentBoundingRect) { + Point contentOffset{.x = 0.0f, .y = 0.0f}; + Rect contentBoundingRect{ + .origin = {.x = 0.0f, .y = 0.0f}, + .size = {.width = 0.0f, .height = 0.0f}}; + int scrollAwayPaddingTop = 0; + + ScrollViewState state( + contentOffset, contentBoundingRect, scrollAwayPaddingTop); + + Size contentSize = state.getContentSize(); + EXPECT_EQ(contentSize.width, 0.0f); + EXPECT_EQ(contentSize.height, 0.0f); +} + +} // namespace facebook::react