If I have this, the messageStyle seems to be ignored. However, if i remove stylesheetError the properties in messageStyle show up.
messagebar.MessageBarManager.showAlert({ message: 'There was a problem loading your data', alertType: 'error', stylesheetError: { backgroundColor: '#FF5532', strokeColor: '#FF5532' }, messageStyle: { color: 'white', fontSize: 16 }, });

How to use it when app background run?Could you give me some proposes?
Thanks!

_showAlert(_message, _alertType = 'error') { MessageBarManager.showAlert({ message: _message, alertType: _alertType }); }

when duration ends small blue bar appears on top after the error bar exit animation ends

After upgrade RN to 0.30.0, I noticed the MessageBar is being displayed without actually use MessageBarManager for this (e.g. component mount).

Here's a screenshot which better describe the issue:

Once I start typing anything on textinputs, which causes the component to rerender, the MessageBar automatically dissappear.

Hi, can you please show an example of how to use your component with react-native-router-flux?

Should I use it like this?

import {Scene, Router} from 'react-native-router-flux';

class App extends React.Component {
  render() {
    return <Router>
      <Scene key="root">
        <Scene key="login" component={Login} title="Login"/>
        <Scene key="register" component={Register} title="Register"/>
        <Scene key="home" component={Home}/>
      </Scene>

     // Within your render function.
     // Include the MessageBar once within your top View element
     // Make sure you add the MessageBar at the very bottom of your master component, then it will be           displayed over all other components
     <MessageBarAlert ref="alert" />

    </Router>
  }
}

There is a listview to load data, when these datas are loaded, I want to show a message bar to notice user the status of the result, but the bar is showing behind the listview.

If the message bar element placed after listview, then the bar would show at the bottom with the screen as this listview is being full with datas

So, what should I do ?

The main code is like this:

      <View
        style = {styles.container}
      >
        <View>
          <MessageBar style={{position: 'absolute'}} ref='messageAlert' />
        </View>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={this.getExamCell}
          enableEmptySections={true}
          stickySectionHeadersEnabled = {false}
          renderSectionHeader={this.renderSectionHeader}
        />
       </View>

componentDidMount() {
    MessageBarManager.registerMessageBar(this.refs.messageAlert)
  }

  componentWillUnmount() {
    MessageBarManager.registerMessageBar(this.refs.messageAlert)
  }

The code to fetch data:

renderExamDatasource = (url) => {
    fetch(url).then((response) => (response.json()))
    .then((jsonBody) => {
      let local = [array.first(jsonBody.param)]
      if (jsonBody.success) {
        MessageBarManager.showAlert({
          title: '加载成功',
          message: '共为你获取到' + (jsonBody.param.length + local.length) + '条数据',
          alertType: 'info',
        })
      } else {
        MessageBarManager.showAlert({
          title: 'error',
          message: jsonBody.param ? 'unknow reason' : jsonBody.param,
          alertType: 'warning',
        })
      }
    })
    .catch(reason => {
      MessageBarManager.showAlert({
        title: '加载错误',
        message: '网络错误，无法加载到您所需的数据',
        alertType: 'warning',
      })
    })
  }

The screenshot is like this:

How to change height of the bottom line to 1 pt?

Hey there!
Like the Title says, sometimes it shows me a Blue Bar on top of the App. I really don´t know where this comes from, i noticed this after i integrated this module

Any ideas?

Hi , I was trying to show the message bar above the navigation bar I have, but it doesn't work with a navigation bar appearing. How to achieve this?

Can you please help.

Thanks.

I find this component quite useful but it seems @KBLNY has stopped maintaining it. Has anyone considered maintaining a fork of this component?

Is this the desired behavior? I'm looking for some messaging library that I can plop into one spot and have access to app-wide.

However, I've noticed that this appears to be a common theme: user feedback messages always being behind Modals.

Any guidance?

👋 asking for a friend

When I custom stylesheet background, the background is work as my expected but the color of title and message change to the dark color. Even I change the textStyle, it still not working. Do u guys have any idea to fix this? Tks in advance.

Here is my code:

MessageBarManager.showAlert({
title: customTitle,
message: customMessage,
alertType: 'info',
duration: 5000,
durationToShow: 500,
onTapped: this.state.actionCallback,
stylesheetInfo: {backgroundColor: '#4065b5', strokeColor: '#4065b5'},
titleStyle: {color: 'white', fontSize: 18, fontWeight: 'bold'},
messageStyle: {color: 'white', fontSize: 16},
});

Is possible to remove the log message in _apllyAnimationTypeTransformation method?
Thanks.

