Skip to main content
React Native Bread provides five toast types to cover all your notification needs: success, error, info, loading, and custom.

​
Success toasts

Success toasts display a green checkmark icon and are perfect for confirming positive actions like saves, updates, or completed operations. 
import { toast } from 'react-native-bread';

// Simple success toast
toast.success('Saved!');

// With description
toast.success('Saved!', 'Your changes have been saved');

// With options
toast.success('Saved!', {
  description: 'Your changes have been saved',
  duration: 5000,
  icon: <CustomCheckIcon />,
});
Default colors (from package/src/toast-store.ts:16):
  • Accent: #28B770 (green)
  • Background: #FFFFFF (white)

​
Error toasts

Error toasts display a red X icon and are ideal for showing failures, validation errors, or issues that require user attention. 
// Simple error toast
toast.error('Failed');

// With description
toast.error('Failed', 'Something went wrong');

// With options
toast.error('Failed', {
  description: 'Unable to connect to server',
  duration: 6000,
  showCloseButton: true,
});
Default colors (from package/src/toast-store.ts:17):
  • Accent: #F05964 (red)
  • Background: #FFFFFF (white)
Error toasts trigger a shake animation when deduplicated, while other toast types use a subtle pulse effect.

​
Info toasts

Info toasts display a yellow/gold info icon and are great for general notifications, tips, or informational messages. 
// Simple info toast
toast.info('Tip');

// With description
toast.info('Tip', 'Swipe to dismiss');

// With options
toast.info('New feature', {
  description: 'Check out our latest update',
  duration: 5000,
});
Default colors (from package/src/toast-store.ts:18):
  • Accent: #EDBE43 (yellow/gold)
  • Background: #FFFFFF (white)

​
Loading toasts

Loading toasts are special toasts designed for async operations. They don’t auto-dismiss and don’t show a close button by default.

​
Using with promises

The most common way to use loading toasts is with toast.promise(), which automatically transitions from loading to success or error: 
toast.promise(fetchUser(id), {
  loading: { title: 'Loading...', description: 'Fetching user data' },
  success: { title: 'Done!', description: 'User loaded' },
  error: (err) => ({ title: 'Error', description: err.message }),
});
How it works (from package/src/toast-api.ts:44-78):
  1. Shows a loading toast immediately
  2. Waits for the promise to resolve or reject
  3. Updates the same toast to success or error
  4. Returns { data, success: true } or { error, success: false }

​
Promise message options

Each state (loading, success, error) accepts either a string or a message object: 
toast.promise(saveData(), {
  // String format
  loading: 'Saving...',
  success: 'Saved!',
  error: 'Failed to save',
});

// Object format with description and duration
toast.promise(uploadFile(), {
  loading: { 
    title: 'Uploading...', 
    description: 'Please wait' 
  },
  success: { 
    title: 'Uploaded!', 
    description: 'File uploaded successfully',
    duration: 3000 // Custom duration after success
  },
  error: (err) => ({
    title: 'Upload failed',
    description: err.message,
    duration: 5000 // Custom duration after error
  }),
});
Default colors (from package/src/toast-store.ts:19):
  • Accent: #232323 (dark gray)
  • Background: #FFFFFF (white)
Loading toasts never show the close button, even if showCloseButton is enabled globally. They also don’t participate in deduplication.

​
Custom toasts

Custom toasts give you complete control over the toast content. Your component fills the entire toast container and receives all entry/exit/stack animations automatically.

​
Basic custom toast

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

// Pass a React component
toast.custom(
  <View style={{ padding: 16 }}>
    <Text>Custom toast content</Text>
  </View>
);

​
With render function

Use a render function to access toast properties and dismiss functionality: 
toast.custom(({ dismiss, id, type, isExiting }) => (
  <View style={{ padding: 16, flexDirection: 'row', alignItems: 'center', gap: 12 }}>
    <Image 
      source={{ uri: 'avatar.png' }} 
      style={{ width: 44, height: 44, borderRadius: 22 }} 
    />
    <View style={{ flex: 1 }}>
      <Text style={{ fontWeight: '600' }}>New message</Text>
      <Text style={{ color: '#666' }}>Hey, check this out!</Text>
    </View>
    <Pressable onPress={dismiss}>
      <Text style={{ color: '#3b82f6' }}>Reply</Text>
    </Pressable>
  </View>
));
Render function props (from package/src/types.ts:24-34):
  • id - Unique toast identifier
  • dismiss - Function to dismiss this toast
  • type - The toast type (defaults to “info” for custom toasts)
  • isExiting - Whether the toast is currently animating out

​
Custom toast with options

toast.custom(
  <MyNotificationCard />, 
  {
    duration: 5000,
    dismissible: false,
    style: { backgroundColor: '#fef2f2' },
    type: 'success', // Affects animation colors
  }
);
Available options (from package/src/toast-api.ts:80-82):
  • type - Toast type for theming (defaults to “info”)
  • duration - How long to show the toast
  • dismissible - Whether swipe to dismiss is enabled
  • showCloseButton - Whether to show close button (custom toasts don’t render it automatically)
  • style - Container style overrides
  • id - Custom ID for deduplication
  • deduplication - Enable/disable deduplication
When using customContent, the default toast layout (icon, title, description, close button) is completely replaced. You have full control over rendering.

​
Type definitions

From package/src/types.ts:5: 
export type ToastType = "success" | "error" | "info" | "loading";

​
API methods

MethodDescriptionSource
toast.success(title, descriptionOrOptions?, duration?)Show success toastpackage/src/toast-api.ts:198
toast.error(title, descriptionOrOptions?, duration?)Show error toastpackage/src/toast-api.ts:203
toast.info(title, descriptionOrOptions?, duration?)Show info toastpackage/src/toast-api.ts:208
toast.promise(promise, messages)Show loading → success/error toastpackage/src/toast-api.ts:213
toast.custom(content, options?)Show fully custom toastpackage/src/toast-api.ts:190

Build docs developers (and LLMs) love

Get started for freeTalk to us