react-native-custom-ui-toast
A simple custom toast library. (Currently only availabe for android devices)
Getting started
$ npm install react-native-custom-ui-toast --save
Mostly automatic installation
$ react-native link react-native-custom-ui-toast
Example Application
Checkout the GitHub page to get the code of this application
Usage
Import the library in your component by adding this line on top:
import CustomUiToast from 'react-native-custom-ui-toast';
Use showToast method to display a toast:
CustomUiToast.showToast(
// Toast Message
"hello world",
// Toast Duration
3000,
// Style Object
{
// Toast position
position: 'bottom',
// Toast Offset on x-axis
offsetX: 0,
// Toast Offset on y-axis
offsetY: 0,
// Toast Background color
backgroundColor: '#000000',
// Toast Text color
color: '#ffffff'
})
Arguments
Argument | Argument Type | Description |
---|---|---|
Message | String | Toast Message |
Duration | Number | Toast Duration |
Styles | Object | Toast Styling Object |
Styles
Style | Style Type | Default | Description |
---|---|---|---|
position | String | bottom | Toast Position |
offsetX | Number | 0 | Toast Offset on x-axis |
offsetY | Number | 0 | Toast Offset on y-axis |
backgroundColor | String | #AAAAAA | Toast Background Color |
color | String | #000000 | Toast Text Color |
Positions
Position | Description |
---|---|
top | Set toast position to Top Center |
topleft | Set toast position to Top Left |
topright | Set toast position to Top Right |
center | Set toast position to Center |
centerleft | Set toast position to Center Left |
centerright | Set toast position to Center Right |
bottom | Set toast position to Bottom |
bottomleft | Set toast position to Bottom Left |
bottomright | Set toast position to Bottom Right |