React-native: permission to allow audio in Android - android

How do I give permission to allow audio in Android app without going to settings of phone?
I am using push notification with firebase cloud message, when there is received notification but no notification sound. If I go to phone's settings and turn on notifications for app then get an audio notification

Have a try by creating a custom notification channel using the react-native-push-notification npm package.
Create an android notification channel with your requirements like sound, notification importance, etc.
For example:
PushNotification.createChannel(
{
channelId: "channel-id", // (required)
channelName: "My channel", // (required)
channelDescription: "A channel to categorise your notifications", // (optional) default: undefined.
playSound: false, // (optional) default: true
soundName: "default", // (optional) See `soundName` parameter of `localNotification` function
importance: 4, // (optional) default: 4. Int value of the Android notification importance
vibrate: true, // (optional) default: true. Creates the default vibration patten if true.
},
(created) => console.log(`createChannel returned '${created}'`) // (optional) callback returns whether the channel was created, false means it already existed.
);
and add the notification channel-id name in the firebase.json to receive notification from firebase cloud messaging.
Like:
// <projectRoot>/firebase.json
{
"react-native": {
"messaging_android_notification_channel_id": "channel-id"
}
}
Check out the official docs for more information.
https://github.com/zo0r/react-native-push-notification

Related

Firebase custom notification sound not playing

I'm working with Firebase Cloud Messaging, sending notifications from mongoDB to react-native application using react-native-push-notification.
Notification is working, but I can't play the custom notification I added in my android app in /res/raw folder.
My code:
const message = {
"to": userFinded.deviceToken,
"notification": {
"title": 'Body test',
"color": '#ff9d00',
"sound": 'my_sound', //Not working
},
};
FCM Documentation
I also tried to follow the documentation of react-native-push-notification and did this:
PushNotification.localNotification({
/* Android Only Properties */
channelId: 'fcm_fallback_notification_channel', // (required) channelId, if the channel doesn't exist, notification will not trigger.
soundName: 'my_sound.mp3', // (optional) Sound to play when the notification is shown. Value of 'default' plays the default sound. It can be set to a custom sound such as 'android.resource://com.xyz/raw/my_sound'. It will look for the 'my_sound' audio file in 'res/raw' directory and play it. default: 'default' (default sound is played)
});
PushNotification.createChannel(
{
channelId: 'fcm_fallback_notification_channel', // (required)
channelName: 'My channel', // (required)
soundName: 'my_sound.mp3', // (optional) See `soundName` parameter of `localNotification` function
});
I tried different versions:
soundName: 'my_sound.mp3';
soundName: 'my_sound';
soundName: 'android.resource://com.xyz/raw/my_sound';
soundName: 'android.resource://com.seeed/raw/my_sound';
Sometimes the notification sound is the default one, sometimes I don't have any sound.
Any help please?
you need to send android_channel_id also
like this
const message = {
"to": userFinded.deviceToken,
"notification": {
"title": 'Body test',
"color": '#ff9d00',
"sound": 'my_sound.mp3',
"android_channel_id": "fcm_fallback_notification_channel"
},

PushNotification setSound is not working properly for android os 8

I am using react native firebase library for push notification and i am playing two different sound for two different notification so i am playing some .mp3 sound for one notification and default for other one so problem is app is playing only that sound which is coming in first notification for app and for rest notification playing the first played sound so I think the issue is notification information is not updating that's what it is playing the same sound for all the notification which app got for first notification.even we are getting right information in notification data but it is not updating the sound.
Version:
react-native-firebase:"4.3.8"
react-native:"0.56.1"
yes I am getting data from firebase and below is my code to set Sound for notification.
this.notificationListener = firebase
.notifications()
.onNotification((notification: Notification) => {
const channel = new firebase.notifications.Android.Channel(
'test-channel',
'Test Channel',
firebase.notifications.Android.Importance.Max
).setDescription('My apps test channel');
if (notification && notification.data) {
const data = notification.data;
if (data && data.messageKey) {
//here I set the sound on basis of notification data to the channel
...
}
}
// Create the channel
firebase.notifications().android.createChannel(channel);
// Process your notification as required
notification
.android.setChannelId('test-channel')
.android.setSmallIcon(Images.logoSmall);
firebase.notifications()
.displayNotification(notification);
});
1) In android, add your custom sound file to [project_root]/android/app/src/main/res/raw
2) Create notification channel
const channel = new firebase.notifications.Android.Channel('channel_name', 'channel_name', firebase.notifications.Android.Importance.High)
.setDescription('channel_name')
3) Add sound into notification .setSound('default')
firebase.notifications().android.createChannel(channel);
const localNotification = new firebase.notifications.Notification({
sound: 'default',
show_in_foreground: true,
})
.setNotificationId(new Date().valueOf().toString())
.setTitle(noti_payload.title)
.setSound('default')
.setBody(noti_payload.message)
.setData({
now: new Date().toISOString(),
payload: noti_payload,
})
.android.setAutoCancel(true)
.android.setBigText(noti_payload.message)
.android.setLargeIcon('ic_launchers')
.android.setVibrate(1000)
.android.setColor('#74c900')
.android.setColorized(true)
.android.setChannelId('channel_name') // e.g. the id you chose above
.android.setSmallIcon('ic_launchers') // create this icon in Android Studio
.android.setPriority(firebase.notifications.Android.Priority.High);
firebase
.notifications()
.displayNotification(localNotification)
Important Note:-
After doing above step please uninstall app and delete bundles, because some time cached bundle asset contain default sound and changes are not reflected.
every time you change sound you need to build bundle again
Please check following link also
https://rnfirebase.io/docs/v4.0.x/notifications/reference/Notification
setSound() was deprecated in API 26. Use NotificationChannel.setSound() instead.

