{"id":14974293,"url":"https://github.com/zahidalidev/toastify-react-native","last_synced_at":"2025-05-15T21:08:12.646Z","repository":{"id":51319246,"uuid":"367430907","full_name":"zahidalidev/toastify-react-native","owner":"zahidalidev","description":"🎉 toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense!","archived":false,"fork":false,"pushed_at":"2025-04-13T16:28:59.000Z","size":727,"stargazers_count":134,"open_issues_count":9,"forks_count":25,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-13T17:20:33.807Z","etag":null,"topics":["alert","animation","expo","expo-cli","javascript","notification","notifications","react","react-component","react-native","react-native-app","reactjs","snackbar","toast"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zahidalidev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-14T17:10:00.000Z","updated_at":"2025-04-13T16:29:02.000Z","dependencies_parsed_at":"2024-06-18T19:57:41.049Z","dependency_job_id":"38f7ca09-b684-4d46-adb5-53aab841163c","html_url":"https://github.com/zahidalidev/toastify-react-native","commit_stats":{"total_commits":50,"total_committers":8,"mean_commits":6.25,"dds":"0.18000000000000005","last_synced_commit":"c2eed13dfed3052033e156be57f269400eec679c"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zahidalidev%2Ftoastify-react-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zahidalidev%2Ftoastify-react-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zahidalidev%2Ftoastify-react-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zahidalidev%2Ftoastify-react-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zahidalidev","download_url":"https://codeload.github.com/zahidalidev/toastify-react-native/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254422790,"owners_count":22068679,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alert","animation","expo","expo-cli","javascript","notification","notifications","react","react-component","react-native","react-native-app","reactjs","snackbar","toast"],"created_at":"2024-09-24T13:50:21.321Z","updated_at":"2025-05-15T21:08:12.633Z","avatar_url":"https://github.com/zahidalidev.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# toastify-react-native\n\n[![npm version](https://badge.fury.io/js/toastify-react-native.svg)](https://badge.fury.io/js/toastify-react-native)\n\n🎉 toastify-react-native allows you to add notifications to your React Native app (iOS, Android) with ease. No more nonsense!\n\n## Table of Contents\n\n- [Demo](#demo)\n- [Features](#features)\n- [Installation](#installation)\n- [Basic Usage](#basic-usage)\n- [Advanced Usage](#advanced-usage)\n- [Modal Behavior](#modal-behavior) 👈 **NEW**\n- [Available Props](#available-props)\n- [Custom Components](#custom-components)\n- [Customizing Icons](#customizing-icons)\n- [API Reference](#api-reference)\n- [Upgrading from v6.x](#upgrading-from-v6x)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Demo\n\n## [View examples on snack.expo.io](https://snack.expo.io/@zahidalidev/toastify-react-native)\n\n\u003cvideo src=\"https://github.com/user-attachments/assets/14b6336e-44e5-41b5-83ea-94f8571f1eee\" autoplay loop muted playsinline\u003e\u003c/video\u003e\n\n## Features\n\n- 🚀 **Simple API**: Easy to use with minimal setup\n- 🎨 **Highly customizable**: Customize colors, icons, animations, and more\n- 🧩 **Custom components**: Create your own toast components\n- 🎭 **Custom icons**: Use different icon families, custom icon components, or JSX elements\n- 📱 **Responsive**: Adapts to different screen sizes\n- 🌓 **Dark \u0026 Light mode**: Built-in theme support\n- 🔄 **RTL support**: Right-to-left language support\n- ⏱️ **Progress bar**: Visual indicator of toast duration\n- 🖐️ **Interactive**: Pause on touch, resume on release\n- 🔄 **Animation options**: Choose from different animation styles\n- 📝 **Multiple lines**: Support for title and description\n- 🔍 **TypeScript support**: Full type definitions included\n- ✨ **Smooth animations**: Beautiful enter/exit animations\n- ⚡ **Quick setup**: Get up and running in less than 10 seconds!\n- 🎛️ **Per-toast behavior**: Define different behaviors for each toast\n- 📊 **Progress control**: Control the progress bar like nprogress\n- 🔧 **Super easy to customize**: Modify every aspect to match your app's design\n- 🎭 **And much more!**: Discover all the possibilities!\n\n## Installation\n\n```sh\nnpm install toastify-react-native\n# or\nyarn add toastify-react-native\n```\n\n### Required Dependencies\n\nThis package requires `react-native-vector-icons`:\n\n```sh\nnpm install react-native-vector-icons\n# or\nyarn add react-native-vector-icons\n```\n\nFollow the [react-native-vector-icons installation guide](https://github.com/oblador/react-native-vector-icons#installation) to complete the setup for your platform.\n\n## Basic Usage\n\n```jsx\nimport React from 'react'\nimport { View, Button } from 'react-native'\nimport ToastManager, { Toast } from 'toastify-react-native'\n\nexport default function App() {\n  return (\n    \u003cView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}\u003e\n      \u003cButton\n        title='Show Success Toast'\n        onPress={() =\u003e {\n          Toast.success('Success message!')\n        }}\n      /\u003e\n\n      \u003cButton\n        title='Show Error Toast'\n        onPress={() =\u003e {\n          Toast.error('Error message!')\n        }}\n      /\u003e\n\n      \u003cButton\n        title='Show Info Toast'\n        onPress={() =\u003e {\n          Toast.info('Info message!')\n        }}\n      /\u003e\n\n      \u003cButton\n        title='Show Warning Toast'\n        onPress={() =\u003e {\n          Toast.warn('Warning message!')\n        }}\n      /\u003e\n\n      {/* Toast provider should be at the root level */}\n      \u003cToastManager /\u003e\n    \u003c/View\u003e\n  )\n}\n```\n\n## Advanced Usage\n\n### Custom Configuration\n\n```jsx\nimport React from 'react'\nimport { View, Button, Text } from 'react-native'\nimport ToastManager, { Toast } from 'toastify-react-native'\n\n// Custom toast configuration\nconst toastConfig = {\n  success: (props) =\u003e (\n    \u003cView style={{ backgroundColor: '#4CAF50', padding: 16, borderRadius: 10 }}\u003e\n      \u003cText style={{ color: 'white', fontWeight: 'bold' }}\u003e{props.text1}\u003c/Text\u003e\n      {props.text2 \u0026\u0026 \u003cText style={{ color: 'white' }}\u003e{props.text2}\u003c/Text\u003e}\n    \u003c/View\u003e\n  ),\n  // Override other toast types as needed\n}\n\nexport default function App() {\n  return (\n    \u003cView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}\u003e\n      \u003cButton\n        title='Show Custom Toast'\n        onPress={() =\u003e {\n          Toast.show({\n            type: 'success',\n            text1: 'Main message',\n            text2: 'Secondary message',\n            position: 'bottom',\n            visibilityTime: 4000,\n            autoHide: true,\n            onPress: () =\u003e console.log('Toast pressed'),\n            onShow: () =\u003e console.log('Toast shown'),\n            onHide: () =\u003e console.log('Toast hidden'),\n          })\n        }}\n      /\u003e\n\n      {/* Toast provider with custom config */}\n      \u003cToastManager config={toastConfig} /\u003e\n    \u003c/View\u003e\n  )\n}\n```\n\n### Toast Positions\n\n```jsx\nToast.success('Top toast', 'top') // default\nToast.error('Center toast', 'center')\nToast.info('Bottom toast', 'bottom')\n```\n\n### Customizing Individual Toasts\n\n```jsx\nToast.show({\n  type: 'success',\n  text1: 'Custom Toast',\n  text2: 'With many options',\n  position: 'bottom',\n  visibilityTime: 5000,\n  autoHide: true,\n  backgroundColor: '#333',\n  textColor: '#fff',\n  iconColor: '#4CAF50',\n  iconSize: 24,\n  progressBarColor: '#4CAF50',\n  theme: 'dark',\n})\n```\n\n## Modal Behavior\n\nThe `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.\n\n### Why is this important?\n\n- **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.\n\n- **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.\n\n### Usage Examples\n\n#### Setting at ToastManager level (affects all toasts)\n\n```jsx\n// All toasts will use modal behavior by default\n\u003cToastManager useModal={true} /\u003e\n\n// All toasts will NOT use modal behavior by default\n\u003cToastManager useModal={false} /\u003e\n```\n\n#### Setting for individual toasts with Toast.show()\n\n```jsx\n// This toast will use modal behavior\nToast.show({\n  type: 'success',\n  text1: 'Using Modal',\n  text2: 'Background is not interactive',\n  useModal: true,\n})\n\n// This toast will NOT use modal behavior\nToast.show({\n  type: 'error',\n  text1: 'No Modal',\n  text2: 'Background remains interactive',\n  useModal: false,\n})\n```\n\n#### Using with shorthand methods\n\n```jsx\n// Success toast with modal behavior\nToast.success(\n  'Success with Modal!',\n  'bottom', // position\n  undefined, // icon\n  undefined, // iconFamily\n  true, // useModal\n)\n\n// Error toast without modal behavior\nToast.error(\n  'Error without Modal!',\n  'bottom', // position\n  undefined, // icon\n  undefined, // iconFamily\n  false, // useModal\n)\n```\n\n#### Conditional usage based on context\n\n```jsx\n// Inside a modal component\nconst showToastInModal = () =\u003e {\n  Toast.show({\n    type: 'info',\n    text1: 'Modal Context',\n    text2: 'This toast appears over the modal',\n    useModal: true, // Ensure it appears over the modal\n  })\n}\n\n// In regular app context\nconst showRegularToast = () =\u003e {\n  Toast.show({\n    type: 'success',\n    text1: 'Regular Context',\n    text2: 'Allow interaction with the app',\n    useModal: false, // Allow background interaction\n  })\n}\n```\n\n## Available Props\n\n### ToastManager Props\n\n| Prop            | Type                          | Default    | Description                                        |\n| --------------- | ----------------------------- | ---------- | -------------------------------------------------- |\n| width           | number \\| string \\| 'auto'    | '90%'      | Width of the toast                                 |\n| minHeight       | number \\| string \\| 'auto'    | 61         | Minimum height of the toast                        |\n| style           | StyleProp\u003cViewStyle\u003e          | {}         | Custom style for the toast container               |\n| textStyle       | StyleProp\u003cTextStyle\u003e          | {}         | Custom style for the toast text                    |\n| theme           | 'light' \\| 'dark'             | 'light'    | Theme of the toast                                 |\n| animationStyle  | 'none' \\| 'slide' \\| 'fade'   | 'fade'     | Animation style for the toast                      |\n| position        | 'top' \\| 'center' \\| 'bottom' | 'top'      | Position of the toast                              |\n| duration        | number                        | 3000       | Duration in ms before the toast disappears         |\n| showCloseIcon   | boolean                       | true       | Whether to show the close icon                     |\n| showProgressBar | boolean                       | true       | Whether to show the progress bar                   |\n| isRTL           | boolean                       | false      | Right-to-left support                              |\n| topOffset       | number                        | 40         | Distance from the top when position is 'top'       |\n| bottomOffset    | number                        | 40         | Distance from the bottom when position is 'bottom' |\n| iconSize        | number                        | 22         | Size of the icon                                   |\n| iconFamily      | string                        | 'Ionicons' | Default icon family to use                         |\n| icons           | object                        | undefined  | Custom default icons for each toast type           |\n| config          | ToastConfig                   | undefined  | Custom toast components configuration              |\n| useModal        | boolean                       | true       | Whether to use modal overlay for toasts            |\n\n### Toast.show() Options\n\n| Option           | Type                                                  | Default   | Description                                 |\n| ---------------- | ----------------------------------------------------- | --------- | ------------------------------------------- |\n| type             | 'success' \\| 'error' \\| 'info' \\| 'warn' \\| 'default' | 'default' | Type of toast                               |\n| text1            | string                                                | ''        | Main text                                   |\n| text2            | string                                                | undefined | Secondary text                              |\n| position         | 'top' \\| 'center' \\| 'bottom'                         | 'top'     | Position of the toast                       |\n| visibilityTime   | number                                                | 3000      | Duration in ms before the toast disappears  |\n| autoHide         | boolean                                               | true      | Whether the toast should hide automatically |\n| onShow           | () =\u003e void                                            | undefined | Callback when toast is shown                |\n| onHide           | () =\u003e void                                            | undefined | Callback when toast is hidden               |\n| onPress          | () =\u003e void                                            | undefined | Callback when toast is pressed              |\n| progressBarColor | string                                                | undefined | Color of the progress bar                   |\n| backgroundColor  | string                                                | undefined | Background color of the toast               |\n| textColor        | string                                                | undefined | Color of the text                           |\n| icon             | string \\| ReactNode                                   | undefined | Custom icon name or component               |\n| iconFamily       | string                                                | undefined | Icon family for the icon                    |\n| iconColor        | string                                                | undefined | Color of the icon                           |\n| iconSize         | number                                                | undefined | Size of the icon                            |\n| theme            | 'light' \\| 'dark'                                     | undefined | Theme of the toast                          |\n| useModal         | boolean                                               | undefined | Whether to use modal overlay for this toast |\n\n## Custom Components\n\nYou can create your own toast components by providing a custom configuration:\n\n```jsx\nimport React from 'react'\nimport { View, Text, StyleSheet } from 'react-native'\nimport ToastManager, { Toast } from 'toastify-react-native'\nimport Icon from 'react-native-vector-icons/MaterialIcons'\n\nconst CustomToast = ({ text1, text2, hide }) =\u003e {\n  return (\n    \u003cView style={styles.customToast}\u003e\n      \u003cIcon name='star' size={24} color='#FFD700' /\u003e\n      \u003cView style={styles.textContainer}\u003e\n        \u003cText style={styles.title}\u003e{text1}\u003c/Text\u003e\n        {text2 \u0026\u0026 \u003cText style={styles.message}\u003e{text2}\u003c/Text\u003e}\n      \u003c/View\u003e\n      \u003cIcon name='close' size={20} color='#fff' onPress={hide} /\u003e\n    \u003c/View\u003e\n  )\n}\n\nconst styles = StyleSheet.create({\n  customToast: {\n    width: '90%',\n    backgroundColor: '#673AB7',\n    borderRadius: 10,\n    padding: 16,\n    flexDirection: 'row',\n    alignItems: 'center',\n    shadowColor: '#000',\n    shadowOffset: { width: 0, height: 2 },\n    shadowOpacity: 0.25,\n    shadowRadius: 3.84,\n    elevation: 5,\n  },\n  textContainer: {\n    flex: 1,\n    marginLeft: 12,\n  },\n  title: {\n    color: '#fff',\n    fontWeight: 'bold',\n    fontSize: 16,\n  },\n  message: {\n    color: '#fff',\n    fontSize: 14,\n    marginTop: 4,\n  },\n})\n\nexport default function App() {\n  const toastConfig = {\n    custom: (props) =\u003e \u003cCustomToast {...props} /\u003e,\n  }\n\n  return (\n    \u003cView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}\u003e\n      \u003cButton\n        title='Show Custom Toast'\n        onPress={() =\u003e {\n          Toast.show({\n            type: 'custom',\n            text1: 'Custom Component',\n            text2: 'This is a fully custom toast component!',\n          })\n        }}\n      /\u003e\n\n      \u003cToastManager config={toastConfig} /\u003e\n    \u003c/View\u003e\n  )\n}\n```\n\n## Customizing Icons\n\n```jsx\n// Different icon name from the default family\nToast.show({\n  type: 'success',\n  text1: 'Different Icon',\n  text2: 'Using a different icon name',\n  icon: 'check', // Different icon name according to default icon family\n})\n\n// Using a different icon family\nToast.show({\n  type: 'error',\n  text1: 'FontAwesome Icon',\n  text2: 'Using a different icon family',\n  icon: 'exclamation-circle',\n  iconFamily: 'FontAwesome',\n})\n\n// Using a custom React component as icon\nconst CustomIcon = ({ color }) =\u003e (\n  \u003cView\n    style={{\n      width: 30,\n      height: 30,\n      borderRadius: 15,\n      backgroundColor: color || '#4CAF50',\n      alignItems: 'center',\n      justifyContent: 'center',\n    }}\n  \u003e\n    \u003cFontAwesome name='check' size={18} color='#FFFFFF' /\u003e\n  \u003c/View\u003e\n)\n\nToast.show({\n  type: 'info',\n  text1: 'Custom Component',\n  text2: 'Using a custom React component as icon',\n  icon: \u003cCustomIcon color='#3498db' /\u003e,\n})\n\n// Using JSX directly as icon\nToast.show({\n  type: 'success',\n  text1: 'JSX Icon',\n  text2: 'Using JSX directly as icon',\n  icon: (\n    \u003cView style={{ flexDirection: 'row' }}\u003e\n      \u003cFontAwesome name='thumbs-up' size={22} color='#4CAF50' /\u003e\n      \u003cFontAwesome\n        name='thumbs-up'\n        size={22}\n        color='#4CAF50'\n        style={{ marginLeft: -8, marginTop: 5 }}\n      /\u003e\n    \u003c/View\u003e\n  ),\n})\n```\n\n```jsx\n// Setting default icons at the ToastManager level\n\u003cToastManager\n  config={toastConfig}\n  theme='light'\n  position='top'\n  // Custom default icons configuration\n  icons={{\n    success: 'check-circle',\n    error: 'error',\n    info: 'info',\n    warn: 'warning',\n    default: 'notifications',\n  }}\n  // Default icon family\n  iconFamily='MaterialIcons'\n  // Default icon size\n  iconSize={24}\n/\u003e\n```\n\n## API Reference\n\n### Toast Functions\n\n- `Toast.show(options)`: Show a toast with custom options\n- `Toast.success(message, position?, icon?, iconFamily?, useModal?)`: Show a success toast\n- `Toast.error(message, position?, icon?, iconFamily?, useModal?)`: Show an error toast\n- `Toast.info(message, position?, icon?, iconFamily?, useModal?)`: Show an info toast\n- `Toast.warn(message, position?, icon?, iconFamily?, useModal?)`: Show a warning toast\n- `Toast.hide()`: Hide the current toast\n\n## Upgrading from v6.x\n\nIf you're upgrading from version 6.x, please note the following changes:\n\n- The animation system has been simplified to use React Native's built-in Modal animations\n- Some props have been removed or renamed for clarity\n- The styling system has been improved for better customization\n- Custom components now receive more props for better control\n\nFor users of v6.x and below, refer to the [legacy documentation](./README-legacy.md).\n\n## Contributing\n\nWe welcome contributions to make toastify-react-native even better!\n\n- Check out our [contribution guidelines](./CONTRIBUTING.md) for details on the process\n- Have questions? Open an issue or join the discussion\n- Found a bug? Submit a pull request\n- Have a feature request? Open an issue\n\nThank you to all our contributors!\n\n## License\n\ntoastify-react-native is [MIT licensed](https://github.com/zahidalidev/toastify-react-native/blob/master/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzahidalidev%2Ftoastify-react-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzahidalidev%2Ftoastify-react-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzahidalidev%2Ftoastify-react-native/lists"}