react native push notification doesn't show banner (pop on screen) when app is in background or closed

Question

I'm using react-native-push-notification and followed its documents. it works fine when the app is in the foreground but when the app is in the background and I try to send a notification from firebase console, just shown a small icon of the app in statusbar but doesn't show banner

I tried to add a new channel but still not working

componentDidMount() {

        NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectivityChange);

        PushNotification.configure({

            // (optional) Called when Token is generated (iOS and Android)
            onRegister: function(token) {
                console.log( 'TOKEN:', token );
            },

            // (required) Called when a remote or local notification is opened or received
            onNotification: function(notification) {
                console.log( 'NOTIFICATION:', notification );

                Platform.OS === 'ios' ? notification.finish(PushNotificationIOS.FetchResult.NoData) : null;
            },

            // ANDROID ONLY: GCM or FCM Sender ID (product_number) (optional - not required for local notifications, but is need to receive remote push notifications)
            senderID: Variables.GCM_SENDER_ID,

            // IOS ONLY (optional): default: all - Permissions to register.
            permissions: {
                alert: true,
                badge: true,
                sound: true
            },

            visibility: 'public',

            popInitialNotification: true,

            requestPermissions: true,
        });
    }

Answer 1

You have to create a android notification channel and set the configuration you want it to have such as,

{
channelId: "general-or-something",
channelName: "General or Something",
channelDescription: "Description for general or something",
playSound: true,
importance: "High",
vibrate: true,
}

Since you already have installed react-native-push-notification, you can use the method PushNotification.createChannel() to create the channel, which will look like this,

PushNotification.createChannel(
 {
  channelId: Channels.GENERAL.channelId,
  channelName: Channels.GENERAL.channelName,
  channelDescription: Channels.GENERAL.channelDescription,
  playSound: true,
  importance: Importance.HIGH,
  vibrate: true,
 },
 () => null,
);

and on your firebase.json file add a new prop as messaging_android_notification_channel_id as assign Channels.GENERAL.channelId to it which will help you override the default channel firebase has created and let you use your config on top of it.