React-native-firebase: Notification default/custom sound not working on IOS when app is closed/on background

[erez-guesty]

"react-native": "0.59.9"
"react-native-firebase": "^5.5.4"

Using react-native-firebase API to add default/custom sound to a notification:
.setSound('my_sound.mp3'); or .setSound('default');

When the IOS app is on foreground - the sound is working, can hear it.

When the IOS app is on background/closed - it's not working, no sound.

(Android working like a charm in both cases...)

IOS Podfile

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'
target 'MyApp' do
  # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
  # use_frameworks!
 rn_path = '../node_modules/react-native'
  # Pods for MyApp
  # Required by RNFirebase
  pod 'Firebase/Core', '~> 6.3.0'
  pod 'Firebase/Messaging', '~> 6.3.0'
  pod 'Fabric', '~> 1.10.2'
  pod 'Crashlytics', '~> 3.13.2'
  pod 'yoga', path: "#{rn_path}/ReactCommon/yoga/yoga.podspec"
  pod 'React', path: rn_path, subspecs: [
        'Core',
        'CxxBridge',
        'DevSupport',
        'RCTActionSheet',
        'RCTAnimation',
        'RCTGeolocation',
        'RCTImage',
        'RCTLinkingIOS',
        'RCTNetwork',
        'RCTSettings',
        'RCTText',
        'RCTVibration',
        'RCTWebSocket',
      ]
 # React Native third party dependencies podspecs
  pod 'DoubleConversion', :podspec => "#{rn_path}/third-party-podspecs/DoubleConversion.podspec"
  pod 'glog', :podspec => "#{rn_path}/third-party-podspecs/glog.podspec"
  # If you are using React NatiMainApplicationve <0.54, you will get the following error:
  # "The name of the given podspec `GLog` doesn't match the expected one `glog`"
  # Use the following line instead:
  #pod 'GLog', :podspec => "#{rn_path}/third-party-podspecs/GLog.podspec"
  pod 'Folly', :podspec => "#{rn_path}/third-party-podspecs/Folly.podspec"
  pod 'RNSVG', :path => '../node_modules/react-native-svg'
  pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
  pod 'RNKeychain', :path => '../node_modules/react-native-keychain'
  pod 'react-native-splash-screen', :path => '../node_modules/react-native-splash-screen'
  pod 'react-native-camera', :path => '../node_modules/react-native-camera'
  pod 'react-native-maps', :path => '../node_modules/react-native-maps'
  pod 'RNGoogleSignin', :path => '../node_modules/react-native-google-signin'
  pod 'RNReactNativeDocViewer', :path => '../node_modules/react-native-doc-viewer'
  pod 'react-native-image-picker', :path => '../node_modules/react-native-image-picker'
  pod 'ReactNativePermissions', :path => '../node_modules/react-native-permissions'
  pod 'RNCAsyncStorage', :path => '../node_modules/@react-native-community/async-storage'
  pod 'rn-fetch-blob', :path => '../node_modules/rn-fetch-blob'
  pod 'react-native-pdf', :path => '../node_modules/react-native-pdf'
end

post_install do |installer|
  installer.pods_project.targets.each do |target|
    if target.name == "React"
      target.remove_from_project
    end
  end
end

[jblancoh]

for some reason, this way it works to me
you must create a payload that send the next structure

for example:

const payload = {
            notification: {
              title: 'Chat',
              body: text,
              sound: 'default'
            }
          }
admin.messaging().sendToDevice(token, payload)

[stale[bot]]

Hello 👋, to help manage issues we automatically close stale issues.
This issue has been automatically marked as stale because it has not had activity for quite some time. Has this issue been fixed, or does it still require the community's attention?

This issue will be closed in 15 days if no further activity occurs.
Thank you for your contributions.

[anooj1483]

This issue is not only in iOS, it's there in android too. If app is in background, notifications will play in default sound. No custom sound is played.

[stale[bot]]

Hello 👋, to help manage issues we automatically close stale issues.
This issue has been automatically marked as stale because it has not had activity for quite some time. Has this issue been fixed, or does it still require the community's attention?

This issue will be closed in 15 days if no further activity occurs.
Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this is still present in the latest release, please feel free to create a new issue with up-to-date information.

[erez-guesty]

still an issue...

[Dung1128]

iOS: still an issue

[meliodev]

Android: still not working :(

[jblancoh]

@meliodev Have you checked the notification channel?
What React-Native-firebase version are you using?

[meliodev]

Hi @jblancoh I am using react-native-firebase 5.6.0
The sound is working perfectly when app is in foreground, but not in background and when closed.
Here is my code :

    this.unsubscribeFromNotificationListener = firebase.notifications().onNotification(notification => {

        const channel = new firebase.notifications.Android.Channel(
          "channelId",
          "Channel Name",
          firebase.notifications.Android.Importance.Max
        )
          .setDescription("A natural description of the channel")
          .setSound('ringtone');

        firebase.notifications().android.createChannel(channel);

        const localNotification = new firebase.notifications.Notification(
          {
            show_in_foreground: true,
            show_in_background: true,
          }
        )
          .setNotificationId(notification.notificationId)
          .setTitle(notification.title)
          .setSubtitle(notification.subtitle)
          .setBody(notification.body)
          .setData(notification.data)
          .setSound(channel.sound)
          .android.setChannelId("channelId")
          .android.setAutoCancel(true)
          .android.setVibrate(3000)
          .android.setColor("#93eafe") // you can set a color here
          .android.setGroup(notification.notificationId)
          .android.setPriority(firebase.notifications.Android.Priority.High);

        firebase.notifications().displayNotification(localNotification)
    });

    /*
    * If app is in background, listen for when a notification is clicked / tapped / opened as follows:
    * */
    this.notificationOpenedListener = firebase.notifications().onNotificationOpened((notificationOpen) => {
      const { action, notification } = notificationOpen;
      firebase.notifications().removeDeliveredNotification(notification.notificationId);
  });

  /*
  * If app is closed, check if it was opened by a notification being clicked / tapped / opened as follows:
  * */
  const notificationOpen = await firebase.notifications().getInitialNotification();
  if(notificationOpen) {
    const { title, body } = notificationOpen.notification;
    this.showAlert(title, body);
  }

[meliodev]

@jblancoh Please do you have an idea about this issue ? I am struggling since 2 days to make it work :'(

[jblancoh]

@meliodev I only use this config https://github.com/invertase/react-native-firebase/issues/2634#issuecomment-539558929, I haven't other idea about it though I will take time to test again

[anooj1483]

Add the custom_sound.mp3 file in raw folder. Then add the following line in the manifest

<meta-data android:name="com.google.firebase.messaging.default_notification_sound" android:resource="@raw/custom_sound"/>

Send notification with custom_sound name.

const payload = {
notification: {
title: 'Test',
body: Testing Sound,
sound: 'custom_sound.mp3'
}
}
admin.messaging().sendToDevice(token, payload)

This worked for me in Android.

[meliodev]

Finally the solution I was using worked :) Strangely it worked by using Admin SDK through cloud function. Using firebase console was working only with foreground.

[joeljerushan]

Try to send your notification via Firebase ADMIN SDK. That will work

const payload = {
       notification: {
            title: update.title,
            body: update.body,
            icon: "default",
            badge: '1',
            sound: 'default' // notification sound 
        },
};

admin.messaging().sendToDevice('TOKEN_OR_TOKENS', payload)
    .then( () => { return true; }).catch(function() {
        console.log('error sendToDevice() ')
        return null;
 });