feat: add optional haptic feedback

enesozturk · Mar 8, 2021 · 9406935 · 9406935
1 parent 080d18e
commit 9406935
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 0 deletions.
diff --git a/src/components/holdItem/HoldItem.tsx b/src/components/holdItem/HoldItem.tsx
@@ -10,6 +10,7 @@ import {
 } from 'react-native-gesture-handler';
 import Animated, {
   measure,
+  runOnJS,
   useAnimatedGestureHandler,
   useAnimatedProps,
   useAnimatedRef,
@@ -22,6 +23,12 @@ import Animated, {
   useAnimatedReaction,
 } from 'react-native-reanimated';
 
+// Optional Haptic Feedback
+let ReactNativeHaptic: any;
+try {
+  ReactNativeHaptic = require('react-native-haptic-feedback').default;
+} catch (error) {}
+
 // Utils
 import {
   TransformOriginAnchorPosition,
@@ -55,6 +62,7 @@ const HoldItemComponent = ({
   disableMove,
   menuAnchorPosition,
   activateOn,
+  hapticFeedback,
   methodParams,
   children,
 }: HoldItemProps) => {
@@ -155,13 +163,28 @@ const HoldItemComponent = ({
     });
   };
 
+  const hapticResponse = () => {
+    const haptic =
+      !hapticFeedback || hapticFeedback === 'enabled'
+        ? 'impactMedium'
+        : hapticFeedback;
+    ReactNativeHaptic.trigger(haptic, {
+      enableVibrateFallback: true,
+    });
+  };
+
   const onCompletion = (isFinised: boolean) => {
     'worklet';
     const isListValid = items && items.length > 0;
     if (isFinised && isListValid) {
       state.value = CONTEXT_MENU_STATE.ACTIVE;
       isActive.value = true;
       scaleBack();
+      if (hapticFeedback !== 'none') {
+        if (ReactNativeHaptic) {
+          runOnJS(hapticResponse)();
+        }
+      }
     }
 
     isAnimationStarted.value = false;

diff --git a/src/components/holdItem/types.d.ts b/src/components/holdItem/types.d.ts
@@ -89,6 +89,24 @@ export type HoldItemProps = {
    * activateOn="hold"
    */
   activateOn?: 'tap' | 'double-tap' | 'hold';
+
+  /**
+   * Set if you'd like to enable haptic feedback on activation
+   * @type string
+   * @default 'impactMedium'
+   * @examples
+   * hapticFeedback="none"
+   */
+  hapticFeedback?:
+    | 'enabled'
+    | 'none'
+    | 'selection'
+    | 'impactLight'
+    | 'impactMedium'
+    | 'impactHeavy'
+    | 'notificationSuccess'
+    | 'notificationWarning'
+    | 'notificationError';
 };
 
 export type GestureHandlerProps = {