for Android development engineers, Toast is familiar with it, using it to display a hint information and automatically hide it. When we develop RN applications, we also want to achieve this effect, a little difficult, but it is not difficult, but we need to fit the official RN provides a API ToastAndroid, see the name should guess, it can only be used in Android, in iOS with no effect so, we need to adapt our custom or one, this article today is a custom Toast so that it can run in Android and iOS, and the operation effect of the same.

source portal

 import React definition component, {Component} from'react'import {StyleSheet, View; Easing, Dimensions, Text, Animated, from'react-native' import PropTypes}; from'prop-types'; import Toast from; const "./index" {width, height} = Dimensions.get (the "window"); const viewHeight = 35; class ToastView extends Component {static propTypes = {message: PropTypes.string}; dismissHandler = null; constructor (props) {super (props); this.state message: = {props.message! = = undefined? Props.message:' render (return) {}} (< View style={styles.container} pointerEvents='none'> < Animated.View style={[styles.textContainer]}> < Text; style={styles.defaultText}> {this.state.message}< /Text> < /Animated.View> < /View> componentDidMount) {(this.timingDismiss)})} (componentWillUnmount (clearTimeout) {(this.dismissHandler)} (timingDismiss = => this.dismissHandler = setTimeout) {((=>)) {this.onDismiss},; (1000)}; onDismiss = (=> if) {(this.props.onDismiss)}} {(this.props.onDismiss)} const {textContainer: {styles = StyleSheet.create (backgroundColor:'rgba (0,0,0,.6), borderRadius: 8, padding: 10, bottom:height/8, maxWidth:, width / 2, alignSelf: "flex-end"}, Defa UltText: {color: "#FFF" fontSize:, 15, container: {position:}, "absolute", left: 0, right: 0, top: 0, bottom: 0, flexDirection: "row" justifyContent: "center"}}); export default, ToastView 

first, we must guide the basic component and API, our custom component they need to inherit it, for the realization of Dimensions animation, Easing animation for track effect settings, PropTypes is used to define the type of attribute. The

render method is the entry that we define the component rendering. The outermost view uses position as absolute, and sets left, right, top and bottom to 0, enabling them to occupy the screen, so that no user can listen to click events during the display of Toast. The inner View is a black box container for the Toast display, and the backgroundColor property is set in the form of RGBA with a black transparency of 0.6. And set the corner and the maximum width to half the width of the screen. Then the Text component is used to display specific hints.

we also see that the type of propTypes used to qualify the attribute message is string. Constructor is the construction method of our component, with a props parameter, which is a number of properties passed over. It is important to note that the construction method first calls super (props), otherwise it is wrong, and here, I set the passed value to state.

will disappear automatically for Toast. We can achieve this effect through setTimeout, calling this method in componentDidMount, where the time is 1000ms. Then the hide is destroyed and exposed. When we use setTimeout, we also need to clear the timer when the component is unloaded. When the component is unloaded, the callback is componentWillUnmount. So clear the timer here.

implements animation effect.

is on the top. We achieve the effect of Toast, but display and hide are not overanimated or slightly stiff. Then we add some translation and the transparency of the animation, then the componentDidMount modified


increased two variable

 moveAnim = new Animated.Value in the component (height / 12); opacityAnim = new; 

Animated.Value (0) before the inner view style, bottom set is height/8. Here we will view style

 {bottom: settings are style={[styles.textContainer, this.moveAnim, opacity: this.opacityAnim}]}


 (componentDidMount) and modified Animated.timing (this.moveAnim, {{toValue: height / 8, duration: 80, easing: Easing.ease},.Start) (this.timingDismiss); Animated.timing (this.opacityAnim {toValue: 1, duration: 100, easing: Easing.linear}..start (


is from height/12 bottom to height/8 mobile display, time is 80ms, the transparency of from 0 to 1 change the execution time of 100ms. On the top we see a easing attribute, which transfers the curve speed of animation execution, and it can be implemented by itself. There are many different effects in Easing API. You can see for yourself, the source address is

definition display the time we set in front of Toast 1000ms, we show the time of custom, limited

 type number, time: PropTypes.number

in the construction method of the time in

 time: props.time & 

; & props.time < Toast.SHORT: Toast.LONG,


here on my time as SHORT and LONG two kinds of value, of course you can handle yourself for the desired effect.

then only needs to modify the time 1000 in the timingDismiss, and write it as this.state.time.

component updates

. When the component is already renewed, we need to process it, update message and time in state, and erase timer and retiming.

 componentWillReceiveProps (nextProps) {this.setState (message: = = {nextProps.message! Undefined? NextProps.message: time: nextProps.time & ', & nextProps.time; < 1500? Toast.SHORT: Toast.LONG, clearTimeout}) (this.dismissHandler) (this.timingDismiss)}

component registration for our definition of the components in the form of API calls, rather than write in the render method, so we define a component with

 import React, {Component} from "react"; import {StyleSheet, AppRegistry, View, Text} from'react-native'; viewRoot = null; class RootView extends Component constructor (props) {{super (props); console.log ("constructor:setToast") viewRoot = this; This.state = {view:}} (null, render) {console.log ("RootView"); return (< View style={styles.rootView} pointerEvents= "box-none" > {this.state.view} < /View> static;}) = setView (view) => {/ / here is not able to use this.setState viewRoot.setState ({view: view})}}; const = originRegister AppRegistry.registerComponent; AppRegistry.registerComponent = (appKey, component) {return originRegister => (appKey, function) {const (OriginAppComponent = component (return); class extends Component (render) {{return (< View style={styles.container}> < OriginAppComponent/> < RootView/> < /View> );};};});}; const styles = StyleSheet.create ({container: {flex: 1}, position:,'relative', rootView: {position: "absolute", left: 0, right: 0, top: 0, bottom: 0, flexDirection: "row" justifyContent: "center"}}); realizing export default RootView 

RootView is our definition of the root component,, registered by AppRegistry.registerComponent.

 import package for external calls React, {Component, from}'react'; import RootView from'../RootView' import ToastView from'./ToastView'class Toast static static {LONG = 2000; SHORT = 1000; static show (MSG) {RootView.setView (< ToastView message={msg} onDismiss={(=>); RootView.setView (}}/>) {};) static show (MSG, time) {RootView.setView (< ToastView message={msg} time={time} (onDismiss={) => RootView.setView (}}/>) {};) define two static export default Toast 

Toast} variables, indicates the time for external use. Then two static methods are provided, in which the setView method of RootView is called to set the ToastView to the root view.

introduced the above Toast, and then through the following method called the

(the "test, I Toast"); / / set the display time of Toast ("test", Toast.LONG); 

was introduced in this paper. If you want to see the complete code, I can check it in GitHub. If there is a shortage or error in the article, welcome to point out. I hope you will be helpful to your study, and I hope you will support the home of the script. In the end, happy new year.

This concludes the body part