toastify-react-native

The useModal property determines if a toast uses a modal overlay that blocks interaction with the background screen.

• useModal: true: The toast appears with an overlay, making the background non-interactive. This ensures visibility over other modals but prevents user interaction with the app content behind the toast.
• useModal: false: The toast appears without blocking interaction. Users can still interact with the app, but the toast might not appear over other modal components.

You can set this globally on the ToastManager or per-toast using Toast.show() or the shorthand methods.

// Global setting via ToastManager
<ToastManager useModal={true} />

// Per-toast setting via Toast.show()
Toast.show({
  type: 'success',
  text1: 'Using Modal',
  useModal: true,
})

// Per-toast setting via shorthand
Toast.success('Success with Modal!', 'bottom', undefined, undefined, true)

You can define entirely custom toast layouts by providing a config object to the ToastManager. The config object maps a type string to a component function that receives props like text1, text2, and hide (a function to manually close the toast).

import React from 'react'
import { View, Text, StyleSheet } from 'react-native'
import ToastManager, { Toast } from 'toastify-react-native'
import Icon from 'react-native-vector-icons/MaterialIcons'

const CustomToast = ({ text1, text2, hide }) => {
  return (
    <View style={styles.customToast}>
      <Icon name='star' size={24} color='#FFD700' />
      <View style={styles.textContainer}>
        <Text style={styles.title}>{text1}</Text>
        {text2 && <Text style={styles.message}>{text2}</Text>}
      </View>
      <Icon name='close' size={20} color='#fff' onPress={hide} />
    </View>
  )
}

const styles = StyleSheet.create({
  customToast: {
    width: '90%',
    backgroundColor: '#673AB7',
    borderRadius: 10,
    padding: 16,
    flexDirection: 'row',
    alignItems: 'center',
  },
  textContainer: {
    flex: 1,
    marginLeft: 12,
  },
  title: {
    color: '#fff',
    fontWeight: 'bold',
    fontSize: 16,
  },
  message: {
    color: '#fff',
    fontSize: 14,
    marginTop: 4,
  },
})

export default function App() {
  const toastConfig = {
    custom: (props) => <CustomToast {...props} />,
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button
        title='Show Custom Toast'
        onPress={() => {
          Toast.show({
            type: 'custom',
            text1: 'Custom Component',
            text2: 'This is a fully custom toast component!',
          })
        }}
      />

      <ToastManager config={toastConfig} />
    </View>
  )
}

You can customize icons for individual toasts in several ways:

1. Change icon name: Pass a different string to the icon property (uses the default icon family).
2. Change icon family: Pass a different string to iconFamily (e.g., 'FontAwesome').
3. Use a React component: Pass a custom component to the icon property.
4. Use JSX directly: Pass a JSX element to the icon property.

// 1. Different icon name
Toast.show({
  type: 'success',
  text1: 'Different Icon',
  icon: 'check',
})

// 2. Different icon family
Toast.show({
  type: 'error',
  text1: 'FontAwesome Icon',
  icon: 'exclamation-circle',
  iconFamily: 'FontAwesome',
})

// 3. Custom React component as icon
const CustomIcon = ({ color }) => (
  <View style={{ width: 30, height: 30, borderRadius: 15, backgroundColor: color || '#4CAF50', alignItems: 'center', justifyContent: 'center' }}>
    <FontAwesome name='check' size={18} color='#FFFFFF' />
  </View>
)

Toast.show({
  type: 'info',
  text1: 'Custom Component',
  icon: <CustomIcon color='#3498db' />,
})

// 4. Using JSX directly
Toast.show({
  type: 'success',
  text1: 'JSX Icon',
  icon: (
    <View style={{ flexDirection: 'row' }}>
      <FontAwesome name='thumbs-up' size={22} color='#4CAF50' />
      <FontAwesome name='thumbs-up' size={22} color='#4CAF50' style={{ marginLeft: -8, marginTop: 5 }} />
    </View>
  ),
})

You can override the default look and feel of specific toast types by passing a config object to the ToastManager. The config object maps toast types (e.g., success) to a render function that receives props (including text1 and text2).

import React from 'react'
import { View, Button, Text } from 'react-native'
import ToastManager, { Toast } from 'toastify-react-native'

// Custom toast configuration
const toastConfig = {
  success: (props) => (
    <View style={{ backgroundColor: '#4CAF50', padding: 16, borderRadius: 10 }}>
      <Text style={{ color: 'white', fontWeight: 'bold' }}>{props.text1}</Text>
      {props.text2 && <Text style={{ color: 'white' }}>{props.text2}</Text>}
    </View>
  ),
}

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button
        title='Show Custom Toast'
        onPress={() => {
          Toast.show({
            type: 'success',
            text1: 'Main message',
            text2: 'Secondary message',
            position: 'bottom',
            visibilityTime: 4000,
            autoHide: true,
            onPress: () => console.log('Toast pressed'),
            onShow: () => console.log('Toast shown'),
            onHide: () => console.log('Toast hidden'),
          })
        }}
      />

      <ToastManager config={toastConfig} />
    </View>
  )
}