fix: prevent Android ramps modal double press navigation issue

app/components/UI/Ramp/Aggregator/components/FiatSelectorModal/FiatSelectorModal.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { View, useWindowDimensions } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
 import Fuse from 'fuse.js';
+import { useNavigation } from '@react-navigation/native';
 import { strings } from '../../../../../../../locales/i18n';
 import { FiatCurrency } from '@consensys/on-ramp-sdk';
 import {
@@ -41,6 +42,7 @@ export const createFiatSelectorModalNavigationDetails =
 function FiatSelectorModal() {
   const sheetRef = useRef<BottomSheetRef>(null);
   const listRef = useRef<FlatList<FiatCurrency>>(null);
+  const navigation = useNavigation();
 
   const { currencies } = useParams<FiatSelectorModalNavigationDetails>();
   const [searchString, setSearchString] = useState('');
@@ -75,9 +77,11 @@ function FiatSelectorModal() {
   const handleSelectCurrency = useCallback(
     (currency: FiatCurrency) => {
       setSelectedFiatCurrencyId(currency?.id);
-      sheetRef.current?.onCloseBottomSheet();
+      sheetRef.current?.onCloseBottomSheet(() => {
+        navigation.goBack();
+      });
     },
-    [setSelectedFiatCurrencyId],
+    [setSelectedFiatCurrencyId, navigation],
   );
 
   const renderItem = useCallback(
@@ -134,8 +138,14 @@ function FiatSelectorModal() {
   );
 
   return (
-    <BottomSheet ref={sheetRef} shouldNavigateBack>
-      <BottomSheetHeader onClose={() => sheetRef.current?.onCloseBottomSheet()}>
+    <BottomSheet ref={sheetRef} shouldNavigateBack={false}>
+      <BottomSheetHeader
+        onClose={() =>
+          sheetRef.current?.onCloseBottomSheet(() => {
+            navigation.goBack();
+          })
+        }
+      >
         <Text variant={TextVariant.HeadingMD}>
           {strings('fiat_on_ramp_aggregator.select_region_currency')}
         </Text>

app/components/UI/Ramp/Aggregator/components/PaymentMethodSelectorModal/PaymentMethodSelectorModal.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useRef } from 'react';
 import { View, ScrollView, useWindowDimensions } from 'react-native';
 import { Payment } from '@consensys/on-ramp-sdk';
+import { useNavigation } from '@react-navigation/native';
 
 import Text, {
   TextVariant,
@@ -37,6 +38,7 @@ export const createPaymentMethodSelectorModalNavigationDetails =
 
 function PaymentMethodSelectorModal() {
   const sheetRef = useRef<BottomSheetRef>(null);
+  const navigation = useNavigation();
   const { paymentMethods, location } =
     useParams<PaymentMethodSelectorModalParams>();
 
@@ -78,9 +80,12 @@ function PaymentMethodSelectorModal() {
 
         sheetRef.current?.onCloseBottomSheet(() => {
           setSelectedPaymentMethodId(paymentMethodId);
+          navigation.goBack();
         });
       } else {
-        sheetRef.current?.onCloseBottomSheet();
+        sheetRef.current?.onCloseBottomSheet(() => {
+          navigation.goBack();
+        });
       }
     },
     [
@@ -91,6 +96,7 @@ function PaymentMethodSelectorModal() {
       selectedPaymentMethodId,
       selectedRegion?.id,
       trackEvent,
+      navigation,
     ],
   );
 
@@ -99,8 +105,14 @@ function PaymentMethodSelectorModal() {
   );
 
   return (
-    <BottomSheet ref={sheetRef} shouldNavigateBack>
-      <BottomSheetHeader onClose={() => sheetRef.current?.onCloseBottomSheet()}>
+    <BottomSheet ref={sheetRef} shouldNavigateBack={false}>
+      <BottomSheetHeader
+        onClose={() =>
+          sheetRef.current?.onCloseBottomSheet(() => {
+            navigation.goBack();
+          })
+        }
+      >
         <Text variant={TextVariant.HeadingMD}>{title}</Text>
       </BottomSheetHeader>
 

app/components/UI/Ramp/Aggregator/components/RegionSelectorModal/RegionSelectorModal.tsx

@@ -8,6 +8,7 @@ import React, {
 import { View, useWindowDimensions } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
 import Fuse from 'fuse.js';
+import { useNavigation } from '@react-navigation/native';
 
 import Text, {
   TextColor,
@@ -58,6 +59,7 @@ export const createRegionSelectorModalNavigationDetails =
 function RegionSelectorModal() {
   const sheetRef = useRef<BottomSheetRef>(null);
   const listRef = useRef<FlatList<Region>>(null);
+  const navigation = useNavigation();
 
   const { selectedRegion, setSelectedRegion, isBuy } = useRampSDK();
   const { regions } = useParams<RegionSelectorModalParams>();
@@ -133,6 +135,13 @@ function RegionSelectorModal() {
     }
   }, []);
 
+  const closeBottomSheetAndNavigate = useCallback(
+    (navigateFunc: () => void) => {
+      sheetRef.current?.onCloseBottomSheet(navigateFunc);
+    },
+    [],
+  );
+
   const handleOnRegionPressCallback = useCallback(
     async (region: Region) => {
       if (region.states && region.states.length > 0) {
@@ -153,9 +162,19 @@ function RegionSelectorModal() {
       });
 
       setSelectedRegion(region);
-      sheetRef.current?.onCloseBottomSheet();
+      closeBottomSheetAndNavigate(() => {
+        navigation.goBack();
+      });
     },
-    [setSelectedRegion, trackEvent, regionInTransit, scrollToTop, isBuy],
+    [
+      setSelectedRegion,
+      trackEvent,
+      regionInTransit,
+      scrollToTop,
+      isBuy,
+      navigation,
+      closeBottomSheetAndNavigate,
+    ],
   );
 
   const renderRegionItem = useCallback(
@@ -232,9 +251,16 @@ function RegionSelectorModal() {
     if (activeView === RegionViewType.STATE) {
       handleRegionBackButton();
     } else {
-      sheetRef.current?.onCloseBottomSheet();
+      closeBottomSheetAndNavigate(() => {
+        navigation.goBack();
+      });
     }
-  }, [activeView, handleRegionBackButton]);
+  }, [
+    activeView,
+    handleRegionBackButton,
+    navigation,
+    closeBottomSheetAndNavigate,
+  ]);
 
   const onModalHide = useCallback(() => {
     setActiveView(RegionViewType.COUNTRY);
@@ -246,7 +272,7 @@ function RegionSelectorModal() {
   return (
     <BottomSheet
       ref={sheetRef}
-      shouldNavigateBack
+      shouldNavigateBack={false}
       onClose={onModalHide}
       keyboardAvoidingViewEnabled={false}
     >

app/components/UI/Ramp/Aggregator/components/TokenSelectModal/TokenSelectModal.tsx

@@ -3,6 +3,7 @@ import { View, useWindowDimensions } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
 import Fuse from 'fuse.js';
 import { useSelector } from 'react-redux';
+import { useNavigation } from '@react-navigation/native';
 
 import Text, {
   TextVariant,
@@ -61,6 +62,7 @@ export const createTokenSelectModalNavigationDetails =
 function TokenSelectModal() {
   const sheetRef = useRef<BottomSheetRef>(null);
   const listRef = useRef<FlatList>(null);
+  const navigation = useNavigation();
 
   const { tokens } = useParams<TokenSelectModalNavigationDetails>();
   const [searchString, setSearchString] = useState('');
@@ -150,9 +152,11 @@ function TokenSelectModal() {
   const handleSelectTokenCallback = useCallback(
     (newAsset: CryptoCurrency) => {
       setSelectedAsset(newAsset);
-      sheetRef.current?.onCloseBottomSheet();
+      sheetRef.current?.onCloseBottomSheet(() => {
+        navigation.goBack();
+      });
     },
-    [setSelectedAsset],
+    [setSelectedAsset, navigation],
   );
 
   const scrollToTop = useCallback(() => {
@@ -243,8 +247,14 @@ function TokenSelectModal() {
   }, [tokens]);
 
   return (
-    <BottomSheet ref={sheetRef} shouldNavigateBack>
-      <BottomSheetHeader onClose={() => sheetRef.current?.onCloseBottomSheet()}>
+    <BottomSheet ref={sheetRef} shouldNavigateBack={false}>
+      <BottomSheetHeader
+        onClose={() =>
+          sheetRef.current?.onCloseBottomSheet(() => {
+            navigation.goBack();
+          })
+        }
+      >
         <Text variant={TextVariant.HeadingMD}>
           {strings('fiat_on_ramp_aggregator.select_a_cryptocurrency')}
         </Text>

app/components/UI/Ramp/Deposit/Views/Modals/PaymentMethodSelectorModal/PaymentMethodSelectorModal.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useRef } from 'react';
 import { View, useWindowDimensions } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
+import { useNavigation } from '@react-navigation/native';
 import Text, {
   TextVariant,
 } from '../../../../../../../component-library/components/Texts/Text';
@@ -42,6 +43,7 @@ export const createPaymentMethodSelectorModalNavigationDetails =
 function PaymentMethodSelectorModal() {
   const sheetRef = useRef<BottomSheetRef>(null);
   const listRef = useRef<FlatList>(null);
+  const navigation = useNavigation();
   const { height: screenHeight } = useWindowDimensions();
   const { themeAppearance } = useTheme();
   const { styles } = useStyles(styleSheet, {
@@ -71,14 +73,17 @@ function PaymentMethodSelectorModal() {
         });
         setSelectedPaymentMethod(foundPaymentMethod);
       }
-      sheetRef.current?.onCloseBottomSheet();
+      sheetRef.current?.onCloseBottomSheet(() => {
+        navigation.goBack();
+      });
     },
     [
       paymentMethods,
       trackEvent,
       selectedRegion?.isoCode,
       isAuthenticated,
       setSelectedPaymentMethod,
+      navigation,
     ],
   );
 
@@ -121,8 +126,14 @@ function PaymentMethodSelectorModal() {
   );
 
   return (
-    <BottomSheet ref={sheetRef} shouldNavigateBack>
-      <BottomSheetHeader onClose={() => sheetRef.current?.onCloseBottomSheet()}>
+    <BottomSheet ref={sheetRef} shouldNavigateBack={false}>
+      <BottomSheetHeader
+        onClose={() =>
+          sheetRef.current?.onCloseBottomSheet(() => {
+            navigation.goBack();
+          })
+        }
+      >
         <Text variant={TextVariant.HeadingMD}>
           {strings('deposit.payment_modal.select_a_payment_method')}
         </Text>

app/components/UI/Ramp/Deposit/Views/Modals/RegionSelectorModal/RegionSelectorModal.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { View, useWindowDimensions } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
 import Fuse from 'fuse.js';
+import { useNavigation } from '@react-navigation/native';
 
 import Text, {
   TextVariant,
@@ -44,6 +45,7 @@ export const createRegionSelectorModalNavigationDetails =
 function RegionSelectorModal() {
   const sheetRef = useRef<BottomSheetRef>(null);
   const listRef = useRef<FlatList<DepositRegion>>(null);
+  const navigation = useNavigation();
 
   const { selectedRegion, setSelectedRegion, isAuthenticated } =
     useDepositSDK();
@@ -105,10 +107,12 @@ function RegionSelectorModal() {
         });
 
         setSelectedRegion(region);
-        sheetRef.current?.onCloseBottomSheet();
+        sheetRef.current?.onCloseBottomSheet(() => {
+          navigation.goBack();
+        });
       }
     },
-    [setSelectedRegion, isAuthenticated, trackEvent],
+    [setSelectedRegion, isAuthenticated, trackEvent, navigation],
   );
 
   const renderRegionItem = useCallback(
@@ -180,8 +184,14 @@ function RegionSelectorModal() {
   }, [scrollToTop]);
 
   return (
-    <BottomSheet ref={sheetRef} shouldNavigateBack>
-      <BottomSheetHeader onClose={() => sheetRef.current?.onCloseBottomSheet()}>
+    <BottomSheet ref={sheetRef} shouldNavigateBack={false}>
+      <BottomSheetHeader
+        onClose={() =>
+          sheetRef.current?.onCloseBottomSheet(() => {
+            navigation.goBack();
+          })
+        }
+      >
         <Text variant={TextVariant.HeadingMD}>
           {strings('deposit.region_modal.select_a_region')}
         </Text>

app/components/UI/Ramp/Deposit/Views/Modals/StateSelectorModal/StateSelectorModal.tsx

@@ -88,10 +88,17 @@ function StateSelectorModal() {
     }
   }, []);
 
+  const closeBottomSheetAndNavigate = useCallback(
+    (navigateFunc: () => void) => {
+      sheetRef.current?.onCloseBottomSheet(navigateFunc);
+    },
+    [],
+  );
+
   const handleOnStatePressCallback = useCallback(
     (state: { code: string; name: string }) => {
       if (state.code === 'NY') {
-        sheetRef.current?.onCloseBottomSheet(() => {
+        closeBottomSheetAndNavigate(() => {
           navigation.navigate(
             ...createUnsupportedStateModalNavigationDetails({
               stateCode: state.code,
@@ -102,10 +109,12 @@ function StateSelectorModal() {
         });
       } else {
         onStateSelect(state.code);
-        sheetRef.current?.onCloseBottomSheet();
+        closeBottomSheetAndNavigate(() => {
+          navigation.goBack();
+        });
       }
     },
-    [navigation, onStateSelect],
+    [navigation, onStateSelect, closeBottomSheetAndNavigate],
   );
 
   const renderStateItem = useCallback(
@@ -155,8 +164,14 @@ function StateSelectorModal() {
   }, [scrollToTop]);
 
   return (
-    <BottomSheet ref={sheetRef} shouldNavigateBack>
-      <BottomSheetHeader onClose={() => sheetRef.current?.onCloseBottomSheet()}>
+    <BottomSheet ref={sheetRef} shouldNavigateBack={false}>
+      <BottomSheetHeader
+        onClose={() =>
+          closeBottomSheetAndNavigate(() => {
+            navigation.goBack();
+          })
+        }
+      >
         <Text variant={TextVariant.HeadingMD}>
           {strings('deposit.state_modal.select_a_state')}
         </Text>