toastify-react-native
Demo
View examples on snack.expo.io
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 mode
๐ - And much more !
Installation
$ npm install toastify-react-native
A complete example
App.js
import React from 'react';
import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
import Another from './app/components/Another';
import ToastManager, { Toast } from 'toastify-react-native';
export default function App() {
return (
<View style={styles.container} >
{/* Toast Manager */}
<ToastManager />
{/* another component */}
<Another />
{/* Button */}
<TouchableOpacity onPress={() => Toast.success("This is success message")} style={styles.buttonStyle} >
<Text>
SHOW SOME AWESOMENESS !
</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
buttonStyle: {
marginTop: 10,
backgroundColor: "white",
borderColor: "green",
borderWidth: 2,
padding: 10
}
});
another.js
import React from 'react';
import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
import { Toast } from 'toastify-react-nativer';
export default function Another() {
return (
<View style={styles.container} >
<TouchableOpacity onPress={() => Toast.dark("This is dark Message")} style={styles.buttonStyle} >
<Text>
SHOW SOME AWESOMENESS!
</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
buttonStyle: {
marginTop: 10,
backgroundColor: "white",
borderColor: "green",
borderWidth: 2,
padding: 10
}
});
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 |
| 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 | rightInLeftOut, rightInOut or fancy | rightInLeftOut | 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.5 | 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
toastify-react-native is MIT licensed and built with
21 Mar 19, 2022
11 Dec 28, 2022
23 Nov 10, 2022
7 Oct 1, 2022
1 Sep 13, 2022
608 Dec 30, 2022
7 Nov 1, 2022
186 Dec 24, 2022
6 Sep 1, 2022
4 Apr 11, 2022