react-navigation / react-navigation

Routing and navigation for your React Native apps
https://reactnavigation.org
23.53k stars 5.02k forks source link

feature request: allow to easy set fixed header height #9570

Closed giautm closed 3 years ago

giautm commented 3 years ago

When I provide height in Header's style, it overrides the default calculated height. Which include headerStatusBarHeight from SafeAreaContext. To make it work, I have to write the custom Header component, then use the useSafeAreaInsets hook to manually calculate the new height. It's a heavy job.

Just need to update two lines of the bellow code to let life easier: https://github.com/react-navigation/react-navigation/blob/7f015130df6bc7f05cbf7beac1614ed12ba4293e/packages/stack/src/views/Header/HeaderSegment.tsx#L124-L128

Quick change, maybe remove headerStatusBarHeight from getDefaultHeaderHeight's params:

 const defaultHeight = getDefaultHeaderHeight(layout, 0); 

 const height = (StyleSheet.flatten( 
   customHeaderStyle || {} 
 ) as ViewStyle).height ?? defaultHeight + headerStatusBarHeight; 
github-actions[bot] commented 3 years ago

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.io 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[bot] commented 3 years ago

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

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

satya164 commented 3 years ago

It's a heavy job.

I disagree that including 2 extra lines for sale area insets is a "heavy job". Besides, you do this once for your whole app and probably never need to change again.

giautm commented 3 years ago

No just two lines. I can't use directly Header component for change the height. So, I write the custom hook that call useSafeAreaInsets then calculate the height for passing as screenOptions.

You are right, I have to do this for one time for the app. But I have many apps, then I have to share that logic cross apps.

If there is someone need to custom the Header height like me. They have to repeat exacly what I do. Why not support it if the library has only do the small change?