@mhpdev/react-native-haptics

A high-performance React Native library for iOS haptics and Android vibration effects.

Documentation · Example

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

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:

npm install @mhpdev/react-native-haptics

Or with Yarn:

yarn add @mhpdev/react-native-haptics

For iOS, navigate to the ios directory and install the pods:

cd ios && pod install

Expo

For Expo projects, follow these steps:

• Install the package:

  npx expo install @mhpdev/react-native-haptics
  

• Since it is not supported on Expo Go, run:

  npx expo prebuild
  

Usage

To learn how to use the library, check out the usage section.

Benchmarks (RN Haptics vs Expo Haptics)

The following benchmark results are for 200 time executions (Click here to see the full report repository):

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

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 (
    <SafeAreaView style={styles.container}>
      <TouchableOpacity style={styles.button} onPress={onImpactPress}>
        <Text style={styles.buttonText}>Trigger Heavy Impact</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
};

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.

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:

  jest.mock('@mhpdev/react-native-haptics', () =>
    require('@mhpdev/react-native-haptics/jest'),
  );
  

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT