Custom sound not work in remote notification ?

[AhmedHF]

Question

[abdulbasitha]

same issue .... ? how to configure custom sound in firebase cloud messaging?

[Dallas62]

Hi,

maybe a bit of context ? configuration, AndroidManifest, FCM Payload ? Something to help you ? Or I could simply answer: It's working 😉

Regards,

[abdulbasitha]

thank u for your Quik replay :) I have shared my configuration details below. ====AndroidManifest====

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.test">
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/storeicon"
      android:roundIcon="@mipmap/storeicon"
      android:allowBackup="false"
      android:theme="@style/AppTheme">
      <meta-data  android:name="com.dieam.reactnativepushnotification.notification_channel_name"
           android:value="YOUR NOTIFICATION CHANNEL NAME"/>
       <meta-data  android:name="com.dieam.reactnativepushnotification.notification_channel_description"
          android:value="YOUR NOTIFICATION CHANNEL DESCRIPTION"/>
        <meta-data
            android:name="com.google.firebase.messaging.default_notification_channel_id"
            android:value="@string/default_notification_channel_id" />

        <!-- Change the value to true to enable pop-up for in foreground (remote-only, for local use ignoreInForeground) -->
        <meta-data  android:name="com.dieam.reactnativepushnotification.notification_foreground"
            android:value="true"/>
        <!-- Change the value to false if you don't want the creation of the default channel -->
        <meta-data  android:name="com.dieam.reactnativepushnotification.channel_create_default"
            android:value="true"/>
        <!-- Change the resource name to your App's accent color - or any other color you want -->
        <meta-data  android:name="com.dieam.reactnativepushnotification.notification_color"
            android:resource="@color/white"/> <!-- or @android:color/{name} to use a standard color -->
        <meta-data
            android:name="com.google.firebase.messaging.default_notification_icon"
            android:resource="@mipmap/ic_notification" />
        <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationActions" />
        <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationPublisher" />
        <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationBootEventReceiver">
            <intent-filter>
                <action android:name="android.intent.action.BOOT_COMPLETED" />
            </intent-filter>
        </receiver>

        <service
            android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService"
            android:exported="true" >
            <intent-filter>
                <action android:name="com.google.firebase.MESSAGING_EVENT" />
            </intent-filter>
        </service>
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
        android:launchMode="singleTask"
        android:screenOrientation="portrait"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>
</manifest>

==== Configuration =====

PushNotification.configure({
      largeIcon: "ic_launcher",
      smallIcon: "ic_notification",
      onRegister: function (token) {
       console.log(token)

      },
      onNotification: function (notification) {

      },
      senderID: "xxxxx",
      playSound: true, // (optional) default: true
      soundName: 'soundnotification', // path: android/app/src/main/res/raw/soundnotification.mp3
      permissions: {
        alert: true,
        badge: true,
        sound: true
      },
      popInitialNotification: true,
      requestPermissions: true
    });

It's always playing default sound, but local push notification working properly, any solution ?

[Dallas62]

PushNotification.configure do not accept playSound or soundName, it's only for https://github.com/zo0r/react-native-push-notification#local-notifications and scheduled notifications.

You need to create a channel with the sound name defined on it, then trigger the notification from FCM on this channel.

The dev branch should help you to create the channel without triggering a notification first. You can also send data-notification and use a local-notification with options of: https://github.com/zo0r/react-native-push-notification#local-notifications

[Dallas62]

Such as

     onNotification: function (notification) {
         if(!notification.userInteraction) {
            PushNotification.localNotification(notification.data);
         }
     },

[abdulbasitha]

I tried to do like this but on background, it's not working

[Dallas62]

What is your FCM payload ?

[Dallas62]

If it's not working only in background, it's probably because the .configure() is in a component and must be put outside of any component.

[AhmedHF]

How to create custom channel with Sound in manifest?

[Dallas62]

https://github.com/zo0r/react-native-push-notification#channel-management-android

[Dallas62]

Or if you want to test dev branch: https://github.com/zo0r/react-native-push-notification/tree/dev#channel-management-android

[abdulbasitha]

