REF: Use Pressable instead of TouchableOpacity for Android

The onPress was inconsistent if inside a child component on some android APIs

components/TooltipMenu.android.js

@@ -1,13 +1,13 @@
 import React, { useRef, useEffect, forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import { TouchableOpacity } from 'react-native';
+import { Pressable } from 'react-native';
 import showPopupMenu from '../blue_modules/showPopupMenu';
 
 const ToolTipMenu = (props, ref) => {
   const menuRef = useRef();
   const disabled = props.disabled ?? false;
   const isMenuPrimaryAction = props.isMenuPrimaryAction ?? false;
-
+  const enableAndroidRipple = props.enableAndroidRipple ?? true;
   const buttonStyle = props.buttonStyle ?? {};
   const handleToolTipSelection = selection => {
     props.onPressMenuItem(selection.id);
@@ -39,19 +39,21 @@ const ToolTipMenu = (props, ref) => {
   };
 
   return (
-    <TouchableOpacity
-      style={buttonStyle}
+    <Pressable
+      {...(enableAndroidRipple ? { android_ripple: { color: 'lightgrey' } } : {})}
       ref={menuRef}
       disabled={disabled}
+      style={buttonStyle}
       {...(isMenuPrimaryAction ? { onPress: showMenu } : { onPress: props.onPress, onLongPress: showMenu })}
     >
       {props.children}
-    </TouchableOpacity>
+    </Pressable>
   );
 };
 
 export default forwardRef(ToolTipMenu);
 ToolTipMenu.propTypes = {
+  enableAndroidRipple: PropTypes.bool,
   actions: PropTypes.object.isRequired,
   children: PropTypes.node.isRequired,
   onPressMenuItem: PropTypes.func.isRequired,

components/TransactionsNavigationHeader.tsx

@@ -166,6 +166,7 @@ const TransactionsNavigationHeader: React.FC<TransactionsNavigationHeaderProps>
         {wallet.getLabel()}
       </Text>
       <ToolTipMenu
+        enableAndroidRipple={false}
         onPress={changeWalletBalanceUnit}
         ref={menuRef}
         title={`${loc.wallets.balance} (${

screen/transactions/details.js

@@ -10,6 +10,7 @@ import { BlueStorageContext } from '../../blue_modules/storage-context';
 import ToolTipMenu from '../../components/TooltipMenu';
 import presentAlert from '../../components/Alert';
 import { useTheme } from '../../components/themes';
+import triggerHapticFeedback, { HapticFeedbackTypes } from '../../blue_modules/hapticFeedback';
 const dayjs = require('dayjs');
 
 function onlyUnique(value, index, self) {
@@ -113,27 +114,33 @@ const TransactionsDetails = () => {
   const handleOnSaveButtonTapped = () => {
     Keyboard.dismiss();
     txMetadata[tx.hash] = { memo };
-    saveToDisk().then(_success => presentAlert({ message: loc.transactions.transaction_note_saved }));
+    saveToDisk().then(_success => {
+      triggerHapticFeedback(HapticFeedbackTypes.Success);
+      presentAlert({ message: loc.transactions.transaction_note_saved });
+    });
   };
 
-  const handleOnOpenTransactionOnBlockExporerTapped = () => {
+  const handleOnOpenTransactionOnBlockExplorerTapped = () => {
     const url = `https://mempool.space/tx/${tx.hash}`;
     Linking.canOpenURL(url)
       .then(supported => {
         if (supported) {
           Linking.openURL(url).catch(e => {
-            console.log('openURL failed in handleOnOpenTransactionOnBlockExporerTapped');
+            console.log('openURL failed in handleOnOpenTransactionOnBlockExplorerTapped');
             console.log(e.message);
+            triggerHapticFeedback(HapticFeedbackTypes.NotificationError);
             presentAlert({ message: e.message });
           });
         } else {
-          console.log('canOpenURL supported is false in handleOnOpenTransactionOnBlockExporerTapped');
+          console.log('canOpenURL supported is false in handleOnOpenTransactionOnBlockExplorerTapped');
+          triggerHapticFeedback(HapticFeedbackTypes.NotificationError);
           presentAlert({ message: loc.transactions.open_url_error });
         }
       })
       .catch(e => {
-        console.log('canOpenURL failed in handleOnOpenTransactionOnBlockExporerTapped');
+        console.log('canOpenURL failed in handleOnOpenTransactionOnBlockExplorerTapped');
         console.log(e.message);
+        triggerHapticFeedback(HapticFeedbackTypes.NotificationError);
         presentAlert({ message: e.message });
       });
   };
@@ -311,11 +318,10 @@ const TransactionsDetails = () => {
             },
           ]}
           onPressMenuItem={handleCopyPress}
-          onPress={handleOnOpenTransactionOnBlockExporerTapped}
+          onPress={handleOnOpenTransactionOnBlockExplorerTapped}
+          buttonStyle={[styles.greyButton, stylesHooks.greyButton]}
         >
-          <View style={[styles.greyButton, stylesHooks.greyButton]}>
-            <Text style={[styles.Link, stylesHooks.Link]}>{loc.transactions.details_show_in_block_explorer}</Text>
-          </View>
+          <Text style={[styles.Link, stylesHooks.Link]}>{loc.transactions.details_show_in_block_explorer}</Text>
         </ToolTipMenu>
       </BlueCard>
     </ScrollView>