Components · Mobile only · Privacy
Sensitive Value
AlphaiOS & Android
Masks a balance or card number until revealed; re-masks when the app goes to the background and reads as "hidden".
Usage
@nexub/react-native
import { SensitiveValue } from '@nexub/react-native';
<SensitiveValue label="Balance"><Amount value={2400} currency="SGD" /></SensitiveValue>Interactive preview of @nexub/react-native rendered for the web. Native chrome (switches, pickers, Liquid Glass) looks like the platform on a device.
On device
iPhone (iOS simulator)
Pixel (Android emulator)
Screenshots from the latest CI run of the showcase app; the live frame renders the same code for the web.
SensitiveValue props
| Prop | Type | Default | Description |
|---|---|---|---|
| labelrequired | string | — | What it is, e.g. "Balance" (used for the toggle and the masked reading). |
| childrenrequired | string | — | The formatted value, e.g. "$12,480.50". |
| variant | React.ComponentProps<typeof Text>['variant'] | 'title-lg' | — |
| revealed | boolean | — | — |
| defaultRevealed | boolean | false | — |
| onRevealedChange | (revealed: boolean) => void | — | — |