Merge pull request #6668 from BlueWallet/close

REF: navigationStyle default close position

components/navigationStyle.tsx

@@ -14,6 +14,12 @@ const styles = StyleSheet.create({
   },
 });
 
+enum CloseButtonPosition {
+  None = 'None',
+  Left = 'Left',
+  Right = 'Right',
+}
+
 type OptionsFormatter = (
   options: NativeStackNavigationOptions,
   deps: { theme: Theme; navigation: any; route: any },
@@ -21,34 +27,63 @@ type OptionsFormatter = (
 
 export type NavigationOptionsGetter = (theme: Theme) => (deps: { navigation: any; route: any }) => NativeStackNavigationOptions;
 
+const getCloseButtonPosition = (
+  closeButtonPosition: CloseButtonPosition | undefined,
+  isFirstRouteInStack: boolean,
+  isModal: boolean,
+): CloseButtonPosition => {
+  if (closeButtonPosition !== undefined) {
+    return closeButtonPosition;
+  }
+  if (isFirstRouteInStack && isModal) {
+    return CloseButtonPosition.Right;
+  }
+  return CloseButtonPosition.None;
+};
+
+const getHandleCloseAction = (
+  onCloseButtonPressed: ((args: { navigation: any; route: any }) => void) | undefined,
+  navigation: any,
+  route: any,
+) => {
+  if (onCloseButtonPressed) {
+    return () => onCloseButtonPressed({ navigation, route });
+  }
+  return () => {
+    Keyboard.dismiss();
+    navigation.goBack(null);
+  };
+};
+
 const navigationStyle = (
   {
-    closeButtonFunc,
+    closeButtonPosition,
+    onCloseButtonPressed,
     headerBackVisible = true,
     ...opts
   }: NativeStackNavigationOptions & {
-    closeButton?: boolean;
-    closeButtonFunc?: (deps: { navigation: any; route: any }) => React.ReactElement | void;
+    closeButtonPosition?: CloseButtonPosition;
+    onCloseButtonPressed?: (deps: { navigation: any; route: any }) => void;
   },
   formatter?: OptionsFormatter,
 ): NavigationOptionsGetter => {
   return theme =>
     ({ navigation, route }) => {
-      // Determine if the current screen is the first one in the stack using the updated method
       const isFirstRouteInStack = navigation.getState().index === 0;
+      const isModal = route.params?.presentation !== 'card';
 
-      // Default closeButton to true if the current screen is the first one in the stack
-      const closeButton = opts.closeButton !== undefined ? opts.closeButton : isFirstRouteInStack;
+      const closeButton = getCloseButtonPosition(closeButtonPosition, isFirstRouteInStack, isModal);
+      const handleClose = getHandleCloseAction(onCloseButtonPressed, navigation, route);
 
       let headerRight;
       let headerLeft;
-      if (closeButton) {
-        const handleClose = closeButtonFunc
-          ? () => closeButtonFunc({ navigation, route })
-          : () => {
-              Keyboard.dismiss();
-              navigation.goBack(null);
-            };
+
+      if (!headerBackVisible) {
+        headerLeft = () => <></>;
+        opts.headerLeft = headerLeft;
+      }
+
+      if (closeButton === CloseButtonPosition.Right) {
         headerRight = () => (
           <TouchableOpacity
             accessibilityRole="button"
@@ -60,22 +95,30 @@ const navigationStyle = (
             <Image source={theme.closeImage} />
           </TouchableOpacity>
         );
+      } else if (closeButton === CloseButtonPosition.Left) {
+        headerLeft = () => (
+          <TouchableOpacity
+            accessibilityRole="button"
+            accessibilityLabel={loc._.close}
+            style={styles.button}
+            onPress={handleClose}
+            testID="NavigationCloseButton"
+          >
+            <Image source={theme.closeImage} />
+          </TouchableOpacity>
+        );
       }
 
-      if (!headerBackVisible) {
-        headerLeft = () => <></>;
-        opts.headerLeft = headerLeft;
-      }
-
       let options: NativeStackNavigationOptions = {
         headerShadowVisible: false,
         headerTitleStyle: {
           fontWeight: '600',
           color: theme.colors.foregroundColor,
         },
-        headerRight,
         headerBackTitleVisible: false,
         headerTintColor: theme.colors.foregroundColor,
+        headerRight,
+        headerLeft,
         ...opts,
       };
 
@@ -88,38 +131,4 @@ const navigationStyle = (
 };
 
 export default navigationStyle;
-
-export const navigationStyleTx = (opts: NativeStackNavigationOptions, formatter: OptionsFormatter): NavigationOptionsGetter => {
-  return theme =>
-    ({ navigation, route }) => {
-      let options: NativeStackNavigationOptions = {
-        headerTitleStyle: {
-          fontWeight: '600',
-          color: theme.colors.foregroundColor,
-        },
-        // headerBackTitle: null,
-        headerBackTitleVisible: false,
-        headerTintColor: theme.colors.foregroundColor,
-        headerLeft: () => (
-          <TouchableOpacity
-            accessibilityRole="button"
-            accessibilityLabel={loc._.close}
-            style={styles.button}
-            onPress={() => {
-              Keyboard.dismiss();
-              navigation.goBack(null);
-            }}
-          >
-            <Image source={theme.closeImage} />
-          </TouchableOpacity>
-        ),
-        ...opts,
-      };
-
-      if (formatter) {
-        options = formatter(options, { theme, navigation, route });
-      }
-
-      return options;
-    };
-};
+export { CloseButtonPosition };

navigation/AddWalletStack.tsx

@@ -30,7 +30,6 @@ const AddWalletStack = () => {
         name="AddWallet"
         component={AddComponent}
         options={navigationStyle({
-          closeButton: true,
           headerBackVisible: false,
           title: loc.wallets.add_title,
         })(theme)}

navigation/AztecoRedeemStack.tsx

@@ -1,7 +1,6 @@
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React from 'react';
-
-import navigationStyle, { navigationStyleTx } from '../components/navigationStyle';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import navigationStyle from '../components/navigationStyle';
 import { useTheme } from '../components/themes';
 import loc from '../loc';
 import { AztecoRedeemComponent, SelectWalletComponent } from './LazyLoadAztecoRedeemStack';
@@ -16,11 +15,10 @@ const AztecoRedeemStackRoot = () => {
       <Stack.Screen
         name="AztecoRedeem"
         component={AztecoRedeemComponent}
-        options={navigationStyleTx({}, options => ({
-          ...options,
+        options={navigationStyle({
           title: loc.azteco.title,
           statusBarStyle: 'auto',
-        }))(theme)}
+        })(theme)}
       />
       <Stack.Screen
         name="SelectWallet"

navigation/DetailViewScreensStack.tsx

@@ -5,7 +5,7 @@ import { Icon } from 'react-native-elements';
 
 import { isDesktop } from '../blue_modules/environment';
 import HeaderRightButton from '../components/HeaderRightButton';
-import navigationStyle from '../components/navigationStyle';
+import navigationStyle, { CloseButtonPosition } from '../components/navigationStyle';
 import { useTheme } from '../components/themes';
 import { useExtendedNavigation } from '../hooks/useExtendedNavigation';
 import loc from '../loc';
@@ -31,13 +31,7 @@ import LdkViewLogs from '../screen/wallets/ldkViewLogs';
 import SelectWallet from '../screen/wallets/selectWallet';
 import WalletTransactions from '../screen/wallets/transactions';
 import WalletsList from '../screen/wallets/WalletsList';
-import {
-  NavigationDefaultOptions,
-  NavigationDefaultOptionsForDesktop,
-  NavigationFormModalOptions,
-  StatusBarLightOptions,
-  DetailViewStack,
-} from './index'; // Importing the navigator
+import { NavigationDefaultOptions, NavigationFormModalOptions, StatusBarLightOptions, DetailViewStack } from './index'; // Importing the navigator
 import AddWalletStack from './AddWalletStack';
 import AztecoRedeemStackRoot from './AztecoRedeemStack';
 import ExportMultisigCoordinationSetupStackRoot from './ExportMultisigCoordinationSetupStack';
@@ -72,16 +66,11 @@ import SignVerifyStackRoot from './SignVerifyStack';
 import ViewEditMultisigCosignersStackRoot from './ViewEditMultisigCosignersStack';
 import WalletExportStack from './WalletExportStack';
 import WalletXpubStackRoot from './WalletXpubStack';
-import { StackActions } from '@react-navigation/native';
 
 const DetailViewStackScreensStack = () => {
   const theme = useTheme();
   const navigation = useExtendedNavigation();
 
-  const popToTop = () => {
-    navigation.dispatch(StackActions.popToTop());
-  };
-
   const SaveButton = useMemo(() => <HeaderRightButton testID="SaveButton" disabled={true} title={loc.wallets.details_save} />, []);
   const DetailButton = useMemo(() => <HeaderRightButton testID="DetailButton" disabled={true} title={loc.send.create_details} />, []);
 
@@ -129,10 +118,9 @@ const DetailViewStackScreensStack = () => {
           title: loc.lnd.new_channel,
           headerLargeTitle: true,
           statusBarStyle: 'auto',
-          closeButton: true,
+          closeButtonPosition: CloseButtonPosition.Right,
           headerBackVisible: false,
           gestureEnabled: false,
-          closeButtonFunc: popToTop,
         })(theme)}
       />
       <DetailViewStack.Screen name="LdkInfo" component={LdkInfo} options={LdkInfo.navigationOptions(theme)} />
@@ -217,8 +205,7 @@ const DetailViewStackScreensStack = () => {
         component={LnurlPay}
         options={navigationStyle({
           title: '',
-          closeButton: true,
-          closeButtonFunc: popToTop,
+          closeButtonPosition: CloseButtonPosition.Right,
         })(theme)}
       />
       <DetailViewStack.Screen
@@ -226,10 +213,9 @@ const DetailViewStackScreensStack = () => {
         component={LnurlPaySuccess}
         options={navigationStyle({
           title: '',
-          closeButton: true,
+          closeButtonPosition: CloseButtonPosition.Right,
           headerBackVisible: false,
           gestureEnabled: false,
-          closeButtonFunc: popToTop,
         })(theme)}
       />
       <DetailViewStack.Screen name="LnurlAuth" component={LnurlAuth} options={LnurlAuth.navigationOptions(theme)} />
@@ -251,7 +237,7 @@ const DetailViewStackScreensStack = () => {
       <DetailViewStack.Screen
         name="SendDetailsRoot"
         component={SendDetailsStack}
-        options={isDesktop ? NavigationDefaultOptionsForDesktop : NavigationDefaultOptions}
+        options={navigationStyle({ headerShown: false, presentation: isDesktop ? 'fullScreenModal' : 'modal' })(theme)}
       />
       <DetailViewStack.Screen name="LNDCreateInvoiceRoot" component={LNDCreateInvoiceRoot} options={NavigationDefaultOptions} />
       <DetailViewStack.Screen name="ScanLndInvoiceRoot" component={ScanLndInvoiceRoot} options={NavigationDefaultOptions} />

navigation/ExportMultisigCoordinationSetupStack.tsx

@@ -1,7 +1,6 @@
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React from 'react';
-
-import navigationStyle from '../components/navigationStyle';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import navigationStyle, { CloseButtonPosition } from '../components/navigationStyle';
 import { useTheme } from '../components/themes';
 import loc from '../loc';
 import { ExportMultisigCoordinationSetupComponent } from './LazyLoadExportMultisigCoordinationSetupStack';
@@ -17,7 +16,7 @@ const ExportMultisigCoordinationSetupStackRoot = () => {
         name="ExportMultisigCoordinationSetup"
         component={ExportMultisigCoordinationSetupComponent}
         options={navigationStyle({
-          closeButton: true,
+          closeButtonPosition: CloseButtonPosition.Right,
           headerBackVisible: false,
           statusBarStyle: 'light',
           title: loc.multisig.export_coordination_setup,

navigation/LNDCreateInvoiceStack.tsx

@@ -1,7 +1,6 @@
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React from 'react';
-
-import navigationStyle from '../components/navigationStyle';
+import navigationStyle, { CloseButtonPosition } from '../components/navigationStyle';
 import { useTheme } from '../components/themes';
 import loc from '../loc';
 import {
@@ -24,7 +23,7 @@ const LNDCreateInvoiceRoot = () => {
         component={LNDCreateInvoiceComponent}
         options={navigationStyle({
           title: loc.receive.header,
-          closeButton: true,
+          closeButtonPosition: CloseButtonPosition.Right,
           headerBackVisible: false,
           statusBarStyle: 'light',
         })(theme)}

navigation/PaymentCodeStack.tsx

@@ -33,12 +33,12 @@ const PaymentCodeStackRoot = () => {
       <Stack.Screen
         name="PaymentCode"
         component={PaymentCodeComponent}
-        options={navigationStyle({ title: loc.bip47.payment_code, closeButton: true })(theme)}
+        options={navigationStyle({ title: loc.bip47.payment_code })(theme)}
       />
       <Stack.Screen
         name="PaymentCodesList"
         component={PaymentCodesListComponent}
-        options={navigationStyle({ title: loc.bip47.contacts, closeButton: true })(theme)}
+        options={navigationStyle({ title: loc.bip47.contacts })(theme)}
       />
     </Stack.Navigator>
   );

navigation/ReceiveDetailsStack.tsx

@@ -16,9 +16,7 @@ const ReceiveDetailsStackRoot = () => {
       <Stack.Screen
         name="ReceiveDetails"
         component={ReceiveDetailsComponent}
-        options={navigationStyle({ closeButton: true, headerBackVisible: false, title: loc.receive.header, statusBarStyle: 'light' })(
-          theme,
-        )}
+        options={navigationStyle({ headerBackVisible: false, title: loc.receive.header, statusBarStyle: 'light' })(theme)}
       />
     </Stack.Navigator>
   );

navigation/ReorderWalletsStack.tsx

@@ -19,7 +19,6 @@ const ReorderWalletsStackRoot = () => {
         options={navigationStyle({
           headerBackVisible: false,
           headerLargeTitle: true,
-          closeButton: true,
 
           headerTitle: loc.wallets.reorder_title,
         })(theme)}

navigation/ScanLndInvoiceStack.tsx

@@ -21,7 +21,7 @@ const ScanLndInvoiceRoot = () => {
       <Stack.Screen
         name="ScanLndInvoice"
         component={ScanLndInvoiceComponent}
-        options={navigationStyle({ closeButton: true, headerBackVisible: false, title: loc.send.header, statusBarStyle: 'light' })(theme)}
+        options={navigationStyle({ headerBackVisible: false, title: loc.send.header, statusBarStyle: 'light' })(theme)}
         initialParams={{ uri: undefined, walletID: undefined, invoice: undefined }}
       />
       <Stack.Screen
@@ -39,7 +39,6 @@ const ScanLndInvoiceRoot = () => {
         component={LnurlPayComponent}
         options={navigationStyle({
           title: '',
-          closeButton: true,
         })(theme)}
       />
       <Stack.Screen
@@ -47,7 +46,6 @@ const ScanLndInvoiceRoot = () => {
         component={LnurlPaySuccessComponent}
         options={navigationStyle({
           title: '',
-          closeButton: true,
           headerBackVisible: false,
           gestureEnabled: false,
         })(theme)}

navigation/SendDetailsStack.tsx

@@ -1,7 +1,6 @@
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React, { useMemo } from 'react';
-
-import navigationStyle, { navigationStyleTx } from '../components/navigationStyle';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import navigationStyle, { CloseButtonPosition } from '../components/navigationStyle';
 import { useTheme } from '../components/themes';
 import loc from '../loc';
 import {
@@ -32,11 +31,11 @@ const SendDetailsStack = () => {
       <Stack.Screen
         name="SendDetails"
         component={SendDetailsComponent}
-        options={navigationStyleTx({}, options => ({
-          ...options,
+        options={navigationStyle({
           title: loc.send.header,
           statusBarStyle: 'light',
-        }))(theme)}
+          closeButtonPosition: CloseButtonPosition.Left,
+        })(theme)}
         initialParams={{ isEditable: true }} // Correctly typed now
       />
       <Stack.Screen

navigation/SignVerifyStack.tsx

@@ -16,9 +16,7 @@ const SignVerifyStackRoot = () => {
       <Stack.Screen
         name="SignVerify"
         component={SignVerifyComponent}
-        options={navigationStyle({ closeButton: true, headerBackVisible: false, statusBarStyle: 'light', title: loc.addresses.sign_title })(
-          theme,
-        )}
+        options={navigationStyle({ headerBackVisible: false, statusBarStyle: 'light', title: loc.addresses.sign_title })(theme)}
       />
     </Stack.Navigator>
   );

navigation/ViewEditMultisigCosignersStack.tsx

@@ -23,7 +23,6 @@ const ViewEditMultisigCosignersStackRoot = () => {
         name="ViewEditMultisigCosigners"
         component={ViewEditMultisigCosignersComponent}
         options={navigationStyle({
-          closeButton: true,
           headerBackVisible: false,
           title: loc.multisig.manage_keys,
         })(theme)}

navigation/WalletExportStack.tsx

@@ -21,7 +21,6 @@ const WalletExportStack = () => {
         name="WalletExport"
         component={WalletExportComponent}
         options={navigationStyle({
-          closeButton: true,
           headerBackVisible: false,
           title: loc.wallets.export_title,
         })(theme)}

navigation/WalletXpubStack.tsx

@@ -17,7 +17,6 @@ const WalletXpubStackRoot = () => {
         name="WalletXpub"
         component={WalletXpubComponent}
         options={navigationStyle({
-          closeButton: true,
           headerBackVisible: false,
           headerTitle: loc.wallets.xpub_title,
         })(theme)}

navigation/index.tsx

@@ -18,7 +18,6 @@ export const NavigationFormModalOptions: NativeStackNavigationOptions = {
   headerShown: false,
   presentation: 'formSheet',
 };
-export const NavigationDefaultOptionsForDesktop: NativeStackNavigationOptions = { headerShown: false, presentation: 'fullScreenModal' };
 export const StatusBarLightOptions: NativeStackNavigationOptions = { statusBarStyle: 'light' };
 
 const DetailViewStack = createNativeStackNavigator<DetailViewStackParamList>();

screen/PlausibleDeniability.tsx

@@ -1,5 +1,3 @@
-import { useNavigation } from '@react-navigation/native';
-import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import React, { useReducer } from 'react';
 import { ScrollView } from 'react-native';
 import triggerHapticFeedback, { HapticFeedbackTypes } from '../blue_modules/hapticFeedback';
@@ -9,6 +7,7 @@ import Button from '../components/Button';
 import prompt from '../helpers/prompt';
 import loc from '../loc';
 import { useStorage } from '../hooks/context/useStorage';
+import { popToTop } from '../NavigationService';
 
 // Action Types
 const SET_LOADING = 'SET_LOADING';
@@ -39,7 +38,6 @@ function reducer(state: State, action: Action): State {
 const PlausibleDeniability: React.FC = () => {
   const { cachedPassword, isPasswordInUse, createFakeStorage, resetWallets } = useStorage();
   const [state, dispatch] = useReducer(reducer, initialState);
-  const navigation = useNavigation<NativeStackNavigationProp<Record<string, object | undefined>>>();
 
   const handleOnCreateFakeStorageButtonPressed = async () => {
     dispatch({ type: SET_LOADING, payload: true });
@@ -66,7 +64,7 @@ const PlausibleDeniability: React.FC = () => {
       resetWallets();
       triggerHapticFeedback(HapticFeedbackTypes.NotificationSuccess);
       presentAlert({ message: loc.plausibledeniability.success });
-      navigation.popToTop();
+      popToTop();
     } catch {
       dispatch({ type: SET_LOADING, payload: false });
     }

screen/lnd/lnurlAuth.js

@@ -173,6 +173,4 @@ const styles = StyleSheet.create({
 
 LnurlAuth.navigationOptions = navigationStyle({
   title: '',
-  closeButton: true,
-  closeButtonFunc: ({ navigation }) => navigation.getParent().popToTop(),
 });

screen/lnd/lnurlPaySuccess.js

@@ -1,14 +1,14 @@
+import React, { Component } from 'react';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
 import { Image, Linking, ScrollView, StyleSheet, View } from 'react-native';
-
 import { BlueButtonLink, BlueCard, BlueLoading, BlueSpacing20, BlueSpacing40, BlueText } from '../../BlueComponents';
 import Lnurl from '../../class/lnurl';
 import Button from '../../components/Button';
 import SafeArea from '../../components/SafeArea';
 import loc from '../../loc';
 import { SuccessView } from '../send/success';
+import { popToTop } from '../../NavigationService';
 
 export default class LnurlPaySuccess extends Component {
   constructor(props) {
@@ -119,7 +119,7 @@ export default class LnurlPaySuccess extends Component {
             ) : (
               <Button
                 onPress={() => {
-                  this.props.navigation.getParent().popToTop();
+                  popToTop();
                 }}
                 title={loc.send.success_done}
               />

screen/settings/EncryptStorage.tsx

@@ -1,7 +1,5 @@
 import React, { useCallback, useEffect, useReducer } from 'react';
 import { Alert, Platform, ScrollView, StyleSheet, Text, TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native';
-import { StackActions } from '@react-navigation/native';
-
 import triggerHapticFeedback, { HapticFeedbackTypes } from '../../blue_modules/hapticFeedback';
 import { BlueCard, BlueSpacing20, BlueText } from '../../BlueComponents';
 import presentAlert from '../../components/Alert';
@@ -12,6 +10,7 @@ import { unlockWithBiometrics, useBiometrics } from '../../hooks/useBiometrics';
 import loc from '../../loc';
 import { useExtendedNavigation } from '../../hooks/useExtendedNavigation';
 import { useStorage } from '../../hooks/context/useStorage';
+import { popToTop } from '../../NavigationService';
 
 enum ActionType {
   SetLoading = 'SET_LOADING',
@@ -58,7 +57,7 @@ const EncryptStorage = () => {
   const { isStorageEncrypted, encryptStorage, decryptStorage, saveToDisk } = useStorage();
   const { isDeviceBiometricCapable, biometricEnabled, setBiometricUseEnabled, deviceBiometricType } = useBiometrics();
   const [state, dispatch] = useReducer(reducer, initialState);
-  const { navigate, dispatch: navigationDispatch } = useExtendedNavigation();
+  const { navigate } = useExtendedNavigation();
   const { colors } = useTheme();
 
   const styleHooks = StyleSheet.create({
@@ -84,10 +83,6 @@ const EncryptStorage = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const popToTop = () => {
-    navigationDispatch(StackActions.popToTop());
-  };
-
   const handleDecryptStorage = async () => {
     dispatch({ type: ActionType.SetCurrentLoadingSwitch, payload: 'decrypt' });
     const password = await prompt(loc.settings.password, loc._.storage_is_encrypted).catch(() => {

screen/transactions/CPFP.js

@@ -25,6 +25,7 @@ import SafeArea from '../../components/SafeArea';
 import { BlueCurrentTheme } from '../../components/themes';
 import loc from '../../loc';
 import { StorageContext } from '../../components/Context/StorageProvider';
+import { popToTop } from '../../NavigationService';
 
 const styles = StyleSheet.create({
   root: {
@@ -108,7 +109,7 @@ export default class CPFP extends Component {
     this.context.txMetadata[this.state.newTxid] = { memo: 'Child pays for parent (CPFP)' };
     Notifications.majorTomToGroundControl([], [], [this.state.newTxid]);
     this.context.sleep(4000).then(() => this.context.fetchAndSaveWalletTransactions(this.state.wallet.getID()));
-    this.props.navigation.navigate('Success', { onDonePressed: () => this.props.navigation.popToTop(), amount: undefined });
+    this.props.navigation.navigate('Success', { onDonePressed: () => popToTop(), amount: undefined });
   }
 
   async componentDidMount() {

screen/transactions/RBFBumpFee.js

@@ -9,6 +9,7 @@ import SafeArea from '../../components/SafeArea';
 import loc from '../../loc';
 import CPFP from './CPFP';
 import { StorageContext } from '../../components/Context/StorageProvider';
+import { popToTop } from '../../NavigationService';
 
 const styles = StyleSheet.create({
   root: {
@@ -68,7 +69,7 @@ export default class RBFBumpFee extends CPFP {
       this.context.txMetadata[this.state.newTxid] = this.context.txMetadata[this.state.txid];
     }
     this.context.sleep(4000).then(() => this.context.fetchAndSaveWalletTransactions(this.state.wallet.getID()));
-    this.props.navigation.navigate('Success', { onDonePressed: () => this.props.navigation.popToTop(), amount: undefined });
+    this.props.navigation.navigate('Success', { onDonePressed: () => popToTop(), amount: undefined });
   }
 
   render() {
@@ -108,7 +109,6 @@ export default class RBFBumpFee extends CPFP {
 
 RBFBumpFee.propTypes = {
   navigation: PropTypes.shape({
-    popToTop: PropTypes.func,
     navigate: PropTypes.func,
     state: PropTypes.shape({
       params: PropTypes.shape({

screen/transactions/RBFCancel.js

@@ -9,6 +9,7 @@ import SafeArea from '../../components/SafeArea';
 import loc from '../../loc';
 import CPFP from './CPFP';
 import { StorageContext } from '../../components/Context/StorageProvider';
+import { popToTop } from '../../NavigationService';
 
 export default class RBFCancel extends CPFP {
   static contextType = StorageContext;
@@ -71,7 +72,7 @@ export default class RBFCancel extends CPFP {
       this.context.txMetadata[this.state.newTxid].memo = 'Cancelled transaction';
     }
     this.context.sleep(4000).then(() => this.context.fetchAndSaveWalletTransactions(this.state.wallet.getID()));
-    this.props.navigation.navigate('Success', { onDonePressed: () => this.props.navigation.popToTop(), amount: undefined });
+    this.props.navigation.navigate('Success', { onDonePressed: () => popToTop(), amount: undefined });
   }
 
   render() {
@@ -111,7 +112,6 @@ export default class RBFCancel extends CPFP {
 
 RBFCancel.propTypes = {
   navigation: PropTypes.shape({
-    popToTop: PropTypes.func,
     navigate: PropTypes.func,
     state: PropTypes.shape({
       params: PropTypes.shape({

screen/wallets/details.js

@@ -47,6 +47,7 @@ import loc, { formatBalanceWithoutSuffix } from '../../loc';
 import { BitcoinUnit, Chain } from '../../models/bitcoinUnits';
 import { useSettings } from '../../hooks/context/useSettings';
 import { useStorage } from '../../hooks/context/useStorage';
+import { popToTop } from '../../NavigationService';
 
 const styles = StyleSheet.create({
   scrollViewContent: {
@@ -119,7 +120,7 @@ const WalletDetails = () => {
   const { isAdvancedModeEnabled } = useSettings();
   const [isBIP47Enabled, setIsBIP47Enabled] = useState(wallet.isBIP47Enabled());
   const [hideTransactionsInWalletsList, setHideTransactionsInWalletsList] = useState(!wallet.getHideTransactionsInWalletsList());
-  const { goBack, setOptions, popToTop, navigate } = useExtendedNavigation();
+  const { goBack, setOptions, navigate } = useExtendedNavigation();
   const { colors } = useTheme();
   const [masterFingerprint, setMasterFingerprint] = useState();
   const walletTransactionsLength = useMemo(() => wallet.getTransactions().length, [wallet]);