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
<ConfirmProvider>
- Use anywhere with
useConfirm()
hook
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 <Button onPress={ handlePress } title='Confirm this!' />
}
export default function App() {
return (
<ConfirmProvider>
<ConfirmableButton />
</ConfirmProvider>
);
}
Check out the example
folder for a full example.
$ 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. 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 |
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