react-native-confirm-dialog

React Native Confirm Dialog
=======================================

Fully customizable, plug-and-play confirmation and alert dialogs for your
react-native / expo app.

*

$3

* Get going fast with basic styling and sensible defaults.
* Action buttons with loading states.
* Theme-able.
* Dissmisable on outside clicks.

$3

* Wrap your application in
* Use anywhere with useConfirm() hook

$3

Try it out on Expo snack

$3

``tsx
import React from 'react';
import { Button } from 'react-native'
import { ConfirmProvider, useConfirm } from 'react-native-confirm-dialog'

const ConfirmableButton = () => {
const confirm = useConfirm()
const handlePress = () => {
confirm({
// ...config options
})
}

return
}

export default function App() {

return (



);
}

`

Check out the example folder for a full example.

$3

`shell
$ yarn add react-native-confirm-dialog
`

$3

All of the configurations are optional with sensible defaults, and can be overriden
when calling confirm or provided to ConfirmProvider as a config prop. Configuration
options provided when calling confirm take precedence over options provided to ConfirmProvider

| Name | Description | Type | Default |
|-------------------------|-----------------------------------------------------|-------------------------------------------------------------|-----------------------|
| actions | Override the dialog buttons with a custom component | (dismiss: VoidFunction) => JSX.Element | JSX.Element[] | undefined |
| body | Description of the confirmation | String | undefined |
| bodyStyle | Style overrides for dialog body | TextStyle | undefined |
| ButtonComponent | Override the component used for the buttons | Function Component | EnhancedButton |
| buttonProps | custom props to pass to both buttons | any | undefined |
| buttonLabelStyle | Style overrides for both button labels | TextStyle | undefined |
| buttonStyle | Style overrides for both buttons | ViewStyle | undefined |
| cancelLabel | Text of the secondary button | String | "Cancel" |
| cancelButtonProps | custom props to pass to secondary button | any | undefined |
| cancelButtonLabelStyle | Style overrides for secondary button label | TextStyle | undefined |
| cancelButtonStyle | Style overrides for secondary button | ViewStyle | undefined |
| confirmButtonProps | custom props to pass to primary button | any | undefined |
| confirmButtonLabelStyle | Style overrides for primary button label | TextStyle | undefined |
| confirmButtonStyle | Style overrides for primary button | ViewStyle | undefined |
| confirmLabel | Text of the primary button | String | "OK" |
| dismissOnOutsideClick | Should the dialog be dismissed on an outside click? | Boolean | true |
| onConfirm | Callback action for primary button | VoidFunction | () => {} |
| showCancel | Set to default to hide the secondary button | Boolean | true |
| subtitle | Dimmed text right below the title | String | undefined |
| subtitleStyle | Style overrides for subtitle | TextStyle | undefined |
| theme | Theme overrides | Object | see Theme section |
| title | The title displayed in the confirm dialog | String | "Are you sure?" |
| titleStyle | Style overrides for title | TextStyle | undefined` |

#### Theme

Control dialog look with a theme. Theme can be passed the same way as all the props above.

| Name | Description | Type | Default |
|-----------------|------------------------------------|--------|------------------------|
| spacing | Spacing between elements base unit | number | 8 |
| primaryColor | Color of primary elements | string | "rgba(0, 0, 255, 0.5)" |
| backshadowColor | Color of dialog's backdrop | string | "rgba(0, 0, 0, 0.4)" |

$3

Keep it simple. Keep it minimal. Add tests.

$3

This project is licensed under the MIT License