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.

License

MIT

About

📳 Low Latency Haptic Feedback with Worklet Support for React Native

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project