Awesome
react-native-haptic-feedback
Contributions Welcome
Thanks to all the amazing contributors for their support.
Made with contrib.rocks.
Getting Started
Install the react-native-haptic-feedback
package using npm or yarn:
$ npm install react-native-haptic-feedback --save # or use $ yarn add react-native-haptic-feedback
Linking
:information_source: Note: Starting from React Native version 0.60, native modules are auto-linked. For more details, refer to the official documentation.
Automatic Linking (React Native 0.60+)
For React Native 0.60 and above, manual linking is generally unnecessary. Auto-linking handles the process automatically.
Manual Linking
If you're using an older React Native version or face issues with auto-linking, follow these manual linking steps:
- Link the module:
$ react-native link react-native-haptic-feedback
- For iOS, navigate to the iOS directory and install CocoaPods dependencies:
If you encounter issues with the previous step on iOS, clean up and reinstall the dependencies using these commands:$ cd ios && pod install
$ rm -rf ios/Pods && rm -rf ios/build && cd ios && pod install && cd ../ $ rm -rf node_modules && rm yarn.lock $ yarn install # or use $ npm install
Manual Setup Guide - iOS
-
Open Your Project in Xcode: Launch Xcode and navigate to your project in the project navigator.
-
Add RNReactNativeHapticFeedback Project: Right-click on the "Libraries" folder in the project navigator and select "Add Files to [your project's name]". Locate
RNReactNativeHapticFeedback.xcodeproj
in your project'snode_modules
directory and add it. -
Navigate to Project Settings: In Xcode, select your project from the project navigator to access project settings.
-
Select App Target: Under the "Targets" section, choose the target corresponding to your app.
-
Link Binary With Libraries: Go to the "Build Phases" tab and expand the "Link Binary With Libraries" section.
-
Add Library: Click the "+" button to add a library.
-
Add libRNReactNativeHapticFeedback.a: From the list of libraries, select
libRNReactNativeHapticFeedback.a
and add it. -
Run Your Project: Press
Cmd+R
to build and run your project in the iOS simulator or on a connected device.
Manual Setup Guide - Android
-
Configure MainApplication.java: Open
android/app/src/main/java/[...]/MainApplication.java
.- Add the following import at the top of the file:
import com.mkuczera.RNReactNativeHapticFeedbackPackage;
- Add the following import at the top of the file:
-
Modify settings.gradle: Append the following lines to
android/settings.gradle
:include ':react-native-haptic-feedback' project(':react-native-haptic-feedback').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-haptic-feedback/android')
Usage
To use the library, import it in your JavaScript file:
import ReactNativeHapticFeedback from "react-native-haptic-feedback";
// Optional configuration
const options = {
enableVibrateFallback: true,
ignoreAndroidSystemSettings: false,
};
// Trigger haptic feedback
ReactNativeHapticFeedback.trigger("impactLight", options);
Alternatively, you can use the named import:
import { trigger } from "react-native-haptic-feedback";
// Optional configuration
const options = {
enableVibrateFallback: true,
ignoreAndroidSystemSettings: false,
};
// Trigger haptic feedback
trigger("impactLight", options);
Available Methods
trigger(method, options)
Use this method to trigger haptic feedback.
Argument | Description |
---|---|
method | Specifies the type of haptic feedback. See the list of available methods below. |
options.enableVibrateFallback | :iphone: iOS only. If haptic feedback is unavailable (iOS < 10 OR Device < iPhone6s), vibrate with default method (heavy 1s) (default: false). |
options.ignoreAndroidSystemSettings | :android: Android only. If haptic is disabled in the Android system settings, this allows ignoring the setting and triggering haptic feedback. (default: false). |
Method Overview
Here's an overview of the available methods and their compatibility:
Method | Android | iOS |
---|---|---|
impactLight | ✅ | ✅ |
impactMedium | ✅ | ✅ |
impactHeavy | ✅ | ✅ |
rigid | ✅ | ✅ |
soft | ✅ | ✅ |
notificationSuccess | ✅ | ✅ |
notificationWarning | ✅ | ✅ |
notificationError | ✅ | ✅ |
selection | ❌ | ✅ |
clockTick | ✅ | ❌ |
contextClick | ✅ | ❌ |
keyboardPress | ✅ | ❌ |
keyboardRelease | ✅ | ❌ |
keyboardTap | ✅ | ❌ |
longPress | ✅ | ❌ |
textHandleMove | ✅ | ❌ |
virtualKey | ✅ | ❌ |
virtualKeyRelease | ✅ | ❌ |
effectClick | ✅ | ❌ |
effectDoubleClick | ✅ | ❌ |
effectHeavyClick | ✅ | ❌ |
effectTick | ✅ | ❌ |
Available Methods (Version 1.6.0 and Prior)
If you're using version 1.6.0 or earlier, you can use this method:
import ReactNativeHapticFeedback from "react-native-haptic-feedback";
// Trigger haptic feedback with vibrate fallback
ReactNativeHapticFeedback.trigger("method", enableVibrateFallback);
Where method
can be one of: "selection", "impactLight", "impactMedium", "impactHeavy", "notificationSuccess", "notificationWarning", or "notificationError". The enableVibrateFallback
option is for iOS devices without haptic feedback support.
We recommend using the newer approach for enhanced flexibility and improved compatibility.