Skip to main content

​
Type definition

export interface CustomContentProps {
  id: string;
  dismiss: () => void;
  type: ToastType;
  isExiting: boolean;
}
Props passed to custom content render functions when using the customContent option in ToastOptions. These props allow your custom content to interact with the toast system.

​
Properties

​
id
string
Unique identifier for this toast instance.
​
dismiss
() => void
Function to dismiss this toast. Call this from your custom content when the user should close the toast.
​
type
ToastType
The type of this toast. Can be "success", "error", "info", or "loading".
​
isExiting
boolean
Whether the toast is currently exiting (animating out). Useful for coordinating animations in your custom content.

​
Usage examples

​
Basic custom content

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

toast.success('', {
  customContent: ({ dismiss }) => (
    <View style={{ padding: 16 }}>
      <Text style={{ fontSize: 16, fontWeight: 'bold' }}>
        Custom Toast
      </Text>
      <TouchableOpacity onPress={dismiss}>
        <Text style={{ color: '#3b82f6', marginTop: 8 }}>Close</Text>
      </TouchableOpacity>
    </View>
  ),
});

​
Using toast type for conditional styling

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

const CustomToast = ({ type, dismiss }: CustomContentProps) => {
  const backgroundColor = {
    success: '#dcfce7',
    error: '#fee2e2',
    info: '#dbeafe',
    loading: '#f3f4f6',
  }[type];

  const textColor = {
    success: '#166534',
    error: '#991b1b',
    info: '#1e40af',
    loading: '#374151',
  }[type];

  return (
    <View style={{ padding: 16, backgroundColor }}>
      <Text style={{ color: textColor, fontWeight: 'bold' }}>
        Toast type: {type}
      </Text>
    </View>
  );
};

toast.success('', {
  customContent: CustomToast,
});

​
Using isExiting for exit animations

import { toast } from 'react-native-bread';
import { View, Text } from 'react-native';
import Animated, {
  useAnimatedStyle,
  withTiming,
} from 'react-native-reanimated';

const AnimatedCustomToast = ({ isExiting, dismiss }: CustomContentProps) => {
  const animatedStyle = useAnimatedStyle(() => ({
    opacity: withTiming(isExiting ? 0 : 1, { duration: 200 }),
    transform: [
      {
        scale: withTiming(isExiting ? 0.9 : 1, { duration: 200 }),
      },
    ],
  }));

  return (
    <Animated.View style={[{ padding: 16 }, animatedStyle]}>
      <Text style={{ fontSize: 16 }}>Animated custom toast</Text>
    </Animated.View>
  );
};

toast.info('', {
  customContent: AnimatedCustomToast,
});

​
Interactive custom content with actions

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

const NotificationToast = ({ dismiss, id }: CustomContentProps) => {
  const handleViewDetails = () => {
    console.log('View details for toast:', id);
    dismiss();
  };

  return (
    <View style={styles.container}>
      <View>
        <Text style={styles.title}>New message received</Text>
        <Text style={styles.description}>
          You have 3 unread messages
        </Text>
      </View>
      <View style={styles.actions}>
        <TouchableOpacity
          onPress={dismiss}
          style={styles.button}
        >
          <Text style={styles.buttonText}>Dismiss</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={handleViewDetails}
          style={[styles.button, styles.primaryButton]}
        >
          <Text style={[styles.buttonText, styles.primaryButtonText]}>
            View
          </Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 16,
  },
  title: {
    fontSize: 16,
    fontWeight: 'bold',
    marginBottom: 4,
  },
  description: {
    fontSize: 14,
    color: '#666',
  },
  actions: {
    flexDirection: 'row',
    gap: 12,
    marginTop: 12,
  },
  button: {
    paddingVertical: 8,
    paddingHorizontal: 16,
    borderRadius: 6,
    backgroundColor: '#f3f4f6',
  },
  primaryButton: {
    backgroundColor: '#3b82f6',
  },
  buttonText: {
    fontSize: 14,
    fontWeight: '600',
    color: '#374151',
  },
  primaryButtonText: {
    color: '#ffffff',
  },
});

toast.info('', {
  customContent: NotificationToast,
  duration: 10000,
});

​
Reusable custom toast component

import { toast } from 'react-native-bread';
import { View, Text, Image, TouchableOpacity } from 'react-native';
import type { CustomContentProps } from 'react-native-bread';

interface AvatarToastData {
  avatar: string;
  username: string;
  action: string;
}

const AvatarToast = (
  props: CustomContentProps & { data: AvatarToastData }
) => {
  const { dismiss, data } = props;
  
  return (
    <View style={{ flexDirection: 'row', padding: 16, gap: 12 }}>
      <Image
        source={{ uri: data.avatar }}
        style={{ width: 40, height: 40, borderRadius: 20 }}
      />
      <View style={{ flex: 1 }}>
        <Text style={{ fontWeight: 'bold' }}>{data.username}</Text>
        <Text style={{ color: '#666', marginTop: 2 }}>{data.action}</Text>
      </View>
      <TouchableOpacity onPress={dismiss}>
        <Text style={{ color: '#3b82f6' }}>×</Text>
      </TouchableOpacity>
    </View>
  );
};

// Usage
function showAvatarToast(data: AvatarToastData) {
  toast.info('', {
    customContent: (props) => <AvatarToast {...props} data={data} />,
  });
}

showAvatarToast({
  avatar: 'https://i.pravatar.cc/150?img=3',
  username: 'johndoe',
  action: 'liked your post',
});

Build docs developers (and LLMs) love

Get started for freeTalk to us