Fix recycled ScrollView inheriting stale contentInset on iOS

[cbrevik]

Summary:

Fixes #55090

In Fabric, prepareForRecycle resets contentInset to zero when a ScrollView is recycled. But the subsequent frame reset dance (required for contentInsetAdjustmentBehavior see 27fe6f1) triggers centerContentIfNeeded with the previous component's stale content size, silently overwriting the reset.

As a result, a ScrollView with centerContent={true} that is unmounted and replaced by another ScrollView leaves behind a stale contentInset that the new component inherits causing displaced content if the new ScrollView does not have centerContent={true}.

Two fixes:

1. RCTScrollViewComponentView
   In updateProps, when centerContent transitions from true to false, explicitly reset contentInset to the prop value. centerContentIfNeeded will not self-correct once centerContent is disabled on the new component, so the reset must be forced. The existing contentInset prop check is also guarded with !centerContent to prevent it from overriding the inset calculated by centerContentIfNeeded when centering is active.
2. RCTEnhancedScrollView
   Override setCenterContent: and setContentSize: to trigger centerContentIfNeeded. This ensures centering is re-applied with the correct new content size when the new component's content arrives via updateState:, and that toggling centerContent takes effect immediately.

Changelog:

[IOS] [FIXED] - Fix recycled ScrollView inheriting stale contentInset from centerContent on Fabric

Test Plan:

Using the RNTester-app, replace CenterContentList with the following inside ScrollViewExample.js:

CenterContentList reproducer

Doing two different ScrollViews to force an unmount of the one with centerContent so the other inherits its insets

function CenterContentList(): React.Node {
  const [centerContent, setCenterContent] = useState(true);
  if (centerContent) {
    return (
      <ScrollView
        nestedScrollEnabled
        style={styles.scrollView}
        centerContent={true}>
        <Text>This should be in center.</Text>
        <Button
          label="Toggle centerContent"
          onPress={() => setCenterContent(!centerContent)}
        />
      </ScrollView>
    );
  } else {
    return (
      <ScrollView
        nestedScrollEnabled
        style={styles.scrollView}
        centerContent={false}>
        <Text>This should not be in center.</Text>
        <Button
          label="Toggle centerContent"
          onPress={() => setCenterContent(!centerContent)}
        />
      </ScrollView>
    );
  }
}

Before the fix

Note that for both ScrollViews the content is centered, even though one has centerContent={false}.

before-the-fix.mov

After the fix

One is properly centered, while the other has its content at the top.

after-the-fix.mov

[meta-codesync]

@javache has imported this pull request. If you are a Meta employee, you can view this in D105294296.