Skip to content

README.md

Latest commit

 

History

History
84 lines (52 loc) · 4.24 KB

README.md

File metadata and controls

84 lines (52 loc) · 4.24 KB

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.impactWithIntensity(style: 'light' | 'medium' | 'heavy' | 'soft' | 'rigid', intensity: number)

This function is not supported on Android

The impactWithIntensity provides haptic feedback with a customizable intensity level. This allows to adjust the strength of the haptic feedback based on the needs of the application, offering a more refined and dynamic user experience.

intensity: A number between 0.0 and 1 that determines the strength of the haptic feedback, see Triggers impact feedback with a specific intensity

License

MIT