An awesome package for cool toast alerts in react-native 🚀
Toast.success("Welcome. you will definitely love this toast package.😉")
npm install react-native-toast-alertImport ToastManager and Toast.
// ...
import ToastManager { Toast } from 'react-native-toast-alert'Add ToastManager component to the top of your app component structure.
const App = () => {
return (
<View>
<ToastManager />
<App>
// Other parts of your application content can go here
</App>
</View>
)
})Call any of the Toast methods directly
const App = () => {
// ...
const showSuccessToast = () => {
Toast.success("Yaay!!! You made it here...🚀🚀🚀")
}
const showErrorToast = () => {
Toast.error("Error, looks like something went wrong.🙁")
}
const showInfoToast = () => {
Toast.info("Hi, you're still online.")
}
const showWarningToast = () => {
Toast.warning("Your wallet balance is running low.")
}
return (
<View>
<ToastManager />
<Touchable
onPress={() => showSuccessToast()}
>
Show
</Touchable>
</View>
)
})
// ...Each of the methods on the toast take 2 parameters: The toast message and an optional list of configuration options.
| Option | Description | Type | Default Value |
|---|---|---|---|
| duration | How long the toast will be visible for (milliseconds) | number | 2000 |
| withIcon | If there should be an icon in the alert | boolean | true |
| icon | Custom icon image. Works only if withIcon is set to true |
ImageSourcePropType | undefined |
| progress | Show progress bar | boolean | false |
| bounce | Add bounce effect while showing toast | boolean | false |
| autoDismiss | Dismiss toast automatically | boolean | true |
| centerText | Align the text in the toast centrally | boolean | false |
| dismissMode | How to dismiss the toast manually. (This is useful if you set autoDismiss to false) | 'tap' or 'swipe' | tap |
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT