How can I add 3 custom sounds in react native iOS?

Question

I want to add 3 custom sounds in react native iOS.
Have any of you ever solved it?

Currently, when I test the FCM Notification by adding and grouping a voice file (.wav) to the iOS project folder, one of the added sounds is coming out.

For example, suppose you have sound files sound01, sound02, sound03, when the backend sends an FCM notification, I want the specified sound to sound at that time.

I solved Android but I don't know how to set in iOS environment.
is iOS has channel like android?

Answer 1

I solved it with the code below in the source receiving Firebase Cloud Messaging (FCM).

// remote message processing function
const sendLocalNotificationWithSound = remoteMessage => {

   if (Platform.OS === 'ios') {
      PushNotificationIOS.addNotificationRequest({
        id: remoteMessage.notification.notificationId
          ? remoteMessage.notification.notificationId
          : new Date().toString(),
        title: remoteMessage.notification.title,
        subtitle: remoteMessage.notification.message 
          ? remoteMessage.notification.message 
          : '',
        body: remoteMessage.notification.body,
        sound: remoteMessage.notification.sound
      })
    } else {
      PushNotification.localNotification({
        channelId: remoteMessage.notification.android.channelId,
        id: remoteMessage.notification.notificationId
          ? remoteMessage.notification.notificationId
          : new Date().toString(),
        title: remoteMessage.notification.title,
        message: remoteMessage.notification.body,
        soundName: remoteMessage.notification.android.sound,
        playSound: true,
        smallIcon: 'ic_stat_ic_notification',
        color: '#FFFFFF',
        largeIcon: '',
        largeIconUrl: '',
        vibrate: true,
        groupSummary: true
      })
    }

  }


// remote message receiving
React.useEffect(() => {
  const getMessage = messaging().onMessage(remoteMessage => {
    sendLocalNotificationWithSound(remoteMessage)      
  })

  return () => getMessage()
}, [])

First, the react-native-push-notification and @react-native-community/push-notification-ios libraries must be installed.

react-native-push-notification
@react-native-community/push-notification-ios

function messaging() in code is @react-native-firebase/messaging library. you have to import module like:

import messaging from '@react-native-firebase/messaging'

on head in code

The official documentation for react-native FCM (firebase cloud messaging) is here -> REACT NATIVE FIREBASE

---

FCM sending side JSON sample file
(I test with postman)

{
    "to": "your fcm token here",
    "notification": {
        "title": "your notification title",
        "body": "your notification description",
        "sound": "your notification sound name (Runs on iOS)",
        "android_channel_id": "your android channel id here (Runs on Android)",
        "priority": "high",
        "contentAvailable": true,
        "mutableContent": 1
    },
    "data": {
       ... // if you need data property
    }
}