CODEWITHSUNDEEP
firebasereact-nativefirebase-cloud-messagingreact-native-push-notification
amirito
amirito

Reputation: 143

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

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 aaa

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,
        });
    }

Upvotes: 11

Views: 3689

Answers (3)

Charana Amarasekara
Charana Amarasekara

Reputation: 76

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.

Upvotes: 1

Jonas Beck
Jonas Beck

Reputation: 521

You want to make the remote notification looks like local notification created in react-native-push-notification library? When the app is quite or in background status it's hard to manage that remote notification. You can't disable it (except in phone notification setting) and asset setting (such as notification icon, image, sound and so on) is different for every platform.

There are 3 types of messages in Firebase.

  • notification
  • Notification + Data
  • Data

https://rnfirebase.io/messaging/usage#notifications

On Firebase condole you can only send notification type message. It's impossible to customize how it looks like. In my experience, it's best to use data type firebase message. You should create your own server app in where you can send data type message without notification by using firebase-admin. You will get messages even when app is on background, but remote notification will not show. Then you can create local notification by using react-native-push-notification as you wanted.

Upvotes: 0

SaadEttahiri
SaadEttahiri

Reputation: 37

try to off the power saving mode battery because is block notification on background

Upvotes: 0

Related Questions