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

Contributing

Keep it simple. Keep it minimal. Add tests.

License

This project is licensed under the MIT License