Implementing Haptic Feedback and Vibration
1. Implementing Vibration
| Method | Description | Platform Support |
|---|---|---|
| Vibration.vibrate() | Triggers a vibration pattern on the device | iOS | Android |
| Vibration.cancel() | Stops any ongoing vibration | iOS | Android |
Example: Basic Vibration
import { Vibration } from 'react-native';
// Vibrate for 500ms
Vibration.vibrate(500);
Example: Vibration Pattern
import { Vibration } from 'react-native';
// Vibrate for 500ms, pause for 200ms, vibrate for 300ms
Vibration.vibrate([500, 200, 300]);
Example: Cancel Ongoing Vibration
import { Vibration } from 'react-native';
// Start vibration
Vibration.vibrate(1000);
// Cancel it after 500ms
setTimeout(() => {
Vibration.cancel();
}, 500);
Note: On iOS, vibration patterns are not supported in the simulator.
2. Using Haptic Feedback Patterns
| Pattern | Description | Usage |
|---|---|---|
| notificationSuccess | Indicates a successful operation | InteractionManager.runAfterInteractions(() => { HapticFeedback.trigger('notificationSuccess');}); |
| notificationWarning | Indicates a warning or caution | HapticFeedback.trigger('notificationWarning'); |
| notificationError | Indicates an error or failure | HapticFeedback.trigger('notificationError'); |
| selection | Used for selection changes | HapticFeedback.trigger('selection'); |
Note: Haptic feedback is only available on iOS devices and Android 8.0+.
Warning: Avoid overusing haptic feedback to prevent user fatigue.
3. Creating Custom Vibration Patterns
| Property | Description | Values |
|---|---|---|
| pattern | Defines the vibration pattern as an array of milliseconds | [500, 1000, 500] - Vibrate for 500ms, pause for 1000ms, vibrate for 500ms |
| repeat | Defines how many times to repeat the pattern (-1 for infinite) | -1 or 0 |
Example: Custom Vibration Pattern
import { Vibration } from 'react-native';
const customPattern = [1000, 500, 2000, 500]; // Vibrate 1s, pause 500ms, vibrate 2s, pause 500ms
Vibration.vibrate(customPattern, 2); // Repeat 2 times
Note: On iOS, vibration patterns are limited to a maximum of 5 seconds.
4. Handling Platform-specific Haptics
Example: Using Vibration API for Platform-specific Feedback
import { Vibration } from 'react-native';
const handleHapticFeedback = () => {
// Android: Vibrate for 500ms
if (Platform.OS === 'android') {
Vibration.vibrate(500);
} else {
// iOS: Use system haptic feedback
Vibration.vibrate();
}
};
| Platform | Haptic Method | Notes |
|---|---|---|
| iOS | Vibration.vibrate() |
Uses system haptic feedback |
| Android | Vibration.vibrate(duration) |
Accepts duration in milliseconds |
Note: On iOS,
Vibration.vibrate() triggers the default haptic feedback. For more control on iOS, use react-native-haptic-feedback library.
Warning: On Android,
Vibration.vibrate() without parameters will vibrate for 1000ms by default. Always specify a duration or use Vibration.cancel() to stop vibration.
Example: Using react-native-haptic-feedback for iOS
import RNHapticFeedback from 'react-native-haptic-feedback';
const triggerHaptic = () => {
RNHapticFeedback.trigger('impactLight');
};
| Haptic Type | Platform Support | Description |
|---|---|---|
| impactLight | iOS | Light impact feedback |
| impactMedium | iOS | Medium impact feedback |
| impactHeavy | iOS | Heavy impact feedback |
5. Using Haptics for User Feedback
React Native provides haptic feedback capabilities through the react-native-haptic-feedback library, which allows developers to provide tactile feedback to users based on interactions.
| Property | Description | Values |
|---|---|---|
| type | Specifies the type of haptic feedback to be triggered | 'impactLight', 'impactMedium', 'impactHeavy', 'notificationSuccess', 'notificationWarning', 'notificationError' |
| enableVibrate | Enables vibration alongside haptic feedback (iOS only) | true, false |
| vibrationIntensity | Adjusts the intensity of vibration (iOS only) | 'low', 'medium', 'high' |
Example: Triggering Haptic Feedback
import RNHapticFeedback from 'react-native-haptic-feedback';
const triggerHaptic = () => {
RNHapticFeedback.trigger('impactMedium');
};
// Usage in a button press
<TouchableOpacity onPress={triggerHaptic}>
<Text>Press Me</Text>
</TouchableOpacity>
Note: On Android, haptic feedback is not natively supported and will fall back to vibration if available.
Warning: Haptic feedback should be used sparingly to avoid user fatigue and ensure accessibility.
6. Implementing Haptic Touch
| Property | Description | Platform Support |
|---|---|---|
| hapticFeedback | Enables haptic feedback on supported devices | iOS / Android |
| impactStyle | Specifies the type of haptic impact | iOS / Android |
Note: Haptic feedback is only available on physical devices, not simulators.
Comparison of Haptic Styles
- Impact: Provides tactile feedback for user interactions
- Notification: Used for success or error states
- Selection: Indicates selection changes
7. Managing Vibration Permissions
| Permission | Platform | Description | Status |
|---|---|---|---|
| android.permission.VIBRATE | Android | Required to access vibration hardware on Android devices. | NEW |
| NSVibrationUsageDescription | iOS | Required for requesting vibration permission on iOS devices. Must be included in Info.plist. | NEW |
Example: Requesting Vibration Permission on iOS
import UIKit
import AVFoundation
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
AVAudioSession.sharedInstance.requestRecordPermission { granted in
if granted {
// Vibration is allowed
} else {
// Handle denied permission
}
}
}
}
Note: On iOS, vibration is handled through the AVAudioSession API. You must include
NSVibrationUsageDescription in your app's Info.plist to request permission.
Warning: On Android, the
VIBRATE permission must be declared in the manifest and granted at runtime for devices running Android 6.0 (API level 23) or higher.
8. Disabling Haptics
Example: Disabling Haptics in React Native
import { Platform } from 'react-native';
import { Vibration } from 'react-native';
// Disable haptics on iOS by setting the system setting
// This is a workaround since React Native doesn't provide direct API to disable haptics
if (Platform.OS === 'ios') {
// On iOS, haptics can be disabled via system settings
// This code snippet shows how to check if haptics are enabled
const isHapticEnabled = true; // This would need to be determined via system APIs or user preferences
if (!isHapticEnabled) {
// Skip vibration or haptic feedback
console.log('Haptics disabled, skipping feedback');
}
}
// On Android, you can control vibration patterns
const disableVibration = () => {
Vibration.cancel(); // Cancel any ongoing vibrations
};
// Example usage:
disableVibration();
| Platform | Control Method | Notes |
|---|---|---|
| iOS | System Settings |
Haptics must be disabled via system settings, not programmatically |
| Android | Vibration.cancel() |
Cancel ongoing vibrations; no direct API to disable haptics |
Note: On iOS, haptics are controlled by system settings and cannot be disabled programmatically. Developers must rely on user preferences or third-party libraries to manage haptic behavior.
9. Using expo-haptics for Haptic Feedback
Example: Basic Haptic Feedback
import { Haptics } from 'expo-haptics';
// Trigger a light impact haptic
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
// Trigger a medium impact haptic
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
// Trigger a heavy impact haptic
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
| Style | Description | Platform Support |
|---|---|---|
| Haptics.ImpactFeedbackStyle.Light | Light impact feedback | iOS, Android |
| Haptics.ImpactFeedbackStyle.Medium | Medium impact feedback | iOS, Android |
| Haptics.ImpactFeedbackStyle.Heavy | Heavy impact feedback | iOS, Android |
Example: Notification Haptic Feedback
import { Haptics } from 'expo-haptics';
// Trigger a success notification haptic
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
// Trigger a warning notification haptic
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning);
// Trigger a failure notification haptic
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
| Type | Description | Platform Support |
|---|---|---|
| Haptics.NotificationFeedbackType.Success | Success notification haptic | iOS, Android |
| Haptics.NotificationFeedbackType.Warning | Warning notification haptic | iOS, Android |
| Haptics.NotificationFeedbackType.Error | Error notification haptic | iOS, Android |
Note: On iOS, haptic feedback requires the device to be set to "Vibrate on Ring" or "Vibrate on Silent" in Settings > Sounds > Vibration.
10. Testing Haptic Feedback on Devices
Example: Basic Vibration Test
import { Vibration } from 'react-native';
const testVibration = () => {
// Vibrate for 300ms
Vibration.vibrate(300);
};
export default testVibration;
| Method | Description | Platform Support |
|---|---|---|
| Vibration.vibrate() | Triggers a vibration pattern | iOS, Android |
| Vibration.cancel() | Stops ongoing vibration | iOS, Android |
Note: On iOS, haptic feedback requires the
UIUserInterfaceStyle to be set correctly and may vary based on device settings.
Warning: On Android,
Vibration.vibrate() may not work in debug mode without proper permissions.