Working with Haptics and Feedback
1. Using Haptic Feedback
| Method | Description | Notes |
|---|---|---|
| Haptics.impact() | Triggers a haptic impact feedback | Available on iOS and Android |
| Haptics.notification() | Triggers a notification haptic feedback | Available on iOS and Android |
| Haptics.selection() | Triggers a selection haptic feedback | Available on iOS and Android |
Note: Haptic feedback is only available on physical devices, not in simulators.
2. Triggering Impact Feedback
| Method | Description | Notes |
|---|---|---|
| Haptics.impactAsync() | Triggers impact feedback based on the specified style | Available on iOS and Android |
Example: Triggering Impact Feedback
import { Haptics } from 'expo-haptics';
// Trigger a light impact feedback
await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
// Trigger a medium impact feedback
await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
// Trigger a heavy impact feedback
await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
Note: On iOS, impact feedback styles are mapped to system-defined haptic patterns. On Android, they use the Vibrator API.
3. Triggering Notification Feedback
| Method | Description | Notes |
|---|---|---|
| Haptics.notification() | Triggers a notification feedback pattern | Available on iOS and Android |
Example: Triggering Notification Feedback
import { Haptics } from 'expo-haptics';
Haptics.notification();
Note: On iOS, this uses the system's default notification haptic pattern. On Android, it uses the default notification vibration pattern.
4. Triggering Selection Feedback
| Method | Description | Notes |
|---|---|---|
| Haptics.selectionAsync() | Triggers a selection feedback haptic | Available on iOS and Android |
Example: Triggering Selection Feedback
import * as Haptics from 'expo-haptics';
await Haptics.selectionAsync();
5. Setting Impact Style
| Property | Values | Description |
|---|---|---|
| impactStyle | 'light' | 'medium' | 'heavy' | 'rigid' | 'soft' |
Sets the intensity and type of haptic impact feedback |
Example: Setting Impact Style
import { ImpactFeedbackStyle, triggerImpact } from 'expo-haptics';
triggerImpact(ImpactFeedbackStyle.Heavy);
Note: The impact style affects the haptic feedback intensity and type. Choose based on the user interaction's significance.
6. Using Vibration API
| Method | Description | Notes |
|---|---|---|
| Haptics.impact() | Triggers a haptic impact feedback | Available on iOS and Android |
| Haptics.notification() | Triggers a notification haptic feedback | Available on iOS and Android |
| Haptics.selection() | Triggers a selection haptic feedback | Available on iOS and Android |
| Haptics.impactAsync() | Asynchronous version of impact | Available on iOS and Android |
| Haptics.notificationAsync() | Asynchronous version of notification | Available on iOS and Android |
| Haptics.selectionAsync() | Asynchronous version of selection | Available on iOS and Android |
Example: Using Haptics.notification()
import { Haptics } from 'expo-haptics';
Haptics.notification();7. Creating Vibration Patterns
| Pattern | Description | Notes |
|---|---|---|
| [500] | Single vibration of 500ms | Simple single pulse |
| [200, 300, 400] | Three vibrations: 200ms, 300ms, 400ms | Custom sequence with delays |
| [100, 200, 100, 200] | Alternating short and long vibrations | Repeating pattern for alerts |
Example: Using Vibration API
import { Vibration } from 'expo-haptics';
// Vibrate once for 500ms
Vibration.vibrate(500);
// Vibrate with pattern
Vibration.vibrate([200, 300, 400]);
// Vibrate with custom pattern
Vibration.vibrate([100, 200, 100, 200]);
Note: Vibration patterns are not supported on all devices. Always check device support before using.
8. Canceling Vibration
| Method | Description | Notes |
|---|---|---|
| Haptics.cancel() | Stops any currently playing haptic feedback. | Safe to call even if no haptic is active. |
Example: Canceling Vibration
import * as Haptics from 'expo-haptics';
// Start a vibration
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
// Cancel it immediately
Haptics.cancel();
9. Checking Haptic Support
| Feature | Description | Availability |
|---|---|---|
| Haptics.hasSupport | Checks if the device supports haptic feedback | NEW Expo SDK 50+ |
| Haptics.hasVibrationSupport | Checks if the device supports vibration haptics | NEW Expo SDK 50+ |
Example: Checking Haptic Support
import * as Haptics from 'expo-haptics';
if (Haptics.hasSupport) {
console.log("Device supports haptic feedback");
} else {
console.log("No haptic support available");
}
if (Haptics.hasVibrationSupport) {
console.log("Device supports vibration haptics");
} else {
console.log("No vibration haptic support available");
}10. Implementing Custom Haptic Patterns
| Property | Description | Values |
|---|---|---|
| pattern | Defines the haptic pattern as an array of durations (in milliseconds) | [50, 100, 50] |
| duration | Duration of the haptic feedback in milliseconds | 100 |
Example: Custom Haptic Pattern
import { Haptics } from 'expo-haptics';
const customPattern = [50, 100, 50, 200];
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy, customPattern);
Note: The pattern array should contain durations in milliseconds. Each value represents the duration of a haptic event.