react-native-confirmation

Installation

NPM

npm i react-native-confirmation

Yarn

yarn add react-native-confirmation

Usage Example

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;

Examples

Video Example

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

Props

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"