From 0375864e5a838f984b9fe04a81ab18a0744ac474 Mon Sep 17 00:00:00 2001 From: "satyajit.happy" Date: Sun, 6 Oct 2019 15:37:08 +0200 Subject: [PATCH] feat: add a more explicit headerShown option --- example/src/FullScreen.tsx | 2 +- example/src/HeaderPreset.tsx | 2 +- example/src/ImmediateTransition.tsx | 2 +- example/src/ModalPresentation.tsx | 2 +- example/src/RevealStack.tsx | 2 +- example/src/SimpleStack.tsx | 2 +- src/types.tsx | 1 + src/views/Header/HeaderContainer.tsx | 25 ++++++++++++++++--------- src/views/Stack/Stack.tsx | 3 ++- src/views/Stack/StackItem.tsx | 6 +++--- 10 files changed, 28 insertions(+), 19 deletions(-) diff --git a/example/src/FullScreen.tsx b/example/src/FullScreen.tsx index 596b07a45..9c7cb44f5 100644 --- 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 index 0952d0f9d..a817e1543 100644 --- a/example/src/HeaderPreset.tsx +++ b/example/src/HeaderPreset.tsx @@ -79,8 +79,8 @@ class ScreenWithLongTitle extends React.Component { class ScreenWithNoHeader extends React.Component { static navigationOptions = { - header: null, title: 'No Header', + headerShown: false, }; render() { diff --git a/example/src/ImmediateTransition.tsx b/example/src/ImmediateTransition.tsx index ee9132028..9d09e08e5 100644 --- 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 index 7647e94f7..26e60d35e 100644 --- a/example/src/ModalPresentation.tsx +++ b/example/src/ModalPresentation.tsx @@ -31,7 +31,7 @@ class ListScreen extends React.Component { class DetailsScreen extends React.Component { static navigationOptions = { - header: null, + headerShown: false, }; render() { diff --git a/example/src/RevealStack.tsx b/example/src/RevealStack.tsx index 36396ed36..0a3cacda3 100644 --- a/example/src/RevealStack.tsx +++ b/example/src/RevealStack.tsx @@ -117,7 +117,7 @@ class DetailsScreen extends React.Component { class HeaderlessScreen extends React.Component { static navigationOptions = { - header: null, + headerShown: false, }; componentDidMount() { diff --git a/example/src/SimpleStack.tsx b/example/src/SimpleStack.tsx index 138099e91..e022c4d3b 100644 --- a/example/src/SimpleStack.tsx +++ b/example/src/SimpleStack.tsx @@ -125,7 +125,7 @@ class DetailsScreen extends React.Component { class HeaderlessScreen extends React.Component { static navigationOptions = { - header: null, + headerShown: false, }; componentDidMount() { diff --git a/src/types.tsx b/src/types.tsx index 6f79dd175..e90e5f605 100644 --- a/src/types.tsx +++ b/src/types.tsx @@ -114,6 +114,7 @@ export type NavigationStackOptions = HeaderOptions & Partial & { 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 index bf6370850..8ff206959 100644 --- 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 - ) : ( -
- )} + {options.headerShown !== false ? ( + options.header !== undefined ? ( + typeof options.header === 'function' ? ( + options.header(props) + ) : ( + options.header + ) + ) : ( +
+ ) + ) : null} ); diff --git a/src/views/Stack/Stack.tsx b/src/views/Stack/Stack.tsx index 9c54547ec..479998afe 100755 --- a/src/views/Stack/Stack.tsx +++ b/src/views/Stack/Stack.tsx @@ -346,6 +346,7 @@ export default class Stack extends React.Component { const { header, + headerShown, headerTransparent, cardTransparent, cardShadowEnabled, @@ -419,7 +420,7 @@ export default class Stack extends React.Component { 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 index b1dff0fc0..c9f8ad810 100644 --- 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 { onPageChangeCancel, gestureResponseDistance, floatingHeaderHeight, - hasCustomHeader, + headerShown, getPreviousRoute, headerMode, headerTransparent, @@ -149,7 +149,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 ? { marginTop: floatingHeaderHeight } : null }