React-native-fcm: Custom sound for FCM notifications

[yolosaucisson]

Hi,

I would like to know if someone made a custom sound when received?

Sincerely,

[evollu]

it is certainly doable. put the sound file in your project and use sound: 'yoursound.mp3'
There are many native example about how to put the sound file in right place.

[yolosaucisson]

in res/raw/ i saw but impossible to play it...
I added it at : android/app/res/raw/cork.mp3 and android/app/src/main/res/raw/cork.mp3 to try it...

[evollu]

set break point here and see if your resouceId is set
https://github.com/evollu/react-native-fcm/blob/master/android/src/main/java/com/evollu/react/fcm/FIRLocalMessagingHelper.java#L167

[yolosaucisson]

Oh thanks! But how to put a break point with react-native? Thanks :)

[evollu]

I use Android Studio.

[yolosaucisson]

Oh alright, can you update the exemple in the repo and put a sound that works for you?

[evollu]

updated

[crHand]

Hi @evollu

Does this work for remote notifications pushed from firebase console?

Because I added the .mp3 file in raw folder, but I'm not sure of how to construct the notification payload on firebase console..

I've tried adding "sound": "notifsound.mp3" to 'notification' payload with no results :(

[evollu]

@crHand I'm not sure. ask Firebase team?
I use custom_notification all the time for android

[evollu]

@yolosaucisson any updates?

[n0umankhan]

Dear evollu i tried to find raw folder but that doesn't exist. I created my own raw folder 'android/app/src/main/res/raw/sound.mp3'. but still sound is not playing i tried with default keyword but default sound is also not playing. I'm using current version

[evollu]

if 'default' doesn't work, mostly likely it has to do with some of your phone setting. try a different device or emulator

[n0umankhan]

Hey Evollu thanks for giving me the direction. I just check my sound setting and there notification level was on 0 mean it was mute. After increasing notification volume i'm able to listen sound Thanks for the help

[FabioNani]

Hello everyone.
I am using Air 28.0 in Animate + Firebase + FCM from MyFlashLabs and I can not perform any custom sound, but when I use the "default" it plays normally.

How to solve?

[i3IGm]

How to Custom sound for FCM IOS ? @evollu

[evollu]

@i3IGm you drag an mp3 file into xcode project, e.g. bell.mp3.
so it will include it in your mp3 file into binary.

then in your notification payload you put sound: 'bell'

there is a working example in example project

[DurgaManickam]

@evollu I'm trying to send clevertap push notification with custom sound. I have added the sound files to the below path "/Users/Per/ProjectNa/android/app/src/main/res" of react native android project. Notification with default sound is working but trying to the send the notification with custom sound (eg:alarm_sound.mp3) is not playing the sound. I'm receiving the notification without sound. Not sure what is happening. Please let me know where i am going wrong.

[evollu]

@DurgaManickam what's your payload

[kusalshrestha]

@evollu I've added the file in res/raw folder. This is my payload for android.

{
  "to" :  { notification_payload },
  "data":  {
    "title": "Android Notification",
    "message": "Push Notification in android",
    "sound": "medium_alert.mp3",
    "custom_notification": {
        "title": "React",
        "body":  "React notification",
        "sound": "medium_alert.mp3"
    }
    }
}

But still not working.

[illestrater]

@evollu I'm also experiencing the same issue.

I have sound: 'notification.mp3' in my payload. This worked when using react-native-push-notification, but I can't use that library any longer as it broke after I upgraded to SDK 27.

I've used custom channels, custom_notification, every combination of payloads, and nothing is working. I've also tried without .mp3. This is my received payload:

collapse_key: "com.cuenative"
custom_notification: "{"collapse_key":"com.cuenative","sound":"notification.mp3","channel":"DEFAULT","icon":"ic_notification","soundname":"notification.mp3","action":"fcm.ACTION.HELLO"}"
fcm: {
action: null
body: "damn combo"
color: null
icon: "ic_notification"
tag: null
title: "testing"
}
from: "113842406425"
google.message_id: "0:1540217438724426%4dbcc7dd4dbcc7dd"
google.sent_time: 1540217438719

