undefined: this_currentMessageBarAlert.hideMessageBarAlert

[ikendoit]

Hello, I was trying out the message bar and i get this error :

my testMess():

66.  testMess(){
  67.   MessageBarManager.showAlert({
        title: "title jere", 
        message: "a message for a message", 
        alertType: "success",
    });
    console.log("did a message show ??? ");
  }

My ComponentDidMount:

  componentDidMount() {
    this.setState({
      ..........
    });
    MessageBarManager.registerMessageBar(this.refs.alert);
    this.testMess();
  }

I set up everything as told in the manual but this didn't work. Has anyone had this problem before ? i tried playing around with the MessageBarManager.js but nothing worked.

[hamidfzm]

I have the same problem. I think alert reference register has problem.

[Talor-A]

are you sure that this.refs.alert is != undefined? that's the only way I can see this error happening.

[hamidfzm]

I think it is a binding problem. I used https://github.com/Qlean/react-native-messages. It's a simple message bar (So simple compared to this project) but they implemented a better code( or binding solution) for message bar manager. Please take a look at their source code.

[ugendrang]

+1

[Talor-A]

@hamidfzm thanks for showing me that library, it's definitely a better solution. I unfortunately don't have the time to do any major refactoring of this library right now, but I'll look into this issue again. unfortunately so far I haven't been able to reproduce the problem, but if anyone wants to share a simple demo project I'll take a look.

[blntylmn]

Anyone has issue with this problem. You can surround the registerMessageBar function in a setTimeout function like below :

componentDidMount() {
    setTimeout(() => {
      MessageBarManager.registerMessageBar(this.alert);
    }, 0);
  }

and don't use ref as string

<MessageBarAlert  ref={(a) => { this.alert = a; }} />

@ikendoit don't use setState in your componentDidMount. If you really need it in componentDidMount; surround it with setTimeout 👍

[ikendoit]

Thank you @blntylmn , the way you used setTimeout was very clever ! I will surely try it your way.

[xxzefgh]

You can just register in ref callback:

<MessageBar
  ref={ref => {
    MessageBarManager.registerMessageBar(ref);
  }}
/>

[phillbaker]

This seems similar to the upstream issue: https://github.com/KBLNY/react-native-message-bar/issues/46