react native - Consecutive animations of component based on changing props -

i trying create snackbar-like status message component signature looks so:

<statusmsg  open={this.state.isopen}  message={this.state.msg}  onrequestclose={somefunc}  /> 

when "open" set true, message should animate onto screen, stay there time period, animate off again.

so, code below works fine, except in common use case: when calling component sets new message before old 1 has animated off screen. in case, code below replaces displayed message , uses same timer.

ideally, when new message added, should cause old message animate off screen first, animate in new message. (i'd ensure if new message text same old.)

i can't seem figure out how this. best guess statusmsg should factory creating animated views contain messages, have no idea how make work. specifically, how make prior messages close upon creation of new message.

class statusmsg extends component {   state = { exited: false, moveheightanimated: new animated.value(hidden_height) }   timerautohide = null;    componentwillmount() {     if (!this.props.open) {       this.setstate({ exited: true });     }   }    componentdidmount() {     if (this.props.open) {       this.show();     }   }    componentwillreceiveprops(nextprops) {     if (nextprops.open && this.state.exited) {       this.setstate({ exited: false });     }   }    componentdidupdate(prevprops) {     if (prevprops.open !== this.props.open) {       if (this.props.open) {         this.show();       } else {         cleartimeout(this.timerautohide);       }     }   }    componentwillunmount() {     cleartimeout(this.timerautohide);   }    show() {     const tovalue = show_height;     animated.timing(this.state.moveheightanimated, {         tovalue,         duration: 225,         easing: easing.bezier(0.0, 0.0, 0.2, 1),     }).start(this.setautohidetimer);   }    hide() {     const tovalue = hidden_height;     animated.timing(this.state.moveheightanimated, {         tovalue,         duration: 195,         easing: easing.bezier(0.4, 0.0, 1, 1),     }).start(this.onfinishedhiding);   }    onfinishedhiding = () => {     this.setstate({ exited: true });     if (this.props.onrequestclose) {       this.props.onrequestclose();     }   }    setautohidetimer = () => {     if (!this.props.onrequestclose) {       return;     }      cleartimeout(this.timerautohide);     this.timerautohide = settimeout(() => {       if (!this.props.onrequestclose) {         return;       }        this.hide();     }, this.props.autohideduration || default_autohide_duration);   }    render() {     if (!this.props.open && this.state.exited) {       return null;     }      return (       <animated.view style={[styles.msgcontainerstyle, { bottom: this.state.moveheightanimated }]} >         <view style={styles.noticecontainerstyle}>           <text style={styles.msgtextstyle}>{this.props.message}</text>         </view>       </animated.view>     );   } } 

wiki