{"id":46038,"library":"react-native-alert-queue","title":"React Native Alert Queue","description":"A React Native library for managing and displaying modal alerts with a queuing system. v2.3.0 requires react-native-reanimated 3.x as a peer dependency. Supports async/await patterns, customizable UI with slots, SVG icons, confetti, and real-time alert updates. Queues multiple alerts sequentially and provides built-in helpers for success, error, and confirm dialogs. Ships TypeScript types. Alternatives: react-native-alert, react-native-modalbox.","status":"active","version":"2.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/xxsnakerxx/react-native-alert-queue","tags":["javascript","react-native","alert","alert-queue","dialog","modal","Alert.alert","confirmation-dialog","popup","typescript"],"install":[{"cmd":"npm install react-native-alert-queue","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-alert-queue","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-alert-queue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for React Native","package":"react","optional":false},{"reason":"Peer dependency required for React Native","package":"react-native","optional":false},{"reason":"Peer dependency required for animations; only version 3.x supported in 2.x","package":"react-native-reanimated","optional":false}],"imports":[{"note":"Named export, not default. Also check that AlertContainer is a React component used as <AlertContainer />.","wrong":"import AlertContainer from 'react-native-alert-queue'","symbol":"AlertContainer","correct":"import { AlertContainer } from 'react-native-alert-queue'"},{"note":"Exported as `alert` (lowercase). `alert` is a singleton object with methods like show, success, confirm, etc.","wrong":"import { Alert } from 'react-native-alert-queue'","symbol":"alert","correct":"import { alert } from 'react-native-alert-queue'"},{"note":"Named export. useAlertContext is a hook for accessing the alert queue context (v2+).","wrong":"import useAlertContext from 'react-native-alert-queue'","symbol":"useAlertContext","correct":"import { useAlertContext } from 'react-native-alert-queue'"},{"note":"AlertTypes is a TypeScript type export, not a runtime value. Use import type in TS with isolatedModules.","wrong":"import { AlertTypes } from 'react-native-alert-queue'","symbol":"AlertTypes","correct":"import type { AlertTypes } from 'react-native-alert-queue'"}],"quickstart":{"code":"import React from 'react';\nimport { View, Button } from 'react-native';\nimport { AlertContainer, alert } from 'react-native-alert-queue';\n\nexport default function App() {\n  const handleShow = async () => {\n    const result = await alert.confirm({\n      title: 'Confirm',\n      message: 'Are you sure?',\n      buttons: [\n        { text: 'Cancel', onPress: () => console.log('cancel') },\n        { text: 'OK', onPress: () => console.log('ok') },\n      ],\n    });\n    console.log('Confirmed:', result);\n  };\n\n  return (\n    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>\n      <Button title=\"Show Alert\" onPress={handleShow} />\n      <AlertContainer />\n    </View>\n  );\n}","lang":"typescript","description":"Demonstrates basic setup with AlertContainer wrapper and async/await confirm dialog pattern."},"warnings":[{"fix":"Install react-native-reanimated@>=3.0.0 and follow its installation guide (add babel plugin, wrap app with Reanimated's GestureHandlerRootView if needed).","message":"Version 2.x requires react-native-reanimated 3.x. Will not work without it.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Use dependency injection or wrap tests with AlertProvider if needed. For unit tests, you may mock the module.","message":"The `alert` object is a singleton, not a hook. Must import from library and cannot be mocked per component test.","severity":"gotcha","affected_versions":"all"},{"fix":"Change `import AlertQueue from 'react-native-alert-queue'` to `import { AlertContainer, alert } from 'react-native-alert-queue'`.","message":"Removed default export in v2. Use named exports only.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Wrap AlertContainer in a View with style={{ flex: 1 }} or ensure parent has definite size.","message":"AlertContainer must be rendered inside a <View> that has flex:1 or defined dimensions; otherwise alerts may not position correctly.","severity":"gotcha","affected_versions":"all"},{"fix":"Use a polyfill like 'canvas-confetti' or add a check before calling confetti methods.","message":"On web (React Native Web), note that confetti animation requires DOM canvas support; may need polyfill for older browsers.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"search_vec":"'3':25 'alert':3,14,45,49,70,79,81 'alert-queu':80 'alert.alert':85 'altern':66 'async/await':32 'built':54 'built-in':53 'confetti':40 'confirm':61,87 'confirmation-dialog':86 'customiz':34 'depend':30 'dialog':62,83,88 'display':12 'error':59 'helper':56 'icon':39 'javascript':75 'librari':8 'manag':10 'modal':13,84 'modalbox':74 'multipl':48 'nativ':2,7,23,69,73,78 'pattern':33 'peer':29 'popup':89 'provid':52 'queu':17 'queue':4,47,82 'react':1,6,22,68,72,77 'react-nat':76 'react-native-alert':67 'react-native-modalbox':71 'react-native-reanim':21 'real':43 'real-tim':42 'reanim':24 'requir':20 'sequenti':50 'ship':63 'slot':37 'success':58 'support':31 'svg':38 'system':18 'time':44 'type':65 'typescript':64,90 'ui':35 'updat':46 'v2.3.0':19 'x':26","created_at":"2026-06-07T12:57:59.345635+00:00","updated_at":"2026-06-07T12:57:59.345635+00:00","problems":[{"fix":"Ignore this warning as it's harmless; future versions may use useSyncExternalStore.","cause":"Used with React 18 StrictMode; library uses createContext internally.","error":"Warning: React.createContext() is deprecated in StrictMode"},{"fix":"Install react-native-reanimated@>=3.0.0, add 'react-native-reanimated/plugin' to babel.config.js, and rebuild app.","cause":"react-native-reanimated is missing or not configured correctly.","error":"Invariant Violation: NativeReanimated has not been installed properly"},{"fix":"Use named import: `import { alert } from 'react-native-alert-queue'`.","cause":"Importing from wrong path or using default import.","error":"TypeError: undefined is not an object (evaluating 'alert.show')"},{"fix":"Run `npm install` or `yarn install` and ensure the package is in node_modules. If using Expo, check if compatible.","cause":"React Native cannot resolve the module.","error":"Module \"react-native-alert-queue\" does not exist in the Haste module map"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/xxsnakerxx/react-native-alert-queue#readme","github":"https://github.com/xxsnakerxx/react-native-alert-queue","docs":null,"changelog":null,"pypi":null,"npm":"react-native-alert-queue","openapi_spec":null,"status_page":null,"smithery":null,"categories":["ui"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-07","next_check":"2026-09-05","install_tag":null}}