From f8ed254a2215714ce1ae97e936d778485cd4c0a1 Mon Sep 17 00:00:00 2001
From: ameer2468 <33054370+ameer2468@users.noreply.github.com>
Date: Fri, 14 Jun 2024 19:42:19 +0300
Subject: [PATCH] [MOB-94] Onboarding haptics (#2552)

Onboarding haptics
---
 apps/mobile/src/screens/onboarding/GetStarted.tsx |  9 ++++++++-
 apps/mobile/src/screens/onboarding/NewLibrary.tsx |  6 +++++-
 apps/mobile/src/screens/onboarding/Privacy.tsx    | 11 ++++++++++-
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/apps/mobile/src/screens/onboarding/GetStarted.tsx b/apps/mobile/src/screens/onboarding/GetStarted.tsx
index 491159d0b..6b80a08ee 100644
--- a/apps/mobile/src/screens/onboarding/GetStarted.tsx
+++ b/apps/mobile/src/screens/onboarding/GetStarted.tsx
@@ -2,6 +2,7 @@ import { useNavigation, useRoute } from '@react-navigation/native';
 import { AppLogo, BloomOne } from '@sd/assets/images';
 import SdMobIntro from '@sd/assets/videos/SdMobIntro.mp4';
 import { ResizeMode, Video } from 'expo-av';
+import * as Haptics from 'expo-haptics';
 import { Image } from 'expo-image';
 import { MotiView } from 'moti';
 import { CaretLeft } from 'phosphor-react-native';
@@ -111,7 +112,13 @@ const GetStartedScreen = ({ navigation }: OnboardingStackScreenProps<'GetStarted
 			</FadeInUpAnimation>
 			{/* Get Started Button */}
 			<FadeInUpAnimation delay={1200} style={tw`mt-8`}>
-				<AnimatedButton variant="accent" onPress={() => navigation.push('NewLibrary')}>
+				<AnimatedButton
+					variant="accent"
+					onPress={() => {
+						Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+						navigation.push('NewLibrary');
+					}}
+				>
 					<Text style={tw`text-center text-base font-medium text-ink`}>Get Started</Text>
 				</AnimatedButton>
 			</FadeInUpAnimation>
diff --git a/apps/mobile/src/screens/onboarding/NewLibrary.tsx b/apps/mobile/src/screens/onboarding/NewLibrary.tsx
index 68f22c1f7..d38cfa985 100644
--- a/apps/mobile/src/screens/onboarding/NewLibrary.tsx
+++ b/apps/mobile/src/screens/onboarding/NewLibrary.tsx
@@ -1,3 +1,4 @@
+import * as Haptics from 'expo-haptics';
 import { Controller } from 'react-hook-form';
 import { Alert, Text, View } from 'react-native';
 import { useOnboardingContext } from '~/components/context/OnboardingContext';
@@ -12,7 +13,10 @@ import { OnboardingContainer, OnboardingDescription, OnboardingTitle } from './G
 const NewLibraryScreen = ({ navigation }: OnboardingStackScreenProps<'NewLibrary'>) => {
 	const form = useOnboardingContext().forms.useForm('NewLibrary');
 
-	const handleNewLibrary = form.handleSubmit(() => navigation.navigate('Privacy'));
+	const handleNewLibrary = form.handleSubmit(() => {
+		Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+		navigation.navigate('Privacy');
+	});
 
 	const handleImport = () => {
 		Alert.alert('TODO');
diff --git a/apps/mobile/src/screens/onboarding/Privacy.tsx b/apps/mobile/src/screens/onboarding/Privacy.tsx
index cd9b7c908..de6623d0b 100644
--- a/apps/mobile/src/screens/onboarding/Privacy.tsx
+++ b/apps/mobile/src/screens/onboarding/Privacy.tsx
@@ -1,3 +1,4 @@
+import * as Haptics from 'expo-haptics';
 import { ArrowRight } from 'phosphor-react-native';
 import React from 'react';
 import { Controller } from 'react-hook-form';
@@ -80,7 +81,15 @@ const PrivacyScreen = () => {
 					)}
 				/>
 			</View>
-			<Button variant="accent" size="sm" onPress={form.handleSubmit(submit)} style={tw`mt-6`}>
+			<Button
+				variant="accent"
+				size="sm"
+				onPress={() => {
+					Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+					form.handleSubmit(submit)();
+				}}
+				style={tw`mt-6`}
+			>
 				<Text style={tw`text-center text-base font-medium text-ink`}>Continue</Text>
 			</Button>
 			<Pressable