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