Settings
An iOS-style grouped settings screen: profile header with a Pro badge, System / Light / Dark picker, animated switches, chevron rows with details and a destructive sign-out row.
9:41
Installation
Copies the screen into src/components/blocks along with every component it uses.
Props
| Prop | Type | Default |
|---|---|---|
| user Profile header. plan shows a badge (e.g. 'Pro'). | { name, email, avatar?, plan? } | sample user |
| values Controlled values: appearance, pushNotifications, emailDigest, haptics, faceId. | SettingsValues | — |
| defaultValues Initial values when uncontrolled. | Partial<SettingsValues> | — |
| onChange Called on every change with the full values and the key that changed. | (values, key) => void | — |
| onNavigate A chevron row or the profile header was pressed. | (link: 'profile' | 'subscription' | 'privacy' | 'storage' | 'help' | 'feedback') => void | — |
| onSignOut Pressed Sign out. | () => void | — |
| storageUsed Detail on the Data & storage row. | string | '1.2 GB' |
| version Footer line. Empty string hides it. | string | 'Version 2.4.1 (412)' |
| accent Switch and badge colour. | string | theme accent |
| style Root style. | StyleProp<ViewStyle> | — |
Source
Did you like the content?