chore: replace react-native-haptic-feedback with expo-haptics

enesozturk · Mar 8, 2021 · 5fcc0b2 · 5fcc0b2
1 parent 9406935
commit 5fcc0b2
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 26 deletions.
diff --git a/package.json b/package.json
@@ -42,6 +42,7 @@
   "dependencies": {
     "@gorhom/portal": "^1.0.3",
     "expo-blur": "^9.0.0",
+    "expo-haptics": "^9.0.0",
     "lodash.isequal": "^4.5.0",
     "nanoid": "^3.1.20"
   },

diff --git a/src/components/holdItem/HoldItem.tsx b/src/components/holdItem/HoldItem.tsx
@@ -23,11 +23,7 @@ import Animated, {
   useAnimatedReaction,
 } from 'react-native-reanimated';
 
-// Optional Haptic Feedback
-let ReactNativeHaptic: any;
-try {
-  ReactNativeHaptic = require('react-native-haptic-feedback').default;
-} catch (error) {}
+import * as Haptics from 'expo-haptics';
 
 // Utils
 import {
@@ -164,13 +160,23 @@ const HoldItemComponent = ({
   };
 
   const hapticResponse = () => {
-    const haptic =
-      !hapticFeedback || hapticFeedback === 'enabled'
-        ? 'impactMedium'
-        : hapticFeedback;
-    ReactNativeHaptic.trigger(haptic, {
-      enableVibrateFallback: true,
-    });
+    const style = !hapticFeedback ? 'Medium' : hapticFeedback;
+    switch (style) {
+      case `Selection`:
+        Haptics.selectionAsync();
+        break;
+      case `Light`:
+      case `Medium`:
+      case `Heavy`:
+        Haptics.impactAsync(Haptics.ImpactFeedbackStyle[style]);
+        break;
+      case `Success`:
+      case `Warning`:
+      case `Error`:
+        Haptics.notificationAsync(Haptics.NotificationFeedbackType[style]);
+        break;
+      default:
+    }
   };
 
   const onCompletion = (isFinised: boolean) => {
@@ -180,10 +186,8 @@ const HoldItemComponent = ({
       state.value = CONTEXT_MENU_STATE.ACTIVE;
       isActive.value = true;
       scaleBack();
-      if (hapticFeedback !== 'none') {
-        if (ReactNativeHaptic) {
-          runOnJS(hapticResponse)();
-        }
+      if (hapticFeedback !== 'None') {
+        runOnJS(hapticResponse)();
       }
     }
 

diff --git a/src/components/holdItem/types.d.ts b/src/components/holdItem/types.d.ts
@@ -93,20 +93,19 @@ export type HoldItemProps = {
   /**
    * Set if you'd like to enable haptic feedback on activation
    * @type string
-   * @default 'impactMedium'
+   * @default 'Medium'
    * @examples
    * hapticFeedback="none"
    */
   hapticFeedback?:
-    | 'enabled'
-    | 'none'
-    | 'selection'
-    | 'impactLight'
-    | 'impactMedium'
-    | 'impactHeavy'
-    | 'notificationSuccess'
-    | 'notificationWarning'
-    | 'notificationError';
+    | 'None'
+    | 'Selection'
+    | 'Light'
+    | 'Medium'
+    | 'Heavy'
+    | 'Success'
+    | 'Warning'
+    | 'Error';
 };
 
 export type GestureHandlerProps = {