Haptics

Haptic feedback is the little vibration your phone makes in response to certain actions. Using it in the right place at the right time improves the experience of using your app. The expo-haptics library has several built-in types of vibration from light to heavy.

Install expo-haptics

npx expo install expo-haptics

Add haptic feedback in response to taps

• medium impact when the user deletes an item
• success notification when the user completes an item
• medium impact when they mark a previously completed item undone

Update: app/index.tsx

@@ -10,6 +10,7 @@ import { theme } from "../theme";
 import { ShoppingListItem } from "../components/ShoppingListItem";
 import { useEffect, useState } from "react";
 import { getFromStorage, saveToStorage } from "../utils/storage";
+import * as Haptics from "expo-haptics";

 const storageKey = "shopping-list";

@@ -56,12 +57,18 @@ export default function App() {
   const handleDelete = (id: string) => {
     const newShoppingList = shoppingList.filter((item) => item.id !== id);
     LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
     setShoppingList(newShoppingList);
   };

   const handleToggleComplete = (id: string) => {
     const newShoppingList = shoppingList.map((item) => {
       if (item.id === id) {
+        if (item.completedAtTimestamp) {
+          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+        } else {
+          Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+        }
         return {
           ...item,
           completedAtTimestamp: item.completedAtTimestamp

• medium impact then they request to delete an item

Update: components/ShoppingListItem.tsx

@@ -9,6 +9,7 @@ import {
 import AntDesign from "@expo/vector-icons/AntDesign";
 import Entypo from "@expo/vector-icons/Entypo";
 import { theme } from "../theme";
+import * as Haptics from "expo-haptics";

 type Props = {
   name: string;
@@ -24,6 +25,7 @@ export function ShoppingListItem({
   onToggleComplete,
 }: Props) {
   const handleDelete = () => {
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
     Alert.alert(
       `Are you sure you want to delete ${name}?`,
       "It will be gone for good",

Checkpoint

✔️ Add haptic feedback