feat: add a more explicit headerShown option

react-navigation · Oct 6, 2019 · 0375864 · 0375864
1 parent 8d3e614
commit 0375864
Show file tree

Hide file tree

Showing 10 changed files with 28 additions and 19 deletions.
diff --git a/example/src/FullScreen.tsx b/example/src/FullScreen.tsx
@@ -4,7 +4,7 @@ import { createStackNavigator } from 'react-navigation-stack';
 
 class Screen extends React.Component {
   static navigationOptions = {
-    header: null,
+    headerShown: false,
   };
 
   render() {

diff --git a/example/src/HeaderPreset.tsx b/example/src/HeaderPreset.tsx
@@ -79,8 +79,8 @@ class ScreenWithLongTitle extends React.Component<NavigationStackScreenProps> {
 
 class ScreenWithNoHeader extends React.Component<NavigationStackScreenProps> {
   static navigationOptions = {
-    header: null,
     title: 'No Header',
+    headerShown: false,
   };
 
   render() {

diff --git a/example/src/ImmediateTransition.tsx b/example/src/ImmediateTransition.tsx
@@ -70,7 +70,7 @@ export const Stack = createStackNavigator(
   {
     initialRouteName: 'Screen1',
     defaultNavigationOptions: {
-      header: null,
+      headerShown: false,
     },
   }
 );

diff --git a/example/src/ModalPresentation.tsx b/example/src/ModalPresentation.tsx
@@ -31,7 +31,7 @@ class ListScreen extends React.Component<NavigationStackScreenProps> {
 
 class DetailsScreen extends React.Component<NavigationStackScreenProps> {
   static navigationOptions = {
-    header: null,
+    headerShown: false,
   };
 
   render() {

diff --git a/example/src/RevealStack.tsx b/example/src/RevealStack.tsx
@@ -117,7 +117,7 @@ class DetailsScreen extends React.Component<NavigationStackScreenProps> {
 
 class HeaderlessScreen extends React.Component {
   static navigationOptions = {
-    header: null,
+    headerShown: false,
   };
 
   componentDidMount() {

diff --git a/example/src/SimpleStack.tsx b/example/src/SimpleStack.tsx
@@ -125,7 +125,7 @@ class DetailsScreen extends React.Component<NavigationStackScreenProps> {
 
 class HeaderlessScreen extends React.Component {
   static navigationOptions = {
-    header: null,
+    headerShown: false,
   };
 
   componentDidMount() {

diff --git a/src/types.tsx b/src/types.tsx
@@ -114,6 +114,7 @@ export type NavigationStackOptions = HeaderOptions &
   Partial<TransitionPreset> & {
     title?: string;
     header?: React.ReactNode | ((props: HeaderProps) => React.ReactNode);
+    headerShown?: boolean;
     cardShadowEnabled?: boolean;
     cardOverlayEnabled?: boolean;
     cardTransparent?: boolean;

diff --git a/src/views/Header/HeaderContainer.tsx b/src/views/Header/HeaderContainer.tsx
@@ -71,11 +71,14 @@ export default function HeaderContainer({
         const isHeaderStatic =
           mode === 'float'
             ? (previousScene &&
-                previousScene.descriptor.options.header === null &&
+                (previousScene.descriptor.options.header === null ||
+                  previousScene.descriptor.options.headerShown === false) &&
                 // We still need to animate when coming back from next scene
                 // A hacky way to check this is if the next scene exists
                 !nextScene) ||
-              (nextScene && nextScene.descriptor.options.header === null)
+              (nextScene &&
+                (nextScene.descriptor.options.header === null ||
+                  nextScene.descriptor.options.headerShown === false))
             : false;
 
         const props = {
@@ -113,13 +116,17 @@ export default function HeaderContainer({
                   : null
               }
             >
-              {options.header !== undefined ? (
-                typeof options.header === 'function' ? (
-                  options.header(props)
-                ) : null
-              ) : (
-                <Header {...props} />
-              )}
+              {options.headerShown !== false ? (
+                options.header !== undefined ? (
+                  typeof options.header === 'function' ? (
+                    options.header(props)
+                  ) : (
+                    options.header
+                  )
+                ) : (
+                  <Header {...props} />
+                )
+              ) : null}
             </View>
           </NavigationContext.Provider>
         );

diff --git a/src/views/Stack/Stack.tsx b/src/views/Stack/Stack.tsx
@@ -346,6 +346,7 @@ export default class Stack extends React.Component<Props, State> {
 
             const {
               header,
+              headerShown,
               headerTransparent,
               cardTransparent,
               cardShadowEnabled,
@@ -419,7 +420,7 @@ export default class Stack extends React.Component<Props, State> {
                   onPageChangeConfirm={onPageChangeConfirm}
                   onPageChangeCancel={onPageChangeCancel}
                   floatingHeaderHeight={floatingHeaderHeights[route.key]}
-                  hasCustomHeader={header === null}
+                  headerShown={header === null || headerShown === false}
                   getPreviousRoute={getPreviousRoute}
                   headerMode={headerMode}
                   headerTransparent={headerTransparent}

diff --git a/src/views/Stack/StackItem.tsx b/src/views/Stack/StackItem.tsx
@@ -53,7 +53,7 @@ type Props = TransitionPreset & {
   headerMode: HeaderMode;
   headerTransparent?: boolean;
   floatingHeaderHeight: number;
-  hasCustomHeader: boolean;
+  headerShown: boolean;
   gestureVelocityImpact?: number;
 };
 
@@ -111,7 +111,7 @@ export default class StackItem extends React.PureComponent<Props> {
       onPageChangeCancel,
       gestureResponseDistance,
       floatingHeaderHeight,
-      hasCustomHeader,
+      headerShown,
       getPreviousRoute,
       headerMode,
       headerTransparent,
@@ -149,7 +149,7 @@ export default class StackItem extends React.PureComponent<Props> {
         importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
         pointerEvents="box-none"
         containerStyle={
-          headerMode === 'float' && !headerTransparent && !hasCustomHeader
+          headerMode === 'float' && !headerTransparent && !headerShown
             ? { marginTop: floatingHeaderHeight }
             : null
         }