import React from "react";
import Toast from "react-native-toast-message";
import { toastConfig } from "./toast-config";

/**
 * Native toast portal — renders `Toast` directly in the component tree.
 * Toast uses absolute positioning + a high zIndex to float above most
 * content. Note: Toast will not appear above a React Native `Modal`
 * (dialogs); wrapping in a Modal to force that would block all touches
 * on the screen.
 */
export function ToastPortal(): React.JSX.Element {
  return <Toast config={toastConfig} position="top" visibilityTime={3000} topOffset={50} />;
}

export default ToastPortal;