[illestrater]

@evollu This is a good reference: https://stackoverflow.com/questions/50567164/custom-notification-sound-not-working-in-oreo

[manoj2166]

Hi Guys,
Please do not use .mp3 file.
it will work if you will use a .caf file. To convert any .mp3 file to a .caf file use below command in ios terminal afconvert clockalarm.mp3 clockalarm.caf -d ima4 -f caff -v
i.e
"sound": "filename.caf"

[phatlaunchdeck]

afconvert clockalarm.mp3 clockalarm.caf -d ima4 -f caff -v

@manoj2166 Thank you so much, this works perfectly for me!

[fukemy]

Hi Guys,
Please do not use .mp3 file.
it will work if you will use a .caf file. To convert any .mp3 file to a .caf file use below command in ios terminal afconvert clockalarm.mp3 clockalarm.caf -d ima4 -f caff -v
i.e
"sound": "filename.caf"

not working to me, android - sharp aquos s2
{
"to": "cZYcDC-GNbk:APA91bHfS4UlDXIFYPsas_y_FAKXENXo_DBxTKUeuZUpC_ZpPk9YIAGVqSWldjQJG7bihfA1B93LTeA6Sbei5nERpO5XT2mTHHZZIR47k4NdSXoVTXAD_bBS9QR-hzY0GZTkw3TThmB7",
"notification": {
"body": "test body1",
"title": "test title",
"sound": "default_sound.caf",
"android_channel_id": "BluetoothLeServiceChannel"
},
"data": {
"body": "test body",
"Type": 0,
"title": "test title"
}
}

[95deepan]

afconvert clockalarm.mp3 clockalarm.caf -d ima4 -f caff -v

@manoj2166 Thank you so much, this works perfectly for me!

Can you please share your request payload?

[phatlaunchdeck]

@95deepan Here's the payload that is sent from our PHP backend:

Please note that the custom sound and show_in_foreground is working for iOS only, I had come to countless posts both here on GitHub and StackOverflow finding a working solution for Android but no luck so I came up with my own dirty workaround.

On Android for show in foreground to work I had to capture the notification event and display a custom modal to show the information to user, then use react-native-sound-player to play the custom sound I wanted.

[95deepan]

@phatlaunchdeck actually in my case I am able to play the custom sound via some sound-player library by identifying the data from payload. But when the app is closed or running in background, then I am not able to get the custom sound. For few devices default notification sound is coming and for few no sound is coming at all.

[phatlaunchdeck]

@95deepan Yeah it's the same for me on Android too, such a big headache, I even tried to modify the native code of this library but no luck so far

[95deepan]

How come slack and many other apps are throwing notifications with custom sound? Unlike one time sound configuration, in those apps we can even change those sounds whenever needed after installing the app. How that is possible?

[phatlaunchdeck]

@95deepan I believe those were built with native code instead of React Native

[95deepan]

@phatlaunchdeck Yeah they might be built with native code. Can't we have the same in react-native-fcm, since we can see 60% of java code below here 👇 .

[phatlaunchdeck]

@95deepan That's why we're begging @evollu so bad to re-open this repo in this thread: #1131

[embpdaniel]

I'm having trouble playing a custom sound on Android too. I'm using @react-native-firebase/messaging": "7.0.1". I'm a little confused as to what the library under that version is capable of. Does this version support custom sounds? If so, is there some step by step instruction somewhere on how to do it?

What I've tried so far:

1. I placed my custom_sound.caf inside of android/app/src/main/res/raw
2. I sent myself a test push notification via Postman, using this payload:

{
    "to": "<token here>",
    "notification": {
        "body": "Some body",
        "sound": "custom_sound.caf"
    },
    "data": {
        "field1": "value1",
        "field2": "value2"
    },
    "content_available": true,
    "priority": "high"
}

1. I put my app in the background
2. I sent the push
3. I got the push notification and it plays a default sound and not my "custom_sound.caf"

What am I missing here? If the firebase messaging library doesn't support a custom sound with this version (7.*) would be great to get that clarified. Thanks

Cc: @evollu