React-native-confirm-dialog NPM

React Native Confirm Dialog

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

Features

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

Usage

Wrap your application in <ConfirmProvider>
Use anywhere with useConfirm() hook

Demo

Try it out on Expo snack

Basic Demo

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.

Download & Installation

$ yarn add react-native-confirm-dialog

Configuration Options

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)"