fix(ui): remove home screen swipe gestures

Author: pwltr

src/navigation/root/RootNavigator.tsx

@@ -202,18 +202,10 @@ const RootNavigator = (): ReactElement => {
 					name="ActivityAssignContact"
 					component={ActivityAssignContact}
 				/>
-				<Stack.Screen
-					name="Scanner"
-					component={ScannerScreen}
-					options={{ animation: 'slide_from_right' }}
-				/>
+				<Stack.Screen name="Scanner" component={ScannerScreen} />
 				<Stack.Screen name="TransferRoot" component={TransferNavigator} />
 				<Stack.Screen name="Settings" component={SettingsNavigator} />
-				<Stack.Screen
-					name="Profile"
-					component={Profile}
-					options={{ animation: 'slide_from_left' }}
-				/>
+				<Stack.Screen name="Profile" component={Profile} />
 				<Stack.Screen name="ProfileEdit" component={ProfileEdit} />
 				<Stack.Screen name="Contacts" component={Contacts} />
 				<Stack.Screen name="ContactEdit" component={ContactEdit} />

src/screens/Profile/Profile.tsx

@@ -13,9 +13,7 @@ import { StyleSheet, View, useWindowDimensions } from 'react-native';
 import QRCode from 'react-native-qrcode-svg';
 import { FadeIn, FadeOut } from 'react-native-reanimated';
 import Share from 'react-native-share';
-import { useAppSelector } from '../../hooks/redux';
 
-import DetectSwipe from '../../components/DetectSwipe';
 import Divider from '../../components/Divider';
 import NavigationHeader from '../../components/NavigationHeader';
 import ProfileCard from '../../components/ProfileCard';
@@ -24,6 +22,7 @@ import ProfileLinks from '../../components/ProfileLinks';
 import SafeAreaInset from '../../components/SafeAreaInset';
 import Tooltip from '../../components/Tooltip';
 import IconButton from '../../components/buttons/IconButton';
+import { useAppSelector } from '../../hooks/redux';
 import { useProfile, useSlashtags } from '../../hooks/slashtags';
 import type { RootStackScreenProps } from '../../navigation/types';
 import { onboardingProfileStepSelector } from '../../store/reselect/slashtags';
@@ -45,11 +44,11 @@ const Profile = memo((props: RootStackScreenProps<'Profile'>): ReactElement => {
 
 	switch (onboardingProfileStep) {
 		case 'Intro':
-			return <ProfileIntro {...props} />;
+			return <ProfileIntro />;
 		case 'InitialEdit':
 			return <ProfileEdit {...props} />;
 		case 'OfflinePayments':
-			return <OfflinePayments {...props} />;
+			return <OfflinePayments />;
 		default:
 			return <ProfileScreen {...props} />;
 	}
@@ -66,10 +65,6 @@ const ProfileScreen = ({
 	const [showCopy, setShowCopy] = useState(false);
 	const [isSharing, setIsSharing] = useState(false);
 
-	const onSwipeLeft = (): void => {
-		navigation.popToTop();
-	};
-
 	const handleCopy = useCallback((): void => {
 		setShowCopy(() => true);
 		setTimeout(() => setShowCopy(() => false), 1200);
@@ -112,56 +107,54 @@ const ProfileScreen = ({
 				onActionPress={(): void => navigation.navigate('Contacts')}
 			/>
 
-			<DetectSwipe onSwipeLeft={onSwipeLeft}>
-				<ScrollView contentContainerStyle={styles.content}>
-					<ProfileCard url={url} profile={profile} resolving={false} />
-					<Divider />
-					<View style={styles.actions}>
-						<IconButton
-							testID="CopyButton"
-							style={styles.iconButton}
-							onPress={handleCopy}>
-							<CopyIcon height={24} width={24} color="brand" />
-						</IconButton>
-						<IconButton
-							style={styles.iconButton}
-							disabled={isSharing}
-							onPress={handleShare}>
-							<ShareIcon height={24} width={24} color="brand" />
-						</IconButton>
-						<IconButton
-							testID="EditButton"
-							style={styles.iconButton}
-							onPress={(): void => {
-								navigation.navigate('ProfileEdit');
-							}}>
-							<PencilIcon height={20} width={20} color="brand" />
-						</IconButton>
-					</View>
-					<View style={styles.qrContainer}>
-						<QRView
-							url={url}
-							profile={profile}
-							qrRef={qrRef}
-							onPress={handleCopy}
-						/>
-						{showCopy && (
-							<AnimatedView
-								style={styles.tooltip}
-								color="transparent"
-								entering={FadeIn.duration(500)}
-								exiting={FadeOut.duration(500)}>
-								<Tooltip
-									testID="ContactCopiedTooltip"
-									text={t('contact_copied')}
-								/>
-							</AnimatedView>
-						)}
-					</View>
-					<ProfileLinksView profile={profile} />
-					<SafeAreaInset type="bottom" minPadding={16} />
-				</ScrollView>
-			</DetectSwipe>
+			<ScrollView contentContainerStyle={styles.content}>
+				<ProfileCard url={url} profile={profile} resolving={false} />
+				<Divider />
+				<View style={styles.actions}>
+					<IconButton
+						testID="CopyButton"
+						style={styles.iconButton}
+						onPress={handleCopy}>
+						<CopyIcon height={24} width={24} color="brand" />
+					</IconButton>
+					<IconButton
+						style={styles.iconButton}
+						disabled={isSharing}
+						onPress={handleShare}>
+						<ShareIcon height={24} width={24} color="brand" />
+					</IconButton>
+					<IconButton
+						testID="EditButton"
+						style={styles.iconButton}
+						onPress={(): void => {
+							navigation.navigate('ProfileEdit');
+						}}>
+						<PencilIcon height={20} width={20} color="brand" />
+					</IconButton>
+				</View>
+				<View style={styles.qrContainer}>
+					<QRView
+						url={url}
+						profile={profile}
+						qrRef={qrRef}
+						onPress={handleCopy}
+					/>
+					{showCopy && (
+						<AnimatedView
+							style={styles.tooltip}
+							color="transparent"
+							entering={FadeIn.duration(500)}
+							exiting={FadeOut.duration(500)}>
+							<Tooltip
+								testID="ContactCopiedTooltip"
+								text={t('contact_copied')}
+							/>
+						</AnimatedView>
+					)}
+				</View>
+				<ProfileLinksView profile={profile} />
+				<SafeAreaInset type="bottom" minPadding={16} />
+			</ScrollView>
 		</ThemedView>
 	);
 };

src/screens/Profile/ProfileOnboarding.tsx

@@ -1,4 +1,3 @@
-import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import React, {
 	memo,
 	ReactElement,
@@ -8,17 +7,12 @@ import React, {
 } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Image, ImageSourcePropType, StyleSheet, View } from 'react-native';
-import { useAppDispatch, useAppSelector } from '../../hooks/redux';
 
-import DetectSwipe from '../../components/DetectSwipe';
 import NavigationHeader from '../../components/NavigationHeader';
 import SafeAreaInset from '../../components/SafeAreaInset';
 import SwitchRow from '../../components/SwitchRow';
 import Button from '../../components/buttons/Button';
-import type {
-	RootStackParamList,
-	RootStackScreenProps,
-} from '../../navigation/types';
+import { useAppDispatch, useAppSelector } from '../../hooks/redux';
 import {
 	selectedNetworkSelector,
 	selectedWalletSelector,
@@ -33,35 +27,30 @@ import { updateSlashPayConfig } from '../../utils/slashtags';
 const crownImageSrc = require('../../assets/illustrations/crown.png');
 const coinsImageSrc = require('../../assets/illustrations/coin-stack.png');
 
-export const ProfileIntro = memo(
-	({ navigation }: RootStackScreenProps<'Profile'>): ReactElement => {
-		const { t } = useTranslation('slashtags');
+export const ProfileIntro = memo((): ReactElement => {
+	const { t } = useTranslation('slashtags');
 
-		return (
-			<Layout
-				navigation={navigation}
-				illustration={crownImageSrc}
-				nextStep="InitialEdit"
-				buttonText={t('continue')}
-				header={t('profile')}>
-				<Display>
-					<Trans
-						t={t}
-						i18nKey="onboarding_profile1_header"
-						components={{ accent: <Display color="brand" /> }}
-					/>
-				</Display>
-				<BodyM color="secondary" style={styles.introText}>
-					{t('onboarding_profile1_text')}
-				</BodyM>
-			</Layout>
-		);
-	},
-);
+	return (
+		<Layout
+			illustration={crownImageSrc}
+			nextStep="InitialEdit"
+			buttonText={t('continue')}
+			header={t('profile')}>
+			<Display>
+				<Trans
+					t={t}
+					i18nKey="onboarding_profile1_header"
+					components={{ accent: <Display color="brand" /> }}
+				/>
+			</Display>
+			<BodyM color="secondary" style={styles.introText}>
+				{t('onboarding_profile1_text')}
+			</BodyM>
+		</Layout>
+	);
+});
 
-export const OfflinePayments = ({
-	navigation,
-}: RootStackScreenProps<'Profile'>): ReactElement => {
+export const OfflinePayments = (): ReactElement => {
 	const { t } = useTranslation('slashtags');
 	const dispatch = useAppDispatch();
 	const selectedWallet = useAppSelector(selectedWalletSelector);
@@ -75,7 +64,6 @@ export const OfflinePayments = ({
 
 	return (
 		<Layout
-			navigation={navigation}
 			illustration={coinsImageSrc}
 			nextStep="Done"
 			buttonText={t('continue')}
@@ -106,15 +94,13 @@ export const OfflinePayments = ({
 
 const Layout = memo(
 	({
-		navigation,
 		illustration,
 		nextStep,
 		buttonText,
 		header,
 		children,
 		onNext,
 	}: {
-		navigation: NativeStackNavigationProp<RootStackParamList, 'Profile'>;
 		illustration: ImageSourcePropType;
 		nextStep: TSlashtagsState['onboardingProfileStep'];
 		buttonText: string;
@@ -124,34 +110,28 @@ const Layout = memo(
 	}): ReactElement => {
 		const dispatch = useAppDispatch();
 
-		const onSwipeLeft = (): void => {
-			navigation.popToTop();
-		};
-
 		return (
 			<ThemedView style={styles.root}>
 				<SafeAreaInset type="top" />
 				<NavigationHeader title={header} />
-				<DetectSwipe onSwipeLeft={onSwipeLeft}>
-					<View style={styles.content}>
-						<View style={styles.imageContainer}>
-							<Image style={styles.image} source={illustration} />
-						</View>
-						<View style={styles.middleContainer}>{children}</View>
-						<View style={styles.buttonContainer}>
-							<Button
-								style={styles.button}
-								text={buttonText}
-								size="large"
-								testID="OnboardingContinue"
-								onPress={(): void => {
-									onNext?.();
-									dispatch(setOnboardingProfileStep(nextStep));
-								}}
-							/>
-						</View>
+				<View style={styles.content}>
+					<View style={styles.imageContainer}>
+						<Image style={styles.image} source={illustration} />
+					</View>
+					<View style={styles.middleContainer}>{children}</View>
+					<View style={styles.buttonContainer}>
+						<Button
+							style={styles.button}
+							text={buttonText}
+							size="large"
+							testID="OnboardingContinue"
+							onPress={(): void => {
+								onNext?.();
+								dispatch(setOnboardingProfileStep(nextStep));
+							}}
+						/>
 					</View>
-				</DetectSwipe>
+				</View>
 				<SafeAreaInset type="bottom" minPadding={16} />
 			</ThemedView>
 		);

src/screens/Scanner/MainScanner.tsx

@@ -2,7 +2,6 @@ import React, { memo, ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import { StyleSheet } from 'react-native';
 
-import DetectSwipe from '../../components/DetectSwipe';
 import NavigationHeader from '../../components/NavigationHeader';
 import SafeAreaInset from '../../components/SafeAreaInset';
 import type { RootStackScreenProps } from '../../navigation/types';
@@ -18,10 +17,6 @@ const ScannerScreen = ({
 	const { t } = useTranslation('other');
 	const onScan = route.params?.onScan;
 
-	const onSwipeRight = (): void => {
-		navigation.popToTop();
-	};
-
 	const onRead = (uri: string): void => {
 		if (!uri) {
 			showToast({
@@ -45,15 +40,10 @@ const ScannerScreen = ({
 	};
 
 	return (
-		<DetectSwipe onSwipeRight={onSwipeRight}>
-			<ScannerComponent onRead={onRead}>
-				<SafeAreaInset type="top" />
-				<NavigationHeader
-					style={styles.navigationHeader}
-					title={t('qr_scan')}
-				/>
-			</ScannerComponent>
-		</DetectSwipe>
+		<ScannerComponent onRead={onRead}>
+			<SafeAreaInset type="top" />
+			<NavigationHeader style={styles.navigationHeader} title={t('qr_scan')} />
+		</ScannerComponent>
 	);
 };