diff --git a/packages/example/src/Screens/AuthFlow.tsx b/packages/example/src/Screens/AuthFlow.tsx
index cbdbfe9d..bee20ef8 100644
--- 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
index b66ca713..a10489fe 100644
--- 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 ;
diff --git a/packages/example/src/Screens/ModalPresentationStack.tsx b/packages/example/src/Screens/ModalPresentationStack.tsx
index 4c58dca8..ef92f4e1 100644
--- 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
index 1f7c010d..ad07b640 100644
--- 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
index 8d0cbbbb..f80de230 100644
--- 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
index 562c75e6..d71072ba 100644
--- 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)
+ ) : (
+
)
- ) : (
-
- )}
+ ) : null}
);
diff --git a/packages/stack/src/views/Stack/Stack.tsx b/packages/stack/src/views/Stack/Stack.tsx
index 68586b9c..d1cdc763 100755
--- 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 {
: 0;
const {
- header,
+ headerShown,
headerTransparent,
cardTransparent,
cardShadowEnabled,
@@ -430,9 +430,9 @@ export default class Stack extends React.Component {
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
index 218bfbd1..016d24b1 100644
--- 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 {
@@ -114,7 +114,7 @@ export default class StackItem extends React.PureComponent {
gestureResponseDistance,
gestureVelocityImpact,
floatingHeaderHeight,
- hasCustomHeader,
+ headerShown,
getPreviousRoute,
headerMode,
headerTransparent,
@@ -153,7 +153,7 @@ export default class StackItem extends React.PureComponent {
importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
pointerEvents="box-none"
containerStyle={
- headerMode === 'float' && !headerTransparent && !hasCustomHeader
+ headerMode === 'float' && !headerTransparent && headerShown !== false
? { marginTop: floatingHeaderHeight }
: null
}