@@ -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,55 @@ 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+ const state = navigation . getState ?.( ) ;
89+ const routeNames = state ?. routes . map ( ( route ) => route . name ) ;
90+ const hasWalletRoute = routeNames ?. includes ( 'Wallet' ) ;
91+
92+ // make sure Keyboard is closed before navigating back to prevent layout bugs
93+ await Keyboard . dismiss ( ) ;
94+
95+ if ( hasWalletRoute || parent ) {
96+ // for nested navigators, pop to top of parent navigator
97+ navigation . popTo ( 'Wallet' , { screen : 'Wallets' } ) ;
98+ } else {
99+ navigation . popToTop ( ) ;
100+ }
101+ } , [ navigation ] ) ;
84102
85103 const Text = useMemo ( ( ) => ( size === 'lg' ? Title : Subtitle ) , [ size ] ) ;
86104 const container = useMemo (
@@ -92,18 +110,20 @@ const NavigationHeader = ({
92110 [ size , style ] ,
93111 ) ;
94112
95- // TODO: this doesn't have the right navigator
96- const showBack = Boolean ( displayBackButton && navigation . canGoBack ( ) ) ;
113+ const state = navigation . getState ?.( ) ;
114+ const parent = navigation . getParent ?.( ) ;
115+ const canGoBack = state ?. routes . length > 1 || parent ;
116+ const showBack = showBackButton && canGoBack ;
97117
98118 const numberOfActions = useMemo ( ( ) => {
99- if ( actionIcon && onClosePress ) {
119+ if ( actionIcon && showCloseButton ) {
100120 return 2 ;
101- } else if ( showBack || actionIcon || onClosePress ) {
121+ } else if ( showBack || actionIcon || showCloseButton ) {
102122 return 1 ;
103123 } else {
104124 return 0 ;
105125 }
106- } , [ actionIcon , onClosePress , showBack ] ) ;
126+ } , [ actionIcon , showBack , showCloseButton ] ) ;
107127
108128 const actionColumn = useMemo (
109129 ( ) => [
@@ -146,11 +166,11 @@ const NavigationHeader = ({
146166 { actionIcon }
147167 </ ActionButton >
148168 ) }
149- { onClosePress && (
169+ { showCloseButton && (
150170 < ActionButton
151171 style = { styles . actionRight }
152172 testID = "NavigationClose"
153- onPress = { onClosePress } >
173+ onPress = { handleClosePress } >
154174 < XIcon width = { 24 } height = { 24 } />
155175 </ ActionButton >
156176 ) }
0 commit comments