Sometimes a Blue Bar is displayed at top of the App

[BigPun86]

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?

[KBLNY]

Hey thanks for your feedback,
This is an old issue. Do you have the latest release?
Do you using redux/flux architecture ?
Please give me a piece of code on which I can investigate deeper.
Thanks

[remstos]

Same issue when starting the app on iPad Landscape and rotating to Portrait.
Seems like the messageBar is not well initialised until the first show, I managed to fix it by adding this in my componentDidMount:

InteractionManager.runAfterInteractions(() => {
      MessageBarManager.showAlert({ duration: 10 });
});

[BigPun86]

@KBLNY Thanks for your fast reply. I am running on RN 29.2 and i am using the latest message-bar (v1.6.0)

It is like @kemcake has mentioned. It must be caused by wrong? initialisation? Not sure how to solve this, i tried it with InteractionManager, but dind´t work. Where did u put this @kemcake

[perkola]

I have the same problem too. RN 0.30.0 and message-bar 1.6.0. No redux/flux.

[holyxiaoxin]

RN 0.33.0, message-bar 1.6.0

[maluramichael]

Whats the current issues state? I get this error too. Sometimes the default bar is visible when i create a custom alert.

[hugohow]

+1

[brianjd]

Submitted a fix yesterday.

[holyxiaoxin]

@brianjd I tested it and it works. I'm forking from your branch for now.

[paduvi]

hi @brianjd I still have that bluebar popup then disappear immediately after...

This is my code:

toggleInfo() {
        const {infoMessage} = this.state;
        if (infoMessage) {
            MessageBarManager.hideAlert();
        } else {
            MessageBarManager.showAlert({
                title: 'abc...',
                message: 'xyz',
                duration: 5000,
                alertType: 'info',
                position: 'bottom',
                avatar: require('../images/dog_logo.jpg'),
            });
        }
        this.setState({infoMessage: !infoMessage});
    }

[holyxiaoxin]

@paduvi did you try using his forked version?

[paduvi]

@holyxiaoxin oh I haven't tried yet. I thought they have fixed this bug. I will have a look at @brianjd fork later. Thanks

[holyxiaoxin]

@paduvi the author didn't merge his fix. I've tried the forked version and it's working for me.

[paduvi]

It seems that blue bar still blink at top when I toggle off the message bar.
And message bar disappears immediately instead of sliding down (message bar's position is bottom)

[holyxiaoxin]

@paduvi try going to the newly installed node module and console log something. Make sure that it's installed and reloaded in your js bundle.

[paduvi]

@holyxiaoxin it works normally if I remove line this.setState({infoMessage: !infoMessage}) after hideAlert(). I have tried to use onHide callback, but it also has the same bug.

I just wanna toggle the MessageBar by using a TouchableOpacity's onPress, it's not hard to reproduce this bug.

[paduvi]

I found out why it has that bluebar... It seems that when I update state, application re-rendered the message bar. And because of something, it's not inherit old MessageBar props. A bluebar will appear at top position and slide up.

To prevent re-render, just check the state in shouldComponentUpdate:

    shouldComponentUpdate(nextProps, nextState) {
        if (nextState.infoMessage != this.state.infoMessage && !nextState.infoMessage)
            return false;
        return true;
    }

[trinadhkoya]

Yeah ,i understand i.e it is automatically taking the below one,i just replaced that annoying blue color with #fff(white).You can change the colour how ever you want

                   stylesheetInfo={{ backgroundColor: '#fff', strokeColor: '#fff' }}

Duplicate of #29

[bilalsyed001]

MrSltun@226df65