feat: return nearest parent header height for useHeaderHeight

react-navigation · Mar 12, 2021 · 24b3f73 · 24b3f73
1 parent 2c8401d
commit 24b3f73
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/packages/elements/src/Screen.tsx b/packages/elements/src/Screen.tsx
@@ -30,6 +30,7 @@ export default function Screen(props: Props) {
   const insets = useSafeAreaInsets();
 
   const isParentHeaderShown = React.useContext(HeaderShownContext);
+  const parentHeaderHeight = React.useContext(HeaderHeightContext);
 
   const {
     header,
@@ -50,7 +51,9 @@ export default function Screen(props: Props) {
         <HeaderShownContext.Provider
           value={isParentHeaderShown || headerShown !== false}
         >
-          <HeaderHeightContext.Provider value={headerShown ? headerHeight : 0}>
+          <HeaderHeightContext.Provider
+            value={headerShown ? headerHeight : parentHeaderHeight}
+          >
             {children}
           </HeaderHeightContext.Provider>
         </HeaderShownContext.Provider>

diff --git a/packages/stack/src/views/Stack/CardContainer.tsx b/packages/stack/src/views/Stack/CardContainer.tsx
@@ -119,6 +119,8 @@ function CardContainer({
   scene,
   transitionSpec,
 }: Props) {
+  const parentHeaderHeight = React.useContext(HeaderHeightContext);
+
   const handleOpen = () => {
     const { route } = scene.descriptor;
 
@@ -263,7 +265,9 @@ function CardContainer({
             <HeaderShownContext.Provider
               value={isParentHeaderShown || headerShown !== false}
             >
-              <HeaderHeightContext.Provider value={headerHeight}>
+              <HeaderHeightContext.Provider
+                value={headerShown ? headerHeight : parentHeaderHeight}
+              >
                 {renderScene({ route: scene.descriptor.route })}
               </HeaderHeightContext.Provider>
             </HeaderShownContext.Provider>