React-native smart tip, including Toast、Modal、SnackBar
- Add property isShowShadow to WSnackBar and WToast
- Add sliding hide function for WSnackBar
2020.3 Show Toast above Modal (Compatible with Android and iOS)
import { ModalShowToastView } from 'react-native-smart-tip'
getToastInstance = (toastInstance) => {
this.toastInstance = toastInstance;
}
<Modal>
<View>
<ModalShowToastView toastInstance={this.getToastInstance} />
</View>
</Modal>
this.toastInstance({data: 'toast'})
2019.7 Remove the method in the componentWillMount method. Compatible with future React 17 versions, React-Native@0.6 version.
yarn add react-native-smart-tip
or
npm i react-native-smart-tip --save
Tip: Modal shows that modal can only be used on Android issue
import {WToast} from 'react-native-smart-tip'
// Base
show = () => {
WToast.show({data: 'hello world'})
}
// Other
show = () => {
const toastOpts = {
data: 'Success',
textColor: '#ffffff',
backgroundColor: '#444444',
duration: WToast.duration.LONG, //1.SHORT 2.LONG
position: WToast.position.TOP, // 1.TOP 2.CENTER 3.BOTTOM
icon: <Image source={require('../data/img/success.png')} style={{width: 32,height: 32,resizeMode: 'contain'}}/>
}
WToast.show(toastOpts)
}
WToast.hide(); // Can be hidden immediately
Props |
Type |
Required |
Default |
Description |
data |
String |
true |
' ' |
Displayed content |
duration |
Number |
false |
WToast.duration.SHORT |
The duration of the toast |
position |
Number |
false |
WToast.position.BOTTOM |
Displayed position |
inEasing |
Easing |
false |
Easing.elastic(1) |
Admission animation |
textColor |
String |
false |
'white' |
font color |
backgroundColor |
String |
false |
'black' |
background color |
icon |
Component |
fasse |
undefined |
Image to be displayed |
isShowShadow |
boolean |
false |
true |
Shadow effect |
import {WSnackBar} from 'react-native-smart-tip'
// Base
show = () => {
WSnackBar.show({data: 'hello world'})
}
// Other
show = () => {
const snackBarOpts = {
data: 'Please check the network first.',
position: WSnackBar.position.BOTTOM, // 1.TOP 2.CENTER 3.BOTTOM
duration: WSnackBar.duration.LONG, //1.SHORT 2.LONG 3.INDEFINITE
textColor: '#ff490b',
backgroundColor: '#050405',
actionText: 'Sure',
actionTextColor: '#ff490b',
onActionHide: (isSlideHide)=>{
// Click Action
},
}
WSnackBar.show(snackBarOpts)
}
Props |
Type |
Required |
Default |
Description |
data |
String |
true |
' ' |
Displayed content |
statusBarHeight |
Number |
false |
-1 |
Prevent Android statusBar |
height |
Number |
false |
44 |
Height to display |
duration |
Number |
false |
WSnackBar.duration.SHORT |
The duration of the toast |
position |
Number |
false |
WSnackBar.position.BOTTOM |
Displayed position |
inEasing |
Easing |
false |
Easing.linear |
Admission animation |
textColor |
String |
false |
'white' |
font color |
backgroundColor |
String |
false |
'black' |
background color |
actionText |
String |
false |
undefined |
action text |
actionTextColor |
String |
false |
'white' |
action text color |
isAllowSlideExit |
boolean |
false |
true |
Whether to run sliding hide |
onActionHide |
Function |
false |
undefined |
listener click |
isShowShadow |
boolean |
false |
true |
Shadow effect |
numberOfLines |
number |
false |
1 |
Maximum number of rows |
import {WModal} from 'react-native-smart-tip'
// Base
show = () => {
WModal.show({data: 'hello world'})
}
// Other
show = () => {
const modalOpts = {
data: 'Loading',
textColor: '#fff',
backgroundColor: '#444444',
position: WModal.position.CENTER,
icon: <ActivityIndicator color='#fff' size={'large'}/>
}
WModal.show(modalOpts)
}
Props |
Type |
Required |
Default |
Description |
data |
String |
true |
' ' |
Displayed content |
position |
Number |
false |
WToast.position.BOTTOM |
Displayed position |
inEasing |
Easing |
false |
Easing.elastic(1) |
Admission animation |
textColor |
String |
false |
'white' |
font color |
backgroundColor |
String |
false |
'black' |
background color |
icon |
Component |
fasse |
undefined |
Image to be displayed |
onRequestClose |
Function |
false |
undefined |
Android Back |