From 27fe6f10796ecd47314279b1ae7cdfe29c16d1f0 Mon Sep 17 00:00:00 2001 From: Graham Mendick Date: Wed, 20 Jul 2022 13:51:28 -0700 Subject: [PATCH] Fix contentInsetAdjustmentBehavior set to automatic on ScrollView in the new architecture (#34217) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Summary: Fixes https://github.com/facebook/react-native/issues/34165 and [Large title fails](https://github.com/reactwg/react-native-new-architecture/discussions/43) on the new React Native architecture. There are problems with setting `contentInsetAdjustmentBehavior` to `automatic` on the `ScrollView` component in the new React Native architecture. The `automatic` setting matters to navigation libraries (like [my Navigation router](https://github.com/grahammendick/navigation)) because it stops the `ScrollView` from overlapping the `UINavigationBar`. The setting also powers important native features like large titles and search bars on iOS. The `automatic` setting works fine on the old architecture. It doesn’t work on the new architecture because React Native is recycling views. In https://github.com/facebook/react-native/issues/34165 and [Large title fails](https://github.com/reactwg/react-native-new-architecture/discussions/43) there are videos comparing the setting in the old and the new architecture. ## Changelog [iOS] [Fixed] - Fix `contentInsetAdjustmentBehavior` set to `automatic` on `ScrollView` in the new architecture Pull Request resolved: https://github.com/facebook/react-native/pull/34217 Test Plan: I checked the fix in both the repros in https://github.com/facebook/react-native/issues/34165 and [Large title fails](https://github.com/reactwg/react-native-new-architecture/discussions/43). Here is a video of the fix running with large titles in the new architecture. https://user-images.githubusercontent.com/1761227/179612188-162b896b-82c5-45de-bb5a-ba80f452fbee.mov Reviewed By: sammy-SC Differential Revision: D37952506 Pulled By: cipolleschi fbshipit-source-id: 6cff6c85aa33b579405fe34a9e36c8630f4c24bd --- .../ComponentViews/ScrollView/RCTScrollViewComponentView.mm | 3 +++ 1 file changed, 3 insertions(+) diff --git a/React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.mm b/React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.mm index e699640940d88e..1a5aa5b1f8b89a 100644 --- a/React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.mm +++ b/React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.mm @@ -401,6 +401,9 @@ - (void)prepareForRecycle _shouldUpdateContentInsetAdjustmentBehavior = YES; _state.reset(); _isUserTriggeredScrolling = NO; + CGRect oldFrame = self.frame; + self.frame = CGRectZero; + self.frame = oldFrame; [super prepareForRecycle]; }