toastify-react-native

toastify-react-native

🎉 toastify-react-native allows you to add notifications to your React Native app (iOS, Android) with ease. No more nonsense!

Table of Contents

• Demo
• Features
• Installation
• Basic Usage
• Advanced Usage
• Modal Behavior 👈 NEW
• Available Props
• Custom Components
• Customizing Icons
• API Reference
• Upgrading from v6.x
• Contributing
• License

Demo

View examples on snack.expo.io

Features

• 🚀 Simple API: Easy to use with minimal setup
• 🎨 Highly customizable: Customize colors, icons, animations, and more
• 🧩 Custom components: Create your own toast components
• 🎭 Custom icons: Use different icon families, custom icon components, or JSX elements
• 📱 Responsive: Adapts to different screen sizes
• 🌓 Dark & Light mode: Built-in theme support
• 🔄 RTL support: Right-to-left language support
• ⏱️ Progress bar: Visual indicator of toast duration
• 🖐️ Interactive: Pause on touch, resume on release
• 🔄 Animation options: Choose from different animation styles
• 📝 Multiple lines: Support for title and description
• 🔍 TypeScript support: Full type definitions included
• ✨ Smooth animations: Beautiful enter/exit animations
• ⚡ Quick setup: Get up and running in less than 10 seconds!
• 🎛️ Per-toast behavior: Define different behaviors for each toast
• 📊 Progress control: Control the progress bar like nprogress
• 🔧 Super easy to customize: Modify every aspect to match your app's design
• 🎭 And much more!: Discover all the possibilities!

Installation

npm install toastify-react-native
# or
yarn add toastify-react-native

Required Dependencies

This package requires react-native-vector-icons:

npm install react-native-vector-icons
# or
yarn add react-native-vector-icons

Follow the react-native-vector-icons installation guide to complete the setup for your platform.

Basic Usage

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

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button
        title='Show Success Toast'
        onPress={() => {
          Toast.success('Success message!')
        }}
      />

      <Button
        title='Show Error Toast'
        onPress={() => {
          Toast.error('Error message!')
        }}
      />

      <Button
        title='Show Info Toast'
        onPress={() => {
          Toast.info('Info message!')
        }}
      />

      <Button
        title='Show Warning Toast'
        onPress={() => {
          Toast.warn('Warning message!')
        }}
      />

      {/* Toast provider should be at the root level */}
      <ToastManager />
    </View>
  )
}

Advanced Usage

Custom Configuration

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>
  ),
  // Override other toast types as needed
}

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'),
          })
        }}
      />

      {/* Toast provider with custom config */}
      <ToastManager config={toastConfig} />
    </View>
  )
}

Toast Positions

Toast.success('Top toast', 'top') // default
Toast.error('Center toast', 'center')
Toast.info('Bottom toast', 'bottom')

Customizing Individual Toasts

Toast.show({
  type: 'success',
  text1: 'Custom Toast',
  text2: 'With many options',
  position: 'bottom',
  visibilityTime: 5000,
  autoHide: true,
  backgroundColor: '#333',
  textColor: '#fff',
  iconColor: '#4CAF50',
  iconSize: 24,
  progressBarColor: '#4CAF50',
  theme: 'dark',
  // Custom close icon options
  closeIcon: 'times-circle',
  closeIconFamily: 'FontAwesome',
  closeIconSize: 20,
  closeIconColor: '#fff',
})

Modal Behavior

The useModal prop controls whether the toast uses a modal overlay that blocks interaction with the background screen. This is particularly important when working with modals in your app.

Why is this important?

• With Modal (useModal: true): The toast appears with a modal overlay, making the background screen non-interactive. This ensures the toast is always visible, even over other modals, but prevents users from interacting with content behind it.

• Without Modal (useModal: false): The toast appears without blocking interaction with the background screen. Users can still interact with your app while the toast is displayed, but the toast might not appear over other modal components.

Usage Examples

Setting at ToastManager level (affects all toasts)

// All toasts will use modal behavior by default
<ToastManager useModal={true} />

// All toasts will NOT use modal behavior by default
<ToastManager useModal={false} />

Setting for individual toasts with Toast.show()

// This toast will use modal behavior
Toast.show({
  type: 'success',
  text1: 'Using Modal',
  text2: 'Background is not interactive',
  useModal: true,
})

