React Navigation get stack header height

Question

How do i get the height of the StackNavigator header programmatically?

I need to detect if component A's position is within component B when pan gesture (drag) on A is released. However, the position from onPanResponderRelease's gesture.moveY is measured with respect to the entire screen, whereas the position returned from A's onLayoutis measured with respect to the parent view. So i'd need to know the parent view's current height to reconcile the differences.

Answer 1

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

Answer 2

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