firebase – React-Native play a sound notification when the app is closed or within the background IOS

0
1
firebase – React-Native play a sound notification when the app is closed or within the background IOS


My challenge is that the notification sound works when the app is within the foreground, however it would not play when the app is within the background, despite the fact that the notification is acquired and displayed

1-Allow Capabilities in Xcode

2. Configure APNs in Firebase

  • Add your .p8 APNs Auth Key to the Firebase Console → Undertaking Settings → Cloud Messaging

3. Set up Required Libraries

npm set up @notifee/react-native @react-native-firebase/app @react-native-firebase/messaging
cd ios && pod set up && cd ..

4. Add Your Customized Sound File

  • Create a sound file in .caf, .aiff, or .wav

  • Instance: custom_sound.wav

  • Place it in ios/YourAppName/

  • Drag it into Xcode challenge navigator → guarantee “Copy if wanted” is checked

5. Ship Notification with Sound by way of FCM

{
  "to": "",
  "notification": {
    "title": "New Alert",
    "physique": "Sound take a look at",
    "sound": "custom_sound.wav"
  },
  "precedence": "excessive"
}
  • Do not embody silent: true or content_available: true

6. React Native: Show in Foreground

import messaging from '@react-native-firebase/messaging';
import notifee, {
  AndroidImportance,
  AndroidVisibility,
  EventType,
} from '@notifee/react-native';


async perform sendLocalNotification(message) {
  await notifee.requestPermission({ sound: true, alert: true });

  const channelId = await notifee.createChannel({
    id: 'default',
    identify: 'Default Channel',
    sound: 'default',
    significance: AndroidImportance.HIGH,
    visibility: AndroidVisibility.PRIVATE,
  });

  // Show a notification
  await notifee.displayNotification({
    title: message.notification.title,
    physique: message.notification.physique,
    information: message?.information,
    ios: {
      sound: 'custom_sound.wav',
    },
    android: {
      channelId,
      significance: AndroidImportance.HIGH,
      visibility: AndroidVisibility.PRIVATE,
      sound: 'custom_sound',
    },
  });
}

  const unsubscribe = messaging().onMessage(async notification => {
      sendLocalNotification(notification);
    });
 notifee.onForegroundEvent(async information => {
        const { kind, element } = information;
        swap (kind) {
          case EventType.DISMISSED:
            await notifee.cancelNotification(element.notification.id);
            break;
          case EventType.PRESS:
            handelNotification(
              element.notification.information,
              element.notification.id,
            );
            break;
        }
      });

7. Request Permission

useEffect(() => {
    NotifyPermissions();
}, []);

 async perform NotifyPermissions() {
    await messaging().requestPermission();
   }

This works completely for me; there isn’t any want for anything.

  "dependencies": {
    "@notifee/react-native": "^9.1.8",
    "@react-native-firebase/app": "18.6.1",
    "@react-native-firebase/messaging": "18.6.1",
    "react": "18.2.0",
    "react-native": "0.74.3",

}

LEAVE A REPLY

Please enter your comment!
Please enter your name here