Skip to main content

​
Type definition

export type ToastConfig = {
  [K in keyof ToastTheme]?: K extends "colors"
    ? Partial<Record<ToastType, Partial<ToastTypeColors>>>
    : K extends "icons"
      ? Partial<Record<ToastType, IconRenderFn>>
      : ToastTheme[K];
};
Configuration options for customizing toast behavior and appearance. All properties are optional and can be passed to the <BreadLoaf /> component to override defaults.

​
Properties

​
position
ToastPosition
Position of toasts on screen. Can be "top" or "bottom".
​
offset
number
Extra offset from safe area edge (in addition to safe area insets).
​
rtl
boolean
Enable right-to-left layout at the code level (reverses icon/text order and text alignment). Only needed when you handle RTL in JavaScript — native RTL (e.g. via I18nManager.forceRTL) already flips the entire layout automatically, so this option is unnecessary in that case.
​
stacking
boolean
Whether to show multiple toasts stacked. Default: true. When false, only one toast shows at a time.
​
maxStack
number
Maximum number of toasts visible at once when stacking is enabled. Default: 3.
​
dismissible
boolean
Whether toasts can be dismissed via swipe gesture. Default: true.
​
showCloseButton
boolean
Whether to show the close button on toasts. Default: true. Loading toasts never show close button.
​
colors
Partial<Record<ToastType, Partial<ToastTypeColors>>>
Colors for each toast type. Each toast type can have custom accent and background colors.
interface ToastTypeColors {
  accent: string;    // Accent color used for title text and icons
  background: string; // Background color of the toast
}
​
icons
Partial<Record<ToastType, IconRenderFn>>
Custom icons for each toast type. Can be a render function that receives IconProps.
type IconRenderFn = (props: IconProps) => ReactNode;

interface IconProps {
  color: string; // The accent color from the theme for this toast type
  size: number;  // Default icon size
}
​
toastStyle
ViewStyle
Style overrides for the toast container.
​
titleStyle
TextStyle
Style overrides for the title text.
​
descriptionStyle
TextStyle
Style overrides for the description text.
​
defaultDuration
number
Default duration in milliseconds for toasts. Default: 4000.
​
deduplication
boolean
When true, duplicate toasts reset the timer and play a feedback animation. Matches by title+type+description, or by id if provided. Default: true.

​
Usage example

import { BreadLoaf } from 'react-native-bread';

function App() {
  return (
    <>
      {/* Your app content */}
      <BreadLoaf
        config={{
          position: 'top',
          offset: 20,
          stacking: true,
          maxStack: 3,
          dismissible: true,
          showCloseButton: true,
          defaultDuration: 5000,
          deduplication: true,
          colors: {
            success: {
              accent: '#22c55e',
              background: '#f0fdf4',
            },
            error: {
              accent: '#ef4444',
              background: '#fef2f2',
            },
          },
          toastStyle: {
            borderRadius: 12,
            paddingHorizontal: 16,
          },
          titleStyle: {
            fontSize: 16,
            fontWeight: '600',
          },
        }}
      />
    </>
  );
}

​
Custom icons example

import { BreadLoaf } from 'react-native-bread';
import { Check, X, Info, Loader } from 'lucide-react-native';

function App() {
  return (
    <>
      {/* Your app content */}
      <BreadLoaf
        config={{
          icons: {
            success: ({ color, size }) => <Check color={color} size={size} />,
            error: ({ color, size }) => <X color={color} size={size} />,
            info: ({ color, size }) => <Info color={color} size={size} />,
            loading: ({ color, size }) => <Loader color={color} size={size} />,
          },
        }}
      />
    </>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us