Alert not showing on top for Android

whittlem commented 5 years ago

Short Description

I've got DropDownAlert working perfectly with IOS using a service file so it can even be controlled from other components. For some reason the alerts are not showing on the top layer with Android. I have managed to move the alert below the status bar but it is still showing under my Header component. How can I make the alerts the top layer?

Steps to Reproduce / Code Snippets / Usage

return (
  <Provider store={Store}>
    <Container>
      <DropdownAlert
        ref={ref => DropDown.setDropDownAlert(ref)}
        defaultContainer={{
          padding: 8,
          paddingTop: StatusBar.currentHeight,
          flexDirection: 'row'
        }}
      />
      <StatusBar translucent={false} barStyle='dark-content' />
      <Header headerText={displayName} />
      {renderDisclaimerOrApp}
    </Container>
  </Provider>
);

Expected Results

On Android the alerts are showing above the App layer but below the Header layer. I guess I could increase the padding show under the header but that would mean the IOS and Android displays are different and I don't want that.

Additional Information

React Native version: 0.59.5
react-native-dropdownalert version: 3.10.0
Platform(s) (iOS, Android, or both?): both - but only having an issue with Android
iOS version: n/a
Android version: 9.0

testshallpass commented 5 years ago

@whittlem Put the <DropdownAlert /> last in the document tree. In your case, after </Container>

whittlem commented 5 years ago

I will try that... thanks.

testshallpass commented 5 years ago

Closing, please reopen if still having issue.

whittlem commented 5 years ago

I put it at the bottom of the document tree and the alert is still showing under the StatusBar in Android only. IOS is fine.

testshallpass commented 5 years ago

@whittlem I think it might be related to StatusBar's translucent property.

If the status bar is translucent. When translucent is set to true, the app will draw under the status bar. This is useful when using a semi transparent status bar color.

http://facebook.github.io/react-native/docs/statusbar#translucent

Perhaps move <StatusBar /> on same level as <DropdownAlert /> and/or try updateStatusBar prop set to false to rule out interference from DropdownAlert.

whittlem commented 5 years ago

@testshallpass, thanks.

translucent was already set to false. I also tried true which didn't work
I moved DropdownAlert back to the same level as StatusBar and no luck.
I tried setting the updateStatusBar to false also with no luck.

return (

{renderDisclaimerOrApp} DropDown.setDropDownAlert(ref)} />
);

The alert shows on top of everything except for the StatusBar. You can see it moving under the StatusBar component. I got this working with a nasty fix by moving the padding of the alerts to show below the status bar for Android but it doesn't look very nice.

testshallpass commented 5 years ago

I don't have bandwidth to reproduce or fix. I also suggest maybe wrapping everything in a View and putting DropdownAlert last similarly to this workaround: https://github.com/testshallpass/react-native-dropdownalert/issues/205#issuecomment-522367620

testshallpass / react-native-dropdownalert