From d37f738e40bd8482a2ccaa888162c5615b70c288 Mon Sep 17 00:00:00 2001 From: Dylan Date: Thu, 8 Jun 2023 08:55:28 +0200 Subject: [PATCH] fix: headerheight incorrect on phones with dynamic island --- .../utils/getDefaultHeaderHeight.tsx | 3 +-- src/native-stack/views/NativeStackView.tsx | 18 +++++++++++++++--- 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/src/native-stack/utils/getDefaultHeaderHeight.tsx b/src/native-stack/utils/getDefaultHeaderHeight.tsx index 1490984954..d542e88c0c 100644 --- a/src/native-stack/utils/getDefaultHeaderHeight.tsx +++ b/src/native-stack/utils/getDefaultHeaderHeight.tsx @@ -6,12 +6,11 @@ const formSheetModalHeight = 56; export default function getDefaultHeaderHeight( layout: Layout, - topInset: number, + statusBarHeight: number, stackPresentation: StackPresentationTypes ): number { // default header heights let headerHeight = Platform.OS === 'android' ? 56 : 64; - let statusBarHeight = topInset; if (Platform.OS === 'ios') { const isLandscape = layout.width > layout.height; diff --git a/src/native-stack/views/NativeStackView.tsx b/src/native-stack/views/NativeStackView.tsx index 3ec0514579..98b85c5d89 100644 --- a/src/native-stack/views/NativeStackView.tsx +++ b/src/native-stack/views/NativeStackView.tsx @@ -105,11 +105,17 @@ const MaybeNestedStack = ({ ); - const topInset = useSafeAreaInsets().top; const dimensions = useSafeAreaFrame(); + const topInset = useSafeAreaInsets().top; + let statusBarHeight = topInset; + const hasDynamicIsland = Platform.OS === 'ios' && topInset === 59; + if (hasDynamicIsland) { + // On models with Dynamic Island the status bar height is smaller than the safe area top inset. + statusBarHeight = 54; + } const headerHeight = getDefaultHeaderHeight( dimensions, - topInset, + statusBarHeight, stackPresentation ); @@ -211,9 +217,15 @@ const RouteView = ({ const dimensions = useSafeAreaFrame(); const topInset = useSafeAreaInsets().top; + let statusBarHeight = topInset; + const hasDynamicIsland = Platform.OS === 'ios' && topInset === 59; + if (hasDynamicIsland) { + // On models with Dynamic Island the status bar height is smaller than the safe area top inset. + statusBarHeight = 54; + } const headerHeight = getDefaultHeaderHeight( dimensions, - topInset, + statusBarHeight, stackPresentation ); const parentHeaderHeight = React.useContext(HeaderHeightContext);