From 8f0efc8db534297a95ea8a2bcb6d2e387c1fea53 Mon Sep 17 00:00:00 2001
From: Satyajit Sahoo <satyajit.happy@gmail.com>
Date: Sat, 7 Nov 2020 14:39:23 +0100
Subject: [PATCH] fix: don't hide child header automatically in stack

---
 example/src/Screens/BottomTabs.tsx               | 10 ++++++++--
 example/src/Screens/MaterialBottomTabs.tsx       | 10 ++++++++--
 example/src/Screens/SimpleStack.tsx              |  8 ++++++--
 .../stack/src/views/Header/HeaderContainer.tsx   | 16 +++++-----------
 packages/stack/src/views/Stack/CardStack.tsx     |  7 ++-----
 5 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/example/src/Screens/BottomTabs.tsx b/example/src/Screens/BottomTabs.tsx
index 5ae63d51..458c7d36 100644
--- a/example/src/Screens/BottomTabs.tsx
+++ b/example/src/Screens/BottomTabs.tsx
@@ -86,12 +86,18 @@ export default function BottomTabsScreen({
     >
       <BottomTabs.Screen
         name="Article"
-        component={SimpleStackScreen}
         options={{
           title: 'Article',
           tabBarIcon: getTabBarIcon('file-document-box'),
         }}
-      />
+      >
+        {(props) => (
+          <SimpleStackScreen
+            {...props}
+            screenOptions={{ headerShown: false }}
+          />
+        )}
+      </BottomTabs.Screen>
       <BottomTabs.Screen
         name="Chat"
         component={Chat}
diff --git a/example/src/Screens/MaterialBottomTabs.tsx b/example/src/Screens/MaterialBottomTabs.tsx
index a8d796d9..110ddd8b 100644
--- a/example/src/Screens/MaterialBottomTabs.tsx
+++ b/example/src/Screens/MaterialBottomTabs.tsx
@@ -23,13 +23,19 @@ export default function MaterialBottomTabsScreen() {
     <MaterialBottomTabs.Navigator barStyle={styles.tabBar}>
       <MaterialBottomTabs.Screen
         name="Article"
-        component={SimpleStackScreen}
         options={{
           tabBarLabel: 'Article',
           tabBarIcon: 'file-document-box',
           tabBarColor: '#C9E7F8',
         }}
-      />
+      >
+        {(props) => (
+          <SimpleStackScreen
+            {...props}
+            screenOptions={{ headerShown: false }}
+          />
+        )}
+      </MaterialBottomTabs.Screen>
       <MaterialBottomTabs.Screen
         name="Chat"
         component={Chat}
diff --git a/example/src/Screens/SimpleStack.tsx b/example/src/Screens/SimpleStack.tsx
index b5db352e..841ae6bb 100644
--- a/example/src/Screens/SimpleStack.tsx
+++ b/example/src/Screens/SimpleStack.tsx
@@ -4,6 +4,7 @@ import { Button } from 'react-native-paper';
 import type { ParamListBase } from '@react-navigation/native';
 import {
   createStackNavigator,
+  StackNavigationOptions,
   StackScreenProps,
 } from '@react-navigation/stack';
 import Article from '../Shared/Article';
@@ -105,7 +106,10 @@ const SimpleStack = createStackNavigator<SimpleStackParams>();
 
 export default function SimpleStackScreen({
   navigation,
-}: StackScreenProps<ParamListBase>) {
+  screenOptions,
+}: StackScreenProps<ParamListBase> & {
+  screenOptions?: StackNavigationOptions;
+}) {
   React.useLayoutEffect(() => {
     navigation.setOptions({
       headerShown: false,
@@ -113,7 +117,7 @@ export default function SimpleStackScreen({
   }, [navigation]);
 
   return (
-    <SimpleStack.Navigator>
+    <SimpleStack.Navigator screenOptions={screenOptions}>
       <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 a676af03..ea19fab1 100644
--- a/packages/stack/src/views/Header/HeaderContainer.tsx
+++ b/packages/stack/src/views/Header/HeaderContainer.tsx
@@ -15,7 +15,6 @@ import {
   forNoAnimation,
   forSlideRight,
 } from '../../TransitionConfigs/HeaderStyleInterpolators';
-import HeaderShownContext from '../../utils/HeaderShownContext';
 import PreviousSceneContext from '../../utils/PreviousSceneContext';
 import type {
   Layout,
@@ -56,7 +55,6 @@ export default function HeaderContainer({
   style,
 }: Props) {
   const focusedRoute = getFocusedRoute();
-  const isParentHeaderShown = React.useContext(HeaderShownContext);
   const parentPreviousScene = React.useContext(PreviousSceneContext);
 
   return (
@@ -66,11 +64,8 @@ export default function HeaderContainer({
           return null;
         }
 
-        const {
-          header,
-          headerShown = isParentHeaderShown === false,
-          headerTransparent,
-        } = scene.descriptor.options || {};
+        const { header, headerShown = true, headerTransparent } =
+          scene.descriptor.options || {};
 
         if (!headerShown) {
           return null;
@@ -85,11 +80,10 @@ export default function HeaderContainer({
         const previousScene = self[i - 1];
         const nextScene = self[i + 1];
 
-        const {
-          headerShown: previousHeaderShown = isParentHeaderShown === false,
-        } = previousScene?.descriptor.options || {};
+        const { headerShown: previousHeaderShown = true } =
+          previousScene?.descriptor.options || {};
 
-        const { headerShown: nextHeaderShown = isParentHeaderShown === false } =
+        const { headerShown: nextHeaderShown = true } =
           nextScene?.descriptor.options || {};
 
         const isHeaderStatic =
diff --git a/packages/stack/src/views/Stack/CardStack.tsx b/packages/stack/src/views/Stack/CardStack.tsx
index 4abf15cb..42b302c7 100755
--- a/packages/stack/src/views/Stack/CardStack.tsx
+++ b/packages/stack/src/views/Stack/CardStack.tsx
@@ -447,10 +447,7 @@ export default class CardStack extends React.Component<Props, State> {
         ? this.state.scenes.slice(-2).some((scene) => {
             const { descriptor } = scene;
             const options = descriptor ? descriptor.options : {};
-            const {
-              headerTransparent,
-              headerShown = isParentHeaderShown === false,
-            } = options;
+            const { headerTransparent, headerShown = true } = options;
 
             if (headerTransparent || headerShown === false) {
               return true;
@@ -542,7 +539,7 @@ export default class CardStack extends React.Component<Props, State> {
 
             const {
               safeAreaInsets,
-              headerShown = isParentHeaderShown === false,
+              headerShown = true,
               headerTransparent,
               cardShadowEnabled,
               cardOverlayEnabled,