How to list all the notifications in a view in react-native

I am trying to build an app which receives notification from the server. I have configured FCM with my backend server which sends out the notifications, and every notification thats being sent from the server, i receive it on my emulator.
What i am struggling to understand is how do i list all the received notifications and display them in a view.
I am imagining how whatsapp does, you get a notification and then on click of that notification, you'll be taken to that notification full view. I presume there's an onClick action or similar to achieve this, but what i am struggling to understand is how do i list all the notifications in a particular view?
Or is it like notifications are totally separate than what can be listed in a view?
If thats the case, perhaps i will have to make another api call to fetch all the notifications.
I am using FCM and now trying to make it work on Android.
Any help is appreciated.
Thanks,
Vikram
id: new Date().valueOf().toString(), // (optional for instant notification)
title: notif.fcm.title, // as FCM payload
body: notif.fcm.body, // as FCM payload (required)
sound: "bell.mp3", // "default" or filename
priority: "high", // as FCM payload
click_action: "com.myapp.package", // as FCM payload - this is used as category identifier on iOS.
badge: 10, // as FCM payload IOS only, set 0 to clear badges
number: 10, // Android only
ticker: "My Notification Ticker", // Android only
auto_cancel: true, // Android only (default true)
large_icon:
"https://image.freepik.com/free-icon/small-boy-cartoon_318-38077.jpg", // Android only
icon: "ic_launcher", // as FCM payload, you can relace this with custom icon you put in mipmap
big_text: "Show when notification is expanded", // Android only
sub_text: "This is a subText", // Android only
color: "Gray", // Android only
vibrate: 300, // Android only default: 300, no vibration if you pass 0
wake_screen: true, // Android only, wake up screen when notification arrives
group: "group", // Android only
ongoing: true, // Android only
my_custom_data: "my_custom_field_value", // extra data you want to throw
lights: true, // Android only, LED blinking (default false)
show_in_foreground: true // notification when app is in foreground (local & remote)
Above is what i use to presentLocalnotification, do you mean to say that have to use the id to display it in a view?
And how would you do it?

Delete previous notification(s) using react-native-push-notification

