Android not working.

[Leo Li]

Hi, thank you for your contribution of this library. It works perfect on iOS, but it seems like nothing happened in android emulator after this.pop.show()

Thank you!

[Carson Wah]

Hi @peachlsy , could you provide more details for further investigation? Such as:

emulator: (android studio/geny motion)
device: (samsung, ...)
android version:
react native version:
react-native-push-notification-popup version:
etc

[Leo Li]

Hi @carsonwah
Thank you for your reply. Here are my environment:
emulator: android studio
device: pixel 3
android version: API 28, Android 9.0(Google APIs)
CPU: x86
react native version: 0.59.8
react-native-push-notification-popup version: ^1.3.0

Thanks!

[Martin Jaycy Halum]

Hi Carson,
I'm also experiencing the same issue on my physical device. I'm using a
Device: Xiaomi Redmi Note 3
react-native version: 0.33.0
react-native-push-notification-popup version: ^1.3.0

[André Sungyoub Song]

Hey guys. I had the same issue and I fixed my issue just by switching the order.

What I used to have based on README.md

  ...
  render() {
    const { navigation } = this.props;

    return (
      <View style={{ flex: 1 }}>
        <NotificationPopup ref={popup => this.popup = popup} />
        <SwitchNavigator navigation={navigation} />
      </View>
    );
  }
}

What I have now:

  ...
  render() {
    const { navigation } = this.props;

    return (
      <View style={{ flex: 1 }}>
        <SwitchNavigator navigation={navigation} />
        <NotificationPopup ref={popup => this.popup = popup} />
      </View>
    );
  }
}

Just by switching the order of my Navigator and the NotificationPopup, the popup is now showing for Android.(And of course works fine for iOS)

If this fixed your issue. I think we can ask @carsonwah to update the README's example code.

[Carson Wah]

Hi guys, sorry for the late reply.

We are currently using zIndex to display the popup at the front of the scrren. It works well on iOS, but causes issues on Android.

Related discussions:

• how to give z-index property in react native android app
• zIndex isn't working for a react native project
• React native: zIndex not taken seriously on Android
• zIndex does not work with dynamic components on Android

Solution 1

Add elevation to popupContainer component. But this may introduces some unwanted styles.

Solution 2

From Official Doc on zIndex:

Normally, you don't use zIndex. Components render according to their order in the document tree, so later components draw over earlier ones.

So as a workaround, maybe we can remove the use of zIndex completely, and make sure users use the component in correct order in the render method.

I will try that soon. Any comment or pull request is welcome.