react-native-nitro-toast is a lightweight, native-powered toast notification library for React Native, built with SwiftUI (iOS) and Jetpack Compose (Android). It is designed for:

• ⚡ 100% Native UI — zero bridge, TurboModule-native
• 🚀 Smooth Animations — powered by SwiftUI & Compose
• 🎯 Simple API — with sensible defaults and full TypeScript support
• 🎨 Highly Customizable — override colors, icons, positions, haptics

⚠️ Looking for full layout customization (e.g. JSX content)?
Consider using a JavaScript-based solution like react-native-toast-message instead.

Check out the stacked presentation guide for more info.

🔥 Native animations with ultra-smooth transitions on both platforms.

• Display modes: alert or stacked
• Predefined Types: success, error, info, warning, default, loading
• Promise-based toasts (loading → success/error)
• Highly Customizable:
  • Position: top / bottom
  • Duration-based or sticky
  • Color overrides (titleColor, messageColor, backgroundColor)
  • Custom icon support (via iconUri)
  • Custom font support (via fontFamily)
• Haptic Feedback Support
• Safe-area aware
• Gesture Dismissal (swipe to dismiss)
• Auto Dismiss Pause when holding

See the INSTALLATION.md guide for full setup, requirements, and platform instructions.

Check out the example app for a full working demo.

import { showToast, dismissToast } from 'react-native-nitro-toast';

// Basic usage
showToast('Upload completed!');

// Advanced usage
showToast('Upload completed!', {
  type: 'success',
  position: 'top',
  duration: 3000,
  title: 'Success',
  backgroundColor: '#4CAF50',
  messageColor: '#FFFFFF',
  haptics: true,
});

// Manual loading toast (useful for loading or sticky toasts)
const id = showToast('Loading...', { type: 'loading' });
// Dismiss the toast when your async work is done
dismissToast(id);

import { showToastPromise } from 'react-native-nitro-toast';

// Example: Show a toast for an async upload process
function handleUpload() {
  showToastPromise(
    uploadFile(), // Replace with your async function returning a promise
    {
      loading: 'Uploading your file...',
      success: result => result.message,
      error: error => error instanceof Error ? error.message : 'Upload failed. Please try again.',
    },
    {
      position: 'top',
      haptics: true,
      loading: { title: 'Uploading' },
    }
  );
}

• Custom Icons: Learn how to use react-native-vector-icons or local images.
• Stacked Toasts: See how to manage multiple queued toasts.

Contributions are always welcome! If you have an idea, find a bug, or want to help improve the library, please feel free to:

• Create an issue to report bugs or suggest features.
• Open a pull request with your improvements.

Made with ❤️ by Kiet Huynh

See CHANGELOG.md for release notes and version history.

MIT