ScrollView doesn't reset inset when contentInsetAdjustmentBehavior is automatic

[grahammendick]

Description

This is similar to but NOT the same as the bug I raised in the Working Group. The difference here is that the ScrollView has scrollable content.

I've started updating my navigation library to work with the new architecture and I've run into a problem on iOS. The ScrollView doesn't work when contentInsetAdjustmentBehavior is set to automatic. You can see what I mean in the first video below. The first time you navigate to the second screen then the ScrollView behaves correctly. But the second time you navigate you can see that the ScrollView isn't adjusting for the navigation bar. The second video is the same example but with the old architecture. You can see that the ScrollView behaves correctly.

All these bugs are because the new architecture is recycling the ScrollView. I turned off the recycling of the ScrollView and the bug went away. Would you be open to a PR that turns off view recycling for ScrollViews with adjustment behaviour set to automatic?

// In _enqueueComponentViewWithComponentHandle of RCTComponentViewRegistry.mm
BOOL recycle = ![componentViewDescriptor.view isKindOfClass:[RCTScrollViewComponentView class]]
    || ((RCTScrollViewComponentView *) componentViewDescriptor.view).scrollView.contentInsetAdjustmentBehavior == UIScrollViewContentInsetAdjustmentAutomatic;
if (recycle)
  recycledViews.push_back(componentViewDescriptor);

It should be possible to keep recycling on for the RCTSCrollViewComponent and just create the UIScrollView new each time. But I tried it and couldn't get it to work.

Version

0.69.1

Output of npx react-native info

System:
OS: macOS 12.4
CPU: (8) arm64 Apple M1 Pro
Memory: 461.39 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 17.7.1 - /opt/homebrew/bin/node
Yarn: 1.22.18 - /opt/homebrew/bin/yarn
npm: 8.5.2 - /opt/homebrew/bin/npm
Watchman: 2022.03.14.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.11.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5
Android SDK:
API Levels: 29, 30, 31, 32
Build Tools: 29.0.2, 30.0.2, 31.0.0, 32.0.0, 32.1.0
System Images: android-30 | Intel x86 Atom_64, android-30 | Google Play ARM 64 v8a, android-32 | Google APIs ARM 64 v8a
Android NDK: Not Found
IDEs:
Android Studio: 2021.1 AI-211.7628.21.2111.8193401
Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild
Languages:
Java: 11.0.11 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.0.0 => 18.0.0
react-native: 0.69.1 => 0.69.1
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

I've created a repository with a reproduction of the bug. The README in the repo contains the steps needed to recreate the problem. There are two apps in the repo, one built with the old architecture and the other built with the new architecture. You can see that the bug only happens on the new architecture. The only dependencies in the apps are the 3 packages that make up my navigation library.

The ScrollView misbehaving on the new architecture

Screen.Recording.2022-07-09.at.14.20.00.mov

The ScrollView behaving correctly on the old architecture

Screen.Recording.2022-07-09.at.14.18.11.mov

Snack, code example, screenshot, or link to a repository

https://github.com/grahammendick/content-inset-adjustment-auto-scroll-bug