Manifest merger failed : Attribute meta-data#com.google.firebase.messaging.default_notification_channel_id@value value=(@string/default_notification_channel_id) from AndroidManifest.xml:22:13-68 is also present at [:react-native-firebase_messaging] AndroidManifest.xml:39:13-29 value=(). Suggestion: add 'tools:replace="android:value"' to element at AndroidManifest.xml:20:9-22:71 to override.

I got an error something like this. why ?

`<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.shopinnadmin">

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
<application
  android:name=".MainApplication"
  android:label="@string/app_name"
  android:icon="@mipmap/storeicon"
  android:roundIcon="@mipmap/storeicon"
  android:allowBackup="false"
  android:theme="@style/AppTheme">
  <meta-data  android:name="com.dieam.reactnativepushnotification.notification_channel_name"
       android:value="YOUR NOTIFICATION CHANNEL NAME"/>
   <meta-data  android:name="com.dieam.reactnativepushnotification.notification_channel_description"
      android:value="YOUR NOTIFICATION CHANNEL DESCRIPTION"/>
    <meta-data
        android:name="com.google.firebase.messaging.default_notification_channel_id"
        android:value="@string/default_notification_channel_id" />

    <!-- Change the value to true to enable pop-up for in foreground (remote-only, for local use ignoreInForeground) -->
    <meta-data  android:name="com.dieam.reactnativepushnotification.notification_foreground"
        android:value="true"/>
    <!-- Change the value to false if you don't want the creation of the default channel -->
    <meta-data  android:name="com.dieam.reactnativepushnotification.channel_create_default"
        android:value="true"/>
    <!-- Change the resource name to your App's accent color - or any other color you want -->
    <meta-data  android:name="com.dieam.reactnativepushnotification.notification_color"
        android:resource="@color/white"/> <!-- or @android:color/{name} to use a standard color -->
    <meta-data
        android:name="com.google.firebase.messaging.default_notification_icon"
        android:resource="@mipmap/ic_notification" />
    <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationActions" />
    <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationPublisher" />
    <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationBootEventReceiver">
        <intent-filter>
            <action android:name="android.intent.action.BOOT_COMPLETED" />
        </intent-filter>
    </receiver>

    <service
        android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService"
        android:exported="true" >
        <intent-filter>
            <action android:name="com.google.firebase.MESSAGING_EVENT" />
        </intent-filter>
    </service>
  <activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
    android:launchMode="singleTask"
    android:screenOrientation="portrait"
    android:windowSoftInputMode="adjustResize">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
  </activity>
  <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>

`

[Dallas62]

This is written in the error message.

[abdulbasitha]

when I try to create custom channel I got the above error message, the error message will disappear, when I remove it

 <meta-data
        android:name="com.google.firebase.messaging.default_notification_channel_id"
        android:value="@string/default_notification_channel_id" />

[Dallas62]

Yes, the error message is clear:

Attribute meta-data#com.google.firebase.messaging.default_notification_channel_id@ value value=(@string/default_notification_channel_id) from AndroidManifest.xml:22:13-68 is also present at [:react-native-firebase_messaging] AndroidManifest.xml:39:13-29 value=(). Suggestion: add 'tools:replace="android:value"' to element at AndroidManifest.xml:20:9-22:71 to override.

The library react-native-firebase_messaging has already set this value: https://rnfirebase.io/messaging/usage#notification-channel-id

Also: to override add 'tools:replace="android:value"' to element at AndroidManifest.xml:20 which is probably: <application>

[abdulbasitha]

could explain the procedure to create a custom channel ?

[Dallas62]

You can install the version on dev then follow the documentation here: https://github.com/zo0r/react-native-push-notification/tree/dev#channel-management-android

[rarenatoe]

This guide for a custom channel is only for localnotifications and schedulenotifications, how would i use this channel for remote notifications?

Furthermore, I can't find a working example of PushNotification.createChannel() in the dev branch

[rarenatoe]

@abdulbasitha I found this to be a fitting solution: https://stackoverflow.com/a/49662201/1006201

however @Dallas62, it doesn't create a channel just by setting a default channel id in the android manifest. And when I call PushNotification.createChannel() as specified in https://github.com/zo0r/react-native-push-notification/tree/dev#channel-management-android it says it's not a function.

[Dallas62]

