Skip to main content
React Native Bread is highly customizable. You can customize toasts globally via the config prop on <BreadLoaf /> or override settings for individual toasts using options.

​
Colors

Customize the accent and background colors for each toast type.

​
Default colors

From package/src/toast-store.ts:15-20: 
colors: {
  success: { accent: "#28B770", background: "#FFFFFF" },
  error: { accent: "#F05964", background: "#FFFFFF" },
  info: { accent: "#EDBE43", background: "#FFFFFF" },
  loading: { accent: "#232323", background: "#FFFFFF" },
}

​
Global color customization

Customize colors for all toasts of a specific type: 
import { BreadLoaf } from 'react-native-bread';

function App() {
  return (
    <>
      <NavigationContainer>...</NavigationContainer>
      <BreadLoaf
        config={{
          colors: {
            success: { 
              accent: '#22c55e', 
              background: '#f0fdf4' 
            },
            error: { 
              accent: '#ef4444', 
              background: '#fef2f2' 
            },
            info: { 
              accent: '#3b82f6', 
              background: '#eff6ff' 
            },
          },
        }}
      />
    </>
  );
}
Color properties (from package/src/types.ts:9-14):
  • accent - Color used for title text and icons
  • background - Background color of the toast container

​
Partial color updates

You can update just the accent or background without replacing both: 
<BreadLoaf
  config={{
    colors: {
      success: { 
        accent: '#10b981' // Only change accent, keep default background
      },
    },
  }}
/>

​
Icons

Customize icons for each toast type globally or per-toast.

​
Global icon customization

Replace default icons for specific toast types: 
import { BreadLoaf } from 'react-native-bread';
import CustomCheckIcon from './CustomCheckIcon';
import CustomErrorIcon from './CustomErrorIcon';

function App() {
  return (
    <BreadLoaf
      config={{
        icons: {
          success: ({ color, size }) => (
            <CustomCheckIcon color={color} size={size} />
          ),
          error: ({ color, size }) => (
            <CustomErrorIcon color={color} size={size} />
          ),
        },
      }}
    />
  );
}
Icon render function props (from package/src/types.ts:16-22):
  • color - The accent color from the theme for this toast type
  • size - Default icon size (28, from package/src/constants.ts:3)

​
Per-toast icon customization

Override the icon for individual toasts: 
import { toast } from 'react-native-bread';
import { HeartIcon } from './icons';

// With a React component
toast.success('Liked!', {
  icon: <HeartIcon />
});

// With a render function to access color
toast.success('Liked!', {
  icon: ({ color, size }) => <HeartIcon color={color} size={size} />
});

​
Styles

Customize the visual appearance using style overrides.

​
Global style customization

Apply styles to all toasts: 
<BreadLoaf
  config={{
    toastStyle: {
      borderRadius: 12,
      paddingHorizontal: 20,
      paddingVertical: 14,
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 4 },
      shadowOpacity: 0.1,
      shadowRadius: 8,
      elevation: 4,
    },
    titleStyle: {
      fontSize: 16,
      fontWeight: '700',
      fontFamily: 'CustomFont-Bold',
    },
    descriptionStyle: {
      fontSize: 14,
      fontWeight: '400',
      fontFamily: 'CustomFont-Regular',
      opacity: 0.8,
    },
  }}
/>
Available style properties (from package/src/types.ts:65-70):
  • toastStyle - Style overrides for the toast container (ViewStyle)
  • titleStyle - Style overrides for the title text (TextStyle)
  • descriptionStyle - Style overrides for the description text (TextStyle)

​
Per-toast style customization

Override styles for individual toasts: 
toast.success('Saved!', {
  description: 'Your changes have been saved',
  style: {
    backgroundColor: '#e8f5e9',
    borderLeftWidth: 4,
    borderLeftColor: '#4caf50',
  },
  titleStyle: {
    color: '#2e7d32',
    fontSize: 18,
  },
  descriptionStyle: {
    color: '#1b5e20',
  },
});
Per-toast style options (from package/src/types.ts:87-92):
  • style - Container style overrides
  • titleStyle - Title text style overrides
  • descriptionStyle - Description text style overrides

​
Duration

Control how long toasts are visible on screen.

​
Default duration

The default duration is 4000ms (4 seconds) (from package/src/toast-store.ts:25): 
defaultDuration: 4000

​
Global duration customization

Change the default duration for all toasts: 
<BreadLoaf
  config={{
    defaultDuration: 6000, // 6 seconds
  }}
/>

​
Per-toast duration

Override duration for individual toasts: 
// Short duration
toast.success('Copied!', { duration: 2000 });

// Long duration for important messages
toast.error('Network error', {
  description: 'Please check your connection',
  duration: 8000,
});

