feat(ui): add onPress to slider dots for navigation

Author: pwltr

src/components/SliderDots.tsx

@@ -5,18 +5,20 @@ import Animated, {
 	interpolate,
 	useAnimatedStyle,
 } from 'react-native-reanimated';
-import { View } from '../styles/components';
+import { Pressable } from '../styles/components';
 
 const DOT_SIZE = 7;
 
 const Dot = ({
 	animValue,
 	index,
 	length,
+	onPress,
 }: {
 	index: number;
 	length: number;
 	animValue: SharedValue<number>;
+	onPress: () => void;
 }): ReactElement => {
 	const width = DOT_SIZE;
 
@@ -39,9 +41,9 @@ const Dot = ({
 	}, [animValue, index, length]);
 
 	return (
-		<View style={styles.dotRoot} color="gray2">
+		<Pressable style={styles.dotRoot} color="gray2" onPress={onPress}>
 			<Animated.View style={[styles.dot, animStyle]} />
-		</View>
+		</Pressable>
 	);
 };
 

src/screens/Onboarding/Slideshow.tsx

@@ -171,11 +171,15 @@ const Slideshow = ({
 		return { opacity };
 	}, [slides.length, progressValue]);
 
+	const scrollToSlide = (index: number): void => {
+		ref.current?.scrollTo({ index, animated: true });
+	};
+
 	const onHeaderButton = (): void => {
 		if (isLastSlide) {
 			navigation.navigate('Passphrase');
 		} else {
-			ref.current?.scrollTo({ index: slides.length - 1, animated: true });
+			scrollToSlide(slides.length - 1);
 		}
 	};
 
@@ -241,13 +245,16 @@ const Slideshow = ({
 				</Animated.View>
 			</View>
 
-			<Animated.View style={[styles.dots, startOpacity]} pointerEvents="none">
+			<Animated.View
+				style={[styles.dots, startOpacity]}
+				pointerEvents={isLastSlide ? 'none' : 'auto'}>
 				{slides.map((_, i) => (
 					<Dot
 						key={i}
 						index={i}
 						animValue={progressValue}
 						length={slides.length}
+						onPress={(): void => scrollToSlide(i)}
 					/>
 				))}
 			</Animated.View>

src/screens/Wallets/Receive/ReceiveQR.tsx

@@ -676,13 +676,16 @@ const ReceiveQR = ({
 								gesture.activeOffsetX([-10, 10]);
 							}}
 						/>
-						<View style={styles.dots} pointerEvents="none">
+						<View style={styles.dots}>
 							{slides.map((_slide, index) => (
 								<Dot
 									key={index}
 									index={index}
 									animValue={progress}
 									length={slides.length}
+									onPress={(): void => {
+										carouselRef.current?.scrollTo({ index, animated: true });
+									}}
 								/>
 							))}
 						</View>