Wrong swipe back after token creation (#217)

* disable gesture nav on specific screens (ios)

* disable gesture nav on dashboard (ios)

* disable gesture nav on auth screen (ios)

* add 'beforeRemove' nav listener, see #194

* update

src/components/nav/Navigator.tsx

@@ -96,7 +96,11 @@ export default function Navigator({
 				<Stack.Screen name='memoScreen' component={MemoScreen} />
 				<Stack.Screen name='coinSelection' component={CoinSelectionScreen} />
 				<Stack.Screen name='nostrReceive' component={NostrDMScreen} />
-				<Stack.Screen name='processing' component={ProcessingScreen} />
+				<Stack.Screen
+					name='processing'
+					component={ProcessingScreen}
+					options={{ gestureEnabled: false }}
+				/>
 				<Stack.Screen name='processingError' component={ProcessingErrorScreen} />
 				<Stack.Screen name='mintInvoice' component={InvoiceScreen} />
 				<Stack.Screen
@@ -114,13 +118,15 @@ export default function Navigator({
 					options={{
 						animation: 'default',
 						animationDuration,
+						gestureEnabled: false
 					}}
 				/>
 				<Stack.Screen name='disclaimer' component={Disclaimer} />
 				<Stack.Screen
 					name='auth'
 					component={AuthPage}
 					initialParams={{ pinHash }}
+					options={{ gestureEnabled: false }}
 				/>
 				{/* sendable token created page */}
 				<Stack.Screen
@@ -129,9 +135,14 @@ export default function Navigator({
 					options={{
 						animation: 'slide_from_bottom',
 						animationDuration,
+						gestureEnabled: false,
 					}}
 				/>
-				<Stack.Screen name='success' component={SuccessPage} />
+				<Stack.Screen
+					name='success'
+					component={SuccessPage}
+					options={{ gestureEnabled: false }}
+				/>
 				<Stack.Screen name='mints' component={Mints} />
 				<Stack.Screen name='mintmanagement' component={MintManagement} />
 				<Stack.Screen name='mint info' component={MintInfoPage} />

src/components/nav/utils.ts

@@ -0,0 +1,16 @@
+import type { TBeforeRemoveEvent } from '@model/nav'
+import { l } from '@src/logger'
+
+export function preventBack(e: TBeforeRemoveEvent, dispatch: (action: any) => void) {
+	e.preventDefault()
+	l({
+		payload: e.data.action.payload,
+		type: e.data.action.type,
+		source: e.data.action.source,
+		target: e.data.action.target,
+	})
+	// allow navigating to dashboard
+	if (e.data.action.payload && 'name' in e.data.action.payload && e.data.action.payload.name === 'dashboard') {
+		dispatch(e.data.action)
+	}
+}

src/model/nav.ts

@@ -1,3 +1,4 @@
+import type { EventArg } from '@react-navigation/core'
 import type { NativeStackScreenProps } from '@react-navigation/native-stack'
 
 import type { IHistoryEntry, IMintUrl, IMintWithBalance, IProofSelection } from '.'
@@ -231,4 +232,12 @@ export interface INavigatorProps {
 	bgAuth?: boolean
 	shouldOnboard?: boolean
 	setBgAuth?: (val: boolean) => void
-}
+}
+export type TBeforeRemoveEvent = EventArg<'beforeRemove', true, {
+	action: Readonly<{
+		type: string
+		payload?: object | undefined
+		source?: string | undefined
+		target?: string | undefined
+	}>
+}>

src/screens/Dashboard.tsx

@@ -11,8 +11,9 @@ import { addMint, getBalance, getMintsBalances, getMintsUrls, hasMints } from '@
 import { l } from '@log'
 import OptsModal from '@modal/OptsModal'
 import TrustMintModal from '@modal/TrustMint'
-import type { TDashboardPageProps } from '@model/nav'
+import type { TBeforeRemoveEvent, TDashboardPageProps } from '@model/nav'
 import BottomNav from '@nav/BottomNav'
+import { preventBack } from '@nav/utils'
 import { useFocusClaimContext } from '@src/context/FocusClaim'
 import { useInitialURL } from '@src/context/Linking'
 import { useNostrContext } from '@src/context/Nostr'
@@ -119,7 +120,7 @@ export default function Dashboard({ navigation, route }: TDashboardPageProps) {
 				setTrustModal(true)
 				stopLoading()
 				clearTimeout(t)
-			}, 250)
+			}, 200)
 			return
 		}
 		await receiveToken(url)
@@ -280,6 +281,13 @@ export default function Dashboard({ navigation, route }: TDashboardPageProps) {
 		return focusHandler
 	}, [navigation])
 
+	// prevent back navigation - https://reactnavigation.org/docs/preventing-going-back/
+	useEffect(() => {
+		const backHandler = (e: TBeforeRemoveEvent) => preventBack(e, navigation.dispatch)
+		navigation.addListener('beforeRemove', backHandler)
+		return () => navigation.removeListener('beforeRemove', backHandler)
+	}, [navigation])
+
 	return (
 		<View style={[styles.container, { backgroundColor: color.BACKGROUND }]}>
 			{/* Balance, Disclaimer & History */}

src/screens/Payment/Processing.tsx

@@ -4,11 +4,11 @@ import Txt from '@comps/Txt'
 import { _testmintUrl } from '@consts'
 import { l } from '@log'
 import type { IMintUrl } from '@model'
-import type { TProcessingPageProps } from '@model/nav'
+import type { TBeforeRemoveEvent, TProcessingPageProps } from '@model/nav'
+import { preventBack } from '@nav/utils'
 import { relay } from '@nostr/class/Relay'
 import { EventKind } from '@nostr/consts'
 import { encrypt } from '@nostr/crypto'
-import { useFocusEffect } from '@react-navigation/core'
 import { useThemeContext } from '@src/context/Theme'
 import { NS } from '@src/i18n'
 import { updateNostrDmUsers } from '@src/storage/store/nostrDms'
@@ -20,9 +20,9 @@ import { addToHistory, updateLatestHistory } from '@store/latestHistoryEntries'
 import { globals } from '@styles'
 import { formatMintUrl, getInvoiceFromLnurl, isErr, isLnurl } from '@util'
 import { autoMintSwap, payLnInvoice, requestMint, requestToken, sendToken } from '@wallet'
-import { useCallback, useEffect } from 'react'
+import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import { BackHandler, StyleSheet, View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 
 interface IErrorProps {
 	e?: unknown
@@ -253,16 +253,12 @@ export default function ProcessingScreen({ navigation, route }: TProcessingPageP
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [isMelt, isSwap, isSendEcash])
 
-	// prevent android back button to go back to previous nav screen
-	useFocusEffect(
-		useCallback(() => {
-			const onBackPress = () => true
-			BackHandler.addEventListener('hardwareBackPress', onBackPress)
-			return () => {
-				BackHandler.removeEventListener('hardwareBackPress', onBackPress)
-			}
-		}, [])
-	)
+	// prevent back navigation - https://reactnavigation.org/docs/preventing-going-back/
+	useEffect(() => {
+		const backHandler = (e: TBeforeRemoveEvent) => preventBack(e, navigation.dispatch)
+		navigation.addListener('beforeRemove', backHandler)
+		return () => navigation.removeListener('beforeRemove', backHandler)
+	}, [navigation])
 
 	return (
 		<View style={[globals(color).container, styles.container]}>

src/screens/Payment/Send/EncodedToken.tsx

@@ -3,8 +3,9 @@ import useCopy from '@comps/hooks/Copy'
 import { CopyIcon, ShareIcon } from '@comps/Icons'
 import QR from '@comps/QR'
 import Txt from '@comps/Txt'
-import type { TEncodedTokenPageProps } from '@model/nav'
+import type { TBeforeRemoveEvent, TEncodedTokenPageProps } from '@model/nav'
 import TopNav from '@nav/TopNav'
+import { preventBack } from '@nav/utils'
 import { isIOS } from '@src/consts'
 import { useThemeContext } from '@src/context/Theme'
 import { NS } from '@src/i18n'
@@ -31,11 +32,17 @@ export default function EncodedTokenPage({ navigation, route }: TEncodedTokenPag
 		vib(400)
 	}, [route.params.token])
 
+	// prevent back navigation - https://reactnavigation.org/docs/preventing-going-back/
+	useEffect(() => {
+		const backHandler = (e: TBeforeRemoveEvent) => preventBack(e, navigation.dispatch)
+		navigation.addListener('beforeRemove', backHandler)
+		return () => navigation.removeListener('beforeRemove', backHandler)
+	}, [navigation])
+
 	return (
 		<View style={[globals(color).container, styles.container, { paddingBottom: isIOS ? 50 : 20 }]}>
 			<TopNav
 				withBackBtn
-				// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
 				screenName={`${t('newToken')}  🥜🐿️`}
 				handlePress={() => navigation.navigate('dashboard')}
 			/>

src/screens/Payment/Success.tsx

@@ -2,40 +2,33 @@ import Button from '@comps/Button'
 import Logo from '@comps/Logo'
 import Txt from '@comps/Txt'
 import { isIOS } from '@consts'
-import type { TSuccessPageProps } from '@model/nav'
-import { useFocusEffect } from '@react-navigation/core'
+import type { TBeforeRemoveEvent, TSuccessPageProps } from '@model/nav'
+import { preventBack } from '@nav/utils'
 import { useThemeContext } from '@src/context/Theme'
 import { NS } from '@src/i18n'
 import { formatInt, vib } from '@util'
 import LottieView from 'lottie-react-native'
-import { useCallback, useEffect, useState } from 'react'
+import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import { BackHandler, StyleSheet, Text, View } from 'react-native'
+import { StyleSheet, Text, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 export default function SuccessPage({ navigation, route }: TSuccessPageProps) {
 	const { amount, memo, fee, mint, isClaim, isMelt, nostr } = route.params
 	const { t } = useTranslation([NS.common])
 	const { color } = useThemeContext()
 	const insets = useSafeAreaInsets()
-	const [shouldHide, setShouldHide] = useState(false)
 
 	useEffect(() => vib(400), [])
 
-	// prevent android back button to go back to previous nav screen
-	useFocusEffect(
-		useCallback(() => {
-			setShouldHide(false)
-			const onBackPress = () => true
-			BackHandler.addEventListener('hardwareBackPress', onBackPress)
-			return () => {
-				BackHandler.removeEventListener('hardwareBackPress', onBackPress)
-				setShouldHide(true)
-			}
-		}, [])
-	)
+	// prevent back navigation - https://reactnavigation.org/docs/preventing-going-back/
+	useEffect(() => {
+		const backHandler = (e: TBeforeRemoveEvent) => preventBack(e, navigation.dispatch)
+		navigation.addListener('beforeRemove', backHandler)
+		return () => navigation.removeListener('beforeRemove', backHandler)
+	}, [navigation])
 
-	return shouldHide ? null : (
+	return (
 		<View style={[styles.container, { backgroundColor: color.BACKGROUND }]}>
 			<Logo size={250} style={styles.img} success />
 			<View style={{ width: '100%' }}>