From 960f0a528152cea2e65ba2ed03a66ed0a12cbdb8 Mon Sep 17 00:00:00 2001
From: Satyajit Sahoo <satyajit.happy@gmail.com>
Date: Fri, 23 Oct 2020 03:32:40 +0200
Subject: [PATCH] refactor: make sure height set on header container is focused
 header height

---
 example/src/Screens/SimpleStack.tsx              |  5 ++++-
 .../stack/src/views/Header/HeaderContainer.tsx   | 16 +---------------
 packages/stack/src/views/Stack/CardStack.tsx     | 10 +++++++++-
 3 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/example/src/Screens/SimpleStack.tsx b/example/src/Screens/SimpleStack.tsx
index 744515e8..fcd9d05b 100644
--- a/example/src/Screens/SimpleStack.tsx
+++ b/example/src/Screens/SimpleStack.tsx
@@ -113,7 +113,10 @@ export default function SimpleStackScreen({
   }, [navigation]);
 
   return (
-    <SimpleStack.Navigator>
+    <SimpleStack.Navigator
+      headerMode="float"
+      screenOptions={{ headerTransparent: true }}
+    >
       <SimpleStack.Screen
         name="Article"
         component={ArticleScreen}
diff --git a/packages/stack/src/views/Header/HeaderContainer.tsx b/packages/stack/src/views/Header/HeaderContainer.tsx
index a700d1b2..a676af03 100644
--- a/packages/stack/src/views/Header/HeaderContainer.tsx
+++ b/packages/stack/src/views/Header/HeaderContainer.tsx
@@ -9,7 +9,6 @@ import {
 import type { EdgeInsets } from 'react-native-safe-area-context';
 
 import Header from './Header';
-import { getDefaultHeaderHeight } from './HeaderSegment';
 import {
   forSlideLeft,
   forSlideUp,
@@ -60,18 +59,8 @@ export default function HeaderContainer({
   const isParentHeaderShown = React.useContext(HeaderShownContext);
   const parentPreviousScene = React.useContext(PreviousSceneContext);
 
-  const [headerHeightAnim] = React.useState(
-    () =>
-      new Animated.Value(
-        getDefaultHeaderHeight(layout, isParentHeaderShown ? 0 : insets.top)
-      )
-  );
-
   return (
-    <Animated.View
-      pointerEvents="box-none"
-      style={[style, mode === 'float' && { height: headerHeightAnim }]}
-    >
+    <Animated.View pointerEvents="box-none" style={style}>
       {scenes.slice(-3).map((scene, i, self) => {
         if ((mode === 'screen' && i !== self.length - 1) || !scene) {
           return null;
@@ -144,9 +133,6 @@ export default function HeaderContainer({
                     ? (e) => {
                         const { height } = e.nativeEvent.layout;
 
-                        // If we don't set the header height, the header buttons won't be touchable on Android
-                        // when headerMode='float' and headerTransparent: true
-                        headerHeightAnim.setValue(height);
                         onContentHeightChange({
                           route: scene.route,
                           height,
diff --git a/packages/stack/src/views/Stack/CardStack.tsx b/packages/stack/src/views/Stack/CardStack.tsx
index 28ba469a..6b172795 100755
--- a/packages/stack/src/views/Stack/CardStack.tsx
+++ b/packages/stack/src/views/Stack/CardStack.tsx
@@ -391,6 +391,7 @@ export default class CardStack extends React.Component<Props, State> {
     const focusedRoute = state.routes[state.index];
     const focusedDescriptor = descriptors[focusedRoute.key];
     const focusedOptions = focusedDescriptor ? focusedDescriptor.options : {};
+    const focusedHeaderHeight = headerHeights[focusedRoute.key];
 
     let defaultTransitionPreset =
       mode === 'modal' ? ModalTransition : DefaultTransition;
@@ -450,7 +451,14 @@ export default class CardStack extends React.Component<Props, State> {
               focusedOptions.headerStyleInterpolator !== undefined
                 ? focusedOptions.headerStyleInterpolator
                 : defaultTransitionPreset.headerStyleInterpolator,
-            style: [styles.floating, isFloatHeaderAbsolute && styles.absolute],
+            style: [
+              styles.floating,
+              isFloatHeaderAbsolute && [
+                // Without this, the header buttons won't be touchable on Android when headerTransparent: true
+                { height: focusedHeaderHeight },
+                styles.absolute,
+              ],
+            ],
           })}
         </React.Fragment>
       ) : null;