@cutls/react-native-tiny-toast
Version:
😊A react native toast like component , it works on IOS and Android.
126 lines (99 loc) • 5.24 kB
Markdown
# react-native-tiny-toast
A react native toast like component , it works on IOS and Android.
[ ](https://github.com/shx996/react-native-tiny-toast/releases)
[ ](https://github.com/shx996/react-native-tiny-toast/pulls)
[ ](https://www.npmjs.com/package/react-native-tiny-toast)
[ ](https://raw.githubusercontent.com/shx996/react-native-tiny-toast/master/LICENSE)
#### Features
1. Support iPhone X, XS, XS Max & XR
2. Support both Android and IOS.
3. Custom icon and style and so on.
4. Use native ActivityIndicator.
## Demo
## Install
`npm i react-native-tiny-toast --save`
or
`yarn add react-native-tiny-toast`
## Getting started
```javascript
import Toast from 'react-native-tiny-toast'
Toast.show('This is a default toast')
Toast.showSuccess('Pay success')
Toast.show('Custom toast',{
position: Toast.position.center,
containerStyle:{},
textStyle: {},
imgSource: require('xxx'),
imgStyle: {},
mask: true,
maskStyle:{},
...
})
const toast = Toast.showLoading('Loading...')
setTimeout(() => {
// Recommend
Toast.hide(toast)
// or Toast.hide()
// If you don't pass toast，it will hide the last toast by default.
}, 3000)
```
##### **Using a Component**
```javascript
import React, {Component} from 'react-native'
import Toast from 'react-native-tiny-toast'
class Example extends Component {
state={
visible: false
}
componentDidMount() {
setTimeout(() => this.setState({
visible: true
}), 1000);
setTimeout(() => this.setState({
visible: false
}), 3000);
};
render() {
return
<Toast
visible={this.state.visible}
position={50}
onHidden={()=>{
// onHidden
}}>This is a message
</Toast>
}
}
```
## Api
Name | Default | Type | Description
--------------------|--------------------------|----------------------|---------------------------
containerStyle | null | ViewPropTypes.style | Custom container style
duration | Toast.durations.SHORT | Number | Toast duration(ms), won't disappear if value is 0
delay | 0 | Number | The delay duration before toast start appearing on screen.
animationDuration | 200 | Number | Animation duration
visible | false | Boolean | Show toast. (Only for Toast Component)
position | Toast.position.bottom | Number | 0 means the middle of the screen.A negative number indicates the distance to the bottom of the screen.A positive number indicates the distance to the top of the screen.
animation | true | Boolean | Whether to enable fade animation
shadow | false | Boolean | Whether to enable shadow
shadowColor | #000 | String | Shadow color(don't support android)
showText | true | Boolean | Whether to show text
textColor | #fff | String | Text color
textStyle | null | Text.propTypes.style | Text style
mask | false(true when showLoading) | Boolean | Whether to enable mask
maskColor | rgba(0,0,0,0.3) | String | Mask background color
maskStyle | null | ViewPropTypes.style | Mask style
imgSource | null | Image.source | Image source
imgStyle | null | Image.propTypes.style| Image style
loading | false(true when showLoading) | Boolean | Whether to show loading
indicatorSize | large | String or Number | Set the ActivityIndicator size，Currently only specific values can be set on Android.
onHidden | null | Function | Triggered when toast's hide animation end
onMaskPress | null | Function | Triggered when the mask is clicked
Method | Type | Description
---------------------------|----------|-------------------
show(text, options) | Function | Show toast
showSuccess(text, options) | Function | Show toast with success icon
showLoading(text, options) | Function | Show toast with ActivityIndicator
hide(toast) | Function | If you don't pass toast，it will hide the last toast by default.
**MIT Licensed**