Registry / ui / react-native-alert-queue

react-native-alert-queue

library2.3.0jsnpmunverified

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.

npm install react-native-alert-queue

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-NATIVE-ALERT

react-native-alert-queue

uijavascriptv2.3.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

AlertContainer

✓ import { AlertContainer } from 'react-native-alert-queue'

✗ import AlertContainer from 'react-native-alert-queue'

Named export, not default. Also check that AlertContainer is a React component used as <AlertContainer />.

alert

✓ import { alert } from 'react-native-alert-queue'

✗ import { Alert } from 'react-native-alert-queue'

Exported as `alert` (lowercase). `alert` is a singleton object with methods like show, success, confirm, etc.

useAlertContext

✓ import { useAlertContext } from 'react-native-alert-queue'

✗ import useAlertContext from 'react-native-alert-queue'

Named export. useAlertContext is a hook for accessing the alert queue context (v2+).

AlertTypes

✓ import type { AlertTypes } from 'react-native-alert-queue'

✗ import { AlertTypes } from 'react-native-alert-queue'

AlertTypes is a TypeScript type export, not a runtime value. Use import type in TS with isolatedModules.

Demonstrates basic setup with AlertContainer wrapper and async/await confirm dialog pattern.

import React from 'react'; import { View, Button } from 'react-native'; import { AlertContainer, alert } from 'react-native-alert-queue'; export default function App() { const handleShow = async () => { const result = await alert.confirm({ title: 'Confirm', message: 'Are you sure?', buttons: [ { text: 'Cancel', onPress: () => console.log('cancel') }, { text: 'OK', onPress: () => console.log('ok') }, ], }); console.log('Confirmed:', result); }; return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Button title="Show Alert" onPress={handleShow} /> <AlertContainer /> </View> ); }

Debug

Known issues

breakingVersion 2.x requires react-native-reanimated 3.x. Will not work without it.

fix

Install react-native-reanimated@>=3.0.0 and follow its installation guide (add babel plugin, wrap app with Reanimated's GestureHandlerRootView if needed).

affects: >=2.0.0

gotchaThe `alert` object is a singleton, not a hook. Must import from library and cannot be mocked per component test.

fix

Use dependency injection or wrap tests with AlertProvider if needed. For unit tests, you may mock the module.

affects: all

breakingRemoved default export in v2. Use named exports only.

fix

Change `import AlertQueue from 'react-native-alert-queue'` to `import { AlertContainer, alert } from 'react-native-alert-queue'`.

affects: >=2.0.0

gotchaAlertContainer must be rendered inside a <View> that has flex:1 or defined dimensions; otherwise alerts may not position correctly.

fix

Wrap AlertContainer in a View with style={{ flex: 1 }} or ensure parent has definite size.

affects: all

gotchaOn web (React Native Web), note that confetti animation requires DOM canvas support; may need polyfill for older browsers.

fix

Use a polyfill like 'canvas-confetti' or add a check before calling confetti methods.

affects: all

Errors

Common errors & fixes

Warning: React.createContext() is deprecated in StrictMode

Used with React 18 StrictMode; library uses createContext internally.

fix

Ignore this warning as it's harmless; future versions may use useSyncExternalStore.

Invariant Violation: NativeReanimated has not been installed properly

react-native-reanimated is missing or not configured correctly.

fix

Install react-native-reanimated@>=3.0.0, add 'react-native-reanimated/plugin' to babel.config.js, and rebuild app.

TypeError: undefined is not an object (evaluating 'alert.show')

Importing from wrong path or using default import.

fix

Use named import: `import { alert } from 'react-native-alert-queue'`.

Module "react-native-alert-queue" does not exist in the Haste module map

React Native cannot resolve the module.

fix

Run `npm install` or `yarn install` and ensure the package is in node_modules. If using Expo, check if compatible.

Upgrade

Version history

2.3.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency required for React Native

react-nativerequiredPeer dependency required for React Native

react-native-reanimatedrequiredPeer dependency required for animations; only version 3.x supported in 2.x

Agent activity

32 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/xxsnakerxx/react-native-alert-queue ↗

packagereact-native-alert-queue ↗

homepagehttps://github.com/xxsnakerxx/react-native-alert-queue#readme ↗