A toast component with react-native
- support for iOS
- support for Android
npm install react-native-common-toast
import Toast from 'react-native-common-toast/lib';
import {DURATION} from 'react-native-common-toast/lib/type';
// show success toast
Toast.success("success!");
// show fail toast
Toast.fail("fail!");
// show info toast
Toast.info("info");
// show loading toast
Toast.loading("loading...");
// show custom style toast
Toast.info({
content: 'custom style',
style: {backgroundColor: 'blue'}
});
// show modal toast and set duration
Toast.info({
content: 'modal toast',
modal: true,
duration: DURATION.NONE
});- if react-native version >= 0.62, insert ToastRoot within root component like this
- Read more about react-native-root-siblings
import {ToastRoot} from 'react-native-common-toast/lib';
export default () => {
return <ToastRoot>
<App />
</ToastRoot>
}| name | params | description |
|---|---|---|
| success | Props | show success toast |
| fail | Props | show fail toast |
| info | Props | show info toast |
| loading | Props | show loading toast |
| show | Props | the base function |
| destroy | destroy toast |
if props is a string, the toast will direct show the string in content
if props is an object, details are listed below
| name | default | type | description |
|---|---|---|---|
| content | string / JSX.Element | The content for toast, maybe is string or JSX.Element | |
| duration | DURATION.SHORT | enum | The duration for toast, if duration is DURATION.NONE, the toast will be not hide, unless you call function named destroy |
| modal | false | boolean | The modal for toast, if modal is true, you can do nothing before the toast has been destroyed |
| mask | string | The mask color for toast | |
| style | ViewStyle | Custom style for toast | |
| onhide | function | When toast has been destroyed calling the function |
- DURATION.SHORT = 5s
- DURATION.LONG = 8s
- DURATION.NONE = 0
- With animation and animation hooks
- Show toast at the top or bottom in the screen
- Add global toast config
- Add custom icon in toast