Gathering detailed insights and metrics for toastify-react-native
Gathering detailed insights and metrics for toastify-react-native
Gathering detailed insights and metrics for toastify-react-native
Gathering detailed insights and metrics for toastify-react-native
@amir-hossein-karimi/toastify-react-native
🎉 toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense!
@adityakmr7/react-native-toastify
Create toast in react native application.
expo-react-native-toastify
expo-react-native-toastify allows you to add notifications to your expo react-native app (ios, android, web) with ease.
react-native-toastify-pro
A customizable toast notification component for React Native, designed to work seamlessly on both Android and iOS platforms and allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense!
🎉 toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense!
npm install toastify-react-native
Typescript
Module System
Node Version
NPM Version
70.1
Supply Chain
61.8
Quality
74.2
Maintenance
50
Vulnerability
94.1
License
TypeScript (100%)
Total Downloads
72,907,716
Last Day
150,824
Last Week
236,015
Last Month
2,487,467
Last Year
45,200,305
MIT License
158 Stars
110 Commits
26 Forks
3 Watchers
8 Branches
10 Contributors
Updated on Jun 22, 2025
Latest Version
7.2.0
Package Id
toastify-react-native@7.2.0
Unpacked Size
530.41 kB
Size
168.93 kB
File Count
36
NPM Version
10.5.0
Node Version
21.7.3
Published on
Apr 13, 2025
Cumulative downloads
Total Downloads
1
2
🎉 toastify-react-native allows you to add notifications to your React Native app (iOS, Android) with ease. No more nonsense!
1npm install toastify-react-native 2# or 3yarn add toastify-react-native
This package requires react-native-vector-icons
:
1npm install react-native-vector-icons 2# or 3yarn add react-native-vector-icons
Follow the react-native-vector-icons installation guide to complete the setup for your platform.
1import React from 'react' 2import { View, Button } from 'react-native' 3import ToastManager, { Toast } from 'toastify-react-native' 4 5export default function App() { 6 return ( 7 <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> 8 <Button 9 title='Show Success Toast' 10 onPress={() => { 11 Toast.success('Success message!') 12 }} 13 /> 14 15 <Button 16 title='Show Error Toast' 17 onPress={() => { 18 Toast.error('Error message!') 19 }} 20 /> 21 22 <Button 23 title='Show Info Toast' 24 onPress={() => { 25 Toast.info('Info message!') 26 }} 27 /> 28 29 <Button 30 title='Show Warning Toast' 31 onPress={() => { 32 Toast.warn('Warning message!') 33 }} 34 /> 35 36 {/* Toast provider should be at the root level */} 37 <ToastManager /> 38 </View> 39 ) 40}
1import React from 'react' 2import { View, Button, Text } from 'react-native' 3import ToastManager, { Toast } from 'toastify-react-native' 4 5// Custom toast configuration 6const toastConfig = { 7 success: (props) => ( 8 <View style={{ backgroundColor: '#4CAF50', padding: 16, borderRadius: 10 }}> 9 <Text style={{ color: 'white', fontWeight: 'bold' }}>{props.text1}</Text> 10 {props.text2 && <Text style={{ color: 'white' }}>{props.text2}</Text>} 11 </View> 12 ), 13 // Override other toast types as needed 14} 15 16export default function App() { 17 return ( 18 <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> 19 <Button 20 title='Show Custom Toast' 21 onPress={() => { 22 Toast.show({ 23 type: 'success', 24 text1: 'Main message', 25 text2: 'Secondary message', 26 position: 'bottom', 27 visibilityTime: 4000, 28 autoHide: true, 29 onPress: () => console.log('Toast pressed'), 30 onShow: () => console.log('Toast shown'), 31 onHide: () => console.log('Toast hidden'), 32 }) 33 }} 34 /> 35 36 {/* Toast provider with custom config */} 37 <ToastManager config={toastConfig} /> 38 </View> 39 ) 40}
1Toast.success('Top toast', 'top') // default 2Toast.error('Center toast', 'center') 3Toast.info('Bottom toast', 'bottom')
1Toast.show({ 2 type: 'success', 3 text1: 'Custom Toast', 4 text2: 'With many options', 5 position: 'bottom', 6 visibilityTime: 5000, 7 autoHide: true, 8 backgroundColor: '#333', 9 textColor: '#fff', 10 iconColor: '#4CAF50', 11 iconSize: 24, 12 progressBarColor: '#4CAF50', 13 theme: 'dark', 14})
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.
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.
1// All toasts will use modal behavior by default 2<ToastManager useModal={true} /> 3 4// All toasts will NOT use modal behavior by default 5<ToastManager useModal={false} />
1// This toast will use modal behavior 2Toast.show({ 3 type: 'success', 4 text1: 'Using Modal', 5 text2: 'Background is not interactive', 6 useModal: true, 7}) 8 9// This toast will NOT use modal behavior 10Toast.show({ 11 type: 'error', 12 text1: 'No Modal', 13 text2: 'Background remains interactive', 14 useModal: false, 15})
1// Success toast with modal behavior 2Toast.success( 3 'Success with Modal!', 4 'bottom', // position 5 undefined, // icon 6 undefined, // iconFamily 7 true, // useModal 8) 9 10// Error toast without modal behavior 11Toast.error( 12 'Error without Modal!', 13 'bottom', // position 14 undefined, // icon 15 undefined, // iconFamily 16 false, // useModal 17)
1// Inside a modal component 2const showToastInModal = () => { 3 Toast.show({ 4 type: 'info', 5 text1: 'Modal Context', 6 text2: 'This toast appears over the modal', 7 useModal: true, // Ensure it appears over the modal 8 }) 9} 10 11// In regular app context 12const showRegularToast = () => { 13 Toast.show({ 14 type: 'success', 15 text1: 'Regular Context', 16 text2: 'Allow interaction with the app', 17 useModal: false, // Allow background interaction 18 }) 19}
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 |
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 |
You can create your own toast components by providing a custom configuration:
1import React from 'react' 2import { View, Text, StyleSheet } from 'react-native' 3import ToastManager, { Toast } from 'toastify-react-native' 4import Icon from 'react-native-vector-icons/MaterialIcons' 5 6const CustomToast = ({ text1, text2, hide }) => { 7 return ( 8 <View style={styles.customToast}> 9 <Icon name='star' size={24} color='#FFD700' /> 10 <View style={styles.textContainer}> 11 <Text style={styles.title}>{text1}</Text> 12 {text2 && <Text style={styles.message}>{text2}</Text>} 13 </View> 14 <Icon name='close' size={20} color='#fff' onPress={hide} /> 15 </View> 16 ) 17} 18 19const styles = StyleSheet.create({ 20 customToast: { 21 width: '90%', 22 backgroundColor: '#673AB7', 23 borderRadius: 10, 24 padding: 16, 25 flexDirection: 'row', 26 alignItems: 'center', 27 shadowColor: '#000', 28 shadowOffset: { width: 0, height: 2 }, 29 shadowOpacity: 0.25, 30 shadowRadius: 3.84, 31 elevation: 5, 32 }, 33 textContainer: { 34 flex: 1, 35 marginLeft: 12, 36 }, 37 title: { 38 color: '#fff', 39 fontWeight: 'bold', 40 fontSize: 16, 41 }, 42 message: { 43 color: '#fff', 44 fontSize: 14, 45 marginTop: 4, 46 }, 47}) 48 49export default function App() { 50 const toastConfig = { 51 custom: (props) => <CustomToast {...props} />, 52 } 53 54 return ( 55 <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> 56 <Button 57 title='Show Custom Toast' 58 onPress={() => { 59 Toast.show({ 60 type: 'custom', 61 text1: 'Custom Component', 62 text2: 'This is a fully custom toast component!', 63 }) 64 }} 65 /> 66 67 <ToastManager config={toastConfig} /> 68 </View> 69 ) 70}
1// Different icon name from the default family 2Toast.show({ 3 type: 'success', 4 text1: 'Different Icon', 5 text2: 'Using a different icon name', 6 icon: 'check', // Different icon name according to default icon family 7}) 8 9// Using a different icon family 10Toast.show({ 11 type: 'error', 12 text1: 'FontAwesome Icon', 13 text2: 'Using a different icon family', 14 icon: 'exclamation-circle', 15 iconFamily: 'FontAwesome', 16}) 17 18// Using a custom React component as icon 19const CustomIcon = ({ color }) => ( 20 <View 21 style={{ 22 width: 30, 23 height: 30, 24 borderRadius: 15, 25 backgroundColor: color || '#4CAF50', 26 alignItems: 'center', 27 justifyContent: 'center', 28 }} 29 > 30 <FontAwesome name='check' size={18} color='#FFFFFF' /> 31 </View> 32) 33 34Toast.show({ 35 type: 'info', 36 text1: 'Custom Component', 37 text2: 'Using a custom React component as icon', 38 icon: <CustomIcon color='#3498db' />, 39}) 40 41// Using JSX directly as icon 42Toast.show({ 43 type: 'success', 44 text1: 'JSX Icon', 45 text2: 'Using JSX directly as icon', 46 icon: ( 47 <View style={{ flexDirection: 'row' }}> 48 <FontAwesome name='thumbs-up' size={22} color='#4CAF50' /> 49 <FontAwesome 50 name='thumbs-up' 51 size={22} 52 color='#4CAF50' 53 style={{ marginLeft: -8, marginTop: 5 }} 54 /> 55 </View> 56 ), 57})
1// Setting default icons at the ToastManager level 2<ToastManager 3 config={toastConfig} 4 theme='light' 5 position='top' 6 // Custom default icons configuration 7 icons={{ 8 success: 'check-circle', 9 error: 'error', 10 info: 'info', 11 warn: 'warning', 12 default: 'notifications', 13 }} 14 // Default icon family 15 iconFamily='MaterialIcons' 16 // Default icon size 17 iconSize={24} 18/>
Toast.show(options)
: Show a toast with custom optionsToast.success(message, position?, icon?, iconFamily?, useModal?)
: Show a success toastToast.error(message, position?, icon?, iconFamily?, useModal?)
: Show an error toastToast.info(message, position?, icon?, iconFamily?, useModal?)
: Show an info toastToast.warn(message, position?, icon?, iconFamily?, useModal?)
: Show a warning toastToast.hide()
: Hide the current toastIf you're upgrading from version 6.x, please note the following changes:
For users of v6.x and below, refer to the legacy documentation.
We welcome contributions to make toastify-react-native even better!
Thank you to all our contributors!
toastify-react-native is MIT licensed.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
29 commit(s) and 20 issue activity found in the last 90 days -- score normalized to 10
Reason
license file detected
Details
Reason
9 existing vulnerabilities detected
Details
Reason
Found 1/17 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Score
Last Scanned on 2025-06-23
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn MoreLast Day
200.9%
150,824
Compared to previous day
Last Week
-71.9%
236,015
Compared to previous week
Last Month
47.2%
2,487,467
Compared to previous month
Last Year
63.3%
45,200,305
Compared to previous year