diff --git a/native/flow-typed/npm/@react-navigation/elements_v1.x.x.js b/native/flow-typed/npm/@react-navigation/elements_v1.x.x.js
--- a/native/flow-typed/npm/@react-navigation/elements_v1.x.x.js
+++ b/native/flow-typed/npm/@react-navigation/elements_v1.x.x.js
@@ -45,4 +45,10 @@
   declare export var HeaderHeightContext: React$Context<?number>;
   declare export function useHeaderHeight(): number;
 
+  type Layout = { +width: number, +height: number };
+  declare export function getDefaultHeaderHeight(
+    layout: Layout,
+    modalPresentation: boolean,
+    statusBarHeight: number,
+  ): number;
 }
diff --git a/native/navigation/disconnected-bar.react.js b/native/navigation/disconnected-bar.react.js
--- a/native/navigation/disconnected-bar.react.js
+++ b/native/navigation/disconnected-bar.react.js
@@ -6,7 +6,7 @@
 import { useSelector } from '../redux/redux-utils.js';
 import { useStyles } from '../themes/colors.js';
 
-const expandedHeight = Platform.select({
+export const expandedHeight: number = Platform.select({
   android: 29.5,
   default: 27,
 });
diff --git a/native/navigation/use-header-height.react.js b/native/navigation/use-header-height.react.js
new file mode 100644
--- /dev/null
+++ b/native/navigation/use-header-height.react.js
@@ -0,0 +1,23 @@
+// @flow
+
+import { getDefaultHeaderHeight } from '@react-navigation/elements';
+import {
+  useSafeAreaInsets,
+  useSafeAreaFrame,
+} from 'react-native-safe-area-context';
+
+import { expandedHeight } from './disconnected-bar.react.js';
+import { useSelector } from '../redux/redux-utils.js';
+
+function useHeaderHeight(): number {
+  const networkConnected = useSelector(state => state.connectivity.connected);
+  const insets = useSafeAreaInsets();
+  const frame = useSafeAreaFrame();
+  const disconnectedBarHeight = networkConnected ? 0 : expandedHeight;
+
+  return (
+    getDefaultHeaderHeight(frame, false, insets.top) + disconnectedBarHeight
+  );
+}
+
+export { useHeaderHeight };