diff --git a/packages/native-stack/src/views/NativeStackView.native.tsx b/packages/native-stack/src/views/NativeStackView.native.tsx index 9c7455f26b..e969a307a4 100644 --- a/packages/native-stack/src/views/NativeStackView.native.tsx +++ b/packages/native-stack/src/views/NativeStackView.native.tsx @@ -13,7 +13,7 @@ import { useTheme, } from '@react-navigation/native'; import * as React from 'react'; -import { Platform, PlatformIOSStatic, StyleSheet } from 'react-native'; +import { Platform, PlatformIOSStatic, StyleSheet, View } from 'react-native'; import { useSafeAreaFrame, useSafeAreaInsets, @@ -166,11 +166,16 @@ const SceneView = ({ const isParentHeaderShown = React.useContext(HeaderShownContext); const parentHeaderHeight = React.useContext(HeaderHeightContext); - const headerHeight = getDefaultHeaderHeight( + + const defaultHeaderHeight = getDefaultHeaderHeight( useSafeAreaFrame(), false, insets.top ); + const [customHeaderHeight, setCustomHeaderHeight] = + React.useState(defaultHeaderHeight); + + const headerHeight = header ? customHeaderHeight : defaultHeaderHeight; return ( {header !== undefined && headerShown !== false ? ( - // TODO: expose custom header height - header({ - back: previousDescriptor - ? { - title: getHeaderTitle( - previousDescriptor.options, - previousDescriptor.route.name - ), - } - : undefined, - options, - route, - navigation, - }) + { + setCustomHeaderHeight(e.nativeEvent.layout.height); + }} + > + {header({ + back: previousDescriptor + ? { + title: getHeaderTitle( + previousDescriptor.options, + previousDescriptor.route.name + ), + } + : undefined, + options, + route, + navigation, + })} + ) : (