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
orcontent_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",
}