// This toast will NOT use modal behavior
Toast.show({
  type: 'error',
  text1: 'No Modal',
  text2: 'Background remains interactive',
  useModal: false,
})

Using with shorthand methods

// Success toast with modal behavior
Toast.success(
  'Success with Modal!',
  'bottom', // position
  undefined, // icon
  undefined, // iconFamily
  true, // useModal
)

// Error toast without modal behavior
Toast.error(
  'Error without Modal!',
  'bottom', // position
  undefined, // icon
  undefined, // iconFamily
  false, // useModal
)

Conditional usage based on context

// Inside a modal component
const showToastInModal = () => {
  Toast.show({
    type: 'info',
    text1: 'Modal Context',
    text2: 'This toast appears over the modal',
    useModal: true, // Ensure it appears over the modal
  })
}

// In regular app context
const showRegularToast = () => {
  Toast.show({
    type: 'success',
    text1: 'Regular Context',
    text2: 'Allow interaction with the app',
    useModal: false, // Allow background interaction
  })
}

Available Props

ToastManager Props

Prop	Type	Default	Description
width	number | string | 'auto'	'90%'	Width of the toast
minHeight	number | string | 'auto'	61	Minimum height of the toast
style	StyleProp	{}	Custom style for the toast container
textStyle	StyleProp	{}	Custom style for the toast text
theme	'light' | 'dark'	'light'	Theme of the toast
animationStyle	'none' | 'slide' | 'fade'	'fade'	Animation style for the toast
position	'top' | 'center' | 'bottom'	'top'	Position of the toast
duration	number	3000	Duration in ms before the toast disappears
showCloseIcon	boolean	true	Whether to show the close icon
showProgressBar	boolean	true	Whether to show the progress bar
isRTL	boolean	false	Right-to-left support
topOffset	number	40	Distance from the top when position is 'top'
bottomOffset	number	40	Distance from the bottom when position is 'bottom'
iconSize	number	22	Size of the icon
iconFamily	string	'Ionicons'	Default icon family to use
icons	object	undefined	Custom default icons for each toast type
config	ToastConfig	undefined	Custom toast components configuration
useModal	boolean	true	Whether to use modal overlay for toasts
closeIcon	string | ReactNode	'close-outline'	Default close icon name or custom component
closeIconSize	number	22	Size of the close icon
closeIconColor	string	undefined	Color of the close icon
closeIconFamily	string	'Ionicons'	Icon family for the close icon

Toast.show() Options

Option	Type	Default	Description
type	'success' | 'error' | 'info' | 'warn' | 'default'	'default'	Type of toast
text1	string	''	Main text
text2	string	undefined	Secondary text
position	'top' | 'center' | 'bottom'	'top'	Position of the toast
visibilityTime	number	3000	Duration in ms before the toast disappears
autoHide	boolean	true	Whether the toast should hide automatically
onShow	() => void	undefined	Callback when toast is shown
onHide	() => void	undefined	Callback when toast is hidden
onPress	() => void	undefined	Callback when toast is pressed
progressBarColor	string	undefined	Color of the progress bar
backgroundColor	string	undefined	Background color of the toast
textColor	string	undefined	Color of the text
icon	string | ReactNode	undefined	Custom icon name or component
iconFamily	string	undefined	Icon family for the icon
iconColor	string	undefined	Color of the icon
iconSize	number	undefined	Size of the icon
theme	'light' | 'dark'	undefined	Theme of the toast
useModal	boolean	undefined	Whether to use modal overlay for this toast
closeIcon	string | ReactNode	undefined	Custom close icon name or component
closeIconSize	number	undefined	Size of the close icon
closeIconColor	string	undefined	Color of the close icon
closeIconFamily	string	undefined	Icon family for the close icon

Custom Components

You can create your own toast components by providing a custom configuration:

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',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  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>
  )
}

Customizing Icons

// Different icon name from the default family
Toast.show({
  type: 'success',
  text1: 'Different Icon',
  text2: 'Using a different icon name',
  icon: 'check', // Different icon name according to default icon family
})

// Using a different icon family
Toast.show({
  type: 'error',
  text1: 'FontAwesome Icon',
  text2: 'Using a different icon family',
  icon: 'exclamation-circle',
  iconFamily: 'FontAwesome',
})

// Using a 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',
  text2: 'Using a custom React component as icon',
  icon: <CustomIcon color='#3498db' />,
})

