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