Gathering detailed insights and metrics for @amir-hossein-karimi/toastify-react-native
Gathering detailed insights and metrics for @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!
5.5.0
MIT
TypeScript
18.19 kB
Installations
npm install @amir-hossein-karimi/toastify-react-nativeDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
18.20.3
NPM Version
10.7.0
Score
38.8
Supply Chain
53.1
Quality
73.3
Maintenance
50
Vulnerability
94.1
License
Releases
Unable to fetch releases
Languages
1
TypeScript
TypeScript (100%)
Developer
amir-hossein-karimi
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
79 Commits
1 Branches
1 Contributors
Updated on Feb 15, 2025
Maintainers
1
Package Meta Information
Latest Version
5.5.0
Package Id
@amir-hossein-karimi/toastify-react-native@5.5.0
Unpacked Size
18.19 kB
Size
5.93 kB
File Count
12
NPM Version
10.7.0
Node Version
18.20.3
Published on
Feb 15, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
4
Dev Dependencies
2
toastify-react-native
🎉 toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense!
Demo
Features
- Smooth enter/exit animations
- Plain simple and flexible APIs
- Resize itself correctly on device rotation
- Swipeable
- Easy to set up for real, you can make it work in less than 10sec!
- Super easy to customize
- RTL support
- Swipe to close 👌
- Can choose swipe direction
- Super easy to use an animation of your choice. Works well with animate.css for example
- Define behavior per toast
- Pause toast by click on the toast 👁
- Fancy progress bar to display the remaining time
- Possibility to update a toast
- You can control the progress bar a la nprogress 😲
- You can display multiple toast at the same time
- Dark and light mode 🌒
- And much more !
Installation
1$ npm install toastify-react-native
A complete example
App.js
1import React from 'react' 2import { StyleSheet, View, TouchableOpacity, Text } from 'react-native' 3import ToastManager, { Toast } from 'toastify-react-native' 4 5import Another from './Another' 6 7const App = () => { 8 const showToasts = () => { 9 Toast.success('Promised is resolved') 10 } 11 12 return ( 13 <View style={styles.container}> 14 <ToastManager /> 15 <Another /> 16 <TouchableOpacity 17 onPress={showToasts} 18 style={{ 19 backgroundColor: 'white', 20 borderColor: 'green', 21 borderWidth: 1, 22 padding: 10, 23 }} 24 > 25 <Text>SHOW SOME AWESOMENESS!</Text> 26 </TouchableOpacity> 27 </View> 28 ) 29} 30 31const styles = StyleSheet.create({ 32 container: { 33 flex: 1, 34 backgroundColor: '#fff', 35 alignItems: 'center', 36 justifyContent: 'center', 37 }, 38}) 39 40export default App
Another.js
1import React from 'react' 2import { StyleSheet, View, TouchableOpacity, Text } from 'react-native' 3import { Toast } from 'toastify-react-native' 4const Another = () => ( 5 <View style={styles.container}> 6 <TouchableOpacity 7 onPress={() => Toast.info('Lorem ipsum info', 'bottom')} 8 style={styles.buttonStyle} 9 > 10 <Text>SHOW SOME AWESOMENESS!</Text> 11 </TouchableOpacity> 12 </View> 13) 14 15const styles = StyleSheet.create({ 16 container: { 17 backgroundColor: '#fff', 18 alignItems: 'center', 19 justifyContent: 'center', 20 }, 21 buttonStyle: { 22 marginTop: 10, 23 backgroundColor: 'white', 24 borderColor: 'green', 25 borderWidth: 2, 26 padding: 10, 27 }, 28}) 29 30export default Another
For a more complex example take a look at the /example directory.
Available props
| Name | Type | Default | Description |
|---|---|---|---|
| width | number | 256 | Width of toast |
| height | number | 68 | Height of the toast |
| style | any | null | Style applied to the toast |
| textStyle | any | null | Style applied to the toast content |
| position | top, center or bottom | top | Position of toast |
| positionValue | number | 50 | position value of toast |
| duration | number | 3000 | The display time of toast. |
| animationStyle | upInUpOut, rightInOut or zoomInOut | upInUpOut | The animation style of toast |
| animationIn | string or object | 'slideInRight' | Toast show animation |
| animationOut | string or object | 'slideOutLeft' | Toast hide animation |
| animationInTiming | number | 300 | Timing for the Toast show animation (in ms) |
| animationOutTiming | number | 300 | Timing for the toast hide animation (in ms) |
| backdropTransitionInTiming | number | 300 | The backdrop show timing (in ms) |
| backdropTransitionOutTiming | number | 300 | The backdrop hide timing (in ms) |
| hasBackdrop | bool | false | Render the backdrop |
| backdropColor | string | 'black' | The backdrop background color |
| backdropOpacity | number | 0.2 | The backdrop opacity when the toast is visible |
Available animations
Take a look at react-native-animatable to see the dozens of animations available out-of-the-box.
Acknowledgements
Pull requests, feedbacks and suggestions are welcome!
License
No vulnerabilities found.
No security vulnerabilities found.