// Using JSX directly as icon
Toast.show({
  type: 'success',
  text1: 'JSX Icon',
  text2: 'Using JSX directly as 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>
  ),
})

// Setting default icons at the ToastManager level
<ToastManager
  config={toastConfig}
  theme='light'
  position='top'
  // Custom default icons configuration
  icons={{
    success: 'check-circle',
    error: 'error',
    info: 'info',
    warn: 'warning',
    default: 'notifications',
  }}
  // Default icon family
  iconFamily='MaterialIcons'
  // Default icon size
  iconSize={24}
/>

Customizing Close Icons

You can customize the close icon just like the main toast icons, using different icon names, families, or custom React components.

Using Different Close Icon Names

// Different close icon from the same family
Toast.show({
  type: 'success',
  text1: 'Custom Close Icon',
  text2: 'Using a different close icon',
  closeIcon: 'times', // Different icon name
  closeIconFamily: 'FontAwesome',
  closeIconSize: 18,
  closeIconColor: '#ff0000',
})

// Using MaterialIcons close icon
Toast.show({
  type: 'info',
  text1: 'Material Close Icon',
  text2: 'Using MaterialIcons family',
  closeIcon: 'close',
  closeIconFamily: 'MaterialIcons',
  closeIconSize: 20,
})

Using Custom Close Icon Components

// Custom close icon component
const CustomCloseIcon = ({ color }) => (
  <View
    style={{
      width: 24,
      height: 24,
      borderRadius: 12,
      backgroundColor: color || '#FF5722',
      alignItems: 'center',
      justifyContent: 'center',
    }}
  >
    <FontAwesome name='times' size={14} color='#FFFFFF' />
  </View>
)

Toast.show({
  type: 'warn',
  text1: 'Custom Close Component',
  text2: 'Using a custom React component as close icon',
  closeIcon: <CustomCloseIcon color='#9C27B0' />,
})

// Using JSX directly as close icon
Toast.show({
  type: 'error',
  text1: 'JSX Close Icon',
  text2: 'Using JSX directly as close icon',
  closeIcon: (
    <View style={{ flexDirection: 'row' }}>
      <FontAwesome name='times' size={16} color='#FF5722' />
      <FontAwesome name='times' size={16} color='#FF5722' style={{ marginLeft: -4 }} />
    </View>
  ),
})

Setting Global Close Icon Defaults

// Setting default close icons at the ToastManager level
<ToastManager
  config={toastConfig}
  theme='light'
  position='top'
  // Custom default close icon configuration
  closeIcon='times'
  closeIconFamily='FontAwesome'
  closeIconSize={18}
  closeIconColor='#666'
/>

Accessibility and Size Options

// Larger close icon for better accessibility
Toast.show({
  type: 'success',
  text1: 'Accessible Close Icon',
  text2: 'Larger close button for better touch targets',
  closeIcon: 'close-outline',
  closeIconFamily: 'Ionicons',
  closeIconSize: 28,
  closeIconColor: '#333',
})

// Disable close icon entirely
Toast.show({
  type: 'info',
  text1: 'No Close Icon',
  text2: 'This toast has no close button',
  showCloseIcon: false,
  autoHide: true,
  visibilityTime: 3000,
})

API Reference

Toast Functions

• Toast.show(options): Show a toast with custom options
• Toast.success(message, position?, icon?, iconFamily?, useModal?): Show a success toast
• Toast.error(message, position?, icon?, iconFamily?, useModal?): Show an error toast
• Toast.info(message, position?, icon?, iconFamily?, useModal?): Show an info toast
• Toast.warn(message, position?, icon?, iconFamily?, useModal?): Show a warning toast
• Toast.hide(): Hide the current toast

Upgrading from v6.x

If you're upgrading from version 6.x, please note the following changes:

• The animation system has been simplified to use React Native's built-in Modal animations
• Some props have been removed or renamed for clarity
• The styling system has been improved for better customization
• Custom components now receive more props for better control

For users of v6.x and below, refer to the legacy documentation.

Contributing

We welcome contributions to make toastify-react-native even better!

• Check out our contribution guidelines for details on the process
• Have questions? Open an issue or join the discussion
• Found a bug? Submit a pull request
• Have a feature request? Open an issue

Thank you to all our contributors!

License

toastify-react-native is MIT licensed.