// Infinite duration (won't auto-dismiss)
toast.info('Action required', { 
  duration: Infinity,
  showCloseButton: true, // Allow manual dismissal
});

​
Duration with promise toasts

For promise toasts, you can set different durations for each state: 
toast.promise(apiCall(), {
  loading: { 
    title: 'Loading...', 
    // Loading uses 1 hour by default (package/src/toast-api.ts:51)
  },
  success: { 
    title: 'Success!',
    duration: 3000, // Custom success duration
  },
  error: (err) => ({
    title: 'Failed',
    description: err.message,
    duration: 6000, // Custom error duration
  }),
});

​
Dismissible

Control whether toasts can be dismissed via swipe gesture.

​
Global dismissible setting

By default, dismissible is enabled (from package/src/toast-store.ts:13): 
// Disable swipe to dismiss globally
<BreadLoaf
  config={{
    dismissible: false,
  }}
/>

​
Per-toast dismissible

Override for individual toasts: 
// Disable swipe for important error
toast.error('Critical error', {
  description: 'Please read this message',
  dismissible: false,
  showCloseButton: true, // Still allow close button
});

// Enable swipe for specific toast when globally disabled
toast.info('Quick tip', {
  dismissible: true,
});
Swipe configuration (from package/src/types.ts:58):
  • true - Users can swipe up (top position) or down (bottom position) to dismiss
  • false - Swipe gesture is disabled

​
Show close button

Control whether the X close button is displayed on toasts.

​
Global close button setting

By default, the close button is enabled (from package/src/toast-store.ts:14): 
// Hide close button globally
<BreadLoaf
  config={{
    showCloseButton: false,
  }}
/>

​
Per-toast close button

Override for individual toasts: 
// Show close button for long-duration toast
toast.info('Important message', {
  duration: 10000,
  showCloseButton: true,
});

// Hide close button for quick success
toast.success('Copied!', {
  duration: 2000,
  showCloseButton: false,
});
Loading toasts never show the close button, even if showCloseButton is enabled globally or per-toast (from package/src/types.ts:59-60).

​
Complete customization example

Here’s a comprehensive example combining multiple customization options: 
import { BreadLoaf } from 'react-native-bread';
import { toast } from 'react-native-bread';
import { CustomCheckIcon, CustomErrorIcon } from './icons';

function App() {
  return (
    <>
      <NavigationContainer>...</NavigationContainer>
      <BreadLoaf
        config={{
          // Positioning
          position: 'top',
          offset: 16,
          
          // Behavior
          stacking: true,
          maxStack: 3,
          defaultDuration: 5000,
          dismissible: true,
          showCloseButton: true,
          deduplication: true,
          
          // Colors
          colors: {
            success: { accent: '#22c55e', background: '#f0fdf4' },
            error: { accent: '#ef4444', background: '#fef2f2' },
            info: { accent: '#3b82f6', background: '#eff6ff' },
          },
          
          // Icons
          icons: {
            success: ({ color, size }) => (
              <CustomCheckIcon color={color} size={size} />
            ),
            error: ({ color, size }) => (
              <CustomErrorIcon color={color} size={size} />
            ),
          },
          
          // Styles
          toastStyle: {
            borderRadius: 12,
            paddingHorizontal: 20,
            paddingVertical: 14,
          },
          titleStyle: {
            fontSize: 16,
            fontWeight: '700',
          },
          descriptionStyle: {
            fontSize: 14,
            opacity: 0.8,
          },
        }}
      />
    </>
  );
}

// Later in your app - per-toast customization
toast.success('Payment received', {
  description: '$49.99 credited to your account',
  duration: 7000,
  icon: <DollarIcon />,
  style: {
    borderWidth: 2,
    borderColor: '#22c55e',
  },
  titleStyle: {
    fontSize: 18,
  },
});

​
Configuration type reference

From package/src/types.ts:107-114: 
export type ToastConfig = {
  [K in keyof ToastTheme]?: K extends "colors"
    ? Partial<Record<ToastType, Partial<ToastTypeColors>>>
    : K extends "icons"
      ? Partial<Record<ToastType, IconRenderFn>>
      : ToastTheme[K];
};
From package/src/types.ts:77-105: 
export interface ToastOptions {
  id?: string;
  description?: string;
  duration?: number;
  icon?: ReactNode | IconRenderFn;
  style?: ViewStyle;
  titleStyle?: TextStyle;
  descriptionStyle?: TextStyle;
  dismissible?: boolean;
  showCloseButton?: boolean;
  customContent?: ReactNode | CustomContentRenderFn;
  deduplication?: boolean;
}

Build docs developers (and LLMs) love

Get started for freeTalk to us