Set header height in headerStyle in native-stack? #10097

gonzalo-rivas · 2021-11-03T12:59:53Z

github-actions · 2021-11-03T13:00:09Z

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.dev link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

github-actions · 2021-11-03T13:00:09Z

Couldn't find version numbers for the following packages in the issue:

@react-navigation/native
@react-navigation/bottom-tabs
@react-navigation/drawer
@react-navigation/material-bottom-tabs
@react-navigation/material-top-tabs
@react-navigation/stack

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

github-actions · 2021-11-03T13:02:05Z

Couldn't find version numbers for the following packages in the issue:

@react-navigation/material-bottom-tabs
@react-navigation/material-top-tabs

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

tylercote · 2021-11-07T01:25:29Z

+1 I am also seeing this issue going from v5 stack to v6 native-stack. Setting height on the headerStyle is no longer applying.

matias-calvo-91 · 2021-11-17T18:35:50Z

I found a workaround for this issue.
If you use the header prop, you can set height specifying the whole component; like this:

<Stack.Screen
  options={
    header: () =>
        (
          <View style={{ height: 100 }}>
            <BackArrow navigation={navigation.goBack} style={{ position: 'absolute', left: 30, bottom: 35 }} />
            <View>
              <Text>TITLE</Text>
              <Text>TITLE</Text>
            </View>
          </View>
        ),
  }
/>

But you would need to add the back arrow manually.
It's not a solution, but at least it helped me.

github-actions · 2022-01-03T01:49:36Z

Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.

liquidvisual · 2022-03-09T01:28:31Z

@matias-calvo-91 Thanks! That worked for me. Do you know if it's possible to make the custom header absolute though? When I do so it disappears.

github-actions · 2022-03-09T01:28:47Z

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.

AshotN · 2022-03-30T19:30:03Z

Setting the header height in the header prop doesn't automatically push the content down.

dhatGuy · 2022-04-10T01:05:06Z

#10113 was supposed to fix this but setting height only works for web.

Aure77 · 2022-04-29T17:19:01Z

#10113 was supposed to fix this but setting height only works for web.

Only works if you use custom header.

mcatalano54 · 2022-05-04T06:27:09Z

setting the "header" prop in options, the height changes correctly, but the "headerLeft" and "headerRight" props stopping working. I defined some icons there. So if I'm not wrong, I'll need to add that icons inside the custom view defined in the "header" option.

chriscoomber · 2022-05-19T16:23:40Z

To anyone stumbling across this, I managed to get a workaround that worked for me which I can share.

Whilst setting the height via options.headerStyle is not officially supported (only backgroundColor is mentioned in the docs), it does basically work.

react-navigation/packages/elements/src/Header/Header.tsx

Line 86 in 5b13f81

height = defaultHeight,

But with the following gotcha:

The header height includes any insets due to the StatusBar, or any other notches. So, naively setting the header height to what you want it to be might cause issues on Android. If you want to set the header height to 100, you probably want to do something like:

import { useSafeAreaInsets } from 'react-native-safe-area-context';

...

const insets = useSafeAreaInsets();

...

<RootStack.Navigator
      initialRouteName="Home"
    >
      <RootStack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          headerStyle: {
            height: 100 + insets.top
          }
        }}
      />

...

