rn-smart-modal-toast

Toastify-style notifications for React Native. Typed, swipe-to-dismiss, modal or inline, and simple to wire anywhere.

Install

yarn add rn-smart-modal-toast
yarn add react-native-reanimated react-native-gesture-handler

Quick start

import { ToastContainer, toast } from 'rn-smart-modal-toast';

export default function App() {
  return (
    <>
      <ToastContainer />
      <Button title="Notify" onPress={() => toast.success('Saved!')} />
    </>
  );
}

API

• Components: ToastContainer, ToastProvider, ToastItem
• Hooks: useToast
• Helpers: toast.success | error | warning | info | show | update | dismiss
• Standalone: showToast, showSuccessToast, showErrorToast, showWarningToast, showInfoToast, hideAllToasts

Toast options (key fields)

| Option | Type | Default | Description | |--------|------|---------|-------------| | type | 'success' | 'error' | 'warning' | 'info' | 'info' | Toast style | | useModal | boolean | false | true wraps in Modal; false draws inline overlay | | duration | number | 3000 | Milliseconds before auto-hide (0 = sticky) | | placement | 'top' | 'bottom' | 'center' | 'top' | Screen position | | animationType | 'slide' | 'fade' | 'zoom' | 'bounce' | 'slide' | Entry/exit animation | | swipeEnabled | boolean | true | Allow swipe-to-dismiss | | offset | number | { top?: number; bottom?: number } | 50 | Edge spacing | | icon, backgroundColor, textColor, onPress, onClose, style, textStyle, maxWidth, borderRadius, iconSize | - | - | Customization |

Minimal usage

const toast = useToast();
toast.show('Saved', { type: 'success', placement: 'top' });

Inline vs modal rendering

toast.show('Inline overlay', { useModal: false });
toast.show('Uses Modal', { useModal: true });

License

MIT