@abdulbasitha I found this to be a fitting solution:

https://stackoverflow.com/a/49662201/1006201

however @Dallas62, it doesn't create a channel just by setting a default channel id in the android manifest.

And when I call PushNotification.createChannel() as specified in https://github.com/zo0r/react-native-push-notification/tree/dev#channel-management-android it says it's not a function.

Hi @rarenatoe

The method createChannel is on dev branch, you must install dev branch to use it, not yet released. Then you can set it as default channel OR specify the channel in the FCM payload.

OR

You can also send data-only notification (like mentioned above), and trigger notification with the parameters of localNotification on the default channel id.

     onNotification: function (notification) {
         if(!notification.userInteraction) {
            PushNotification.localNotification(notification.data);
         }
     },

[abdulbasitha]

how to install dev branch package?

[Dallas62]

yarn add zo0r/react-native-push-notification#dev

or

npm install zo0r/react-native-push-notification#dev

[Dallas62]

This version will be released in the next two weeks

[abdulbasitha]

This version will be released in the next two weeks

finally, I got a solution, but onNotification not working in the background why ?

[Dallas62]

Hi @abdulbasitha https://github.com/zo0r/react-native-push-notification/issues/1529#issuecomment-659475646

[abdulbasitha]

@abdulbasitha I found this to be a fitting solution: https://stackoverflow.com/a/49662201/1006201 however @Dallas62, it doesn't create a channel just by setting a default channel id in the android manifest. And when I call PushNotification.createChannel() as specified in https://github.com/zo0r/react-native-push-notification/tree/dev#channel-management-android it says it's not a function.

Hi @rarenatoe The method createChannel is on dev branch, you must install dev branch to use it, not yet released. Then you can set it as default channel OR specify the channel in the FCM payload. OR You can also send data-only notification (like mentioned above), and trigger notification with the parameters of localNotification on the default channel id.

     onNotification: function (notification) {
         if(!notification.userInteraction) {
            PushNotification.localNotification(notification.data);
         }
     },

@Dallas62 ok it's almost working properly, but how to override 'do not disturb' ? push notification channel not accepting in some devices any solution?

[Dallas62]

Do not disturb should not be override, and this library doesn't allow it. Implement it directly in the Java of your Application if you need this. For the second question, if Android doesn't support channel (old-version) you should look at: https://firebase.google.com/docs/cloud-messaging/http-server-ref

[abdulbasitha]

The Solution For Custom Notification Sound

1. Install the package yarn add zo0r/react-native-push-notification#dev or npm install zo0r/react-native-push-notification#dev and follow other instructions

2. Setup your firebase for messaging service and fetch your channelId (23432xxxx)

3. update your AndroidManifest

   
   <meta-data
           android:name="com.google.firebase.messaging.default_notification_channel_id"
           android:value="@string/default_notification_channel_id" />

and add this to android/app/src/main/res/values/strings.xml
    `  <string name="default_notification_channel_id">23432xxxx(Your Chanel id )</string>`

4. implementation part 
create a channel like this,

PushNotification.createChannel( { channelId: "23432xxxx", channelName: "FCM SERVICE ", channelDescription: "A custom channel to categorise your custom notifications", soundName: "soundnotification", importance:4, // 4 vibrate: true, }, (created) => console.log(createChannel returned '${created}')created, false means it already existed. );

5 . add your custom notification sound to the path `android/app/src/main/res/raw/customsound.mp3`
**if row folder does not exist create one** 

6. store your token for notification 

PushNotification.configure({ largeIcon: "ic_launcher", smallIcon: "ic_notification", onRegister: function (token) { console.log(token) //

  },
  onNotification: function (notification) {
  },
  senderID: "23432xxxx",
  playSound: true,
  soundName: 'customsound',
  permissions: {
    alert: true,
    badge: true,
    sound: true
  },
  popInitialNotification: true,
  requestPermissions: true
});

7. check your custom sound with help of Cloud Messaging service :) 
and thank you @Dallas62  for Your Support :)

[rarenatoe]

