Merge pull request #775 from andrew-bierman/haptic-feedback-implement…

…ation

apps/expo/package.json

@@ -85,6 +85,7 @@
     "expo-document-picker": "~11.5.4",
     "expo-file-system": "~15.4.4",
     "expo-font": "~11.4.0",
+    "expo-haptics": "~12.8.1",
     "expo-image-picker": "^14.7.1",
     "expo-linear-gradient": "~12.3.0",
     "expo-linking": "~5.0.2",

apps/next/next.config.js

@@ -104,6 +104,7 @@ const nextConfig = function () {
       'expo-status-bar',
       'expo-system-ui',
       'expo-web-browser',
+      'expo-haptics',
       '@tanstack/react-query',
       'react-native-table-component',
       // Remove when we have a proper solution for this

apps/tauri/next.config.js

@@ -102,6 +102,7 @@ const nextConfig = function () {
       'expo-status-bar',
       'expo-system-ui',
       'expo-web-browser',
+      'expo-haptics',
       '@tanstack/react-query',
       'react-native-table-component',
       // Remove when we have a proper solution for this

packages/app/hooks/common/index.ts

@@ -5,3 +5,4 @@ export { useQueryUpdater } from './useQueryUpdater';
 export { useDebouncedValue } from './useDebouncedValue';
 export { useScreenWidth } from './useScreenWidth';
 export { useDebounce } from './useDebounce';
+export { useHaptic } from './useHaptic';

packages/app/hooks/common/useHaptic.ts

@@ -0,0 +1,40 @@
+import {
+  selectionAsync,
+  notificationAsync,
+  NotificationFeedbackType,
+  impactAsync,
+  ImpactFeedbackStyle,
+} from 'expo-haptics';
+import { useCallback, useMemo } from 'react';
+import { Platform } from 'react-native';
+
+export const useHaptic = () => {
+  const createFeedbackHandler = useCallback((action: any, type: string) => {
+    if (Platform.OS === 'web') {
+      return () => {};
+    }
+    return () => action(type);
+  }, []);
+
+  return useMemo(
+    () => ({
+      selection: Platform.OS === 'web' ? undefined : selectionAsync,
+      success: createFeedbackHandler(
+        notificationAsync,
+        NotificationFeedbackType.Success,
+      ),
+      error: createFeedbackHandler(
+        notificationAsync,
+        NotificationFeedbackType.Error,
+      ),
+      warning: createFeedbackHandler(
+        notificationAsync,
+        NotificationFeedbackType.Warning,
+      ),
+      light: createFeedbackHandler(impactAsync, ImpactFeedbackStyle.Light),
+      medium: createFeedbackHandler(impactAsync, ImpactFeedbackStyle.Medium),
+      heavy: createFeedbackHandler(impactAsync, ImpactFeedbackStyle.Heavy),
+    }),
+    [],
+  );
+};

packages/ui/src/RButton/index.tsx

@@ -1,8 +1,43 @@
-import { Button, styled } from 'tamagui';
+import { Button, ButtonProps, styled } from 'tamagui';
+import { useHaptic } from 'app/hooks/common';
+import { useCallback } from 'react';
 
-const RButton = styled(Button, {
+interface HapticRButtonProps extends ButtonProps {
+  hapticStrength?: 'light' | 'medium' | 'heavy';
+}
+
+const StyledButton = styled(Button, {
   backgroundColor: '#0C66A1', // temp fix, we need to set up proper tamagui theme
   color: 'white',
 });
 
+const RButton: React.FC<HapticRButtonProps> = ({
+  hapticStrength,
+  onPress,
+  ...props
+}) => {
+  const haptic = useHaptic();
+
+  const triggerHapticFeedback = useCallback(() => {
+    switch (hapticStrength) {
+      case 'light':
+        haptic.light();
+        break;
+      case 'medium':
+        haptic.medium();
+        break;
+      case 'heavy':
+        haptic.heavy();
+        break;
+    }
+  }, [hapticStrength]);
+
+  const handlePress = (e) => {
+    onPress?.(e);
+    triggerHapticFeedback();
+  };
+
+  return <StyledButton {...props} onPress={handlePress} />;
+};
+
 export default RButton;

yarn.lock

@@ -17217,6 +17217,7 @@ __metadata:
     expo-document-picker: "npm:~11.5.4"
     expo-file-system: "npm:~15.4.4"
     expo-font: "npm:~11.4.0"
+    expo-haptics: "npm:~12.8.1"
     expo-image-picker: "npm:^14.7.1"
     expo-linear-gradient: "npm:~12.3.0"
     expo-linking: "npm:~5.0.2"
@@ -17397,6 +17398,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"expo-haptics@npm:~12.8.1":
+  version: 12.8.1
+  resolution: "expo-haptics@npm:12.8.1"
+  peerDependencies:
+    expo: "*"
+  checksum: 10/62caee68d368c95ec91d0477c14ff538d66bb0c4707521153fc0ff396b72289fda158cd3858edb710f8a65ed9633709f9909af202506007da299813241bdff0b
+  languageName: node
+  linkType: hard
+
 "expo-head@npm:0.0.20":
   version: 0.0.20
   resolution: "expo-head@npm:0.0.20"