I'm writing an app that sends a local push notification every fifteen minutes while a background timer is running via react-native-push-notification. If notification n isn't acted on by the user, when notification n+1 is pushed, I'd like to delete notification n.
The things I've tried so far are to set popInitialNotification to true when running PushNotification.configure() and setting ongoing to true when calling PushNotification.localNotification(). I've also tried adding an id when calling localNotification() and then calling PushNotification.cancelLocalNotifications({id: myId}), but the documentation explicitly says that cancelLocalNotifications() only cancels scheduled notifications (and I'm pretty sure it means only future ones).
componentWillMount() {
PushNotification.configure({
permissions: {
alert: true,
badge: true,
sound: true
},
popInitialNotification: true,
});
}
doPushNotification() {
if (AppState.currentState !== 'active') {
PushNotification.localNotification({
vibration: 500,
message: 'my message',
ongoing: true,
});
}
}
Currently I'm only working on the Android version, but soon I'll work on the iOS version, so a general solution (or the solution for each) would be most helpful.
I'm not totally sold on react-native-push-notification, either, if there's a better React Native library out there; I just haven't found one.
Edit
I figured it out for Android. Setting the id when calling PushNotification.localNotification() to the same value as the previous notification will overwrite the notification.
I'm still installing XCode on my Mac, so I can't test the current behavior on iOS just yet. However, the react-native-push-notification readme says that id is an Android-only option (as is ongoing). I may still need help getting the iOS notifications to do what I want.
The docs for react-native-push-notification state that you can cancel a ios local notification using userInfo like this:
PushNotification.localNotification({
...
userInfo: { id: '123' }
...
});
PushNotification.cancelLocalNotifications({id: '123'});
I have tested this, and it works.
For android, this somehow worked:
Creating the notification :
PushNotification.localNotificationSchedule({
message: message ,
date: new Date(date),
repeatType: "minute",
id: JSON.stringify(id),
userInfo: { id: JSON.stringify(id) }
});
PushNotification.cancelLocalNotifications({ id: id});
Having the id stringified worked with cancelling the android push notification.
you can add this code inside handleAppStateChange(appState)
if (appState === 'active') {
PushNotification.cancelAllLocalNotifications()
}
if you are useing react-native-push-notification lib.
then you can use this code in componentDidMount section
PushNotification.getDeliveredNotifications((all) => {
console.log(all, "notification liast");
PushNotification.removeAllDeliveredNotifications();
});
here you can get all notification list and clear all list after open your app.
these code work for me in ANDROID device (i did not test it in IOS device)
Below code works on both iOS and Android :
We need to stringify id so that it works in android and the date must be created from Date class not from some library like moment.
const LocalNotificationSchedule = (id, afterSec, message) => {
PushNotification.localNotificationSchedule({
id: id+'',
message: message,
date: new Date(Date.now() + afterSec * 1000),
playSound: true,
soundName: 'default',
vibrate: true,
vibration: 300,
playSound: true,
soundName: 'default',
ignoreInForeground: false
})
}
const CancelLocalNotifications = (id) => {
PushNotification.cancelLocalNotifications({id: id+''})
}
Try to delete the notification with cancelLocalNotifications.

React Native Push Notifications with react-native-fcm

I'm using this library.
I'm attempting to get push notifications to display in the notifications tray on my Nexus 5 (android 6.0.1). Using React Native 0.42, React Native CLI 2.0.1. I'm developing on Ubuntu 14.04.
I'm using firebase. I go into my console > notifications > send a message > specific device (which I get from remote debugging console.log, below).
I am logging notifications, as you can see in code, and they do get to my device, as I can see them in the logs.
But, I don't know how to display them in the notifications tray. Looking through the docs and searching forums, it seems they should show up by default.
componentDidMount() {
FCM.requestPermissions(); // for iOS
FCM.getFCMToken().then(token => {
console.log(token)
// store fcm token in your server
});
this.notificationListener = FCM.on(FCMEvent.Notification, async (notif) => {
console.log(notif)
});
});
It seems that "custom_notification" is required to display the notification in the top tray. I added this to my payload:
"custom_notification": {
"body": "test body",
"title": "test title",
"color":"#00ACD4",
"priority":"high",
"icon":"ic_notif",
"group": "GROUP",
"id": "id",
"show_in_foreground": true
}
So, I think the app must receive the notification, parse out the data, and add this custom_notification parameter.
How about the following in your constructor:
FCM.requestPermissions(); // for iOS
FCM.getFCMToken().then(token => {
console.log(token)
// store fcm token in your server
});
this.notificationListener = FCM.on(FCMEvent.Notification, async (notif) => {
// do some component related stuff
console.log(notif);
//alert(notif.fcm.body);
FCM.presentLocalNotification({
id: "UNIQ_ID_STRING", // (optional for instant notification)
title: "My Notification Title", // as FCM payload
body: notif.fcm.body, // as FCM payload (required)
sound: "default", // as FCM payload
priority: "high", // as FCM payload
click_action: "ACTION", // as FCM payload
badge: 10, // as FCM payload IOS only, set 0 to clear badges
number: 10, // Android only
ticker: "My Notification Ticker", // Android only
auto_cancel: true, // Android only (default true)
large_icon: "ic_launcher", // Android only
icon: "ic_launcher", // as FCM payload, you can relace this with custom icon you put in mipmap
big_text: "Show when notification is expanded", // Android only
sub_text: "This is a subText", // Android only
color: "red", // Android only
vibrate: 300, // Android only default: 300, no vibration if you pass null
tag: 'some_tag', // Android only
group: "group", // Android only
picture: "https://google.png", // Android only bigPicture style
ongoing: true, // Android only
my_custom_data: 'my_custom_field_value', // extra data you want to throw
lights: true, // Android only, LED blinking (default false)
show_in_foreground: true // notification when app is in foreground (local & remote)
});
});
FCM.subscribeToTopic('test_topic');

Categories

Resources