react-native-intent-guard

react-native-intent-guard adds a confirmation step before high-risk actions like deletions or payments,
helping enforce consistent safety UX across your app

Installation

npm install react-native-intent-guard

or

yarn add react-native-intent-guard

Usage

import React from "react"
import { Button } from "react-native"
import { IntentGuard } from "react-native-intent-guard"

export default function SettingsScreen() {

  const deleteAccount = () => {
    console.log("delete account executed")
  }

  return (
    <IntentGuard
      intent="delete-account"
      riskLevel="high"
      onConfirm={deleteAccount}
    >
      <Button title="Delete account" />
    </IntentGuard>
  )
}

Execution Flow

User presses button
↓
IntentGuard intercepts onPress
↓
If riskLevel === "low"
    → execute onConfirm immediately

If riskLevel === "medium" | "high"
    → show confirmation dialog
↓
User confirms
↓
onConfirm executes

Custom Confirmation Dialog

You can customize the dialog text

<IntentGuard
  intent="delete-post"
  riskLevel="high"
  title="Delete Post"
  message="This action cannot be undone."
  confirmText="Delete"
  cancelText="Cancel"
  onConfirm={deletePost}
>
  <Button title="Delete Post" />
</IntentGuard>

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | intent | string | yes | Action name | | riskLevel | "low" \| "medium" \| "high" | no | Risk level | | onConfirm | () => void | yes | Runs on confirm | | title | string | no | Dialog title | | message | string | no | Dialog message | | confirmText | string | no | Confirm label | | cancelText | string | no | Cancel label | | children | ReactElement | yes | Wrapped component |

Example

const deletePost = () => {
  console.log("post deleted")
}

<IntentGuard
  intent="delete-post"
  riskLevel="high"
  onConfirm={deletePost}
>
  <Button title="Delete Post" />
</IntentGuard>

Contributing

• Development workflow: CONTRIBUTING.md
• Pull requests: CONTRIBUTING.md#sending-a-pull-request
• Code of conduct: CODE_OF_CONDUCT.md

License

MIT

Made with create-react-native-library