Activity 17: Haptic Helper

Learn to add tactile feedback to your apps with haptics and vibration patterns.

🚀 Quick Start

bash

# 1. Install dependencies
npm install --legacy-peer-deps

# 2. Start Expo
npx expo start

# 3. Scan QR code with Expo Go app

🎯 What You'll Learn

This is a complete demo app with no TODOs. Explore the code to understand:

Impact Feedback: Physical "bump" sensations (Light, Medium, Heavy)
Notification Feedback: Contextual alerts (Success, Warning, Error)
Selection Feedback: Subtle ticks for scrolling/picking
When to Use Haptics: Best practices and UX guidelines

📋 Features

✓ Complete Implementation

Three types of haptic feedback patterns
Visual UI showing different intensities
Best practices guide built into the app
Real-world use case examples

🎨 Interactive Demo

Try each haptic type:

Light Impact: Gentle tap feedback
Medium Impact: Standard button press
Heavy Impact: Strong confirmation
Success: Task completion
Warning: Proceed with caution
Error: Something went wrong
Selection: Subtle tick for scrolling

📁 File Structure

graphql

activity-17-haptic-helper/
├── App.js                      # Complete haptic demo (100%)
├── package.json                # Dependencies with expo-haptics
└── README.md                   # This file

🎓 Learning Objectives

After exploring this app, you'll understand:

Three Haptic Types:
- Impact: Physical sensations
- Notification: Contextual alerts
- Selection: Subtle feedback
When to Use Haptics:
- ✓ Button presses and confirmations
- ✓ Success/error states
- ✓ Picker scrolling
- ✗ Background events
- ✗ Every single tap
UX Design Principles:
- Match intensity to action importance
- Don't overuse (becomes annoying)
- Consider accessibility preferences
- Test on real devices

🧪 Testing Your Understanding

Try these experiments:

Test One: Intensity Comparison

Press Light, Medium, Heavy in sequence
Notice the difference in strength
Which feels most appropriate for a delete button?

Test 2: Contextual Feedback

Try Success, Warning, Error patterns
Which provides the clearest meaning?
When would you use each in a real app?

Test 3: Rapid Selection

Tap Selection button repeatedly (5-10 times)
Feel the subtle tick pattern
Imagine using this for a date picker

💡 Challenge Extensions

Want to experiment? Try these modifications:

Challenge One: Custom Patterns

Create a vibration strength slider:

javascript

const [intensity, setIntensity] = useState(50);

const triggerCustom = () => {
  if (intensity < 33) {
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
  } else if (intensity < 66) {
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
  } else {
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
  }
};