When notification is displayed very first time, margin is automatically added on view top!

[FaizanMostafa]

Short Description

Layout is being suppressed down(seems like some sort of margin is being added on top) when the alert is displayed and app stays this way until i refresh the app by killing it or through react native dev menu!

Post alert layout distortion includes

• An additional margin on top of header

• bottom nav is also moved down as its text is hidden...

Screen layout before the alert...

Screen layout at the time of alert...

Screen layout after the alert...

Code Snippets / Usage

app.js component...

import React from 'react';
import { Provider } from "react-redux";
let { store, persistor } = configureStore();
import AppContainer from './src/navigation/Root';
import DropdownAlert from 'react-native-dropdownalert';
import DropDownHolder from './src/components/DropDownHolder';

const App = () => {
  return (
    <>
      <Provider store={store}>
        <AppContainer />
      </Provider>
      <DropdownAlert ref={ref => DropDownHolder.setDropDown(ref)}/>
    </>
  );
};
export default App;

DropDownHolder component...

export default class DropDownHolder {
    static dropDown;
    static setDropDown(dropDown) {
        this.dropDown = dropDown;
    }
    static getDropDown() {
        return this.dropDown;
    }
}

Usage...

import DropDownHolder from '../../components/DropDownHolder';
class SomeComponent extends Component {
  if(someCondition){
    DropDownHolder.dropDown.alertWithType('success', 'Success', 'Success Message');
  }

  render() {
    return (
      <SomeOtherComponent />
    )
}
export default SomeComponent;

Additional Information

• React Native version: 0.61.5
• react-native-dropdownalert version: 4.2.1
• Platform(s) (iOS, Android, or both?): Android
• Android version: 6.0.1

[libereducacao]

Indeed I am having the same problem. Maybe somebody can give a light here?

[AlexandreMPDias]

Having the same issue here, any news?

[FaizanMostafa]

Having the same issue here, any news?

Unfortunately, No :(

[bklukaczewski]

Do you by any chance have translucent status bar in your app?

<StatusBar translucent />

It looks like the first time you show a notification, the library is updating your StatusBar.

Try setting the updateStatusBar prop to false (it's true by default). It worked for me, however my case was different as I was drawing the app under Android status bar (same like on iOS).

https://github.com/testshallpass/react-native-dropdownalert/blob/master/docs/PROPS.md#statusbar

[FaizanMostafa]

Do you by any chance have translucent status bar in your app?

<StatusBar translucent />

It looks like the first time you show a notification, the library is updating your StatusBar.

Try setting the updateStatusBar prop to false (it's true by default). It worked for me, however my case was different as I was drawing the app under Android status bar (same like on iOS).

https://github.com/testshallpass/react-native-dropdownalert/blob/master/docs/PROPS.md#statusbar

thanks for the suggestion, i don't want to disable the status bar update though it solves my problem, but I added the translucent={true} prop to DropdownAlert and it changed the alert behavior as nothing went wrong on alert. But when i closed the app and reopened it, it was the same problem as before, i was seeing a top margin. :(

[appsgenie]

I am also having this issue. If we set updateStatusBar={false} to the component and leave StatusBar with translucent it looks like now the alert is not fully displayed. The top part of the alert is under the status bar (doesnt get pushed down enough).

Setting translucent={false} also is not desired cuz it will basically push the whole app down and have that top margin in there all the time.

this issue is only on Android, as far as I can tell

[sonnguy]

This approach worked for me.

<DropdownAlert updateStatusBar={false} defaultContainer={{ padding: 8, paddingTop: StatusBar.currentHeight }} ref={ref => AlertHelper.setDropDown(ref)} onClose={() => AlertHelper.invokeOnClose()} />

[sutefan1]

Same issue. The approach above doesn't seem to work with my setup.

[1729patrick]

the transluced prop still don't work for me 💔

my temporary solution:

App.tsx

<DropdownAlert
    ref={ref => Alert.setRef(ref as AlertType)}
    defaultContainer={{ padding: 8, paddingTop: StatusBar.currentHeight }}
    updateStatusBar={false}
    onClose={Alert.onClose}
  />
<StatusBar
    translucent
    backgroundColor="rgba(0, 0, 0, 0)"
    barStyle="dark-content"
  />

Alert.tsx

export class Alert {
  static ref: AlertType;

  static setRef(ref: AlertType) {
    this.ref = ref;
  }

  static onClose() {
    StatusBar.setBarStyle('dark-content');
  }

  static success(title: string, message?: string) {
    this.ref.alertWithType('success', title, message);
    StatusBar.setBarStyle('light-content');
  }
}

[testshallpass]

Closing as have not been able to reproduce using example project. Please try latest version and/or open new issue if it persists or suggested workarounds do not help.