I'm creating react native app on googleplay im using react native pushNotification and react-native-sound
everything is work proper till the last update when I upload bundle on googleplay notification sound play with the sound that I use in one of react navigation page old AAB work fine but after updating this issue appears
when I clear data in android , notification sound works fine without any conflict
notification config is in App.js every thing is code proper and responsive
notification
PushNotification.localNotificationSchedule({
id: notificationId,
title: lang.notificationRemaind,
message: reminder.name, // (required)
date: new Date(Date.now() + diffSeconds),
allowWhileIdle: true,
repeatType: 'week',
channelId: 'Reminder',
priority: 'max',
soundName: 'remind',
});
sound
try {
// play the file tone.mp3
SoundPlayer.playSoundFile('firework', 'mp3')
} catch (e) {
console.log(`cannot play the sound file`, e)
}
In my case, I did not use the library for notification sound.
Android:
step1: Add my_sound.mp3 file android/app/src/main/res/raw/my_sound.mp3
step2:
PushNotification.localNotificationSchedule({
title: lang.notificationRemaind,
message: reminder.name,
playSound: 'true'
soundName: 'my_sound.mp3',
});}
step3: for local notification add playSound and SoundName in channel.
PushNotification.createChannel(
{
channelId: 'Test',
channelName: 'test-channel',
soundName: 'my_sound.mp3'
}
)
IOS:Add my_sound.mp3 file in xcode as pod level.
Related
I am using react-native-push-notification library to send local notifications from my ios app. I have setup deeplink using react navigation. I have also managed the local push notification to deeplink into specific app screen on click. But this requires me to set the in the message property. This means the resulting lo shows the URL in its display. This is ugly and I would like to hide the URL. Any pointers?
Here is how i schedule local notification
PushNotification.localNotificationSchedule({
title: "main title",
subtitle: "fake sub title",
message: "example://detail/one",
bigText: "My big text that will be shown when expanded",
date: new Date(Date.now() + 10 * 1000),
allowWhileIdle: false,
});
Here is my onNotification code
onNotification: function (notification) {
console.log("NOTIFICATION:", notification);
let isClicked = notification.data.userInteraction === 1
if (isClicked) {
Linking.openURL(notification.message)
}
notification.finish(PushNotificationIOS.FetchResult.NoData);
},
Now this results in the example://detail/one url being displayed in notification. How do i achieve this?
Not exactly a solution to the above issue. But I switched to Notifee for local push notifications. And it just worked! So much easier to install and very minimal configuration needed. Was just an intuitive I expected the notification library to be.
I developed react native application with rnfirebase and notifee for sending the push notification. foreground is working properly, message is displayed only once. but the background notification is displaying twice like one is from messaging().setBackgroundMessageHandler and another one is android's default push notification. First message is from default push notification and next one is from firebase messaging. So how do I remove android's default push notification. I'm also checked that first default notification is not using the firebase messaging and notifee. It's comes from outside of react native like android's native push notification
The notifications that you are seeing are most likely one from firebase and another from Notifee.
In my project I was handling the notifications that were coming from firebase via firebase.messaging().onMessage and inside this listener I was showing a local notification using Notifee so that the notification shows in the foreground.
async showNotificationInForeground(message: FirebaseMessagingTypes.RemoteMessage) {
const { messageId, notification, data } = message
const channelId = await Notifee.createChannel({
id: messageId,
name: 'Pressable Channel',
importance: AndroidImportance.HIGH,
})
await Notifee.displayNotification({
title: notification?.title || '',
body: notification?.body || '',
data,
android: {
channelId,
importance: AndroidImportance.HIGH,
pressAction: {
id: messageId,
},
smallIcon: 'ic_stat_name',
localOnly: true,
},
})
}
However what was happening was that I was calling this showNotificationInForeground method to show the local Notifee notification on both firebase's background and messaging listeners ie: firebase.messaging().onMessage and firebase.messaging().setBackgroundMessageHandler
So what I ended up doing was only calling the showNotificationInForeground method in onMessage listener and not in setBackgroundMessageHandler, which resulted in showing the local notification in the foreground, and the firebase notification in the background.
If this is not the case for you, you are most likely registering an extra notification receiver inside your AndroidManifest.xml file which is causing the duplication
I had the same problem, where there were two notifications a) 1 from notifee (which I wanted to keep) b) from FCM (which I didnt want).
Sending a data only message from my custom server solved the issue. Below is a snippet of the serverside for sending data only message :
const admin = require("firebase-admin");
// Do other stuff like create an express server to listen and trigger sending message
// Note dont forget to to initialize the app
await admin.messaging().sendToDevice(
tokens, // ['token_1', 'token_2', ...]
{
data: {
owner: "Me",
user: "My Friend",
},
},
{
// Required for background/quit data-only messages on iOS
contentAvailable: true,
// Required for background/quit data-only messages on Android
priority: "high",
}
);
You can use other methods as well, just make sure that FCM doesnt include notification and is data only.
i am using #react-native-firebase/messaging for push notification in my application.
and for custom notification sound i use #notifee/react-native this.
my current notification code is :
import messaging from '#react-native-firebase/messaging';
import notifee from '#notifee/react-native';
await notifee.createChannel({
id: 'custom-sound',
name: 'System Sound',
sound: 'notification.mp3',
});
messaging().onMessage((remoteMessage) => {
notifee.displayNotification({
title: remoteMessage.notification.title,
body: remoteMessage.notification.body,
android: {
channelId: 'custom-sound',
},
});
});
the above code works fine when the application is open on the screen so that my custom notification sound works perfectly.
but when the app is running in the background then the notification sound is the default (system default)
so how i can set the custom notification sound in all cases.
Sound related to the channel so delete your channel (custom-sound) and recreate it. Once channel created you can not edit the android channel so if you are going to edit a channel you need to delete and recreate it.
I'm trying to get Local Notifications working in an Ionic Vue app (using capacitor).
I did get scheduling notifications working, but now i want to listen to clicks on the notification.
in main.js I bind LocalNotifications to this.$LocalNotifications:
import { Plugins } from '#capacitor/core';
const { LocalNotifications } = Plugins;
Vue.prototype.$LocalNotifications = LocalNotifications;
in my Root component App I have this:
created() {
console.log('Created!')
document.addEventListener('deviceready', () => {
console.log('ready');
this.$LocalNotifications.addListener('localNotificationReceived', (notification) => {
console.log('Notification action received', notification);
});
}, false);
}
When I build and run on the ios-emulator, i get the following output in my log:
APP ACTIVE
To Native Cordova -> Badge load Badge1248600129 ["options": []]
⚡️ [log] - onscript loading complete
To Native Cordova -> Device getDeviceInfo Device1248600130 ["options": []]
⚡️ To Native -> Storage get 90127150
⚡️ TO JS {"value":null}
⚡️ [log] - Created!
To Native Cordova -> LocalNotification launch LocalNotification1248600131 ["options": []]
To Native Cordova -> LocalNotification ready INVALID ["options": []]
⚡️ To Native -> LocalNotifications addListener ⚡️ [log] - ready
90127151
⚡️ WebView loaded
⚡️ To Native -> App addListener 90127152
When I schedule a Notification, the notification does show up, but I think something doesn't go quite well when i'm adding the listener:
INVALID ["options":[]]
Does anyone have any idea how to solve this?
Or does anyone have a code example of working notifications in an Ionic Vue app?
Kind regards,
Bram
To sum up:
You should use localNotificationActionPerformed instead of localNotificationReceived. The latter is called when notifications are displayed, while the other is listening to actions performed on a notification (as it's stated in the docs), that of course includes clicking / tapping on it.
So your code would look like this:
this.$LocalNotifications.addListener('localNotificationActionPerformed', (notification) => {
console.log('Notification action received', notification.actionId);
});
...which would output "tap". Since you did write 'Notification action received', I assume you wanted to get the action, so I added .actionId after 'notification', which only by itself would be logged as [object Object] or as the object tree.
You also asked for code example, so here it comes:
// 1.
import { LocalNotifications } from '#capacitor/local-notifications';
// 2.
await LocalNotifications.requestPermissions();
// 3.
await LocalNotifications.registerActionTypes({
types: [
{
id: 'your_choice',
actions: [
{
id: 'dismiss',
title: 'Dismiss',
destructive: true
},
{
id: 'open',
title: 'Open app'
},
{
id: 'respond',
title: 'Respond',
input: true
}
]
}
]
});
// 4.
LocalNotifications.schedule({
notifications: [
{
id: 1,
title: 'Sample title',
body: 'Sample body',
actionTypeId: 'your_choice'
}
]
});
// 5.
LocalNotifications.addListener('localNotificationActionPerformed', (notification) => {
console.log(`Notification ${notification.notification.title} was ${notification.actionId}ed.`);
});
1: Since your question, plugins have been placed into their own npm packages, so one needs to install #capacitor/local-notifications and import from there.
2: You should make sure that notifications are allowed, ask for permissions if needed.
3: Tapping was your question's topic, but you can define a lot more than that.
4: This is how you actually create & send a notification at once.
5: Logs "Notification Sample title was taped / opened / dismissed / responded.", according to the given action (but not always according to grammar).
Finally, if someone's just getting into local notifications, check out the really nice documentation on what else (a whole lot more!) can be done and also watching this video might give one a head start. At least that's what I did.
I am trying to issue Scheduled Local Notifications in order to remind user to do something even when the user is not working with the App. I want to do it in a React-Native app.
I checked the answers provided here but those answers are using Expo CLI Not React Native CLI.
Local Schedule Notification react native
React native local notifications
Also there are some packages out there like 'react-native-notifications' and 'react-native-push-notifications' on Github but I could not get a result from them. check them here https://github.com/zo0r/react-native-push-notification and here https://github.com/wix/react-native-notifications
How should I issue a Scheduled Local Notification ?
NotificationsAndroid.localNotification({
title: "Local notification",
body: "This notification was generated by the app!",
extra: "data"
});
You can use :
import PushNotification from 'react-native-push-notification';
PushNotification.localNotificationSchedule({
message: "Notification Message",
date: new Date(Date.now() + 60 * 1000), // in 60 secs
});
You can use react-native-push-notification with specific time
let now = new Date();
now.setDate(now.getDate())
now.setHours(15);
now.setMinutes(58);
now.setMilliseconds(0);
PushNotification.localNotificationSchedule({
//... You can use all the options from localNotifications
message: "My Notification Message", // (required)
repeatType: 'day',
date: new Date(now),
allowWhileIdle: true, // (optional) set notification to work while on doze
});