Render glitch/bug on container re-render

[CrashingBrain]

If the shouldHideAfterDelay prop is set to false and the MessageBar is not closed, a second call of showAlert() while the container component is re-rendered (say for example as for a refresh) causes a second blue (default, info) message bar to be displayed on the top of the screen.

This behavior appears for example if the showAlert() method is called as result of an async call to refresh the view.

A minimal example is available at this snack

(here the central part:)

  onPress = async () => {
    this.setState({refreshing: true});
    await delay(2000).then(e => {
      MessageBarManager.showAlert({
        title: 'foo',
        message: 'bar\nbarino',
        alertType: 'error',
        position: 'bottom',
        animationType: 'SlideFromBottom',
      });
    });
    this.setState({refreshing: false, flag: !this.state.flag});
  }

  render() {
    return (
      <View style={styles.container}>
          <Button block danger onPress={this.onPress}>
            <Text>
              { this.state.flag? 'Click Me' : 'Click Me Again'}
            </Text>
          </Button>
        <MessageBarAlert ref={alert => MessageBarManager.registerMessageBar(alert)} shouldHideAfterDelay={false} />
      </View>
    );
  }