Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Haptic feedback for pin pad buttons #2156

Merged
merged 2 commits into from
May 10, 2024
Merged

Haptic feedback for pin pad buttons #2156

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2899c97
added haptic feedback to pin pad buttons
myxmaster Apr 29, 2024
8136810
deps: haptic feedback setup for iOS
kaloudis May 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions android/settings.gradle
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,5 @@ apply from: file("../node_modules/@react-native-community/cli-platform-android/n
include ':lndmobile'
include ':app'
includeBuild('../node_modules/@react-native/gradle-plugin')
include ':react-native-haptic-feedback'
project(':react-native-haptic-feedback').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-haptic-feedback/android')
31 changes: 30 additions & 1 deletion components/PinPad.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,19 @@
import * as React from 'react';
import { useMemo, useState } from 'react';
import { StyleSheet, Text, Pressable, View, AppState } from 'react-native';
import {
StyleSheet,
Text,
Pressable,
View,
AppState,
Platform
} from 'react-native';
import { themeColor } from '../utils/ThemeUtils';
import { Row } from './layout/Row';
import Success from '../assets/images/SVG/Success.svg';
import Touchable from './Touchable';
import Stores from '../stores/Stores';
import ReactNativeHapticFeedback from 'react-native-haptic-feedback';

interface PinPadProps {
appendValue: (newValue: string) => void;
Expand Down Expand Up @@ -89,13 +97,22 @@ export default function PinPad({
setPinValueLength(0);
};

const triggerHapticFeedback = () => {
if (!amount) {
// effectClick is only avaiable on Android
const type = Platform.OS === 'android' ? 'effectClick' : 'soft';
ReactNativeHapticFeedback.trigger(type);
}
};

return (
<View style={styles.pad}>
<Row align="flex-end" style={styles.pinPadRow}>
<Touchable
touch={() => {
incrementPinValueLength();
appendValue(pinNumbers[1]);
triggerHapticFeedback();
}}
highlight={numberHighlight}
style={styles.key}
Expand All @@ -114,6 +131,7 @@ export default function PinPad({
touch={() => {
incrementPinValueLength();
appendValue(pinNumbers[2]);
triggerHapticFeedback();
}}
highlight={numberHighlight}
style={styles.key}
Expand All @@ -132,6 +150,7 @@ export default function PinPad({
touch={() => {
incrementPinValueLength();
appendValue(pinNumbers[3]);
triggerHapticFeedback();
}}
highlight={numberHighlight}
style={styles.key}
Expand All @@ -152,6 +171,7 @@ export default function PinPad({
touch={() => {
incrementPinValueLength();
appendValue(pinNumbers[4]);
triggerHapticFeedback();
}}
highlight={numberHighlight}
style={styles.key}
Expand All @@ -170,6 +190,7 @@ export default function PinPad({
touch={() => {
incrementPinValueLength();
appendValue(pinNumbers[5]);
triggerHapticFeedback();
}}
highlight={numberHighlight}
style={styles.key}
Expand All @@ -188,6 +209,7 @@ export default function PinPad({
touch={() => {
incrementPinValueLength();
appendValue(pinNumbers[6]);
triggerHapticFeedback();
}}
highlight={numberHighlight}
style={styles.key}
Expand All @@ -208,6 +230,7 @@ export default function PinPad({
touch={() => {
incrementPinValueLength();
appendValue(pinNumbers[7]);
triggerHapticFeedback();
}}
highlight={numberHighlight}
style={styles.key}
Expand All @@ -226,6 +249,7 @@ export default function PinPad({
touch={() => {
incrementPinValueLength();
appendValue(pinNumbers[8]);
triggerHapticFeedback();
}}
highlight={numberHighlight}
style={styles.key}
Expand All @@ -244,6 +268,7 @@ export default function PinPad({
touch={() => {
incrementPinValueLength();
appendValue(pinNumbers[9]);
triggerHapticFeedback();
}}
highlight={numberHighlight}
style={styles.key}
Expand Down Expand Up @@ -285,6 +310,7 @@ export default function PinPad({
touch={() => {
decrementPinValueLength();
deleteValue();
triggerHapticFeedback();
}}
highlight={numberHighlight}
style={styles.key}
Expand All @@ -306,6 +332,7 @@ export default function PinPad({
touch={() => {
incrementPinValueLength();
appendValue(pinNumbers[0]);
triggerHapticFeedback();
}}
highlight={numberHighlight}
style={styles.key}
Expand Down Expand Up @@ -347,6 +374,7 @@ export default function PinPad({
touch={() => {
clearPinValueLength();
clearValue();
triggerHapticFeedback();
}}
highlight={numberHighlight}
style={styles.key}
Expand All @@ -369,6 +397,7 @@ export default function PinPad({
touch={() => {
submitValue();
clearPinValueLength();
triggerHapticFeedback();
}}
highlight={numberHighlight}
style={styles.key}
Expand Down
6 changes: 6 additions & 0 deletions ios/Podfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1117,6 +1117,8 @@ PODS:
- React-Core
- RNPermissions (3.8.0):
- React-Core
- RNReactNativeHapticFeedback (2.2.0):
- React-Core
- RNReanimated (3.7.0):
- glog
- RCT-Folly (= 2022.05.16.00)
Expand Down Expand Up @@ -1218,6 +1220,7 @@ DEPENDENCIES:
- RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
- RNKeychain (from `../node_modules/react-native-keychain`)
- RNPermissions (from `../node_modules/react-native-permissions`)
- RNReactNativeHapticFeedback (from `../node_modules/react-native-haptic-feedback`)
- RNReanimated (from `../node_modules/react-native-reanimated`)
- RNScreens (from `../node_modules/react-native-screens`)
- RNSecureRandom (from `../node_modules/react-native-securerandom`)
Expand Down Expand Up @@ -1390,6 +1393,8 @@ EXTERNAL SOURCES:
:path: "../node_modules/react-native-keychain"
RNPermissions:
:path: "../node_modules/react-native-permissions"
RNReactNativeHapticFeedback:
:path: "../node_modules/react-native-haptic-feedback"
RNReanimated:
:path: "../node_modules/react-native-reanimated"
RNScreens:
Expand Down Expand Up @@ -1486,6 +1491,7 @@ SPEC CHECKSUMS:
RNGestureHandler: 67fb54b3e6ca338a8044e85cd6f340265aa41091
RNKeychain: ff836453cba46938e0e9e4c22e43d43fa2c90333
RNPermissions: 06845210af313594dc3fe5e8ae6afc820d791409
RNReactNativeHapticFeedback: ec56a5f81c3941206fd85625fa669ffc7b4545f9
RNReanimated: 73e9c711a65aa2eec9545a437fd55b69599bbf89
RNScreens: 17e2f657f1b09a71ec3c821368a04acbb7ebcb46
RNSecureRandom: 07efbdf2cd99efe13497433668e54acd7df49fef
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,7 @@
"react-native-fs": "2.20.0",
"react-native-gesture-handler": "2.15.0",
"react-native-get-random-values": "1.9.0",
"react-native-haptic-feedback": "2.2.0",
"react-native-hce": "0.1.2",
"react-native-image-picker": "5.0.1",
"react-native-keychain": "8.1.1",
Expand Down
5 changes: 5 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8347,6 +8347,11 @@ react-native-get-random-values@1.9.0:
dependencies:
fast-base64-decode "^1.0.0"

react-native-haptic-feedback@2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/react-native-haptic-feedback/-/react-native-haptic-feedback-2.2.0.tgz#bc46edd1f053265bfbe6c32487cbce074e099429"
integrity sha512-3tqJOjCguWhIrX0nkURn4yw6kXdsSDjjrvZCRjKXYGlL28hdQmoW2okAHduDTD9FWj9lA+lHgwFWgGs4aFNN7A==

react-native-hce@0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/react-native-hce/-/react-native-hce-0.1.2.tgz#01d152ed08d12ce3aed60a368b187540397c75d3"
Expand Down
Loading