Enable haptic feedback on the NumberPad

src/components/BigNumberPad.js

@@ -59,6 +59,7 @@ class BigNumberPad extends React.Component {
                             return (
                                 <Button
                                     key={column}
+                                    shouldEnableHapticFeedback
                                     style={[styles.flex1, marginLeft]}
                                     text={column === '<' ? column : this.props.toLocaleDigit(column)}
                                     onLongPress={() => this.handleLongPress(column)}

src/components/Button.js

@@ -9,6 +9,7 @@ import KeyboardShortcut from '../libs/KeyboardShortcut';
 import Icon from './Icon';
 import CONST from '../CONST';
 import * as StyleUtils from '../styles/StyleUtils';
+import HapticFeedback from '../libs/HapticFeedback';
 
 const propTypes = {
     /** The text for the button label */
@@ -73,6 +74,9 @@ const propTypes = {
 
     /** Should we remove the left border radius top + bottom? */
     shouldRemoveLeftBorderRadius: PropTypes.bool,
+
+    /** Should enable the haptic feedback? */
+    shouldEnableHapticFeedback: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -96,6 +100,7 @@ const defaultProps = {
     ContentComponent: undefined,
     shouldRemoveRightBorderRadius: false,
     shouldRemoveLeftBorderRadius: false,
+    shouldEnableHapticFeedback: false,
 };
 
 class Button extends Component {
@@ -179,8 +184,18 @@ class Button extends Component {
     render() {
         return (
             <Pressable
-                onPress={this.props.onPress}
-                onLongPress={this.props.onLongPress}
+                onPress={(e) => {
+                    if (this.props.shouldEnableHapticFeedback) {
+                        HapticFeedback.trigger();
+                    }
+                    this.props.onPress(e);
+                }}
+                onLongPress={(e) => {
+                    if (this.props.shouldEnableHapticFeedback) {
+                        HapticFeedback.trigger();
+                    }
+                    this.props.onLongPress(e);
+                }}
                 onPressIn={this.props.onPressIn}
                 onPressOut={this.props.onPressOut}
                 disabled={this.props.isLoading || this.props.isDisabled}

src/components/PressableWithSecondaryInteraction/index.ios.js → src/components/PressableWithSecondaryInteraction/index.native.js

@@ -1,9 +1,9 @@
 import _ from 'underscore';
 import React, {forwardRef} from 'react';
-import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
 import {Pressable} from 'react-native';
 import * as pressableWithSecondaryInteractionPropTypes from './pressableWithSecondaryInteractionPropTypes';
 import Text from '../Text';
+import HapticFeedback from '../../libs/HapticFeedback';
 
 /**
  * This is a special Pressable that calls onSecondaryInteraction when LongPressed.
@@ -21,9 +21,7 @@ const PressableWithSecondaryInteraction = (props) => {
             onPressIn={props.onPressIn}
             onLongPress={(e) => {
                 e.preventDefault();
-                ReactNativeHapticFeedback.trigger('selection', {
-                    enableVibrateFallback: true,
-                });
+                HapticFeedback.trigger();
                 props.onSecondaryInteraction(e);
             }}
             onPressOut={props.onPressOut}

src/libs/HapticFeedback/index.android.js

@@ -0,0 +1,18 @@
+import {Platform} from 'react-native';
+import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
+
+function trigger() {
+    // The constant effectHeavyClick is added in API level 29.
+    // Docs: https://developer.android.com/reference/android/os/VibrationEffect#EFFECT_HEAVY_CLICK
+    // We use keyboardTap added in API level 8 as a fallback.
+    // Docs: https://developer.android.com/reference/android/view/HapticFeedbackConstants#KEYBOARD_TAP
+    if (Platform.Version >= 29) {
+        ReactNativeHapticFeedback.trigger('effectHeavyClick');
+        return;
+    }
+    ReactNativeHapticFeedback.trigger('keyboardTap');
+}
+
+export default {
+    trigger,
+};

src/libs/HapticFeedback/index.ios.js

@@ -0,0 +1,12 @@
+
+import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
+
+function trigger() {
+    ReactNativeHapticFeedback.trigger('selection', {
+        enableVibrateFallback: true,
+    });
+}
+
+export default {
+    trigger,
+};

src/libs/HapticFeedback/index.js

@@ -0,0 +1,6 @@
+/**
+ * Web does not support Haptic feedback
+ */
+export default {
+    trigger: () => {},
+};