From ba6b6ae025de2d586229fa8b09b9dd5732af94bd Mon Sep 17 00:00:00 2001 From: "satyajit.happy" Date: Sun, 6 Oct 2019 15:53:18 +0200 Subject: [PATCH] feat: drop header: null in favor of more explitit headerShown option --- packages/example/src/Screens/AuthFlow.tsx | 2 +- packages/example/src/Screens/CompatAPI.tsx | 2 +- .../example/src/Screens/ModalPresentationStack.tsx | 2 +- packages/example/src/Screens/SimpleStack.tsx | 2 +- packages/stack/src/types.tsx | 7 ++++++- .../stack/src/views/Header/HeaderContainer.tsx | 14 +++++++------- packages/stack/src/views/Stack/Stack.tsx | 4 ++-- packages/stack/src/views/Stack/StackItem.tsx | 6 +++--- 8 files changed, 22 insertions(+), 17 deletions(-) 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 }