Skip to main content

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');

Example: Triggering Haptic Feedback

import { HapticFeedback } from 'react-native';
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

Example: Using Haptic Feedback

import { HapticFeedback } from 'react-native'
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.

Testing Guidelines

  • Always test on physical devices, as simulators do not support haptic feedback.
  • Use Vibration.vibrate(300) for basic testing.
  • Verify that Vibration.cancel() stops vibration in progress.

Was this article helpful?