Skip to content

Commit 6d85a23

Browse files
pwltrpwltr
authored
Merge pull request #2487 from synonymdev/fix/remove-home-swipes
fix: remove home swipes
2 parents 7eb309b + b0f547c commit 6d85a23

File tree

8 files changed

+153
-198
lines changed

8 files changed

+153
-198
lines changed

‎src/components/SliderDots.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,20 @@ import Animated, {
55
interpolate,
66
useAnimatedStyle,
77
} from 'react-native-reanimated';
8-
import { View } from '../styles/components';
8+
import { Pressable } from '../styles/components';
99

1010
const DOT_SIZE = 7;
1111

1212
const Dot = ({
1313
animValue,
1414
index,
1515
length,
16+
onPress,
1617
}: {
1718
index: number;
1819
length: number;
1920
animValue: SharedValue<number>;
21+
onPress: () => void;
2022
}): ReactElement => {
2123
const width = DOT_SIZE;
2224

@@ -39,9 +41,9 @@ const Dot = ({
3941
}, [animValue, index, length]);
4042

4143
return (
42-
<View style={styles.dotRoot} color="gray2">
44+
<Pressable style={styles.dotRoot} color="gray2" onPress={onPress}>
4345
<Animated.View style={[styles.dot, animStyle]} />
44-
</View>
46+
</Pressable>
4547
);
4648
};
4749