I wanted to scale the header height depending on the screen size, for a fluid UI (don't ask...), and for me it was helpful to know the header's default height (i.e. what it is if you don't set it). To calculate this you can do:

import { useWindowDimensions } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { getDefaultHeaderHeight } from '@react-navigation/elements';

...

const dimensions = useWindowDimensions();
const insets = useSafeAreaInsets();
const defaultHeaderHeight = getDefaultHeaderHeight(dimensions, false, insets.top);  // assuming your header never appears on a modal screen, if it does the middle argument should be true
const newHeaderHeight = myCustomScalingCode(defaultHeaderHeight - insets.top) + insets.top;

Aure77 · 2022-05-19T16:31:24Z

react-navigation/packages/native-stack/src/views/NativeStackView.native.tsx

Line 177 in 5b13f81

const headerHeight = header ? customHeaderHeight : defaultHeaderHeight;

Header height is managed here. It use default height when no custom header is provided...
It doesn't seems possible to change it...

avanavana · 2022-09-14T20:31:47Z

This has been an issue forever, please address it!

Nothing in the docs admits that the height of the header cannot be changed, except by passing a completely custom header component, and then needing to reimplement all the react navigation built-in functionality for gesture, animation, etc, etc. Furthermore, when you pass a custom header component, it becomes impossible to keep the header above the content of the screen, even with messing with zIndex.

This is a huge headache and something that should be extremely basic with the library.

tsheaff · 2022-11-01T00:31:25Z

Damn, am I understanding this correctly that there is no way to change the height of the header other than a completely custom from-scratch header component?

endcycles · 2023-06-23T04:51:18Z

Question: How can I change the height of the nav component in React Navigation 6 with the new native-stack library?

Current behavior:
I am currently exploring React Navigation 6 and using the native-stack library for my navigation. I have created a stack navigator with a header style that includes a specific height using the headerStyle property. However, the height property doesn't seem to have any effect on the header in the new native-stack. Is there a way to set the height of the header in React Navigation 6 with native-stack?

Expected behavior:
I want to set the height of the inner Stack header to a specific value.

Platform:
iOS
MacOS

Packages:
@react-navigation/native-stack
@react-navigation/native

bryanltobing · 2023-07-21T07:00:01Z

Damn, am I understanding this correctly that there is no way to change the height of the header other than a completely custom from-scratch header component?

if this is the case.

Is there a guide on how to properly build a custom header? if i make my own implementation i always can't get it right with the transition, and the title

KCErb · 2023-07-26T04:37:43Z

In my case, I wrapped my app with "safe area insets" and found that my headers were too tall because they were including the status bar height.

So I tried using the Header component from the Elements library so that I could set the headerStatusBarHeight property: https://reactnavigation.org/docs/elements/#headerstatusbarheight.

header: () => <Header title="test" />,

and then I commented it out and found that the original header was now the correct size. This just seems like buggy behavior but maybe it's the bug you're looking for!

TL;DR

Try

yarn add @react-navigation/elements

and then use the Header component, even if you get rid of it later, merely importing the library seems to have this side effect.

michaelkremenetsky · 2023-10-17T17:32:13Z

Can this be reopened because of https://x.com/swmansion/status/1714324990491762873?s=46

buddywood · 2023-11-17T05:34:01Z

I had to use a custom Header component to get it to work.

dgrcode · 2023-12-11T17:55:08Z

Try

yarn add @react-navigation/elements

and then use the Header component, even if you get rid of it later, merely importing the library seems to have this side effect.

I've tried this, but I lose the back button and any headerRight I had defined. Am I missing something?

anyamiletic · 2024-02-19T08:15:13Z

@dgrcode if you use a custom header component it actually replaces headerLeft, headerRight and headerTitle as a single component. Your UI will no longer render those and so you will have to render the whole header UI in your custom component

timbtimbtimb · 2024-02-19T11:14:57Z

I'd love to have control over the height too.

sirusbaladi · 2024-03-15T21:54:47Z

why is this closed?

ameer2468 · 2024-04-24T10:18:20Z

Experiencing the same issue, need to pass a custom header component instead which is annoying.

shadeemerhi · 2024-05-07T22:39:16Z

Experiencing the same issue and it's extremely annoying

gonzalo-rivas added the bug label Nov 3, 2021

github-actions bot added needs repro package:native-stack platform:android platform:ios labels Nov 3, 2021

tylercote mentioned this issue Nov 26, 2021

feat(native-stack): expose custom header height #10113

Merged

github-actions bot added the stale label Jan 3, 2022

github-actions bot closed this as completed Jan 10, 2022

olarcher mentioned this issue Nov 21, 2022

Expose header height for default header (please reopen #10097) #11023

Closed

11 tasks

tourze mentioned this issue Jan 3, 2023

Taro RN中的getSystemInfo返回的windowHeight跟小程序表现不一致 NervJS/taro#13062

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Set header height in headerStyle in native-stack? #10097

Set header height in headerStyle in native-stack? #10097

gonzalo-rivas commented Nov 3, 2021 •

edited

github-actions bot commented Nov 3, 2021

github-actions bot commented Nov 3, 2021

github-actions bot commented Nov 3, 2021

tylercote commented Nov 7, 2021

matias-calvo-91 commented Nov 17, 2021

github-actions bot commented Jan 3, 2022

liquidvisual commented Mar 9, 2022 •

edited

github-actions bot commented Mar 9, 2022

AshotN commented Mar 30, 2022

dhatGuy commented Apr 10, 2022

Aure77 commented Apr 29, 2022

mcatalano54 commented May 4, 2022

chriscoomber commented May 19, 2022

Aure77 commented May 19, 2022 •

edited

avanavana commented Sep 14, 2022 •

edited

tsheaff commented Nov 1, 2022

endcycles commented Jun 23, 2023

bryanltobing commented Jul 21, 2023

KCErb commented Jul 26, 2023 •

edited

michaelkremenetsky commented Oct 17, 2023

buddywood commented Nov 17, 2023

dgrcode commented Dec 11, 2023

anyamiletic commented Feb 19, 2024

timbtimbtimb commented Feb 19, 2024

sirusbaladi commented Mar 15, 2024

ameer2468 commented Apr 24, 2024

shadeemerhi commented May 7, 2024

Set header height in headerStyle in native-stack? #10097

Set header height in headerStyle in native-stack? #10097

Comments

gonzalo-rivas commented Nov 3, 2021 • edited

Current behavior

Expected behavior

Reproduction

Platform

Packages

Environment

github-actions bot commented Nov 3, 2021

github-actions bot commented Nov 3, 2021

github-actions bot commented Nov 3, 2021

tylercote commented Nov 7, 2021

matias-calvo-91 commented Nov 17, 2021

github-actions bot commented Jan 3, 2022

liquidvisual commented Mar 9, 2022 • edited

github-actions bot commented Mar 9, 2022

AshotN commented Mar 30, 2022

dhatGuy commented Apr 10, 2022

Aure77 commented Apr 29, 2022

mcatalano54 commented May 4, 2022

chriscoomber commented May 19, 2022

Aure77 commented May 19, 2022 • edited

avanavana commented Sep 14, 2022 • edited

tsheaff commented Nov 1, 2022

endcycles commented Jun 23, 2023

bryanltobing commented Jul 21, 2023

KCErb commented Jul 26, 2023 • edited

TL;DR

michaelkremenetsky commented Oct 17, 2023

buddywood commented Nov 17, 2023

dgrcode commented Dec 11, 2023

anyamiletic commented Feb 19, 2024

timbtimbtimb commented Feb 19, 2024

sirusbaladi commented Mar 15, 2024

ameer2468 commented Apr 24, 2024

shadeemerhi commented May 7, 2024

gonzalo-rivas commented Nov 3, 2021 •

edited

liquidvisual commented Mar 9, 2022 •

edited

Aure77 commented May 19, 2022 •

edited

avanavana commented Sep 14, 2022 •

edited

KCErb commented Jul 26, 2023 •

edited