Type definition
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;
}
ToastConfig on a per-toast basis.
Properties
Stable key for deduplication. When set, toasts with the same id deduplicate and update the existing toast’s content. Without an id, matching falls back to title+type+description against the front toast.
Description text shown below the title.
Duration in milliseconds (overrides default from config).
Custom icon for this toast. Can be a React element or 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
}
Style overrides for this toast’s container.
Style overrides for this toast’s title.
Style overrides for this toast’s description.
Whether this toast can be dismissed via swipe (overrides config).
Whether to show the close button on this toast (overrides config).
customContent
ReactNode | CustomContentRenderFn
Custom content that fully replaces the default toast layout. When provided, icon, title, description, and close button are not rendered. Can be a React element or a render function that receives CustomContentProps.type CustomContentRenderFn = (props: CustomContentProps) => ReactNode;
Enable deduplication for this toast (overrides global config). Plays a pulse animation for non-error toasts or a shake for errors. Use with id for stable matching across different content.
Usage examples
Basic toast with options
import { toast } from 'react-native-bread';
toast.success('Payment received', {
description: 'Your account has been credited',
duration: 5000,
});
Toast with custom icon
import { toast } from 'react-native-bread';
import { Star } from 'lucide-react-native';
toast.info('New feature unlocked!', {
icon: <Star color="#fbbf24" size={24} />,
duration: 6000,
});
Toast with custom icon render function
import { toast } from 'react-native-bread';
import { AlertTriangle } from 'lucide-react-native';
toast.error('Something went wrong', {
icon: ({ color, size }) => <AlertTriangle color={color} size={size} />,
});
Toast with custom styles
import { toast } from 'react-native-bread';
toast.success('Profile updated', {
style: {
backgroundColor: '#dcfce7',
borderWidth: 2,
borderColor: '#22c55e',
},
titleStyle: {
fontSize: 18,
fontWeight: 'bold',
},
descriptionStyle: {
fontSize: 14,
color: '#666',
},
});
Toast with custom content
import { toast } from 'react-native-bread';
import { View, Text, TouchableOpacity } from 'react-native';
toast.info('', {
customContent: ({ dismiss }) => (
<View style={{ padding: 16 }}>
<Text style={{ fontSize: 16, fontWeight: 'bold' }}>
Custom Toast
</Text>
<Text style={{ marginTop: 4, color: '#666' }}>
This is completely custom content
</Text>
<TouchableOpacity
onPress={dismiss}
style={{ marginTop: 12, alignSelf: 'flex-end' }}
>
<Text style={{ color: '#3b82f6' }}>Got it</Text>
</TouchableOpacity>
</View>
),
});
Toast with deduplication by ID
import { toast } from 'react-native-bread';
// Multiple calls with same ID will deduplicate
function showNotification() {
toast.info('You have new messages', {
id: 'message-notification',
deduplication: true,
});
}
// Calling this multiple times will update the existing toast
showNotification();
showNotification(); // Updates existing toast
Non-dismissible toast
import { toast } from 'react-native-bread';
toast.loading('Processing...', {
dismissible: false,
showCloseButton: false,
duration: Infinity, // Show indefinitely
});