Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

📳 Low Latency Haptic Feedback with Worklet Support for React Native

License

NotificationsYou must be signed in to change notification settings

oblador/react-native-nitro-haptics

Repository files navigation

Low Latency Haptic Feedback with Worklet Support for React Native

Follow oblador on Bluesky X (formerly Twitter) FollowGitHub followers


CINPM VersionNPM License

Features

  • Low latency for timing interaction and feedback perfectly, thanks to extremely fastNitro Modules
  • Worklet support to ensure instant feedback even if JS thread is blocked
  • Built forNew Architecture from the start
  • Drop-in replacement forexpo-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

SeeApple Human Interface Guidelines for best practices and references.

import{Haptics}from'react-native-nitro-haptics';<Buttontitle="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 usingNitro Modules Boxing:

import{Gesture,GestureDetector}from'react-native-gesture-handler';import{Haptics}from'react-native-nitro-haptics';import{NitroModules}from'react-native-nitro-modules';constboxed=NitroModules.box(Haptics);<GestureDetectorgesture={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 toUIImpactFeedbackGenerator.FeedbackStyle, seeHIG 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 toUINotificationFeedbackGenerator.FeedbackType, seeHIG for visualization.

Haptics.selection()

Selection haptics provide feedback while the values of a UI element are changing, seeHIG 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, seeHapticFeedbackConstants for uses.

License

MIT

About

📳 Low Latency Haptic Feedback with Worklet Support for React Native

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project

 

[8]ページ先頭

©2009-2025 Movatter.jp