‎src/navigation/root/RootNavigator.tsx‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -202,18 +202,10 @@ const RootNavigator = (): ReactElement => {
202202
name="ActivityAssignContact"
203203
component={ActivityAssignContact}
204204
/>
205-
<Stack.Screen
206-
name="Scanner"
207-
component={ScannerScreen}
208-
options={{ animation: 'slide_from_right' }}
209-
/>
205+
<Stack.Screen name="Scanner" component={ScannerScreen} />
210206
<Stack.Screen name="TransferRoot" component={TransferNavigator} />
211207
<Stack.Screen name="Settings" component={SettingsNavigator} />
212-
<Stack.Screen
213-
name="Profile"
214-
component={Profile}
215-
options={{ animation: 'slide_from_left' }}
216-
/>
208+
<Stack.Screen name="Profile" component={Profile} />
217209
<Stack.Screen name="ProfileEdit" component={ProfileEdit} />
218210
<Stack.Screen name="Contacts" component={Contacts} />
219211
<Stack.Screen name="ContactEdit" component={ContactEdit} />

‎src/screens/Onboarding/Slideshow.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -171,11 +171,15 @@ const Slideshow = ({
171171
return { opacity };
172172
}, [slides.length, progressValue]);
173173

174+
const scrollToSlide = (index: number): void => {
175+
ref.current?.scrollTo({ index, animated: true });
176+
};
177+
174178
const onHeaderButton = (): void => {
175179
if (isLastSlide) {
176180
navigation.navigate('Passphrase');
177181
} else {
178-
ref.current?.scrollTo({ index: slides.length - 1, animated: true });
182+
scrollToSlide(slides.length - 1);
179183
}
180184
};
181185

@@ -241,13 +245,16 @@ const Slideshow = ({
241245
</Animated.View>
242246
</View>
243247

244-
<Animated.View style={[styles.dots, startOpacity]} pointerEvents="none">
248+
<Animated.View
249+
style={[styles.dots, startOpacity]}
250+
pointerEvents={isLastSlide ? 'none' : 'auto'}>
245251
{slides.map((_, i) => (
246252
<Dot
247253
key={i}
248254
index={i}
249255
animValue={progressValue}
250256
length={slides.length}
257+
onPress={(): void => scrollToSlide(i)}
251258
/>
252259
))}
253260
</Animated.View>

‎src/screens/Profile/Profile.tsx‎

Lines changed: 51 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,7 @@ import { StyleSheet, View, useWindowDimensions } from 'react-native';
1313
import QRCode from 'react-native-qrcode-svg';
1414
import { FadeIn, FadeOut } from 'react-native-reanimated';
1515
import Share from 'react-native-share';
16-
import { useAppSelector } from '../../hooks/redux';
1716

18-
import DetectSwipe from '../../components/DetectSwipe';
1917
import Divider from '../../components/Divider';
2018
import NavigationHeader from '../../components/NavigationHeader';
2119
import ProfileCard from '../../components/ProfileCard';
@@ -24,6 +22,7 @@ import ProfileLinks from '../../components/ProfileLinks';
2422
import SafeAreaInset from '../../components/SafeAreaInset';
2523
import Tooltip from '../../components/Tooltip';
2624
import IconButton from '../../components/buttons/IconButton';
25+
import { useAppSelector } from '../../hooks/redux';
2726
import { useProfile, useSlashtags } from '../../hooks/slashtags';
2827
import type { RootStackScreenProps } from '../../navigation/types';
2928
import { onboardingProfileStepSelector } from '../../store/reselect/slashtags';
@@ -45,11 +44,11 @@ const Profile = memo((props: RootStackScreenProps<'Profile'>): ReactElement => {
4544

4645
switch (onboardingProfileStep) {
4746
case 'Intro':
48-
return <ProfileIntro {...props} />;
47+
return <ProfileIntro />;
4948
case 'InitialEdit':
5049
return <ProfileEdit {...props} />;
5150
case 'OfflinePayments':
52-
return <OfflinePayments {...props} />;
51+
return <OfflinePayments />;
5352
default:
5453
return <ProfileScreen {...props} />;
5554
}
@@ -66,10 +65,6 @@ const ProfileScreen = ({
6665
const [showCopy, setShowCopy] = useState(false);
6766
const [isSharing, setIsSharing] = useState(false);
6867

69-
const onSwipeLeft = (): void => {
70-
navigation.popToTop();
71-
};
72-
7368
const handleCopy = useCallback((): void => {
7469
setShowCopy(() => true);
7570
setTimeout(() => setShowCopy(() => false), 1200);
@@ -112,56 +107,54 @@ const ProfileScreen = ({
112107
onActionPress={(): void => navigation.navigate('Contacts')}
113108
/>
114109

115-
<DetectSwipe onSwipeLeft={onSwipeLeft}>
116-
<ScrollView contentContainerStyle={styles.content}>
117-
<ProfileCard url={url} profile={profile} resolving={false} />
118-
<Divider />
119-
<View style={styles.actions}>
120-
<IconButton
121-
testID="CopyButton"
122-
style={styles.iconButton}
123-
onPress={handleCopy}>
124-
<CopyIcon height={24} width={24} color="brand" />
125-
</IconButton>
126-
<IconButton
127-
style={styles.iconButton}
128-
disabled={isSharing}
129-
onPress={handleShare}>
130-
<ShareIcon height={24} width={24} color="brand" />
131-
</IconButton>
132-
<IconButton
133-
testID="EditButton"
134-
style={styles.iconButton}
135-
onPress={(): void => {
136-
navigation.navigate('ProfileEdit');
137-
}}>
138-
<PencilIcon height={20} width={20} color="brand" />
139-
</IconButton>
140-
</View>
141-
<View style={styles.qrContainer}>
142-
<QRView
143-
url={url}
144-
profile={profile}
145-
qrRef={qrRef}
146-
onPress={handleCopy}
147-
/>
148-
{showCopy && (
149-
<AnimatedView
150-
style={styles.tooltip}
151-
color="transparent"
152-
entering={FadeIn.duration(500)}
153-
exiting={FadeOut.duration(500)}>
154-
<Tooltip
155-
testID="ContactCopiedTooltip"
156-
text={t('contact_copied')}
157-
/>
158-
</AnimatedView>
159-
)}
160-
</View>
161-
<ProfileLinksView profile={profile} />
162-
<SafeAreaInset type="bottom" minPadding={16} />
163-
</ScrollView>
164-
</DetectSwipe>
110+
<ScrollView contentContainerStyle={styles.content}>
111+
<ProfileCard url={url} profile={profile} resolving={false} />
112+
<Divider />
113+
<View style={styles.actions}>
114+
<IconButton
115+
testID="CopyButton"
116+
style={styles.iconButton}
117+
onPress={handleCopy}>
118+
<CopyIcon height={24} width={24} color="brand" />
119+
</IconButton>
120+
<IconButton
121+
style={styles.iconButton}
122+
disabled={isSharing}
123+
onPress={handleShare}>
124+
<ShareIcon height={24} width={24} color="brand" />
125+
</IconButton>
126+
<IconButton
127+
testID="EditButton"
128+
style={styles.iconButton}
129+
onPress={(): void => {
130+
navigation.navigate('ProfileEdit');
131+
}}>
132+
<PencilIcon height={20} width={20} color="brand" />
133+
</IconButton>
134+
</View>
135+
<View style={styles.qrContainer}>
136+
<QRView
137+
url={url}
138+
profile={profile}
139+
qrRef={qrRef}
140+
onPress={handleCopy}
141+
/>
142+
{showCopy && (
143+
<AnimatedView
144+
style={styles.tooltip}
145+
color="transparent"
146+
entering={FadeIn.duration(500)}
147+
exiting={FadeOut.duration(500)}>
148+
<Tooltip
149+
testID="ContactCopiedTooltip"
150+
text={t('contact_copied')}
151+
/>
152+
</AnimatedView>
153+
)}
154+
</View>
155+
<ProfileLinksView profile={profile} />
156+
<SafeAreaInset type="bottom" minPadding={16} />
157+
</ScrollView>
165158
</ThemedView>
166159
);
167160
};

‎src/screens/Profile/ProfileOnboarding.tsx‎

Lines changed: 40 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
21
import React, {
32
memo,
43
ReactElement,
@@ -8,17 +7,12 @@ import React, {
87
} from 'react';
98
import { Trans, useTranslation } from 'react-i18next';
109
import { Image, ImageSourcePropType, StyleSheet, View } from 'react-native';
11-
import { useAppDispatch, useAppSelector } from '../../hooks/redux';
1210

13-
import DetectSwipe from '../../components/DetectSwipe';
1411
import NavigationHeader from '../../components/NavigationHeader';
1512
import SafeAreaInset from '../../components/SafeAreaInset';
1613
import SwitchRow from '../../components/SwitchRow';
1714
import Button from '../../components/buttons/Button';
18-
import type {
19-
RootStackParamList,
20-
RootStackScreenProps,
21-
} from '../../navigation/types';
15+
import { useAppDispatch, useAppSelector } from '../../hooks/redux';
2216
import {
2317
selectedNetworkSelector,
2418
selectedWalletSelector,
@@ -33,35 +27,30 @@ import { updateSlashPayConfig } from '../../utils/slashtags';
3327
const crownImageSrc = require('../../assets/illustrations/crown.png');
3428
const coinsImageSrc = require('../../assets/illustrations/coin-stack.png');
3529

36-
export const ProfileIntro = memo(
37-
({ navigation }: RootStackScreenProps<'Profile'>): ReactElement => {
38-
const { t } = useTranslation('slashtags');
30+
export const ProfileIntro = memo((): ReactElement => {
31+
const { t } = useTranslation('slashtags');
3932

40-
return (
41-
<Layout
42-
navigation={navigation}
43-
illustration={crownImageSrc}
44-
nextStep="InitialEdit"
45-
buttonText={t('continue')}
46-
header={t('profile')}>
47-
<Display>
48-
<Trans
49-
t={t}
50-
i18nKey="onboarding_profile1_header"
51-
components={{ accent: <Display color="brand" /> }}
52-
/>
53-
</Display>
54-
<BodyM color="secondary" style={styles.introText}>
55-
{t('onboarding_profile1_text')}
56-
</BodyM>
57-
</Layout>
58-
);
59-
},
60-
);
33+
return (
34+
<Layout
35+
illustration={crownImageSrc}
36+
nextStep="InitialEdit"
37+
buttonText={t('continue')}
38+
header={t('profile')}>
39+
<Display>
40+
<Trans
41+
t={t}
42+
i18nKey="onboarding_profile1_header"
43+
components={{ accent: <Display color="brand" /> }}
44+
/>
45+
</Display>
46+
<BodyM color="secondary" style={styles.introText}>
47+
{t('onboarding_profile1_text')}
48+
</BodyM>
49+
</Layout>
50+
);
51+
});
6152

62-
export const OfflinePayments = ({
63-
navigation,
64-
}: RootStackScreenProps<'Profile'>): ReactElement => {
53+
export const OfflinePayments = (): ReactElement => {
6554
const { t } = useTranslation('slashtags');
6655
const dispatch = useAppDispatch();
6756
const selectedWallet = useAppSelector(selectedWalletSelector);
@@ -75,7 +64,6 @@ export const OfflinePayments = ({
7564

7665
return (
7766
<Layout
78-
navigation={navigation}
7967
illustration={coinsImageSrc}
8068
nextStep="Done"
8169
buttonText={t('continue')}
@@ -106,15 +94,13 @@ export const OfflinePayments = ({
10694

10795
const Layout = memo(
10896
({
109-
navigation,
11097
illustration,
11198
nextStep,
11299
buttonText,
113100
header,
114101
children,
115102
onNext,
116103
}: {
117-
navigation: NativeStackNavigationProp<RootStackParamList, 'Profile'>;
118104
illustration: ImageSourcePropType;
119105
nextStep: TSlashtagsState['onboardingProfileStep'];
120106
buttonText: string;
@@ -124,34 +110,28 @@ const Layout = memo(
124110
}): ReactElement => {
125111
const dispatch = useAppDispatch();
126112

127-
const onSwipeLeft = (): void => {
128-
navigation.popToTop();
129-
};
130-
131113
return (
132114
<ThemedView style={styles.root}>
133115
<SafeAreaInset type="top" />
134116
<NavigationHeader title={header} />
135-
<DetectSwipe onSwipeLeft={onSwipeLeft}>
136-
<View style={styles.content}>
137-
<View style={styles.imageContainer}>
138-
<Image style={styles.image} source={illustration} />
139-
</View>
140-
<View style={styles.middleContainer}>{children}</View>
141-
<View style={styles.buttonContainer}>
142-
<Button
143-
style={styles.button}
144-
text={buttonText}
145-
size="large"
146-
testID="OnboardingContinue"
147-
onPress={(): void => {
148-
onNext?.();
149-
dispatch(setOnboardingProfileStep(nextStep));
150-
}}
151-
/>
152-
</View>
117+
<View style={styles.content}>
118+
<View style={styles.imageContainer}>
119+
<Image style={styles.image} source={illustration} />
120+
</View>
121+
<View style={styles.middleContainer}>{children}</View>
122+
<View style={styles.buttonContainer}>
123+
<Button
124+
style={styles.button}
125+
text={buttonText}
126+
size="large"
127+
testID="OnboardingContinue"
128+
onPress={(): void => {
129+
onNext?.();
130+
dispatch(setOnboardingProfileStep(nextStep));
131+
}}
132+
/>
153133
</View>
154-
</DetectSwipe>
134+
</View>
155135
<SafeAreaInset type="bottom" minPadding={16} />
156136
</ThemedView>
157137
);

0 commit comments

Comments
 (0)