refactor: upgrade nav dependencies

e2e/backup.e2e.js

@@ -121,6 +121,7 @@ d('Backup', () => {
 			element(by.id(`Tag-${tag}`).withAncestor(by.id('ActivityTags'))),
 		).toBeVisible();
 		await element(by.id('NavigationClose')).atIndex(0).tap();
+		await sleep(200); // animation
 
 		// check widgets
 		await element(by.id('WalletsScrollView')).scroll(300, 'down', NaN, 0.85);

e2e/channels.e2e.js

@@ -107,7 +107,7 @@ d('Transfer', () => {
 		let { label } = await element(
 			by.id('SpendingAdvancedNumberField'),
 		).getAttributes();
-		const lspBalance = Number.parseInt(label);
+		const lspBalance = Number.parseInt(label, 10);
 		jestExpect(lspBalance).toBeGreaterThan(440);
 		jestExpect(lspBalance).toBeLessThan(460);
 		await element(by.id('SpendingAdvancedNumberField')).tap();

ios/Podfile.lock

@@ -31,9 +31,9 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - MMKV (1.3.7):
-    - MMKVCore (~> 1.3.7)
-  - MMKVCore (1.3.7)
+  - MMKV (2.0.0):
+    - MMKVCore (~> 2.0.0)
+  - MMKVCore (2.0.0)
   - OpenSSL-Universal (3.3.2000)
   - RCT-Folly (2024.01.01.00):
     - boost
@@ -1423,7 +1423,7 @@ PODS:
     - Yoga
   - react-native-restart (0.0.27):
     - React-Core
-  - react-native-safe-area-context (4.10.9):
+  - react-native-safe-area-context (5.0.0):
     - React-Core
   - react-native-skia (1.3.11):
     - DoubleConversion
@@ -1842,7 +1842,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNScreens (3.34.0):
+  - RNScreens (4.3.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2216,8 +2216,8 @@ SPEC CHECKSUMS:
   hermes-engine: 3b6e0717ca847e2fc90a201e59db36caf04dee88
   lottie-ios: e047b1d2e6239b787cc5e9755b988869cf190494
   lottie-react-native: 31197e5c65aa7cb59e6affcefaf901588bb708c4
-  MMKV: 36a22a9ec84c9bb960613a089ddf6f48be9312b0
-  MMKVCore: 158e61c8516401a9fac730288acb29e6fc19bbf9
+  MMKV: f7d1d5945c8765f97f39c3d121f353d46735d801
+  MMKVCore: c04b296010fcb1d1638f2c69405096aac12f6390
   OpenSSL-Universal: b60a3702c9fea8b3145549d421fdb018e53ab7b4
   RCT-Folly: 4464f4d875961fce86008d45f4ecf6cef6de0740
   RCTDeprecation: 34cbf122b623037ea9facad2e92e53434c5c7422
@@ -2259,7 +2259,7 @@ SPEC CHECKSUMS:
   react-native-quick-base64: f98f17faf04c9779faf726921a2b389d4775e8b6
   react-native-quick-crypto: 12de8e1666ad3dab6339418c14f4a6de71716194
   react-native-restart: 7595693413fe3ca15893702f2c8306c62a708162
-  react-native-safe-area-context: ab8f4a3d8180913bd78ae75dd599c94cce3d5e9a
+  react-native-safe-area-context: ab7beb734b0f9f79f55ae144a6c946a6422f55d6
   react-native-skia: 68be40d53b1957f6c276cec19bcd50d293173868
   react-native-tcp-socket: e724380c910c2e704816ec817ed28f1342246ff7
   React-nativeconfig: 57781b79e11d5af7573e6f77cbf1143b71802a6d
@@ -2301,7 +2301,7 @@ SPEC CHECKSUMS:
   RNQuickAction: 6d404a869dc872cde841ad3147416a670d13fa93
   RNReactNativeHapticFeedback: ec56a5f81c3941206fd85625fa669ffc7b4545f9
   RNReanimated: 74413c59c47123d7144db601d065627c75c746a3
-  RNScreens: 19719a9c326e925498ac3b2d35c4e50fe87afc06
+  RNScreens: b03d696c70cc5235ce4587fcc27ae1a93a48f98c
   RNShare: 554a91f5cfbe4adac4cfe3654826ee8b299fe365
   RNSVG: 43b64ed39c14ce830d840903774154ca0c1f27ec
   RNZipArchive: 7bb4c70d6aa2dd235212c0a4a3de0a4e237e2569

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "start": "react-native start",
     "android": "react-native run-android",
-    "ios": "react-native run-ios --simulator='iPhone 15'",
+    "ios": "react-native run-ios --simulator='iPhone 16'",
     "ios:se": "react-native run-ios --simulator='iPhone SE (3rd generation)'",
     "test": "jest --forceExit",
     "test:coverage": "jest --forceExit --coverage=true",
@@ -42,8 +42,8 @@
     "@react-native-clipboard/clipboard": "1.14.1",
     "@react-native-community/blur": "4.4.0",
     "@react-native-community/netinfo": "11.3.1",
-    "@react-navigation/native": "6.1.18",
-    "@react-navigation/native-stack": "6.10.1",
+    "@react-navigation/native": "7.0.14",
+    "@react-navigation/native-stack": "7.2.0",
     "@reduxjs/toolkit": "2.2.6",
     "@shopify/react-native-skia": "1.3.11",
     "@synonymdev/blocktank-lsp-http-client": "2.2.0",
@@ -104,8 +104,8 @@
     "react-native-reanimated": "3.15.0",
     "react-native-reanimated-carousel": "3.5.1",
     "react-native-restart": "0.0.27",
-    "react-native-safe-area-context": "4.10.9",
-    "react-native-screens": "3.34.0",
+    "react-native-safe-area-context": "5.0.0",
+    "react-native-screens": "4.3.0",
     "react-native-share": "10.2.0",
     "react-native-svg": "15.2.0",
     "react-native-tcp-socket": "6.0.6",

src/components/BottomSheetNavigationHeader.tsx

@@ -5,10 +5,17 @@ import NavigationHeader, {
 	NavigationHeaderProps,
 } from '../components/NavigationHeader';
 
-type Props = Omit<NavigationHeaderProps, 'size'> & { title: string };
+type Props = Omit<NavigationHeaderProps, 'size' | 'showCloseButton'> & {
+	title: string;
+};
 
 const BottomSheetNavigationHeader = (props: Props): ReactElement => (
-	<NavigationHeader size="sm" style={styles.container} {...props} />
+	<NavigationHeader
+		style={styles.container}
+		size="sm"
+		{...props}
+		showCloseButton={false}
+	/>
 );
 
 const styles = StyleSheet.create({

src/components/BottomSheetScreen.tsx

@@ -19,7 +19,7 @@ const BottomSheetScreen = ({
 	image,
 	continueText,
 	cancelText,
-	displayBackButton = true,
+	showBackButton = true,
 	isLoading,
 	testID,
 	onCancel,
@@ -31,7 +31,7 @@ const BottomSheetScreen = ({
 	image: ImageSourcePropType;
 	continueText: string;
 	cancelText?: string;
-	displayBackButton?: boolean;
+	showBackButton?: boolean;
 	isLoading?: boolean;
 	testID?: string;
 	onCancel?: () => void;
@@ -50,7 +50,7 @@ const BottomSheetScreen = ({
 		<View style={styles.root} testID={testID} onLayout={onLayout}>
 			<BottomSheetNavigationHeader
 				title={navTitle}
-				displayBackButton={displayBackButton}
+				showBackButton={showBackButton}
 			/>
 			<View style={styles.content}>
 				<View

src/components/InfoScreen.tsx

@@ -13,28 +13,28 @@ const InfoScreen = ({
 	description,
 	image,
 	buttonText,
-	displayBackButton = true,
+	showBackButton = true,
+	showCloseButton = true,
 	testID,
-	onClosePress,
 	onButtonPress,
 }: {
 	navTitle: string;
 	title: string | ReactElement;
 	description: string | ReactElement;
 	image: ImageSourcePropType;
 	buttonText: string;
-	displayBackButton?: boolean;
+	showBackButton?: boolean;
+	showCloseButton?: boolean;
 	testID?: string;
-	onClosePress?: () => void;
 	onButtonPress: () => void;
 }): ReactElement => {
 	return (
 		<ThemedView style={styles.root}>
 			<SafeAreaInset type="top" />
 			<NavigationHeader
 				title={navTitle}
-				displayBackButton={displayBackButton}
-				onClosePress={onClosePress}
+				showBackButton={showBackButton}
+				showCloseButton={showCloseButton}
 			/>
 			<View style={styles.content} testID={testID}>
 				<Display>{title}</Display>

src/components/NavigationHeader.tsx

@@ -12,6 +12,7 @@ import { Subtitle, Title } from '../styles/text';
 import { BackIcon, XIcon } from '../styles/icons';
 import { Keyboard } from '../hooks/keyboard';
 import { Pressable } from '../styles/components';
+import { RootNavigationProp } from '../navigation/types';
 
 export const HEADER_HEIGHT = 46;
 
@@ -49,38 +50,55 @@ const ACTION_WIDTH = 45;
 export type NavigationHeaderProps = {
 	title?: string;
 	icon?: ReactElement;
-	displayBackButton?: boolean;
-	navigateBack?: boolean;
+	showBackButton?: boolean;
+	showCloseButton?: boolean;
 	actionIcon?: ReactElement;
 	size?: 'lg' | 'sm';
 	style?: StyleProp<ViewStyle>;
 	onBackPress?: () => void;
-	onClosePress?: () => void;
 	onActionPress?: () => void;
 };
 
 const NavigationHeader = ({
 	title = ' ',
 	icon,
-	displayBackButton = true,
-	navigateBack = true,
+	showBackButton = true,
+	showCloseButton = true,
 	size = 'lg',
 	actionIcon,
 	style,
 	onBackPress,
-	onClosePress,
 	onActionPress,
 }: NavigationHeaderProps): ReactElement => {
-	const navigation = useNavigation<any>();
+	const navigation = useNavigation<RootNavigationProp>();
 
 	const handleBackPress = useCallback(async () => {
-		onBackPress?.();
-		if (navigateBack) {
-			// make sure Keyboard is closed before navigating back to prevent layout bugs
-			await Keyboard.dismiss();
+		// make sure Keyboard is closed before navigating back to prevent layout bugs
+		await Keyboard.dismiss();
+
+		if (onBackPress) {
+			onBackPress();
+		} else {
 			navigation.goBack();
 		}
-	}, [navigation, navigateBack, onBackPress]);
+	}, [navigation, onBackPress]);
+
+	const handleClosePress = useCallback(async () => {
+		const parent = navigation.getParent?.();
+		const state = navigation.getState?.();
+		const routeNames = state?.routes.map((route) => route.name);
+		const hasWalletRoute = routeNames?.includes('Wallet');
+
+		// make sure Keyboard is closed before navigating back to prevent layout bugs
+		await Keyboard.dismiss();
+
+		if (hasWalletRoute || parent) {
+			// for nested navigators, pop to top of parent navigator
+			navigation.popTo('Wallet', { screen: 'Wallets' });
+		} else {
+			navigation.popToTop();
+		}
+	}, [navigation]);
 
 	const Text = useMemo(() => (size === 'lg' ? Title : Subtitle), [size]);
 	const container = useMemo(
@@ -92,18 +110,20 @@ const NavigationHeader = ({
 		[size, style],
 	);
 
-	// TODO: this doesn't have the right navigator
-	const showBack = Boolean(displayBackButton && navigation.canGoBack());
+	const state = navigation.getState?.();
+	const parent = navigation.getParent?.();
+	const canGoBack = state?.routes.length > 1 || parent;
+	const showBack = showBackButton && canGoBack;
 
 	const numberOfActions = useMemo(() => {
-		if (actionIcon && onClosePress) {
+		if (actionIcon && showCloseButton) {
 			return 2;
-		} else if (showBack || actionIcon || onClosePress) {
+		} else if (showBack || actionIcon || showCloseButton) {
 			return 1;
 		} else {
 			return 0;
 		}
-	}, [actionIcon, onClosePress, showBack]);
+	}, [actionIcon, showBack, showCloseButton]);
 
 	const actionColumn = useMemo(
 		() => [
@@ -146,11 +166,11 @@ const NavigationHeader = ({
 						{actionIcon}
 					</ActionButton>
 				)}
-				{onClosePress && (
+				{showCloseButton && (
 					<ActionButton
 						style={styles.actionRight}
 						testID="NavigationClose"
-						onPress={onClosePress}>
+						onPress={handleClosePress}>
 						<XIcon width={24} height={24} />
 					</ActionButton>
 				)}

src/components/OnboardingScreen.tsx

@@ -14,11 +14,11 @@ const OnboardingScreen = ({
 	image,
 	imagePosition,
 	buttonText,
-	displayBackButton = true,
+	showBackButton = true,
+	showCloseButton = true,
 	disableNav = false,
 	mirrorImage = false,
 	testID,
-	onClosePress,
 	onButtonPress,
 }: {
 	navTitle?: string;
@@ -27,11 +27,11 @@ const OnboardingScreen = ({
 	image: ImageSourcePropType;
 	imagePosition?: 'center' | 'bottom';
 	buttonText: string;
-	displayBackButton?: boolean;
+	showBackButton?: boolean;
+	showCloseButton?: boolean;
 	disableNav?: boolean;
 	mirrorImage?: boolean;
 	testID?: string;
-	onClosePress?: () => void;
 	onButtonPress: () => void;
 }): ReactElement => {
 	return (
@@ -42,8 +42,8 @@ const OnboardingScreen = ({
 			) : (
 				<NavigationHeader
 					title={navTitle}
-					displayBackButton={displayBackButton}
-					onClosePress={onClosePress}
+					showBackButton={showBackButton}
+					showCloseButton={showCloseButton}
 				/>
 			)}
 

src/components/PinPad.tsx

@@ -54,7 +54,10 @@ const PinPad = ({
 		<ThemedView style={styles.root}>
 			<View style={styles.header}>
 				<SafeAreaInset type="top" />
-				<NavigationHeader displayBackButton={showBackNavigation} />
+				<NavigationHeader
+					showBackButton={showBackNavigation}
+					showCloseButton={false}
+				/>
 			</View>
 			<View style={styles.container} testID="PinPad">
 				<View style={styles.logo}>