react-native-smart-toast

A android like toast for react-native apps, written in JS for cross-platform support. It works on iOS and Android.

This component is compatible with React Native 0.25 and newer.

Preview

Installation

npm install react-native-smart-toast --save

Full Demo

see ReactNativeComponentDemos

Usage

Install the toast from npm with npm install react-native-smart-toast --save. Then, require it from your app's JavaScript files with import toast from 'react-native-smart-toast'.

importReact,{Component,}from'react'import{View,}from'react-native'importButtonfrom'react-native-smart-button'importTimerEnhancefrom'react-native-smart-timer-enhance'importToastfrom'react-native-smart-toast'classLoadingToastextendsComponent{constructor(props){super(props)this.state={}}render(){return(<Viewstyle={{paddingTop: 64,flex: 1,backgroundColor: '#fff',}}><ButtononPress={this._showTopToast}touchableType={Button.constants.touchableTypes.fadeContent}style={{margin: 10,height: 40,backgroundColor: 'red',borderRadius: 3,borderWidth: StyleSheet.hairlineWidth,borderColor: 'red',justifyContent: 'center',}}textStyle={{fontSize: 17,color: 'white'}}>
show top (顶部显示)
</Button><ButtononPress={this._showCenterToast}touchableType={Button.constants.touchableTypes.highlight}underlayColor={'#C90000'}style={{margin: 10,justifyContent: 'center',height: 40,backgroundColor: 'red',borderRadius: 3,borderWidth: StyleSheet.hairlineWidth,borderColor: 'red',justifyContent: 'center',}}textStyle={{fontSize: 17,color: 'white'}}>
show center (中心显示)
</Button><ButtononPress={this._showBottomToast}touchableType={Button.constants.touchableTypes.blur}style={{margin: 10,justifyContent: 'center',height: 40,backgroundColor: 'red',borderRadius: 3,borderWidth: StyleSheet.hairlineWidth,borderColor: 'red',justifyContent: 'center',}}textStyle={{fontSize: 17,color: 'white'}}>
show bottom (底部显示)
</Button><ButtononPress={this._showFastToast}style={{margin: 10,height: 40,backgroundColor: 'red',borderRadius: 3,borderWidth: StyleSheet.hairlineWidth,borderColor: 'red',justifyContent: 'center',}}textStyle={{fontSize: 17,color: 'white'}}>
show fast (快速显示)
</Button><ButtononPress={this._showFastToastAndAnimatedHide}style={{margin: 10,height: 40,backgroundColor: 'red',borderRadius: 3,borderWidth: StyleSheet.hairlineWidth,borderColor: 'red',justifyContent: 'center',}}textStyle={{fontSize: 17,color: 'white'}}>
show fast immediate hide
</Button><ButtononPress={this._showImmediateToast}style={{margin: 10,height: 40,backgroundColor: 'red',borderRadius: 3,borderWidth: StyleSheet.hairlineWidth,borderColor: 'red',justifyContent: 'center',}}textStyle={{fontSize: 17,color: 'white'}}>
show immediate (立即显示)
</Button><ButtononPress={this._showImmediateToastAndAnimatedHide}style={{margin: 10,height: 40,backgroundColor: 'red',borderRadius: 3,borderWidth: StyleSheet.hairlineWidth,borderColor: 'red',justifyContent: 'center',}}textStyle={{fontSize: 17,color: 'white'}}>
show immediate animated hide
</Button><Toastref={component=>this._toast=component}marginTop={64}>
Unable to connect to apple store
</Toast></View>)}_showTopToast=()=>{this._toast.show({position: Toast.constants.gravity.top,})}_showCenterToast=()=>{this._toast.show({position: Toast.constants.gravity.center,children: <View><Textstyle={{color: 'yellow'}}>Unalbe to download now</Text></View>})}_showBottomToast=()=>{this._toast.show({position: Toast.constants.gravity.bottom,children: 'Unalbe to upload now'})}_showFastToast=()=>{this._toast.show({position: Toast.constants.gravity.center,duration: 255,children: 'Unable to connect to apple store'})}_showFastToastAndAnimatedHide=()=>{this._toast.show({position: Toast.constants.gravity.center,duration: 255,children: 'Unable to connect to google store',animationEnd : ()=>{this._toast._toastAnimationToggle=this.setTimeout(()=>{this._toast.hide({duration: 0,animationEnd: ()=>{//do sth...}})},3000)}})}_showImmediateToast=()=>{this._toast.show({position: Toast.constants.gravity.center,duration: 0,children: 'Unable to connect to wifi',})}_showImmediateToastAndAnimatedHide=()=>{this._toast.show({position: Toast.constants.gravity.center,duration: 0,children: 'Unable to connect to wlan',animationEnd : ()=>{this._toast._toastAnimationToggle=this.setTimeout(()=>{this._toast.hide({animationEnd: ()=>{//do sth...}})},3000)}})}}exportdefaultTimerEnhance(LoadingToast)

Props

Prop	Type	Optional	Default	Description
style	style	Yes		see react-native documents
textStyle	style	Yes		see react-native documents
spacing	number	Yes	30	determine the top or bottom spacing when the position is on the top or bottom
position	style	Yes	constants.bottom	determine the position of toast
duration	number	Yes	3000	determine the residence duration after toast is shown
animatedDuration	number	Yes	510	determine the duration of toast animation
delay	number	Yes	0	determine the delay of toast animation
marginTop	number	Yes	0	determine the marginTop of the root container view, it is used when toast's position is constants.top

Method

• show({children, position, duration, easing, delay, animationEnd,})

  • children: determine the children of toast
  • position: determine the position of toast. enum(gravity.bottom, gravity.top, gravity.center)
  • duration: determine the duration of animation
  • easing: determine the easing of animation
  • delay: determine the delay of animation
  • animationEnd: determine the callback when animation is end

• hide({duration, easing, delay, animationEnd,})

  • duration: determine the duration of animation
  • easing: determine the easing of animation
  • delay: determine the delay of animation
  • animationEnd: determine the callback when animation is end