# react-native-confirmation

> React Native confirmation modal for confirming or canceling a user action

Latest version **1.1.3** (published 2023-09-29) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-confirmation
pnpm add react-native-confirmation
yarn add react-native-confirmation
bun add react-native-confirmation
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2023-09-29 |
| First published | 2023-06-01 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 11.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Alec Hansen |
| Maintainers | alecdhansen |
| Keywords | react-native, modal, confirm, confirmation, cancel, react-native-confirmation, clear, reset, delete |

## Links

- npm: https://www.npmjs.com/package/react-native-confirmation
- Repository: https://github.com/alecdhansen/react-native-confirmation
- Homepage: https://github.com/alecdhansen/react-native-confirmation#readme
- Issues: https://github.com/alecdhansen/react-native-confirmation/issues
- npm.io page: https://npm.io/package/react-native-confirmation

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 1.1.3 (latest) — 2023-09-29
- 1.1.2 — 2023-09-29
- 1.1.1 — 2023-09-29
- 1.1.0 — 2023-09-29
- 1.0.15 — 2023-09-27
- 1.0.14 — 2023-07-31
- 1.0.13 — 2023-07-31
- 1.0.12 — 2023-06-06
- 1.0.11 — 2023-06-06
- 1.0.10 — 2023-06-06
- 1.0.9 — 2023-06-06
- 1.0.8 — 2023-06-06
- 1.0.7 — 2023-06-06
- 1.0.5 — 2023-06-06
- 1.0.4 — 2023-06-01
- … 3 more at https://npm.io/package/react-native-confirmation/versions

## README

# react-native-confirmation

![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)
![React Native](https://img.shields.io/badge/react_native-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
![Expo](https://img.shields.io/badge/expo-1C1E24?style=for-the-badge&logo=expo&logoColor=#D04A37)
![Yarn](https://img.shields.io/badge/yarn-%232C8EBB.svg?style=for-the-badge&logo=yarn&logoColor=white)
![Git](https://img.shields.io/badge/git-%23F05033.svg?style=for-the-badge&logo=git&logoColor=white)
![NPM](https://img.shields.io/badge/NPM-%23000000.svg?style=for-the-badge&logo=npm&logoColor=white)
![Xcode](https://img.shields.io/badge/Xcode-007ACC?style=for-the-badge&logo=Xcode&logoColor=white)

<h2>Installation</h2>
<h3>NPM</h3>

```
npm i react-native-confirmation
```

<h3>Yarn</h3>

```
yarn add react-native-confirmation
```

<h2>Usage Example</h2>

```
import { useState } from "react";
import { Button, TextInput, Text } from "react-native"
import ConfirmationModal from "react-native-confirmation";

const App = () => {
  const [isVisible, setIsVisible] = useState(false);
  const [input, setInput] = useState("");
  const [text, setText] = useState("");

  const clearText = () => {
    setText("");
    console.log("Text cleared!")
  };

  return (
    <>
      <Button onPress={() => setIsVisible(true)} />
      <TextInput
          onChangeText={setInput}
          onSubmitEditing={() => setText(input)}
          value={input}
          placeholder="Message"
      />
      <Text>{text}</Text>
      <ConfirmationModal
        isVisible={isVisible}
        setIsVisible={setIsVisible}
        onConfirm={clearText}
      />
    </>
  );
};

export default App;
```

<h2>Examples</h2>

![Simulator Screenshot - iPhone 13 mini - 2023-09-29 at 00 58 23](https://github.com/alecdhansen/react-native-confirmation/assets/25291098/6f1d662c-eeb6-46df-b498-d453e627bf5f)
![Simulator Screenshot - iPhone 13 mini - 2023-09-29 at 00 57 08](https://github.com/alecdhansen/react-native-confirmation/assets/25291098/fa76fb2a-7241-4bce-8214-83de88f14c3e)
![Simulator Screenshot - iPhone 13 mini - 2023-09-29 at 00 55 32](https://github.com/alecdhansen/react-native-confirmation/assets/25291098/7199f36e-c6ee-4645-9222-17185ea14ccd)
![Simulator Screenshot - iPhone 13 mini - 2023-09-29 at 00 53 46](https://github.com/alecdhansen/react-native-confirmation/assets/25291098/48877f4f-0e1e-46b2-9501-800235d65a85)

<h4>Video Example</h4>
https://github.com/alecdhansen/react-native-confirmation/assets/25291098/4770c1ef-2736-40ad-8b55-b4e51b791cff

<h2>Props</h2>

| **Prop**                  | **Type**                         | **Description**                                                                        | **Default**         |
| ------------------------- | -------------------------------- | -------------------------------------------------------------------------------------- | ------------------- |
| _isVisible_               | _bool_                           | Boolean state of the confirmation modal                                                | false               |
| _setIsVisible_            | _isVisible: bool => void_        |                                                                                        |                     |
| _onConfirm_               | _() => void \| Promise < void >_ | Pass in any function you'd like to run onConfirm press                                 |                     |
| _secondaryOnConfirm?_     | _() => void \| Promise < void >_ | Pass a second function as another option you'd like to run on secondaryOnConfirm press |                     |
| _secondaryOnConfirmText?_ | _string_                         | Custom secondary "confirm" text                                                        | "Delete"            |
| _message?_                | _string_                         | Optional message to display to users before asking them to "Confirm" or "Cancel"       |                     |
| _onConfirmText?_          | _string_                         | Custom "confirm" text                                                                  | "Confirm"           |
| _onConfirmTextColor?_     | _string_                         | Custom "confirm" text color                                                            | "rgb(227, 43, 44)"  |
| _cancelText?_             | _string_                         | Custom "cancel" text                                                                   | "Cancel"            |
| _cancelTextColor?_        | _string_                         | Custom "cancel" text color                                                             | "rgb(56, 124, 254)" |
| _colorScheme?_            | _"system" \| "light" \| "dark"_  | Color scheme of the confirmation modal component                                       | "system"            |

<!-- https://www.tablesgenerator.com/markdown_tables# -->

---
_Source: https://npm.io/package/react-native-confirmation · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._