React Navigation get stack header height

These are the helpers that I use. getHeaderHeight method gets the correct height in every platform (including iphone x) and orientation:

import { Dimensions, DeviceInfo, Platform } from 'react-native';
import { Header } from 'react-navigation';

export const LANDSCAPE = 'landscape';
export const PORTRAIT = 'portrait';

export const getHeaderHeight = () => {
  let height;
  const orientation = getOrientation();
  height = getHeaderSafeAreaHeight();
  height += DeviceInfo.isIPhoneX_deprecated && orientation === PORTRAIT ? 24 : 0;

  return height;
};

// This does not include the new bar area in the iPhone X, so I use this when I need a custom headerTitle component
export const getHeaderSafeAreaHeight = () => {
  const orientation = getOrientation();
  if (Platform.OS === 'ios' && orientation === LANDSCAPE && !Platform.isPad) {
    return 32;
  }
  return Header.HEIGHT;
};

export const getOrientation = () => {
  const { width, height } = Dimensions.get('window');
  return width > height ? LANDSCAPE : PORTRAIT;
};

https://github.com/react-navigation/react-navigation/issues/2411#issuecomment-382434542

For React navigation V6:

you can use this for functional components

import { useHeaderHeight } from '@react-navigation/elements';

and this for both class components and functional components

import { HeaderHeightContext } from '@react-navigation/elements';

// ...

<HeaderHeightContext.Consumer>
  {headerHeight => {
    /* render something and use "headerHeight" in child components*/
  }}
</HeaderHeightContext.Consumer>

Read More from Here

React navigation V6

import { useHeaderHeight } from '@react-navigation/elements';
const headerHeight = useHeaderHeight();

React navigation V5

import { useHeaderHeight } from '@react-navigation/stack';
const headerHeight = useHeaderHeight();

or with React Context's API (not recommended)

React navigation V4

import { Header } from 'react-navigation-stack';
const headerHeight = Header.HEIGHT;

React navigation V2-V3

import { Header } from 'react-navigation';
const headerHeight = Header.HEIGHT;

---

Another answer to this problem