1import { Pressable } from "react-native";
2
3import { SymbolView } from "./AppSymbol";
4
5/** Eye toggle that shows or hides a secret field's typed text. */
6export function SecretRevealButton(props: {
7 readonly revealed: boolean;
8 readonly onPress: () => void;
9}) {
10 return (
11 <Pressable
12 onPress={props.onPress}
13 hitSlop={6}
14 accessibilityRole="button"
15 accessibilityLabel={props.revealed ? "Hide secret" : "Show secret"}
16 className="size-10 items-center justify-center"
17 >
18 <SymbolView
19 name={props.revealed ? "eye.slash" : "eye"}
20 size={18}
21 tintColorClassName="accent-icon-muted"
22 />
23 </Pressable>
24 );
25}