The useGlobalOverlay hook provides a convenient way to manage modals and dialogs from anywhere in your React Native app. It requires your app to be wrapped with the SmacOverlayProvider.

⚠️ Important: You must wrap your app with SmacOverlayProvider to use useGlobalOverlay. More: Installation.

Props

The useGlobalOverlay hook provides functions to control global modal dialogs.

Props

Name	Type	Description
showAlertDialog	(options: AlertDialogOptions) => void	Displays a basic dialog with title, description, and action buttons.
showDialog	(options: DialogOptions) => void	Similar to showAlertDialog, but allows custom content in the dialog body.
showCustomDialog	(options: CustomDialogOptions) => void	Displays a fully custom dialog. Caller is responsible for providing content.
showToast	(options: ToastOptions) => void	Displays a toast. Caller is responsible for providing content.
hideModal	() => void	Manually hides the currently visible dialog.

---

AlertDialogOptions

Name	Type	Required	Description
title	string	No	Title displayed in the dialog header.
description	string	No	Description text displayed under the title.
cancelAction	string	No	Label for the cancel/close button. Defaults to "Close".
continueAction	string	No	Label for the continue/confirm button. Defaults to "Continue".
onClose	() => void	No	Called when the cancel button is pressed or modal is dismissed.
onContinue	() => void	No	Called when the continue button is pressed.
onModalClosed	() => void	No	Callback fired after the modal has been closed (via backdrop or buttons).

---

DialogOptions

Extends AlertDialogOptions with additional custom content.

Name	Type	Required	Description
content	(close: () => void) => React.ReactNode	Yes	Custom content inserted in the middle of the dialog. Receives a close() function.
title	string	No	Title displayed in the dialog header.
description	string	No	Description text displayed under the title.
cancelAction	string	No	Label for the cancel/close button. Defaults to "Close".
continueAction	string	No	Label for the continue/confirm button. Defaults to "Continue".
onClose	() => void	No	Called when the cancel button is pressed or modal is dismissed.
onContinue	() => void	No	Called when the continue button is pressed.
onModalClosed	() => void	No	Callback fired after the modal has been closed (via backdrop or buttons).

---

CustomDialogOptions

Name	Type	Required	Description
content	(close: () => void) => React.ReactNode	Yes	Fully custom content for the entire dialog. Receives a close() callback.
onModalClosed	() => void	No	Called after the modal has been closed (via backdrop or user action).

ToastOptions

Name	Type	Required	Description
title	string	No	Title text displayed at the top of the toast.
description	string	No	Optional description text displayed below the title.
variant	Variants	No	Style variant of the toast (e.g., "primary", "destructive").
leftIcon	IconName	No	The icon prop must be one of icons
duration	number	No	Duration in milliseconds before the toast auto-dismisses. Default is 3s.
undoAction	(close: () => void) => {}	No	Optional undo callback that receives a close() function for dismissing.