A simple react native component for creating toasts / alerts . Something similar named react-native-easy-toast does exist but it does not respond to touches meaning that the only difference between rn-toast-alert and react-native-easy-toast is that rn-toast-alert is using pan responder and the other one is not . It looks something like this after installing
npm install --save rn-toast-alert
OR
yarn add rn-toast-alertimport React from "react";
import { View, Text, Image } from "react-native";
import Toast from "rn-toast-alert";
class App extends React.Component {
render() {
return (
<View>
<Toast ref="toast" />
<Button
title="Toggle toast"
onPress={() => {
this.refs.toast.showToast("Toasting", {
backgroundColor: "#000000",
textColor: "#ffffff",
duration: 1500,
round: false,
position: "top"
});
}}
/>
</View>
);
}
}
export default App;All of them are not required :)
| Props | Type | default | Description |
|---|---|---|---|
| backgroundColor | string | #000000 | Background color for the toast |
| textColor | string | #000000 | Color of the text |
| duration | number | 2500 | Time until the toast gets closed |
| round | boolean | true | Sets the border radius to 14 if true and 5 if false |
| customStyles | object | {} | Custom style |
Created by Adib Mohsin . MIT license