API Components

Platform support (current): iOS and Android only. Web is not officially supported yet and may be added in future releases.

Contract details for component value exports. Import from package root only:

import {
  ToastProvider,
  ToastHost,
  ToastViewport,
  ToastNativeSurfaceBoundary,
  ToastVariantIcon,
  ToastDismissIconButton,
} from "react-native-toast-system";

Value Exports

ToastProvider

Signature:

function ToastProvider(props: ToastProviderProps): JSX.Element;

ToastProviderProps

Name	Type	Required	Default	Description	Allowed options/values
children	ReactNode	no	none	Provider subtree content.	any React node
defaultHostId	string	no	"default"	Default host id used by toast and useToast() when host is omitted.	any non-empty string
defaultHostConfig	ToastHostConfig	no	none	Default host behavior overrides merged into runtime host defaults. Runtime updates are re-applied to mounted hosts while preserving each host's local overrides.	valid ToastHostConfig object
debug	boolean	no	none	Provider-level debug fallback for default host if defaultHostConfig.debug is omitted.	true, false
useRNScreensOverlay	boolean	no	none	Provider-level overlay fallback for default host if defaultHostConfig.useRNScreensOverlay is omitted.	true, false
rnScreensOverlayViewStyle	StyleProp<ViewStyle>	no	none	Provider-level overlay view style fallback for default host.	any React Native view style

Template registration note:

• ToastProvider no longer accepts a templates prop.
• Register custom templates through createToastSystem({ templates }).

ToastHost and ToastViewport

Signatures:

function ToastHost(props: ToastHostProps): JSX.Element | null;
const ToastViewport: typeof ToastHost;

ToastViewport is an alias of ToastHost.

ToastHostProps / ToastViewportProps

Name	Type	Required	Default	Description	Allowed options/values
hostId	string	no	provider defaultHostId	Host namespace key.	any non-empty string
config	ToastHostConfig	no	none	Host-scoped config overrides merged at registration time.	valid ToastHostConfig object
className	string	no	none	Class name applied to host container.	any string
style	StyleProp<ViewStyle>	no	none	Style applied to host container.	any React Native view style
controllerRef	Ref<ToastController | null>	no	none	Receives mounted host controller instance. Cleared on unmount.	React ref
useRNScreensOverlay	boolean	no	none	Host-level overlay override when config.useRNScreensOverlay is omitted.	true, false
rnScreensOverlayViewStyle	StyleProp<ViewStyle>	no	none	Host-level overlay style override when config.rnScreensOverlayViewStyle is omitted.	any React Native view style

ToastNativeSurfaceBoundary

Signature:

function ToastNativeSurfaceBoundary(props: ToastNativeSurfaceBoundaryProps): JSX.Element;

ToastNativeSurfaceBoundaryProps

Name	Type	Required	Default	Description	Allowed options/values
children	ReactNode	no	none	Boundary subtree content.	any React node
className	string	no	none	Class name forwarded to GestureHandlerRootView.	any string
style	StyleProp<ViewStyle> (ViewProps)	no	[ { flex: 1 }, style ] merge	Style forwarded to boundary root view.	any React Native view style
unstable_forceActive	boolean	no	true	Forwarded unstable gesture-handler activation hint.	true, false
...rest	ViewProps	no	none	Remaining React Native ViewProps forwarded to boundary root view.	valid ViewProps fields

ToastVariantIcon

Signature:

function ToastVariantIcon(props: {
  variant?: ToastVariant;
  color: string;
  size?: number;
  className?: string;
}): JSX.Element | null;

Variant Icons Props Contract

Name	Type	Required	Default	Description	Allowed options/values
variant	ToastVariant	no	"default"	Variant icon to render. loading renders spinner.	default, success, error, warning, info, loading
color	string	yes	none	Icon/stroke fill color.	any CSS-like color string accepted by RN/SVG
size	number	no	16	Icon frame size in device-independent pixels.	positive number
className	string	no	none	Optional class name for icon frame.	any string

ToastDismissIconButton

Signature:

function ToastDismissIconButton(props: {
  accessibilityLabel: string;
  accessibilityHint?: string;
  onPress: () => void;
  onPressIn?: () => void;
  onPressOut?: () => void;
  iconColor: string;
  iconSize?: number;
  className?: string;
  style?: StyleProp<ViewStyle>;
}): JSX.Element;

Dismiss Icon Props Contract

Name	Type	Required	Default	Description	Allowed options/values
accessibilityLabel	string	yes	none	Accessible label for dismiss button.	any non-empty string
accessibilityHint	string	no	none	Accessible hint text.	any string
onPress	() => void	yes	none	Dismiss trigger callback.	function
onPressIn	() => void	no	none	Press-in callback (often for timer pause wiring).	function
onPressOut	() => void	no	none	Press-out callback (often for timer resume wiring).	function
iconColor	string	yes	none	Close icon color.	any CSS-like color string accepted by RN/SVG
iconSize	number	no	18	Close icon size.	positive number
className	string	no	none	Optional button class name.	any string
style	StyleProp<ViewStyle>	no	none	Optional button style.	any React Native view style