Custom confirmation and alert dialogs for react native
npm install react-native-confirm-dialogReact Native Confirm Dialog
=======================================
Fully customizable, plug-and-play confirmation and alert dialogs for your
react-native / expo app.
*
* Get going fast with basic styling and sensible defaults.
* Action buttons with loading states.
* Theme-able.
* Dissmisable on outside clicks.
* Wrap your application in
* Use anywhere with useConfirm() hook
``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.
`shell `
$ yarn add react-native-confirm-dialog
All of the configurations are optional with sensible defaults, and can be overriden
when calling confirm or provided to ConfirmProvider as a config prop. Configurationconfirm
options provided when calling 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 |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 | |true
| confirmLabel | Text of the primary button | String | "OK" |
| dismissOnOutsideClick | Should the dialog be dismissed on an outside click? | Boolean | |() => {}
| onConfirm | Callback action for primary button | VoidFunction | |true
| showCancel | Set to default to hide the secondary button | Boolean | |undefined
| 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 |
#### 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)" |
Keep it simple. Keep it minimal. Add tests.
This project is licensed under the MIT License