https://github.com/mhpdev-com/react-native-haptics
A high-performance React Native library for iOS haptics and Android vibration effects
https://github.com/mhpdev-com/react-native-haptics
Last synced: about 2 months ago
JSON representation
A high-performance React Native library for iOS haptics and Android vibration effects
- Host: GitHub
- URL: https://github.com/mhpdev-com/react-native-haptics
- Owner: mhpdev-com
- License: mit
- Created: 2025-08-03T09:17:31.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2026-02-01T12:03:32.000Z (2 months ago)
- Last Synced: 2026-02-01T19:37:59.058Z (2 months ago)
- Language: TypeScript
- Size: 1.64 MB
- Stars: 23
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-react-native - @mhpdev/react-native-haptics - High-performance haptics for iOS and Android built with Turbo Modules on the UI thread. (UI Components / Haptics)
README
A high-performance React Native library for iOS haptics and Android vibration effects.
> **Only New Architecture**: This library is only compatible with the new architecture. If you're using React Native 0.76 or higher, it is already enabled. However, if your React Native version is between 0.68 and 0.75, you need to enable it first. [Click here if you need help enabling the new architecture](https://github.com/reactwg/react-native-new-architecture/blob/main/docs/enable-apps.md)
## Features
- 🚀 High-performance library built with Turbo Modules for Android and iOS
- 🎛️ Provides essential methods for triggering native haptic feedback
- 🤖 Supports a wide range of Android-specific vibration effects
- 🛠️ Easy to use with simple APIs
- 🧵 Executes on the UI thread to ensure instant feedback
- ✅ Fully type-safe and written in TypeScript
## Installation
### Bare React Native
Install the package using either npm or Yarn:
```sh
npm install @mhpdev/react-native-haptics
```
Or with Yarn:
```sh
yarn add @mhpdev/react-native-haptics
```
For iOS, navigate to the ios directory and install the pods:
```sh
cd ios && pod install
```
### Expo
For Expo projects, follow these steps:
1. Install the package:
```sh
npx expo install @mhpdev/react-native-haptics
```
2. Since it is not supported on Expo Go, run:
```sh
npx expo prebuild
```
## Usage
To learn how to use the library, check out the [usage section](./docs/USAGE.md).
## Benchmarks (RN Haptics vs Expo Haptics)
The following benchmark results are for 200 time executions ([Click here to see the full report repository](https://github.com/Mhp23/RN-Haptics-Benchmarks)):
#### How much faster on iOS (iPhone 14 Pro Max)?
| Effect | React Native Haptics | Expo Haptics | Speedup (RN / Expo) |
| -------------------- | -------------------: | -----------: | --------------------: |
| Impact Heavy | 0.779 | 0.365 | 0.779 / 0.365 ≈ 2.13x |
| Notification Success | 1.378 | 0.365 | 1.378 / 0.365 ≈ 3.78x |
| Selection | 0.602 | 0.350 | 0.602 / 0.350 ≈ 1.72x |
#### How much faster on Android (Samsung A55)?
| Effect | React Native Haptics | Expo Haptics | Speedup (RN / Expo) |
| -------------------- | -------------------: | -----------: | -------------------------------------: |
| Impact Heavy | 9.766 | 2.902 | 9.766 / 2.902 ≈ 3.37x |
| Notification Success | 10.837 | 3.433 | 10.837 / 3.433 ≈ 3.16x |
| Selection | 11.236 | 3.037 | 11.236 / 3.037 ≈ 3.70x |
| Android Haptics | 1.879 | 3.238 | 3.238 / 1.879 ≈ 1.72x (Expo is faster) |
## Quick Start
```tsx
import React from 'react';
import Haptics from '@mhpdev/react-native-haptics';
import {SafeAreaView, StyleSheet, Text, TouchableOpacity} from 'react-native';
const App: React.FC = () => {
const onImpactPress = () => {
Haptics.impact('heavy');
};
return (
Trigger Heavy Impact
);
};
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
button: {
padding: 12.5,
borderRadius: 5,
backgroundColor: 'skyblue',
},
buttonText: {
fontSize: 22,
fontWeight: '600',
},
});
```
To become more familiar with the usage of the library, check out the [example project](./example/).
## Testing
To mock the package's methods and components using the default mock configuration provided, follow these steps:
- Create a file named `@mhpdev/react-native-haptics.ts` inside your `__mocks__` directory.
- Copy the following code into that file:
```js
jest.mock('@mhpdev/react-native-haptics', () =>
require('@mhpdev/react-native-haptics/jest'),
);
```
## Contributing
See the [contributing guide](./CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT