question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Issue with largeTitle and BottomTabNavigator without a header

See original GitHub issue

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} />

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:3
  • Comments:16 (8 by maintainers)

github_iconTop GitHub Comments

4reactions
alexanderstromcommented, Oct 16, 2020

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

2reactions
andrew09commented, Aug 5, 2021

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

This worked for me. Saved my life after so much searching!

Read more comments on GitHub >

github_iconTop Results From Across the Web

React Navigation v6 stack navigator with headerLargeTitle ...
Yes, the value returned by useHeaderHeight() does not seem to take large headers into account. Both of your issues should be solved by...
Read more >
Bottom Tabs Navigator | React Navigation
A simple tab bar on the bottom of the screen that lets you switch between different routes. Routes are lazily initialized -- their...
Read more >
How to use a Custom Header and Custom bottom tab bar for ...
This article is about how to have a custom component for header, bottom tab navigation when you are using React-Navigation and how to...
Read more >
Large Title Options | React Native Navigation
Controls whether the large title is visible or not. Type, Required, Platform. boolean, No, iOS. fontSize #. Set the title font size ...
Read more >
React-Navigation: Header Above Tab Nav - ADocLib
The goal is to (a) maximize usage of the screen (b) without hiding content or it has some inherent issues, i.e. if a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found