Large title fails on the new React Native architecture

[grahammendick]

I promise you this is NOT the same bug as I raised earlier about the contentInsetAdjustmentBehavior. This new problem is that large titles don’t work on iOS when the ScrollView is recycled. You can see what I mean in the video below. The first time you navigate to the second screen the 'World' title is large. But the second time you navigate it is small.

Reproduction of the problem

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.

Note, the apps are built on React Native 0.68 because I couldn’t get pod install working on 0.69. But I manually applied the contentInsetAdjustmentBehavior patch from 0.69.

The Fix?

You have to prevent the ScrollView's contentOffset being set before it has loaded in the window. I added the following !self.window check to the RCTEnhancedScrollView.

- (void)setContentOffset:(CGPoint)contentOffset
{
  if (_isSetContentOffsetDisabled || !self.window) {
    return;
  }

Screen.Recording.2022-05-29.at.21.48.52.mov

[sammy-SC]

Thank you @grahammendick for the bug report and suggested fix.

Are you interested in opening a PR to fix the issue?

[grahammendick]

I'm in the process of updating my Navigation router to the new architecture. I’ve already spent about 9 weeks on it and I’m not done yet. My library is 100% native - every component renders to its native counterpart - so the new architecture has given me a lot to rewrite and test.

Having said that, this bug is a showstopper for my Navigation router. I can’t upgrade to the new architecture without a fix for this. But I can see that, from the perspective of the React Native team, this bug might be low priority. So if the only way to ensure this gets fixed is for me to make a PR then I will definitely make the time.

Please let me know what priority this bug is for the React Native team.

[grahammendick]

My suggested fix doesn't work (the ScrollView remembers the content offset when you go back and forward).

Could the React Native team help out please? The ScrollView isn't resetting the contentOffset properly. Maybe there's other ScrollView properties that need resetting so that the contentOffset is worked out correctly when a large title is involved and the ScrollView is recycled.

[grahammendick]

Any chance you could turn off recycling when contentInsetAdjustmentBehavior is set to automatic?

[jacobp100]

Is there a way to turn off view recycling for some instances of a view?

[grahammendick]

Can't see a way. Perhaps the RCTScrollViewComponentView could create the UIScrollView new each time? So clear the _scrollView when it's recycled/restarted?

[sammy-SC]

Hey @grahammendick,

thank you for awesome repro! I looked into it and found the problem. Prop contentInsetAdjustmentBehavior in Fabric had incorrect default value: https://github.com/facebook/react-native/blob/main/ReactCommon/react/renderer/components/scrollview/ScrollViewProps.h#L65-L66

Fix is on the way.

Here is a video after the fix:
https://user-images.githubusercontent.com/1733610/179206015-d444939e-9022-4b39-a5b6-e65ae3702b27.mp4

[grahammendick]

Thank you, that's amazing!

Can you check if that fixes the other bug I found with content inset adjustment automatic. I raised it in the react native project instead of the working group because I wasn't sure of the best place. The issue has a repro attached just like this one so you should be able to plug your fix in to check.

[sammy-SC]

The promised fix: facebook/react-native@e98a835

[sammy-SC]

sure, let me check it @grahammendick.

[sammy-SC]

sorry @grahammendick, I found a problem with my solution and had to revert it. Back to the drawing board :(

[grahammendick]

Oh, that’s a shame. Recycling views on iOS has made it much harder to use the native navigation primitives. I had days of frustration and no success trying to recycle different types of UIViewController. I eventually settled on a pattern where I create the UIViewController new each time instead of recycling it. I feel like this idea should also work for the RCTScrollView (I gave it a try without any luck). Here’s what the pattern looks like.

RCTScrollView {
  BOOL _createScrollView;
  UIScrollView *_scrollView;
}

-(void) ensureScrollView {
  If (createScrollView) {
    _scrollView = [[UIScrollView alloc] init];
    _createScrollView = NO;
  }
}

- (void)prepareForRecycle
{
    [super prepareForRecycle];
    _createScrollView = YES;
}

- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
{
  [self ensureScrollView];
  …
}

- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
{
  [self ensureScrollView];
  …
}

[grahammendick]

Hey @sammy-SC,

I fixed it and have raised a PR in the react native repo!!

I worked a looong time on it over the last few days and tried a lot of different things (I was a bit like a monkey at a typewriter). Eventually I stumbled upon resetting the frame size when the view is recycled.

Here it is in action

Screen.Recording.2022-07-18.at.21.31.11.mov