@@ -12,6 +12,7 @@ import { Subtitle, Title } from '../styles/text';
1212import { BackIcon , XIcon } from '../styles/icons' ;
1313import { Keyboard } from '../hooks/keyboard' ;
1414import { Pressable } from '../styles/components' ;
15+ import { RootNavigationProp } from '../navigation/types' ;
1516
1617export const HEADER_HEIGHT = 46 ;
1718
@@ -49,38 +50,52 @@ const ACTION_WIDTH = 45;
4950export type NavigationHeaderProps = {
5051 title ?: string ;
5152 icon ?: ReactElement ;
52- displayBackButton ?: boolean ;
53- navigateBack ?: boolean ;
53+ showBackButton ?: boolean ;
54+ showCloseButton ?: boolean ;
5455 actionIcon ?: ReactElement ;
5556 size ?: 'lg' | 'sm' ;
5657 style ?: StyleProp < ViewStyle > ;
5758 onBackPress ?: ( ) => void ;
58- onClosePress ?: ( ) => void ;
5959 onActionPress ?: ( ) => void ;
6060} ;
6161
6262const NavigationHeader = ( {
6363 title = ' ' ,
6464 icon,
65- displayBackButton = true ,
66- navigateBack = true ,
65+ showBackButton = true ,
66+ showCloseButton = true ,
6767 size = 'lg' ,
6868 actionIcon,
6969 style,
7070 onBackPress,
71- onClosePress,
7271 onActionPress,
7372} : NavigationHeaderProps ) : ReactElement => {
74- const navigation = useNavigation < any > ( ) ;
73+ const navigation = useNavigation < RootNavigationProp > ( ) ;
7574
7675 const handleBackPress = useCallback ( async ( ) => {
77- onBackPress ?.( ) ;
78- if ( navigateBack ) {
79- // make sure Keyboard is closed before navigating back to prevent layout bugs
80- await Keyboard . dismiss ( ) ;
76+ // make sure Keyboard is closed before navigating back to prevent layout bugs
77+ await Keyboard . dismiss ( ) ;
78+
79+ if ( onBackPress ) {
80+ onBackPress ( ) ;
81+ } else {
8182 navigation . goBack ( ) ;
8283 }
83- } , [ navigation , navigateBack , onBackPress ] ) ;
84+ } , [ navigation , onBackPress ] ) ;
85+
86+ const handleClosePress = useCallback ( async ( ) => {
87+ const parent = navigation . getParent ?.( ) ;
88+
89+ // make sure Keyboard is closed before navigating back to prevent layout bugs
90+ await Keyboard . dismiss ( ) ;
91+
92+ if ( parent ) {
93+ // for nested navigators, pop to top of parent navigator
94+ navigation . popTo ( 'Wallet' , { screen : 'Wallets' } ) ;
95+ } else {
96+ navigation . popToTop ( ) ;
97+ }
98+ } , [ navigation ] ) ;
8499
85100 const Text = useMemo ( ( ) => ( size === 'lg' ? Title : Subtitle ) , [ size ] ) ;
86101 const container = useMemo (
@@ -92,18 +107,20 @@ const NavigationHeader = ({
92107 [ size , style ] ,
93108 ) ;
94109
95- // TODO: this doesn't have the right navigator
96- const showBack = Boolean ( displayBackButton && navigation . canGoBack ( ) ) ;
110+ const state = navigation . getState ?.( ) ;
111+ const parent = navigation . getParent ?.( ) ;
112+ const canGoBack = state ?. routes . length > 1 || parent ;
113+ const showBack = showBackButton && canGoBack ;
97114
98115 const numberOfActions = useMemo ( ( ) => {
99- if ( actionIcon && onClosePress ) {
116+ if ( actionIcon && showCloseButton ) {
100117 return 2 ;
101- } else if ( showBack || actionIcon || onClosePress ) {
118+ } else if ( showBack || actionIcon || showCloseButton ) {
102119 return 1 ;
103120 } else {
104121 return 0 ;
105122 }
106- } , [ actionIcon , onClosePress , showBack ] ) ;
123+ } , [ actionIcon , showBack , showCloseButton ] ) ;
107124
108125 const actionColumn = useMemo (
109126 ( ) => [
@@ -146,11 +163,11 @@ const NavigationHeader = ({
146163 { actionIcon }
147164 </ ActionButton >
148165 ) }
149- { onClosePress && (
166+ { showCloseButton && (
150167 < ActionButton
151168 style = { styles . actionRight }
152169 testID = "NavigationClose"
153- onPress = { onClosePress } >
170+ onPress = { handleClosePress } >
154171 < XIcon width = { 24 } height = { 24 } />
155172 </ ActionButton >
156173 ) }
0 commit comments