feat: drop header: null in favor of more explitit headerShown option

react-navigation · Oct 6, 2019 · ba6b6ae · ba6b6ae
1 parent 16079d1
commit ba6b6ae
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 17 deletions.
diff --git a/packages/example/src/Screens/AuthFlow.tsx b/packages/example/src/Screens/AuthFlow.tsx
@@ -76,7 +76,7 @@ export default function SimpleStackScreen({ navigation }: Props) {
   }, []);
 
   navigation.setOptions({
-    header: null,
+    headerShown: false,
   });
 
   return (

diff --git a/packages/example/src/Screens/CompatAPI.tsx b/packages/example/src/Screens/CompatAPI.tsx
@@ -96,7 +96,7 @@ export default function CompatStackScreen({
   navigation: StackNavigationProp<{}>;
 }) {
   navigation.setOptions({
-    header: null,
+    headerShown: false,
   });
 
   return <CompatStack />;

diff --git a/packages/example/src/Screens/ModalPresentationStack.tsx b/packages/example/src/Screens/ModalPresentationStack.tsx
@@ -89,7 +89,7 @@ type Props = {
 
 export default function SimpleStackScreen({ navigation, options }: Props) {
   navigation.setOptions({
-    header: null,
+    headerShown: false,
   });
 
   return (

diff --git a/packages/example/src/Screens/SimpleStack.tsx b/packages/example/src/Screens/SimpleStack.tsx
@@ -83,7 +83,7 @@ type Props = {
 
 export default function SimpleStackScreen({ navigation, options }: Props) {
   navigation.setOptions({
-    header: null,
+    headerShown: false,
   });
 
   return (

diff --git a/packages/stack/src/types.tsx b/packages/stack/src/types.tsx
@@ -241,7 +241,12 @@ export type StackNavigationOptions = StackHeaderOptions &
      * Function that given `HeaderProps` returns a React Element to display as a header.
      * Setting to `null` hides header.
      */
-    header?: null | ((props: StackHeaderProps) => React.ReactNode);
+    header?: (props: StackHeaderProps) => React.ReactNode;
+    /**
+     * Whether to show the header. The header is shown by default unless `headerMode` was set to `none`.
+     * Setting this to `false` hides the header.
+     */
+    headerShown?: boolean;
     /**
      * Whether a shadow is visible for the card during transitions. Defaults to `true`.
      */

diff --git a/packages/stack/src/views/Header/HeaderContainer.tsx b/packages/stack/src/views/Header/HeaderContainer.tsx
@@ -77,11 +77,11 @@ export default function HeaderContainer({
         const isHeaderStatic =
           mode === 'float'
             ? (previousScene &&
-                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.headerShown === false)
             : false;
 
         const props = {
@@ -121,13 +121,13 @@ export default function HeaderContainer({
                   : null
               }
             >
-              {options.header !== undefined ? (
-                options.header === null ? null : (
+              {options.headerShown !== false ? (
+                options.header !== undefined ? (
                   options.header(props)
+                ) : (
+                  <Header {...props} />
                 )
-              ) : (
-                <Header {...props} />
-              )}
+              ) : null}
             </View>
           </NavigationContext.Provider>
         );

diff --git a/packages/stack/src/views/Stack/Stack.tsx b/packages/stack/src/views/Stack/Stack.tsx
@@ -353,7 +353,7 @@ export default class Stack extends React.Component<Props, State> {
                 : 0;
 
             const {
-              header,
+              headerShown,
               headerTransparent,
               cardTransparent,
               cardShadowEnabled,
@@ -430,9 +430,9 @@ export default class Stack extends React.Component<Props, State> {
                   onPageChangeCancel={onPageChangeCancel}
                   gestureResponseDistance={gestureResponseDistance}
                   floatingHeaderHeight={floatingHeaderHeights[route.key]}
-                  hasCustomHeader={header === null}
                   getPreviousRoute={getPreviousRoute}
                   headerMode={headerMode}
+                  headerShown={headerShown}
                   headerTransparent={headerTransparent}
                   renderHeader={renderHeader}
                   renderScene={renderScene}

diff --git a/packages/stack/src/views/Stack/StackItem.tsx b/packages/stack/src/views/Stack/StackItem.tsx
@@ -53,9 +53,9 @@ type Props = TransitionPreset & {
   };
   gestureVelocityImpact?: number;
   headerMode: StackHeaderMode;
+  headerShown?: boolean;
   headerTransparent?: boolean;
   floatingHeaderHeight: number;
-  hasCustomHeader: boolean;
 };
 
 export default class StackItem extends React.PureComponent<Props> {
@@ -114,7 +114,7 @@ export default class StackItem extends React.PureComponent<Props> {
       gestureResponseDistance,
       gestureVelocityImpact,
       floatingHeaderHeight,
-      hasCustomHeader,
+      headerShown,
       getPreviousRoute,
       headerMode,
       headerTransparent,
@@ -153,7 +153,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 !== false
             ? { marginTop: floatingHeaderHeight }
             : null
         }