switch to expo-haptics for vibration

Berufskolleg-Geldern · Apr 19, 2024 · 9fefcf7 · 9fefcf7
1 parent d26d041
commit 9fefcf7
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 9 deletions.
diff --git a/calculator/components/Button.js b/calculator/components/Button.js
@@ -1,5 +1,6 @@
 import { Pressable, StyleSheet, Text, View, Image, Vibration, Platform } from 'react-native';
 import Icon from 'react-native-vector-icons/dist/FontAwesome';
+import * as Haptics from 'expo-haptics';
 
 export default function Button({ text, pressHandler, type }) {
     const ONE_SECOND_IN_MS = 1000;
@@ -17,24 +18,24 @@ export default function Button({ text, pressHandler, type }) {
 
 
 
-    if (text == "back") {
-        return <Pressable onPress={() => {pressHandler();Vibration.vibrate(10 * ONE_SECOND_IN_MS)}} style={[styles.button, {backgroundColor: "#2F2F39"}]}><Image source={require("../assets/delete-left-white.png")} style={[{width: 30, height: 30, color: "#fff"}]} /></Pressable>
+    if (text === "back") {
+        return <Pressable onPress={() => {pressHandler();Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)}} style={[styles.button, {backgroundColor: "#2F2F39"}]}><Image source={require("../assets/delete-left-white.png")} style={[{width: 30, height: 30, color: "#fff"}]} /></Pressable>
     }
 
 
-    if (type == "t1") {
+    if (type === "t1") {
         return (
-            <Pressable onPress={() => {pressHandler();Vibration.vibrate(10 * ONE_SECOND_IN_MS)}} style={[styles.button]}><Text style={[styles.text]}>{text}</Text></Pressable>
+            <Pressable onPress={() => {pressHandler();Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)}} style={[styles.button]}><Text style={[styles.text]}>{text}</Text></Pressable>
         );
     }
 
-    if (type == "t2") {
-        return <Pressable onPress={() => {pressHandler();Vibration.vibrate(10 * ONE_SECOND_IN_MS)}} style={[styles.button, {backgroundColor: "#4D5CFB"}]}><Text style={[styles.text]}>{text}</Text></Pressable>
+    if (type === "t2") {
+        return <Pressable onPress={() => {pressHandler();Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)}} style={[styles.button, {backgroundColor: "#4D5CFB"}]}><Text style={[styles.text]}>{text}</Text></Pressable>
     }
 
-    if (type == "t3") {
+    if (type === "t3") {
         return (
-            <Pressable onPress={() => {pressHandler();Vibration.vibrate(10 * ONE_SECOND_IN_MS)}} style={[styles.button, {backgroundColor: "#2F2F39"}]}><Text style={[styles.text]}>{text}</Text></Pressable>
+            <Pressable onPress={() => {pressHandler();Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)}} style={[styles.button, {backgroundColor: "#2F2F39"}]}><Text style={[styles.text]}>{text}</Text></Pressable>
         );
     }
 }

diff --git a/calculator/package-lock.json b/calculator/package-lock.json
diff --git a/calculator/package.json b/calculator/package.json
@@ -13,7 +13,8 @@
     "expo-status-bar": "~1.11.1",
     "react": "18.2.0",
     "react-native": "0.73.6",
-    "react-native-vector-icons": "^10.0.3"
+    "react-native-vector-icons": "^10.0.3",
+    "expo-haptics": "~12.8.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"