It is working for remote notifications now, but it doesn't work on the foreground despite my configuration:

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.bvdashmobile" 
    xmlns:tools="http://schemas.android.com/tools">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.WAKE_LOCK" />
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

    <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="false" android:theme="@style/AppTheme">

        <meta-data tools:replace="android:value" android:name="com.google.firebase.messaging.default_notification_channel_id" android:value="@string/default_notification_channel_id" />
        <meta-data android:name="com.dieam.reactnativepushnotification.notification_channel_name" android:value="YOUR NOTIFICATION CHANNEL NAME"/>
        <meta-data android:name="com.dieam.reactnativepushnotification.notification_channel_description" android:value="YOUR NOTIFICATION CHANNEL DESCRIPTION"/>

        <!-- Change the value to true to enable pop-up for in foreground (remote-only, for local use ignoreInForeground) -->
        <meta-data android:name="com.dieam.reactnativepushnotification.notification_foreground" android:value="true"/>
        <!-- Change the value to false if you don't want the creation of the default channel -->
        <meta-data android:name="com.dieam.reactnativepushnotification.channel_create_default" android:value="true"/>
        <!-- Change the resource name to your App's accent color - or any other color you want -->
        <meta-data android:name="com.dieam.reactnativepushnotification.notification_color" android:resource="@color/white"/>
        <!-- or @android:color/{name} to use a standard color -->

        <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationActions" />
        <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationPublisher" />
        <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationBootEventReceiver">
            <intent-filter>
                <action android:name="android.intent.action.BOOT_COMPLETED" />
            </intent-filter>
        </receiver>

        <service android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService" android:exported="false">
            <intent-filter>
                <action android:name="com.google.firebase.MESSAGING_EVENT" />
            </intent-filter>
        </service>

        <activity android:name=".MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize" android:windowSoftInputMode="adjustResize" android:screenOrientation="portrait">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

[rarenatoe]

In fact, I am getting zero notification on foreground. The device still gets the message, but not push notification. Thanks for the patience @Dallas62.

[rarenatoe]

Even calling local notifications is not even working.

[abdulbasitha]

Even calling local notifications is not even working.

try this it will work!

 onNotification: function (notification) {
        if(!notification.userInteraction) {
        PushNotification.localNotification({
            id: 0,
            largeIcon: "ic_launcher",
            smallIcon: "ic_notification",
            color: "red",
            vibrate: true,
            vibration: 300,
            channelId: xxxxx,
            onlyAlertOnce: false,
            invokeApp: true,
            title: notification.title,
            message: notification.message,
            playSound: true,
            soundName: "default",
            number: 10,
          });
        }
      },

[AhmedHF]

@abdulbasitha please plz final example for your solution custom sound for remote notification

[abdulbasitha]

@abdulbasitha please plz final example for your solution custom sound for remote notification

This is the final LINK

If you need notification in foreground try is LINK

[rarenatoe]

Even calling local notifications is not even working.

try this it will work!

 onNotification: function (notification) {
        if(!notification.userInteraction) {
        PushNotification.localNotification({
            id: 0,
            largeIcon: "ic_launcher",
            smallIcon: "ic_notification",
            color: "red",
            vibrate: true,
            vibration: 300,
            channelId: xxxxx,
            onlyAlertOnce: false,
            invokeApp: true,
            title: notification.title,
            message: notification.message,
            playSound: true,
            soundName: "default",
            number: 10,
          });
        }
      },

thank you @abdulbasitha you're a god!

[AhmedHF]

if(!notification.userInteraction) { PushNotification.localNotification({ id: 0, largeIcon: "ic_launcher", smallIcon: "ic_notification", color: "red", vibrate: true, vibration: 300, channelId: xxxxx, onlyAlertOnce: false, invokeApp: true, title: notification.title, message: notification.message, playSound: true, soundName: "default", number: 10, }); } },

sound in remote notification when app in forurground not work why?? defult sound is played @abdulbasitha @Dallas62

[Akash9923]

@abdulbasitha @Dallas62 PushNotification.createChannel is undefined i am gettting this error how to fix?

[Dallas62]

@abdulbasitha @Dallas62 PushNotification.createChannel is undefined i am gettting this error how to fix?

Probably an upgrade of the version will fix that.

[Akash9923]

@Dallas62 worked delteing and installing node modules again. Thanks for quick reply

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.