From 89feaa2660f35a07dd9c1eb094c9caef4e89e00e Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Sat, 19 Feb 2022 20:44:50 +0530 Subject: [PATCH 1/5] Move Haptic feeback to its own lib --- src/libs/HapticFeedback/index.android.js | 18 ++++++++++++++++++ src/libs/HapticFeedback/index.ios.js | 12 ++++++++++++ src/libs/HapticFeedback/index.js | 6 ++++++ 3 files changed, 36 insertions(+) create mode 100644 src/libs/HapticFeedback/index.android.js create mode 100644 src/libs/HapticFeedback/index.ios.js create mode 100644 src/libs/HapticFeedback/index.js diff --git a/src/libs/HapticFeedback/index.android.js b/src/libs/HapticFeedback/index.android.js new file mode 100644 index 000000000000..e0e077a3513b --- /dev/null +++ b/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, +}; diff --git a/src/libs/HapticFeedback/index.ios.js b/src/libs/HapticFeedback/index.ios.js new file mode 100644 index 000000000000..d9b002621eb7 --- /dev/null +++ b/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, +}; diff --git a/src/libs/HapticFeedback/index.js b/src/libs/HapticFeedback/index.js new file mode 100644 index 000000000000..39dbfb3c17aa --- /dev/null +++ b/src/libs/HapticFeedback/index.js @@ -0,0 +1,6 @@ +/** + * Web does not support Haptic feedback + */ +export default { + trigger: () => {}, +}; From 9c37231d30f3c74da4065d979f9585d3ce7da970 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Sat, 19 Feb 2022 20:45:25 +0530 Subject: [PATCH 2/5] refactor PressableWithSecondaryInteraction component --- .../index.android.js | 15 +++------------ .../index.ios.js | 6 ++---- 2 files changed, 5 insertions(+), 16 deletions(-) diff --git a/src/components/PressableWithSecondaryInteraction/index.android.js b/src/components/PressableWithSecondaryInteraction/index.android.js index 0537a79657b1..c26674742835 100644 --- a/src/components/PressableWithSecondaryInteraction/index.android.js +++ b/src/components/PressableWithSecondaryInteraction/index.android.js @@ -1,9 +1,9 @@ import _ from 'underscore'; import React, {forwardRef} from 'react'; -import ReactNativeHapticFeedback from 'react-native-haptic-feedback'; -import {Pressable, Platform} from 'react-native'; +import {Pressable} from 'react-native'; import * as pressableWithSecondaryInteractionPropTypes from './pressableWithSecondaryInteractionPropTypes'; import Text from '../Text'; +import HapticFeedback from '../../libs/HapticFeedback'; /** * Triggers haptic feedback, and calls onSecondaryInteraction @@ -13,17 +13,8 @@ import Text from '../Text'; */ function handleLongPress(event, props) { event.preventDefault(); + HapticFeedback.trigger(); props.onSecondaryInteraction(event); - - // 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'); } /** diff --git a/src/components/PressableWithSecondaryInteraction/index.ios.js b/src/components/PressableWithSecondaryInteraction/index.ios.js index 60b8ffb83748..650333e2c460 100644 --- a/src/components/PressableWithSecondaryInteraction/index.ios.js +++ b/src/components/PressableWithSecondaryInteraction/index.ios.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} From 151f8d24b71b0b94c9ff00566795706606f50d61 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Sat, 19 Feb 2022 20:47:48 +0530 Subject: [PATCH 3/5] Remove Extra file --- .../index.android.js | 51 ------------------- .../{index.ios.js => index.native.js} | 0 2 files changed, 51 deletions(-) delete mode 100644 src/components/PressableWithSecondaryInteraction/index.android.js rename src/components/PressableWithSecondaryInteraction/{index.ios.js => index.native.js} (100%) diff --git a/src/components/PressableWithSecondaryInteraction/index.android.js b/src/components/PressableWithSecondaryInteraction/index.android.js deleted file mode 100644 index c26674742835..000000000000 --- a/src/components/PressableWithSecondaryInteraction/index.android.js +++ /dev/null @@ -1,51 +0,0 @@ -import _ from 'underscore'; -import React, {forwardRef} from 'react'; -import {Pressable} from 'react-native'; -import * as pressableWithSecondaryInteractionPropTypes from './pressableWithSecondaryInteractionPropTypes'; -import Text from '../Text'; -import HapticFeedback from '../../libs/HapticFeedback'; - -/** - * Triggers haptic feedback, and calls onSecondaryInteraction - * - * @param {GestureResponderEvent} event - * @param {Object} props - */ -function handleLongPress(event, props) { - event.preventDefault(); - HapticFeedback.trigger(); - props.onSecondaryInteraction(event); -} - -/** - * This is a special Pressable that calls onSecondaryInteraction when LongPressed. - * - * @param {Object} props - * @returns {React.Component} - */ -const PressableWithSecondaryInteraction = (props) => { - // Use Text node for inline mode to prevent content overflow. - const Node = props.inline ? Text : Pressable; - return ( - handleLongPress(event, props)} - onPressOut={props.onPressOut} - // eslint-disable-next-line react/jsx-props-no-spreading - {...(_.omit(props, 'onLongPress'))} - > - {props.children} - - ); -}; - -PressableWithSecondaryInteraction.propTypes = pressableWithSecondaryInteractionPropTypes.propTypes; -PressableWithSecondaryInteraction.defaultProps = pressableWithSecondaryInteractionPropTypes.defaultProps; -PressableWithSecondaryInteraction.displayName = 'PressableWithSecondaryInteraction'; - -export default forwardRef((props, ref) => ( - // eslint-disable-next-line react/jsx-props-no-spreading - -)); diff --git a/src/components/PressableWithSecondaryInteraction/index.ios.js b/src/components/PressableWithSecondaryInteraction/index.native.js similarity index 100% rename from src/components/PressableWithSecondaryInteraction/index.ios.js rename to src/components/PressableWithSecondaryInteraction/index.native.js From 28d9e6b1fef1cf594bf8fd233927e6217992af8e Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Sat, 19 Feb 2022 20:57:46 +0530 Subject: [PATCH 4/5] Add haptic feedback to Button Component --- src/components/Button.js | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/src/components/Button.js b/src/components/Button.js index eedd74040cbb..6c826576c692 100644 --- a/src/components/Button.js +++ b/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 ( { + 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} From 694c50cbea5807f55036630195ef92c5f70b67ed Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Sat, 19 Feb 2022 21:24:46 +0530 Subject: [PATCH 5/5] Enable Feedbacl on the Big Numberpad --- src/components/BigNumberPad.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/BigNumberPad.js b/src/components/BigNumberPad.js index 604eab5b0662..0ebb6d86ed24 100644 --- a/src/components/BigNumberPad.js +++ b/src/components/BigNumberPad.js @@ -59,6 +59,7 @@ class BigNumberPad extends React.Component { return (