React Native Toastify

A beautiful, customizable toast notification library for React Native with smooth animations, dark mode support, and extensive customization options.

Features

• 🎨 5 Toast Types - Default, Success, Error, Warning, Info
• 🌙 Dark & Light Mode - Automatic theme detection
• 📍 Position Control - Top or bottom placement
• ⏱️ Custom Duration - From 1 second to persistent
• 🎯 Action Buttons - Add interactive buttons to toasts
• 🔄 Callbacks - Execute code when toast closes
• 🧩 Custom Content - Render any React component
• 🎬 Smooth Animations - Spring physics with reanimated
• 📱 TypeScript - Full type support
• ⚡ Zero Dependencies - Except react-native-reanimated

Installation

npm install @kritikhedau/react-native-toastify
# or
yarn add @kritikhedau/react-native-toastify

Note: This library requires react-native-reanimated. If not already installed:

npm install react-native-reanimated
# or
yarn add react-native-reanimated

Quick Start

1. Wrap Your App with ToastProvider

import { ToastProvider } from '@kritikhedau/react-native-toastify';

export default function App() {
  return <ToastProvider>{/* Your app content */}</ToastProvider>;
}

2. Use Toasts in Your Components

import { useToast } from '@kritikhedau/react-native-toastify';

function MyComponent() {
  const { show } = useToast();

  return (
    <Button
      title="Show Toast"
      onPress={() => show('Hello World!', { type: 'success' })}
    />
  );
}

Usage Examples

Basic Toasts

const { show } = useToast();

// Simple message
show('Operation completed');

// Success toast
show('Saved successfully!', { type: 'success' });

// Error toast
show('Something went wrong', { type: 'error' });

// Warning toast
show('Please check your input', { type: 'warning' });

// Info toast
show('New update available', { type: 'info' });

Position Control

// Show at top (default)
show('Top toast', { position: 'top' });

// Show at bottom
show('Bottom toast', { position: 'bottom' });

Duration Control

// Quick toast (1 second)
show('Quick!', { duration: 1000 });

// Normal duration (3 seconds - default)
show('Standard', { duration: 3000 });

// Long duration (8 seconds)
show('Long toast', { duration: 8000 });

// Persistent (manual dismiss only)
show('Tap to dismiss', { duration: 0 });

Action Buttons

show('Item deleted', {
  type: 'default',
  action: {
    label: 'Undo',
    onPress: () => {
      show('Restored!', { type: 'success' });
    },
  },
});

Callbacks

show('Processing...', {
  type: 'info',
  onClose: () => {
    console.log('Toast closed!');
    // Execute any code when toast dismisses
  },
});

Custom Content

import { View, Text } from 'react-native';

const customContent = (
  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
    <Text style={{ fontSize: 24 }}>🎉</Text>
    <Text style={{ marginLeft: 8, color: '#fff' }}>Custom Component!</Text>
  </View>
);

show(customContent, {
  type: 'success',
  duration: 5000,
});

Combined Example

show('Upload complete!', {
  type: 'success',
  position: 'bottom',
  duration: 5000,
  action: {
    label: 'View',
    onPress: () => navigation.navigate('Uploads'),
  },
  onClose: () => console.log('Toast dismissed'),
});

Programmatic Control

const { show, dismiss, dismissAll, update } = useToast();

// Show and get toast ID
const toastId = show('Loading...', { duration: 0 });

// Dismiss specific toast
dismiss(toastId);

// Dismiss all toasts
dismissAll();

// Update existing toast
update(toastId, 'Complete!', { type: 'success', duration: 2000 });

API Reference

ToastProvider

Wraps your application to provide toast functionality.

<ToastProvider>
  <YourApp />
</ToastProvider>

Optional offsets for fine-tuning the toast position:

<ToastProvider topOffset={120} bottomOffset={80}>
  <YourApp />
</ToastProvider>

| Prop | Type | Default | Description | | -------------- | -------- | ----------------- | ------------------------------ | | topOffset | number | height * 0.1072 | Distance from top of the screen | | bottomOffset | number | height * 0.1072 | Distance from bottom of the screen |

useToast Hook

Returns an object with toast control methods:

| Method | Type | Description | | ------------ | --------------------------------- | --------------------------------- | | show | (content, options?) => string | Display a toast, returns toast ID | | dismiss | (id: string) => void | Dismiss a specific toast | | dismissAll | () => void | Dismiss all active toasts | | update | (id, content, options?) => void | Update an existing toast |

ToastOptions

| Property | Type | Default | Description | | ----------------- | ---------------------------------------------------------- | ----------- | ------------------------------- | | type | 'default' \| 'success' \| 'error' \| 'warning' \| 'info' | 'default' | Toast visual style | | position | 'top' \| 'bottom' | 'top' | Screen position | | duration | number | 3000 | Duration in ms (0 = persistent) | | onClose | () => void | undefined | Callback when toast closes | | backgroundColor | string | undefined | Override background color | | borderRadius | number | 12 | Override toast border radius | | fontSize | number | 16 | Override toast text font size | | fontFamily | string | undefined | Override toast text font family | | action | { label: string, onPress: () => void } \| null | null | Action button |

Theming

The library automatically detects system dark/light mode. Toast colors adapt accordingly:

Light Mode Colors

• Success: #10B981 (Emerald)
• Error: #EF4444 (Red)
• Warning: #F59E0B (Amber)
• Info: #3B82F6 (Blue)
• Default: #64748B (Slate)

Dark Mode Colors

• Success: #34D399 (Emerald)
• Error: #F87171 (Red)
• Warning: #FBBF24 (Amber)
• Info: #60A5FA (Blue)
• Default: #94A3B8 (Slate)

TypeScript

Full TypeScript support with exported types:

import type {
  ToastOptions,
  ToastType,
  ToastPosition,
} from '@kritikhedau/react-native-toastify';

const options: ToastOptions = {
  type: 'success',
  position: 'top',
  duration: 3000,
};

Example App

Check the /example folder for a complete demo app showcasing all features with modern dark/light theming.

cd example
npm install
npx expo start

Requirements

• React Native >= 0.70.0
• react-native-reanimated >= 3.0.0

Contributing

Contributions are welcome! Please read our Contributing Guide for details.

License

MIT © Kriti Khedau

Made with ❤️ for the React Native community