fix: migrate pressables to touchableopacity for better ui feedback

getAlby · Sep 3, 2024 · e683d9b · e683d9b
1 parent 9effdb2
commit e683d9b
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 20 deletions.
diff --git a/pages/Home.tsx b/pages/Home.tsx
@@ -1,4 +1,4 @@
-import { View, Pressable, StyleSheet } from "react-native";
+import { View, Pressable, StyleSheet, TouchableOpacity } from "react-native";
 import React, { useState } from "react";
 import { useBalance } from "hooks/useBalance";
 import { useAppStore } from "lib/state/appStore";
@@ -74,25 +74,16 @@ export function Home() {
       <Screen
         title=""
         right={() =>
-          <Link href="/settings" asChild className="absolute -right-4">
-            <Button variant="link">
+          <Link href="/settings" asChild>
+            <TouchableOpacity>
               <Settings2 className="text-foreground" />
-            </Button>
+            </TouchableOpacity>
           </Link>
         }
       />
       <View className="h-full flex">
         <View className="grow flex flex-col items-center justify-center gap-4">
-          <Pressable
-            onPressIn={() => setPressed(true)}
-            onPressOut={() => setPressed(false)}
-            style={{
-              ...(pressed
-                ? {
-                  transform: "scale(0.98)",
-                }
-                : []),
-            }}
+          <TouchableOpacity
             onPress={switchBalanceState}
             className="w-full flex flex-col items-center justify-center gap-4"
           >
@@ -132,7 +123,7 @@ export function Home() {
                 <Skeleton className="w-32 h-10" />
               )}
             </View>
-          </Pressable>
+          </TouchableOpacity>
         </View>
         <View className="flex items-center justify-center">
           <Link href="/transactions" asChild>

diff --git a/pages/settings/Settings.tsx b/pages/settings/Settings.tsx
@@ -1,5 +1,5 @@
 import { Link, router } from "expo-router";
-import { Alert, Pressable, TouchableOpacity, View } from "react-native";
+import { Alert, TouchableOpacity, View } from "react-native";
 import { Bitcoin, Egg, Palette, Power, Wallet2 } from "~/components/Icons";
 
 import { DEFAULT_WALLET_NAME } from "~/lib/constants";
@@ -58,7 +58,7 @@ export function Settings() {
             <Text className="text-muted-foreground uppercase">
               Developer mode
             </Text>
-            <Pressable
+            <TouchableOpacity
               className="flex flex-row gap-4"
               onPress={() => {
                 router.dismissAll();
@@ -68,8 +68,8 @@ export function Settings() {
             >
               <Egg className="text-foreground" />
               <Text className="font-medium2 text-xl">Open Onboarding</Text>
-            </Pressable>
-            <Pressable
+            </TouchableOpacity>
+            <TouchableOpacity
               className="flex flex-row gap-4"
               onPress={() => {
                 Alert.alert(
@@ -96,7 +96,7 @@ export function Settings() {
               <Text className="text-destructive font-medium2 text-xl">
                 Reset Wallet
               </Text>
-            </Pressable>
+            </TouchableOpacity>
           </View>
         </>
       )}