TypeError: undefined is not an object (evaluating 'this._currentMessageBarAlert.hideMessageBarAlert')]

[sarmadkung]

I am displaying alert on button click event but when i pressbutton it show me that error TypeError: undefined is not an object (evaluating 'this._currentMessageBarAlert.hideMessageBarAlert')]

I complety follow the instructions that you provided with package thanks for your giving some time for that issue...

[mikolajadamowicz]

The same issue. Im wrapping MessageBar in navigation root component like so

    return (
      <View style={{ flex: 1, zIndex: 100 }}>
        <Provider store={store}>
          <RootNav />
        </Provider>
        <MessageBar ref="alert" />
      </View>
    );

[EliechCai]

this is my code, but it's not working.

if (!this.state.isReady) {
  ...
} else {
  return (
    <View style={{ flex: 1 }}>
      <AppNavigator />
      <MessageBar ref="alert" />
    </View>
  )
}

and I find that the problem is in the refs object

componentDidMount() {
  MessageBarManager.registerMessageBar(this.refs.alert) // this.refs.alert is undefined
}

I find the solution in componentDidMount called BEFORE ref callback

and according to React

If you worked with React before, you might be familiar with an older API where the ref attribute is a string, like "textInput", and the DOM node is accessed as this.refs.textInput. We advise against it because string refs have some issues, are considered legacy, and are likely to be removed in one of the future releases.

maybe it's better to use either the callback pattern or the createRef API instead