Toast make by Trung Jin :))

Installation

npm i react-native-toast-trung-jin

Usage

WToast

import {WToast} from 'react-native-toast-trung-jin'

// 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 API

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

WSnackBar

import {WSnackBar} from 'react-native-toast-trung-jin'

// 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',
	    actionClick: ()=>{
	    	// Click Action
	    },
	}
	
	WSnackBar.show(snackBarOpts)
}

WSnackBar API

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 actionClick | Function | false | undefined | listener click

WModal

import {WModal} from 'react-native-toast-trung-jin'

// 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)
}

WToast API

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

MIT Licensed