React-native-screens: Issue with largeTitle and BottomTabNavigator without a header

[juergengunz]

The first screen in the RootNavigator is a BottomTabNavigator without a header and I want to navigate to a Screen in the RootStackNavigator with largeTitles. If I navigate to the second Screen with headerLargeTitle:true - Initially the title is collapsed.

Is there a way to force the large title to be not collapsed?

<RootStack.Screen options={{headerShown: false}} name="Home" component={TabScreen} />
<RootStack.Screen options={({ route }) => ({headerShown: true,title: route.params.name,headerLargeTitle: true})} name="Second" component={SecondScreen} />

[WoLewicki]

Can you provide a repo/snack with minimal configuration needed to reproduce the issue?

[giaset]

Having the same issue.

<Tab.Navigator>
    <Tab.Screen name='LobbyStackNavigator' component={LobbyStackNavigator} />
</Tab.Navigator>

where LobbyStackNavigator is:

<Stack.Navigator screenOptions={{ headerLargeTitle: true }}/>
    <Stack.Screen name='Lobby' component={LobbyScreen} />
</Stack.Navigator>

[ArekChr]

Have the same issue, every large title header is collapsed inside bottom tab on app mounted

[WoLewicki]

Does this behavior appear only if using ScrollView in the screen with large title?

[ArekChr]

@WoLewicki This error doesn't occur if scrollview is empty and without props, hope that helps

[ArekChr]

@WoLewicki this error also occur with contentContainerStyle={{ paddingBottom: 10 }} but with empty scrollView

edit:
The same behavior for FlatList
edit:
And SectionList

[WoLewicki]

It looks like the native iOS implementation of RCTScrollView is messing with the large header. It would require more debugging on the native side. Thanks for the information @ArekChr 🎉 .

[ArekChr]

Im not pretty sure that it is RCTScrollView, With wix react-native-navigation this issue doesn't occur with the same config

[WoLewicki]

That is interesting. I will try to look into it more. Please comment if you find some more clues about it!

[alexanderstrom]

If you delay the render of the scrollView the title is not collapsed. For example, delay it by setting a state showScrollview in useEffect with a setTimeout at 0. Maybe a little clue

[WoLewicki]

Can you check if #670 fixes the issue and does not introduce any new issues?

[grahammendick]

I’ve got the same problem on my Navigation router (@WoLewicki your fix didn’t work for me).

I’ve worked out a fix but we need to tweak the RCTScrollContentView class in React Native. We must ensure that updateContentOffsetIfNeeded first runs after the ScrollView is moved to the window. So we prevent it running inside reactSetFrame if there’s no window yet and get it to run from didMoveToWindow instead.

Here’s the fixed RCTScrollContentView. Can you check it works for you, please? You can open your project in XCode and paste this code into RCTScrollContentView

@implementation RCTScrollContentView

- (void)didMoveToWindow
{
    [super didMoveToWindow];
    RCTScrollView *scrollView = (RCTScrollView *)self.superview.superview;
    [scrollView updateContentOffsetIfNeeded];
}

- (void)reactSetFrame:(CGRect)frame
{
  [super reactSetFrame:frame];

  RCTScrollView *scrollView = (RCTScrollView *)self.superview.superview;

  if (!scrollView || !self.window) {
    return;
  }

  RCTAssert([scrollView isKindOfClass:[RCTScrollView class]], @"Unexpected view hierarchy of RCTScrollView component.");

  [scrollView updateContentOffsetIfNeeded];
}

@end

[johankasperi]

I've had the same issue and the solution proposed by @grahammendick here solves it for me. Thank you @grahammendick!

[grahammendick]

@johankasperi glad it works and thanks for letting me know

[WoLewicki]

I am closing this issue in favor of #649 in order to keep the discussion in one place. Please comment here if something is wrong with it.