π toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense!
Screen_Recording_20220916-193212_Expo.Go.mp4
- 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 !
$ npm install toastify-react-native
import React from "react";
import { StyleSheet, View, TouchableOpacity, Text } from "react-native";
import ToastManager, { Toast } from "toastify-react-native";
import Another from "./Another";
const App = () => {
const showToasts = () => {
Toast.success("Promised is resolved");
};
return (
<View style={styles.container}>
<ToastManager />
<Another />
<TouchableOpacity
onPress={showToasts}
style={{
backgroundColor: "white",
borderColor: "green",
borderWidth: 1,
padding: 10,
}}
>
<Text>SHOW SOME AWESOMENESS!</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
export default App;
import React from "react";
import { StyleSheet, View, TouchableOpacity, Text } from "react-native";
import { Toast } from "toastify-react-native";
const Another = () => (
<View style={styles.container}>
<TouchableOpacity onPress={() => Toast.info("Lorem ipsum info", "bottom")} 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,
},
});
export default Another;
For a more complex example take a look at the /example
directory.
Name | Type | Default | Description |
---|---|---|---|
width | number or 'auto' | 256 | Width of toast |
height | number or 'auto' | 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 |
showCloseIcon | boolean | true | Shows the close icon in the right corner |
showProgressBar | boolean | true | Shows the progress bar in the toast |
Take a look at react-native-animatable to see the dozens of animations available out-of-the-box.
Pull requests, feedbacks and suggestions are welcome!
toastify-react-native is MIT licensed .