Haptics

[00:00:00]
>> Kadi Kraman: Now let's talk about haptics and haptic feedback. Haptic feedback is something that you don't have on the web, and it is the little vibration that your phone makes in response to certain touches. So it can be in front of pressing a button or just typing on your keyboard, etc.

[00:00:19]
And It's really handy to use haptics occasionally, but sparingly, to kind of enhance your app and make it a little bit more interesting to use. Let's install the library for haptics, so we'll install mbx-expo-install-expo-haptics. And if we look at the documentation for this library. It's a pretty small library and it basically has functions for impact async, notification async and selection async, which are basically presets for the different kind of vibration patterns you might want to do.

[00:00:55]
So I'm gonna open this on my phone to make sure that it's working. Can't feel vibrations on a simulator. Lovely, so I'll do some milk, some coffee, and tea.
>> Kadi Kraman: Lovely, it's so satisfying to see these animations on a real phone. All right, so let's add some haptic feedback in response to taps.

[00:01:25]
So we want to do a medium impact when the user deletes an item. Success notification so like the strongest animation as the strongest haptic feedback when the user completes an item, and then the medium impact if they mark a previously completed item as to do.
>> Kadi Kraman: So in our code, let's go to the index file and let's look at when we're deleting the item.

[00:01:58]
So let's do just after the set shopping list, I think we'll need to import haptics. So the import for this is import star as haptics from expo haptics.
>> Kadi Kraman: Right and then in handleDelete, just before setShoppingList, we'll do Haptics.ImpactAsync, and we'll do Haptics.ImpactFeedbackStyle.Medium. So this will be a medium impact.

[00:02:40]
Make sure that this works.
>> Kadi Kraman: So if I delete this, I'm getting a little haptic feedback, love it. And now we want to do a success notification, so the strongest feedback when the user completes an item and then a medium impact when they mark a previously completed item undone.

[00:03:06]
So this will be in our toggle function. So handleToggleComplete. So it will be in here, in our, if the item is the item that we are currently toggling. Let's add another if statement here. So if item complete as time stuff, so if it was previously completed, let's do Haptics.ImpactAsync and Haptic.ImpactFeedbackStyle.Medium.

[00:03:41]
And else, let's use a success notification. So Haptics.NotificationAsync, Haptics.NotificationFeedback type, and success.
>> Kadi Kraman: Lovely, so,
>> Kadi Kraman: Now when we go back,
>> Kadi Kraman: If we mark this as complete, yeah, it's a. So you should, when you now toggle these between completed and not, you will notice that the success notification is quite a bit stronger, so on the iPhone it's like a double vibration, whereas the medium impact is quite a bit lighter.

[00:04:38]
So let me just try this on Android as well. So this is actually one of those things that it is much more fun if you're developing on a real device unlike on a simulator like I am because you can actually feel it. So let me plug in my Android phone,okay and expert go, scan the QR code.

[00:05:09]
>> Kadi Kraman: Okay, so again, new phone, so I don't have anything set up yet. So let's do coffee. Let's do some milk, tea, sugar. All right, so now, yeah,interestingly Android haptic feedback by default it feels much more stronger than iOS. I don't know if this just this phone but it's quite interesting.

[00:05:37]
But yeah so same for Android. So the success notification is quite a bit stronger than the medium impact.