Pop Confirm
A simple and compact confirmation dialog of an action.
import { PopConfirm } from '@redshank/native';
When To Use
A simple and compact dialog used for asking for user confirmation.
The difference with the confirm modal dialog is that it's more lightweight than the static popped full-screen confirm modal.
Examples
Pop Confirm
Default Pop Confirm element.
Complete Example
Complete example using Header, Content and Footer element.
Confirm delete
Confirm action example.
PopConfirm
Api props
| Attribute | Type | Accepted values | Description | Default |
|---|---|---|---|---|
| cancelText | string | Text | Cancel text button | Cancel |
| children | ReactNode | Component | Content of the modal, recommended Header``Content | - |
| extra | ReactNode | Component | Extra content for show bottom modal | - |
| okText | string | Text | Ok text button | Continue |
| onClose | function | () => void | Required function for close pop | - |
| onOk | function | () => void | Optional function for continue button | - |
| type | function | default delete | Optional function for continue button | default |
| visible | boolean | true false | Show or hidden pop | false |
Header
Header Api props
| Attribute | Type | Accepted values | Description | Default |
|---|---|---|---|---|
| description | string | Text | Required description text content | - |
| image | ReactNode | Component | Image for show icon in pop | - |
| style | object | StyleProp<ViewStyle> | Style for wrapper element | - |
| title | string | Text | Required title header text | - |
Content
Content Api props
| Attribute | Type | Accepted values | Description | Default |
|---|---|---|---|---|
| children | ReactNode | Component | Content of the pop | - |
| style | object | StyleProp<ViewStyle> | Style for wrapper element | - |
| withBorder | boolean | true false | Show or hidden border top in the element | false |
Footer
Footer Api props
| Attribute | Type | Accepted values | Description | Default |
|---|---|---|---|---|
| children | ReactNode | Component | Content of the pop | - |
| noPadding | boolean | true false | Add or remove padding | paddingSizes.md 0 |
| style | object | StyleProp<ViewStyle> | Style for wrapper element | - |
| withBorder | boolean | true false | Show or hidden border top in the element | false |
Community:
We're excited to see the community adopt @redshank/native, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!
DiscordGithubContributing:
PR's on @redshank/native are always welcome, please see our contribution guidelines to learn how you can contribute to this project.