From d18e9f3686ba339b77c31294f5433658bf253057 Mon Sep 17 00:00:00 2001 From: G Date: Fri, 17 May 2024 15:30:17 +0000 Subject: [PATCH] basic implementation for hide/reveal secret value --- assets/eye_hidden.png | Bin 0 -> 3324 bytes src/components/BalanceContainer.tsx | 25 +++++++++++++++++++++---- 2 files changed, 21 insertions(+), 4 deletions(-) create mode 100644 assets/eye_hidden.png diff --git a/assets/eye_hidden.png b/assets/eye_hidden.png new file mode 100644 index 0000000..6351e1d Binary files /dev/null and b/assets/eye_hidden.png differ diff --git a/src/components/BalanceContainer.tsx b/src/components/BalanceContainer.tsx index 69c23b9..5f5e248 100644 --- a/src/components/BalanceContainer.tsx +++ b/src/components/BalanceContainer.tsx @@ -1,11 +1,14 @@ import Box from "@components/bases/Box"; import Text from "@components/bases/Text"; import { images } from "@styles/Commons"; -import { Image } from "react-native"; +import { useState } from "react"; +import { Image, TouchableOpacity } from "react-native"; type Props = { balance: number; label: string }; const BalanceContainer = ({ label, balance }: Props) => { + const [showBalance, setShowBalance] = useState(false); + return ( { - - {balance} - + setShowBalance(!showBalance)}> + + {showBalance ? ( + + {balance} + + ) : ( + + + + )} + + + {label} -- libgit2 0.27.1