Skip to content

📳 Low Latency Haptic Feedback with Worklet Support for React Native

License

Notifications You must be signed in to change notification settings

oblador/react-native-nitro-haptics

Repository files navigation

Nitro Haptics

Low Latency Haptic Feedback with Worklet Support for React Native

Follow oblador on Bluesky X (formerly Twitter) Follow GitHub followers


CI NPM Version NPM License

Features

  • Low latency for timing interaction and feedback perfectly, thanks to extremely fast Nitro Modules
  • Worklet support to ensure instant feedback even if JS thread is blocked
  • Built for New Architecture from the start
  • Drop-in replacement for expo-haptics for ease of adoption

Installation

You need to install both Nitro Modules core package and Nitro Haptics:

npm install react-native-nitro-modules react-native-nitro-haptics
# Don't forget to update CocoaPods and recompile app:
cd ios && pod install

Usage

See Apple Human Interface Guidelines for best practices and references.

import { Haptics } from 'react-native-nitro-haptics';

<Button title="Press me" onPress={() => Haptics.impact('medium')} />;

Reanimated Worklets

Assuming your app has been correctly configured with Reanimated, Nitro Haptics can be called directly from the UI thread by using Nitro Modules Boxing:

import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import { Haptics } from 'react-native-nitro-haptics';
import { NitroModules } from 'react-native-nitro-modules';
const boxed = NitroModules.box(Haptics);

<GestureDetector
  gesture={Gesture.Tap().onBegin(() => {
    'worklet';
    boxed.unbox().impact('medium');
  })}
/>;

API

Haptics.impact(style: 'light' | 'medium' | 'heavy' | 'soft' | 'rigid')

Impact haptics provide a physical metaphor you can use to complement a visual experience. For example, people might feel a tap when a view snaps into place or a thud when two heavy objects collide.

style argument maps to UIImpactFeedbackGenerator.FeedbackStyle, see HIG for visualization.

Haptics.notification(type: 'success' | 'warning' | 'error')

Notification haptics provide feedback about the outcome of a task or action, such as depositing a check or unlocking a vehicle.

type argument maps to UINotificationFeedbackGenerator.FeedbackType, see HIG for visualization.

Haptics.selection()

Selection haptics provide feedback while the values of a UI element are changing, see HIG for visualization.

Haptics.performAndroidHaptics(type: 'confirm' | 'reject' | 'gesture-start' | 'gesture-end' | 'toggle-on' | 'toggle-off' | 'clock-tick' | 'context-click' | 'drag-start' | 'keyboard-tap' | 'keyboard-press' | 'keyboard-release' | 'long-press' | 'virtual-key' | 'virtual-key-release' | 'no-haptics' | 'segment-tick' | 'segment-frequent-tick' | 'text-handle-move')

Android equivalent to provide haptic feedback for some built in actions, such as long presses, but you may wish to provide feedback for your own widget, see HapticFeedbackConstants for uses.

License

MIT