Cannot read property 'hideMessageBarAlert' of undefined

[bfarrgaynor]

Whenever I trigger an alert nothing seems to happen and I get this:

Possible Unhandled Promise Rejection (id: 0): Cannot read property 'hideMessageBarAlert' of undefined TypeError: Cannot read property 'hideMessageBarAlert' of undefined at Object.module.exports.hideAlert (http://localhost:8081/index.ios.bundle?platform=ios&dev=true:16093:29) at Object.module.exports.showAlert (http://localhost:8081/index.ios.bundle?platform=ios&dev=true:16071:6) at _callee2$ (http://localhost:8081/index.ios.bundle?platform=ios&dev=true:80269:512) at tryCatch (http://localhost:8081/index.ios.bundle?platform=ios&dev=true:5108:30) at GeneratorFunctionPrototype.invoke [as _invoke] (http://localhost:8081/index.ios.bundle?platform=ios&dev=true:5384:12) at GeneratorFunctionPrototype.prototype.(anonymous function) [as next] (http://localhost:8081/index.ios.bundle?platform=ios&dev=true:5141:13) at tryCatch (http://localhost:8081/index.ios.bundle?platform=ios&dev=true:5108:30) at invoke (http://localhost:8081/index.ios.bundle?platform=ios&dev=true:5184:12) at http://localhost:8081/index.ios.bundle?platform=ios&dev=true:5229:1 at tryCallTwo (http://localhost:8081/index.ios.bundle?platform=ios&dev=true:2626:1)

[KBLNY]

Hi, Can you please paste your code and can you explain a bit your context? Which version do you use?

Can you also please check you implemented the following step:

1. Add a to your top parent view/component. (Children will use that one)
2. Register and unregister the alert in, respectively, componentDidMount and componentWillUnmount
3. Call MessageBarManager.showCurrentAlert({...}) with the right properties

Thanks,

[bfarrgaynor]

Version: react-native-message-bar@1.4.1

var MessageBarAlert = require('react-native-message-bar').MessageBar; var MessageBarManager = require('react-native-message-bar').MessageBarManager; ... ` componentDidMount: function() {

   MessageBarManager.registerMessageBar(this.refs.alert);
        MessageBarManager.showAlert({
          title: 'Success',
          message: 'Job has been marked as produced',
          alertType: 'success',
          // See Properties section for full customization 
          // Or check `index.ios.js` or `index.android.js` for a complete example 
        });

},

componentWillUnmount: function() {

  // Remove the alert located on this master page from the manager 
  MessageBarManager.unregisterMessageBar();

},

render: function() { return (

``` {toReturn}

);

}
`

I can successfully get the contents of MessageBarManager and MessageBarAlert when I put them through a console.log in my render function - so I know they are accessible and in scope. 

[bfarrgaynor]

Ok so I think I may be closer. My this.refs is empty - pretty sure that's the source of the problem. Looks like this can happen - I'm trying to figure out why. I'm going to call this issue closed for now. See: https://github.com/root-two/react-native-drawer/issues/55

[bfarrgaynor]

Yeah ok so if you are using a navigator component in any way (even ExNavigator like I'm using) this will wipe your refs object.

I fixed my problem by wrapping a new view around my MessageAlertsBar and the navigator and this brought my refs back. Now it works.

[johanmic]

just ran in to a similar situation but had a loader before rendering which messed things up as well

error

    if(!this.state.loaded) return this.renderLoader();
    return <View style={{flex:1}}>
        {this.renderApp()}
        <MessageBarAlert ref="alert" />
    </View>

works

<View style={{flex:1}}>
        {(this.state.loaded) ? this.renderApp():this.renderLoader()}
        <MessageBarAlert ref="alert" />
</View>

[KBLNY]

@bfarrgaynor I reproduce the bug and the only way I fixed it for now is to do a

MessageBarManager.hideAlert();
Actions.mypage();

[KBLNY]

@jaywalklabs this is normal, in your first try the MessageBarAlert component is not loaded in the DOM, you can't then access and use it. Only your second version can work if you want to access the MessageBarAlert while the loading is performed

[ghost]

I'm having this problem with react-native Navigator. I'm not sure how to resolve.

[bfarrgaynor]

I made the object global by declaring it into a global variable in my index time and am able to call it from any route.

---

From: Eamonn Hynes notifications@github.com Sent: Sunday, February 5, 2017 5:18:02 PM To: KBLNY/react-native-message-bar Cc: Brendan Farr-Gaynor; Mention Subject: Re: [KBLNY/react-native-message-bar] Cannot read property 'hideMessageBarAlert' of undefined (#7)

I'm having this problem with react-native Navigator. I'm not sure how to resolve.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/KBLNY/react-native-message-bar/issues/7#issuecomment-277554482, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ABKFjLZj6iq6tbnVavPRmlQ4fZNtLP4Eks5rZkqagaJpZM4IK_JE.

[ghost]

OK, so I think when using Navigator, there are alerts appearing/disappearing on other views.

I managed to clean up the code, but I can't pin-point the exact source of the error message.

[temitope]

@bfarrgaynor i am using react-navigation. can you share a gist or something showing how you did that global variable and call please?

[temitope]

@bfarrgaynor nvmnd got it working. i was not correctly rendering to keep the refs. works great now.

[isAlmogK]

I'm having the same issue, does anyone have a good example

[temitope]

@AlmogRnD can you share your code to show where you are getting an error?

[isAlmogK]

@temitope I switched to a different message bar package

[temitope]

@AlmogRnD gotcha. thx for update

[wzup]

@AlmogRnD What different message bar do use? This package is real PITA 👎

[temitope]

@wzup fwiw i forked it. its simple enough to not have to be such a PITA but maintenance - https://github.com/temitope/react-native-message-bar

[youngjuning]

@AlmogRnD What package you switch?