chore: migrate StackNavigationProp types to native-stack equivalents

.storybook/decorators/withNavigation.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { NavigationContainer } from '@react-navigation/native';
 
-const StoryBookStack = createStackNavigator();
+const StoryBookStack = createNativeStackNavigator();
 
 const withNavigation = (story: any) => {
   const StorybookScreen = () => story();

app/components/Nav/Main/MainNavigator.test.tsx

@@ -10,16 +10,6 @@ jest.mock('react-native-device-info', () => ({
   getVersion: jest.fn(() => '7.72.0'),
 }));
 
-jest.mock('@react-navigation/stack', () => ({
-  createStackNavigator: jest.fn().mockReturnValue({
-    Navigator: 'Navigator',
-    Screen: 'Screen',
-  }),
-  TransitionPresets: {
-    ModalSlideFromBottomIOS: {},
-  },
-}));
-
 jest.mock('@react-navigation/native-stack', () => ({
   createNativeStackNavigator: jest.fn().mockReturnValue({
     Navigator: 'Navigator',

app/components/UI/Assets/PriceAlerts/Views/CreatePriceAlertView/CreatePriceAlertView.tsx

@@ -18,7 +18,7 @@ import {
   useRoute,
   type RouteProp,
 } from '@react-navigation/native';
-import type { StackNavigationProp } from '@react-navigation/stack';
+import type { AppStackNavigationProp } from '../../../../../../core/NavigationService/types';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import {
   Box,
@@ -107,8 +107,7 @@ const viewStyles = StyleSheet.create({
 const CreatePriceAlertView: React.FC = () => {
   const tw = useTailwind();
   const { colors, brandColors } = useTheme();
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const navigation = useNavigation<StackNavigationProp<any>>();
+  const navigation = useNavigation<AppStackNavigationProp>();
   const route =
     useRoute<
       RouteProp<

app/components/UI/Assets/PriceAlerts/Views/ManagePriceAlertsView/ManagePriceAlertsView.tsx

@@ -18,7 +18,7 @@ import {
   useRoute,
   type RouteProp,
 } from '@react-navigation/native';
-import type { StackNavigationProp } from '@react-navigation/stack';
+import type { AppStackNavigationProp } from '../../../../../../core/NavigationService/types';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import {
   Box,
@@ -62,8 +62,7 @@ const ManagePriceAlertsView: React.FC = () => {
   const { colors, brandColors } = useTheme();
   const queryClient = useQueryClient();
   const { toastRef } = useContext(ToastContext);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const navigation = useNavigation<StackNavigationProp<any>>();
+  const navigation = useNavigation<AppStackNavigationProp>();
   const route =
     useRoute<
       RouteProp<

app/components/UI/Bridge/components/BatchSellFinalReviewModal/index.tsx

@@ -1,5 +1,5 @@
 import { useNavigation } from '@react-navigation/native';
-import { StackNavigationProp } from '@react-navigation/stack';
+import type { AppStackNavigationProp } from '../../../../../core/NavigationService/types';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { Pressable } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
@@ -290,8 +290,7 @@ function NetworkFeeRow({
 
 export function BatchSellFinalReviewModal() {
   const dispatch = useDispatch();
-  const navigation =
-    useNavigation<StackNavigationProp<Record<string, object | undefined>>>();
+  const navigation = useNavigation<AppStackNavigationProp>();
   const selectedTokens = useSelector(selectBatchSellSourceTokens);
   const isSubmittingTx = useSelector(selectIsSubmittingTx);
   const batchSellQuoteData = useBatchSellQuoteData({

app/components/UI/Bridge/components/BatchSellMinimumReceivedInfoModal/index.tsx

@@ -1,5 +1,5 @@
 import { useNavigation } from '@react-navigation/native';
-import { StackNavigationProp } from '@react-navigation/stack';
+import type { AppStackNavigationProp } from '../../../../../core/NavigationService/types';
 import React from 'react';
 import {
   BottomSheet,
@@ -18,8 +18,7 @@ import { BatchSellMinimumReceivedInfoModalParams } from './BatchSellMinimumRecei
 import { useElevatedSurface } from '../../../../../util/theme/themeUtils';
 
 export function BatchSellMinimumReceivedInfoModal() {
-  const navigation =
-    useNavigation<StackNavigationProp<Record<string, object | undefined>>>();
+  const navigation = useNavigation<AppStackNavigationProp>();
   const { sourceModal } = useParams<BatchSellMinimumReceivedInfoModalParams>();
   const handleBack = sourceModal
     ? () => navigation.replace(sourceModal.screen, sourceModal.params)

app/components/UI/Bridge/components/BatchSellNetworkFeeInfoModal/index.tsx

@@ -1,5 +1,5 @@
 import { useNavigation } from '@react-navigation/native';
-import { StackNavigationProp } from '@react-navigation/stack';
+import type { AppStackNavigationProp } from '../../../../../core/NavigationService/types';
 import React from 'react';
 import {
   BottomSheet,
@@ -18,8 +18,7 @@ import { BatchSellNetworkFeeInfoModalParams } from './BatchSellNetworkFeeInfoMod
 import { useElevatedSurface } from '../../../../../util/theme/themeUtils';
 
 export function BatchSellNetworkFeeInfoModal() {
-  const navigation =
-    useNavigation<StackNavigationProp<Record<string, object | undefined>>>();
+  const navigation = useNavigation<AppStackNavigationProp>();
   const { sourceModal } = useParams<BatchSellNetworkFeeInfoModalParams>();
   const handleBack = sourceModal
     ? () => navigation.replace(sourceModal.screen, sourceModal.params)

app/components/UI/Bridge/components/BatchSellQuoteDetailsModal/index.tsx

@@ -1,5 +1,5 @@
 import { useNavigation } from '@react-navigation/native';
-import { StackNavigationProp } from '@react-navigation/stack';
+import type { AppStackNavigationProp } from '../../../../../core/NavigationService/types';
 import React, { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import {
@@ -20,8 +20,7 @@ import { strings } from '../../../../../../locales/i18n';
 import { useElevatedSurface } from '../../../../../util/theme/themeUtils';
 
 export function BatchSellQuoteDetailsModal() {
-  const navigation =
-    useNavigation<StackNavigationProp<Record<string, object | undefined>>>();
+  const navigation = useNavigation<AppStackNavigationProp>();
   const sourceTokens = useSelector(selectBatchSellSourceTokens);
   const surfaceClass = useElevatedSurface();
   const batchSellQuoteData = useBatchSellQuoteData({

app/components/UI/Bridge/components/MissingPriceModal/index.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useNavigation } from '@react-navigation/native';
-import { StackNavigationProp } from '@react-navigation/stack';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
 import { MetaMetricsSwapsEventSource } from '@metamask/bridge-controller';
 import { strings } from '../../../../../../locales/i18n';
 import { useParams } from '../../../../../util/navigation/navUtils';
@@ -32,8 +32,7 @@ export interface MissingPriceModalParams {
 }
 
 export const MissingPriceModal = () => {
-  const navigation =
-    useNavigation<StackNavigationProp<Record<string, object | undefined>>>();
+  const navigation = useNavigation<AppNavigationProp>();
   const sheetRef = useRef<BottomSheetRef>(null);
   const [loading, setLoading] = useState(false);
   const { location } = useParams<MissingPriceModalParams>();

app/components/UI/Bridge/components/TokenWarningModal/index.tsx

@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 // Must use this to make sure scroll works inside a bottom sheet on Android
 import { ScrollView } from 'react-native-gesture-handler';
 import { useNavigation } from '@react-navigation/native';
-import { StackNavigationProp } from '@react-navigation/stack';
+import type { AppStackNavigationProp } from '../../../../../core/NavigationService/types';
 import { MetaMetricsSwapsEventSource } from '@metamask/bridge-controller';
 import BottomSheet, {
   BottomSheetRef,
@@ -90,8 +90,7 @@ export const getTokenWarningContent = (
 };
 
 export const TokenWarningModal = () => {
-  const navigation =
-    useNavigation<StackNavigationProp<Record<string, object | undefined>>>();
+  const navigation = useNavigation<AppStackNavigationProp>();
   const sheetRef = useRef<BottomSheetRef>(null);
   const [loading, setLoading] = useState(false);
 

app/components/UI/Card/Views/CardHome/hooks/useCardHomeActions.ts

@@ -1,6 +1,7 @@
 import { useCallback, useContext } from 'react';
 import { Alert } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
+import type { AppNavigationProp } from '../../../../../../core/NavigationService/types';
 import { useSelector } from 'react-redux';
 import Engine from '../../../../../../core/Engine';
 import { useTheme } from '../../../../../../util/theme';
@@ -42,7 +43,7 @@ export function useCardHomeActions({
   primaryToken,
   isFrozen,
 }: UseCardHomeActionsParams) {
-  const navigation = useNavigation();
+  const navigation = useNavigation<AppNavigationProp>();
   const isAuthenticated = useSelector(selectIsCardAuthenticated);
   const { trackEvent, createEventBuilder } = useAnalytics();
   const theme = useTheme();

app/components/UI/DeFiPositions/DeFiProtocolPositionDetails.tsx

@@ -2,8 +2,8 @@ import React, { useCallback } from 'react';
 import { GroupedDeFiPositions } from '@metamask/assets-controllers';
 import { ImageSourcePropType, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { useNavigation, type ParamListBase } from '@react-navigation/native';
-import type { StackNavigationProp } from '@react-navigation/stack';
+import { useNavigation } from '@react-navigation/native';
+import type { AppStackNavigationProp } from '../../../core/NavigationService/types';
 import { HeaderStandard } from '@metamask/design-system-react-native';
 import styleSheet from './DeFiProtocolPositionDetails.styles';
 import { useParams } from '../../../util/navigation/navUtils';
@@ -35,7 +35,7 @@ interface DeFiProtocolPositionDetailsParams {
 
 const DeFiProtocolPositionDetails: React.FC = () => {
   const { styles } = useStyles(styleSheet, undefined);
-  const navigation = useNavigation<StackNavigationProp<ParamListBase>>();
+  const navigation = useNavigation<AppStackNavigationProp>();
 
   const { protocolAggregate, networkIconAvatar } =
     useParams<DeFiProtocolPositionDetailsParams>();

app/components/UI/DeleteWalletModal/index.test.tsx

@@ -5,7 +5,7 @@ import { fireEvent } from '@testing-library/react-native';
 import renderWithProvider, {
   DeepPartial,
 } from '../../../util/test/renderWithProvider';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { RootState } from '../../../reducers';
 import { strings } from '../../../../locales/i18n';
 import { ForgotPasswordModalSelectorsIDs } from '../../../util/ForgotPasswordModal.testIds';
@@ -72,7 +72,7 @@ jest.mock('../../../core/Authentication/Authentication', () => ({
   },
 }));
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 const renderComponent = (
   state: DeepPartial<RootState> = {},

app/components/UI/Earn/Views/EarnMusdConversionEducationView/index.tsx

@@ -10,7 +10,7 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import { useMusdConversion } from '../../hooks/useMusdConversion';
 import { useParams } from '../../../../../util/navigation/navUtils';
 import { useNavigation } from '@react-navigation/native';
-import { StackNavigationProp } from '@react-navigation/stack';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
 import {
   Box,
   BoxFlexDirection,
@@ -122,8 +122,7 @@ const EarnMusdConversionEducationView = () => {
     conversionTokens,
   } = useMusdConversionFlowData();
 
-  const navigation =
-    useNavigation<StackNavigationProp<Record<string, object | undefined>>>();
+  const navigation = useNavigation<AppNavigationProp>();
 
   const colorScheme = useColorScheme();
 

app/components/UI/Money/Views/MoneyFirstTimeDepositView/MoneyFirstTimeDepositView.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef } from 'react';
 import { BackHandler, PixelRatio, Platform } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import { type StackNavigationProp } from '@react-navigation/stack';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
 import { Accelerometer } from 'expo-sensors';
 import Rive, {
   AutoBind,
@@ -115,8 +115,7 @@ function gForceToParallax(gForce: number): number {
 }
 
 const MoneyFirstTimeDepositView = () => {
-  const navigation =
-    useNavigation<StackNavigationProp<Record<string, object | undefined>>>();
+  const navigation = useNavigation<AppNavigationProp>();
 
   const { trackScreenViewed } = useMoneyAnalytics({
     screen_name: SCREEN_NAMES.MONEY_FIRST_TIME_DEPOSIT,

app/components/UI/Money/Views/MoneyOnboardingView/MoneyOnboardingView.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useNavigation } from '@react-navigation/native';
-import { type StackNavigationProp } from '@react-navigation/stack';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
 import { useDispatch, useSelector } from 'react-redux';
 import { strings } from '../../../../../../locales/i18n';
 import Routes from '../../../../../constants/navigation/Routes';
@@ -59,8 +59,7 @@ const RIVE_STATE_TO_STEP_INDEX: Record<string, number> = {
 const TOTAL_ONBOARDING_STEPS = Object.keys(RIVE_STATE_TO_STEP_INDEX).length;
 
 const MoneyOnboardingView = () => {
-  const navigation =
-    useNavigation<StackNavigationProp<Record<string, object | undefined>>>();
+  const navigation = useNavigation<AppNavigationProp>();
 
   const isUsUnauthenticatedNonCardholder = useSelector(
     selectIsUsUnauthenticatedNonCardholder,

app/components/UI/Money/components/MoneyUiDeveloperOptionsSection.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigation } from '@react-navigation/native';
-import { type StackNavigationProp } from '@react-navigation/stack';
 
 import { useTheme } from '../../../../util/theme';
 import {

app/components/UI/Navbar/index.test.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { fireEvent } from '@testing-library/react-native';
 import renderWithProvider from '../../../util/test/renderWithProvider';
 import { backgroundState } from '../../../util/test/initial-root-state';
@@ -140,7 +140,7 @@ jest.mock('../AddressCopy', () => {
 });
 
 describe('getNetworkNavbarOptions', () => {
-  const Stack = createStackNavigator();
+  const Stack = createNativeStackNavigator();
 
   const mockNavigation = {
     pop: jest.fn(),
@@ -407,7 +407,7 @@ describe('getStakingNavbar', () => {
 });
 
 describe('getNavigationOptionsTitle', () => {
-  const Stack = createStackNavigator();
+  const Stack = createNativeStackNavigator();
 
   const mockNavigation = {
     goBack: jest.fn(),

app/components/UI/Predict/views/PredictBuyWithAnyToken/hooks/usePredictBuyActions.ts

@@ -1,5 +1,5 @@
 import { StackActions, useNavigation } from '@react-navigation/native';
-import type { StackNavigationProp } from '@react-navigation/stack';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import type { PredictNavigationParamList } from '../../../types/navigation';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import {
@@ -70,7 +70,7 @@ export const usePredictBuyActions = ({
   transactionActiveAbTests,
 }: UsePredictBuyActionsParams) => {
   const navigation =
-    useNavigation<StackNavigationProp<PredictNavigationParamList>>();
+    useNavigation<NativeStackNavigationProp<PredictNavigationParamList>>();
   const { onConfirm: onApprovalConfirm, approvalRequest } =
     useApprovalRequest();
   const { onReject } = useConfirmActions();

app/components/UI/Predict/views/PredictMarketDetails/PredictMarketDetails.test.tsx

@@ -64,8 +64,8 @@ jest.mock('../../hooks/usePredictActiveOrder', () => ({
   }),
 }));
 
-jest.mock('@react-navigation/stack', () => ({
-  createStackNavigator: () => ({
+jest.mock('@react-navigation/native-stack', () => ({
+  createNativeStackNavigator: () => ({
     Navigator: ({ children }: { children: React.ReactNode }) => children,
     Screen: ({ children }: { children: React.ReactNode }) => children,
   }),

app/components/UI/Ramp/Views/Modals/ErrorDetailsModal/ErrorDetailsModal.tsx

@@ -1,8 +1,8 @@
 import React, { useCallback, useRef } from 'react';
 import { View, ScrollView, useWindowDimensions } from 'react-native';
 import InAppBrowser from 'react-native-inappbrowser-reborn';
-import { useNavigation, type ParamListBase } from '@react-navigation/native';
-import type { StackNavigationProp } from '@react-navigation/stack';
+import { useNavigation } from '@react-navigation/native';
+import type { AppStackNavigationProp } from '../../../../../../core/NavigationService/types';
 import {
   BottomSheet,
   Button,
@@ -45,7 +45,7 @@ export const createErrorDetailsModalNavDetails =
 
 function ErrorDetailsModal() {
   const sheetRef = useRef<BottomSheetRef>(null);
-  const navigation = useNavigation<StackNavigationProp<ParamListBase>>();
+  const navigation = useNavigation<AppStackNavigationProp>();
   const { height: screenHeight } = useWindowDimensions();
   const { styles } = useStyles(styleSheet, {
     screenHeight,

app/components/UI/Ramp/Views/Modals/SettingsModal/SettingsModal.tsx

@@ -107,12 +107,13 @@ function SettingsModal() {
         })
         .build(),
     );
-    sheetRef.current?.onCloseBottomSheet();
-    navigation.navigate(Routes.TRANSACTIONS_VIEW, {
-      screen: Routes.TRANSACTIONS_VIEW,
-      params: {
-        redirectToOrders: true,
-      },
+    sheetRef.current?.onCloseBottomSheet(() => {
+      navigation.navigate(Routes.TRANSACTIONS_VIEW, {
+        screen: Routes.TRANSACTIONS_VIEW,
+        params: {
+          redirectToOrders: true,
+        },
+      });
     });
   }, [navigation, trackEvent, createEventBuilder]);