Themes, styling & icons

Themes

theme is 'system' by default and follows the device appearance. Use invert to flip a single toast or every toast.

<ToastHost theme="dark" />;

toast('Inverted', { invert: true });

Rich colors

richColors tints the background, border, and icon of success, error, warning, info, and loading toasts.

<ToastHost richColors />;

toast.error('Payment failed', { richColors: true });

Styling

Toasts are drawn with native views, so styles use a fixed set of keys that render the same on both platforms.

• ToastViewStyle: backgroundColor, borderColor, borderWidth, borderRadius, padding, paddingHorizontal, paddingVertical
• ToastTextStyle: color, fontSize, fontFamily, fontWeight, lineHeight

Set defaults on the host, including per-variant container styles:

<ToastHost
  toastOptions={{
    style: { borderRadius: 12 },
    titleStyle: { fontFamily: 'Inter' },
    success: { backgroundColor: '#ecfdf3' },
  }}
/>

Override a single toast with style and styles:

toast('Custom', {
  style: { backgroundColor: '#111111' },
  styles: {
    title: { color: '#ffffff' },
    description: { color: '#c8c8c3' },
    icon: { color: '#7ee2a8' },
    closeButtonIcon: { color: '#ffffff' },
  },
});

Buttons use actionButtonStyle, actionButtonTextStyle, cancelButtonStyle, and cancelButtonTextStyle.

Fonts

Font families follow React Native's custom font setup. On Android, font files linked into assets/fonts should use the family name as their file name.

Icons

An icon can be a string, a text icon, an image, or a glyph from an icon font.

import { fontIcon, toast } from 'react-native-super-toast';

toast('Text icon', { icon: '🎉' });

toast('Image icon', {
  icon: { type: 'image', source: require('./bell.png'), tintColor: '#111' },
});

toast('Font icon', {
  icon: fontIcon({ glyph: 0xe7f4, fontFamily: 'Material Icons' }),
});

Replace variant icons for every toast on the host:

<ToastHost icons={{ success: '✅', error: fontIcon({ glyph: 0xe000, fontFamily: 'Material Icons' }) }} />

The app must bundle any icon font it references.