Hi,
Message have 2 seconds delay before it shows up after calling it. What can cause that delay? I test it on emulator as well on real device.

Thanks

Edit:
Okay, so it's little bit faster by adding these:
durationToShow: 0, durationToHide: 0
but it's still not satisfying as after spinner there is delay that I'd like to get rid of if possible.

Hello,

I'm attempting to integrate your snazzy library into my project, but am having some difficulties getting the message to actually show up in the application.

I've setup the project as the README describes (and validated against the AppTest.js file), and also have attempted to adjust the position of the message (by setting the viewTopOffset to +/- 300 and position to bottom on the showAlert() method). None of those seemed to give a sign as to what might be going wrong.

You can view my implementation of the code: https://github.com/AndrewZurn/spac-fusion-app/blob/master/src/modules/profile/ProfileView.js

Mostly standard React-Native + Redux. I have a Nav and Tab bar, but I'm not sure if those could be causing the issue.

If there is anything you see, or something that could be the source of a bug, please let me know. I've given it a pass or two (both my code again and the code in your classes/components), but was not able to find anything that might be of issue.

Thanks,

Andrew

Hi,
Am facing an issue where alertType is success and when there is stylesheetSuccess applied, titleStyle and MessageStyle (where color: 'white') is not applied. Any advise?

showInAppAlert(title, message, callbackFunction){ MessageBarManager.showAlert({ title : title, message: message, alertType: 'success', avatar: <${this.state.userIcon.uri}>, duration : 20000, viewTopOffset : 0, viewTopInset : 20, onTapped:()=>{callbackFunction()}, stylesheetSuccess : { backgroundColor: '#32A54A', fontSize: 16}, titleStyle : { color : 'white', fontSize : 16, fontFamily : Fonts.type.bold, fontWeight : 'bold', marginBottom : 2, }, messageStyle : { color : 'white', fontFamily : Fonts.type.base, fontSize : 14, marginBottom : 2 }, avatarStyle: { height: 40, width: 40, borderRadius: 20 }, messageNumberOfLines : 5, }); }

Hi,
there are some deprecation notice from react-native please see broken changes on
the following link https://github.com/facebook/react-native/releases/tag/v0.25.1

ps : @sibeliusseraphini provides tool for update to 0.25
https://github.com/sibeliusseraphini/codemod-RN24-to-RN25

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)

don't know why but onTapped Callback giving me error -"this.state.onTapped" is not a function,
I have added everything as given in the readme andAppTest

Hi all, please head over to talor-a/react-native-message-bar, npm has granted me ownership of the package so I'll be maintaining it from here on out.

run npm i --save react-native-message-bar^2.0.0 to use it 😉

mentioning @xavimb @donovantc @jeaye @Un3qual @brianjd @nikolay-radkov @sheparddw, thanks for your contributions & help.

is it possible to set up the borderRadius for a view?
like:
stylesheetInfo : {{ backgroundColor : '#007bff', strokeColor : '#006acd' , borderRadius: 20}}`

I'm trying to use the ShowAlert function for logout success messages and error messages. The problem is my actions are tucked away in another file that isn't a child component of my the main parent component. Is there any way to feed the Alert action through the redux store and have RegisterMessageBar function listen for the alert? I didn't know how to classify this as a question as opposed to an issue. I realize in the documentation it specifically mentions it needs to be a child component but I still thought I'd try my luck and ask. Thanks in advance!

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...

Notification only pops up when user is in Main screen (HomeScreen). But when user navigates to other pages, notification is received but alert is not displayed.

Hello -

Thanks for this. I am surely missing something basic, but when I try to display an alert, the showCurrentAlert function of MessageBarManager barfs @ line 47 - "Cannot read property 'setNewState' of undefined.

My project is set up with a redux store and a router. When I just drop your example code into my project, it works fine.

Kaveh

在多个组件中怎么使用？我现在两个页面都要显示messagebar，但是从第二个页面返回回来的时候，第一个页面的messagebar就不显示了。

npm show react-native-message-bar version shows 2.0.10, but releases doesn't

After my api call i'm setting the error message to messageBar, but it take too long to appear on screen

y is it so ?

Related to #6 (which is apparently closed) and probably #19 and there is PR #27 but for different kind of issue (or maybe it's same cause but different behavior).

I have this issue too. I have set status bar background to be transparent. After message is shown and I click on TextInput so keyboard is visible, message goes up and there is blue background under status bar (until message goes away - message never goes down again even if you hide keyboard).

Are we still waiting for this fix or is this the new issue?
Thanks

Now

IS there any live demo site?