basic implementation for hide/reveal secret value

src/components/BalanceContainer.tsx

 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 (
 		<Box
 			position={"relative"}
@@ -28,9 +31,23 @@ const BalanceContainer = ({ label, balance }: Props) => {
 			</Box>
 
 			<Box alignItems={"center"} gap={"s"}>
-				<Text fontSize={30} variant={"black"}>
-					{balance}
-				</Text>
+				<TouchableOpacity onPress={() => setShowBalance(!showBalance)}>
+					<Box height={50} alignItems={"center"} justifyContent={"center"}>
+						{showBalance ? (
+							<Text fontSize={30} variant={"black"}>
+								{balance}
+							</Text>
+						) : (
+							<Box width={40} height={40}>
+								<Image
+									source={require("../../assets/eye_hidden.png")}
+									style={images.contain}
+								/>
+							</Box>
+						)}
+					</Box>
+				</TouchableOpacity>
+
 				<Text color={"gray"}>{label}</Text>
 			</Box>
 		</Box>