I am working on react native application and my requirement is to launch specific screen on Notification received.
Notification is working fine in all state i.e. Foreground or background.
I am using below library:
react-navigation
#react-native-firebase/messaging
react-native-push-notification
Below is the code for handling notification :
messaging().setBackgroundMessageHandler(async remoteMessage => {
console.log('Message handled in the background!', remoteMessage);
let text = {
title: remoteMessage.data.title,
body: remoteMessage.data.body,
}
notif.cancelAll();
notif.localNotif(text);
NavigationService.navigate('Contact', { userName: 'Lucy' })
});
Also wrote a navigation code on notification received method referring
https://reactnavigation.org/docs/4.x/navigating-without-navigation-prop
I can see app navigate to particular screen but its not launching app.
Can anyone help me with this?
Related
Hi I am using Onesignal for my application to send push notifications to my application, I am able to send the push notification and getting to my app, when i click on notification nothing is happening it is just disappearing, How can i open the application and after login to application i need to got to notifications screen, Is there anything i need to configure in onesignal and my native code. As of now i have done for android. Below is the code.
In app.js:
useEffect(() => {
OneSignal.setAppId("myAppId");
OneSignal.setNotificationOpenedHandler((notification) => {
console.log("OneSignal: notification opened:", notification);
});
}, []);
In build.gradle:
implementation 'com.onesignal:OneSignal:[4.0.0, 4.99.99]'
Hello i am Working Push Notification with the help of this https://github.com/zo0r/react-native-push-notification my notification is working fine but i want to navigate the the screen when i tap on notification ! my notifiaction working fine please help me out with any suggestion i used stack navigator in my routes
onNotification: function (notification) {
console.log("NOTIFICATIONss:", notification);
if (notification.userInteraction) {
console.log("Clicked on Notification"). // here i clicked on notification
this.props.navigation.push("Home"). // here i want navigation
}
if (!notification.userInteraction) {
PushNotification.localNotification({
foreground:false,
channelId: notification.channelId,
channelName: "xShare", //
title: notification.title,
message: notification.message,
largeIconUrl: notification.smallIcon,
onOpen: () => { this.props.navigation.navigate("ActiveNeed") },//nothing working
})
notification.finish(PushNotificationIOS.FetchResult.NoData);
}
},`
If your app is opened through clicking on the notification bubble, the navigation props should be unavailable when the onNotification() function runs.
Therefore, please create a navigation reference for the app. You may follow the guidelines by React-Navigation for more details.
https://reactnavigation.org/docs/navigating-without-navigation-prop
You can use the following code for navigation in onNotification() after you added the navigation-reference.
import * as RootNavigation from './path/to/RootNavigation.js';
RootNavigation.navigate('TargetPage', { someParams: 'someValue' });
I have a react-native app using react-native-firebase-messaging to send push notifications to android and iOS devices. I'm trying to embed a deep link in the FCM message so that users clicking on the notification will be routed to a specific section of the app. I've seen this SO post which shows how the link property can be added but it's specific to android. How can I add a deep link url to notifications sent to both iOS and Android devices?
Without having deep link you can use notification click handler of react-native-firebase-messaging and pass the data in the notification payload which screen you want to navigate.
Check this link for documentation and make sure you have register background handler in index.js as shown here
useEffect(() => {
// Assume a message-notification contains a "type" property in the data payload of the screen to open
messaging().onNotificationOpenedApp(remoteMessage => {
console.log(
'Notification caused app to open from background state:',
remoteMessage.notification,
);
navigation.navigate(remoteMessage.data.type);
});
// Check whether an initial notification is available
messaging()
.getInitialNotification()
.then(remoteMessage => {
if (remoteMessage) {
console.log(
'Notification caused app to open from quit state:',
remoteMessage.notification,
);
setInitialRoute(remoteMessage.data.type); // e.g. "Settings"
}
setLoading(false);
});
}, []);
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've made an app using react native firebase 5.6.0. I'm getting notifications from firebase and displaying them with this piece of code:
this.notificationListener = firebase
.notifications()
.onNotification((notification: Notification) => {
notification.android
.setChannelId('channel')
.android.setSmallIcon('ic_launcher')
.android.setPriority(firebase.notifications.Android.Priority.Max)
.android.setColor('#121243');
firebase.notifications().displayNotification(notification);
});
The problem is push notifications showing even when the app is on foreground and running. I want them to only show when the app is on background.
I've solved the problem using AppState
this.notificationListener = firebase
.notifications()
.onNotification((notification: Notification) => {
if (AppState.currentState != 'active') {
notification.android
.setChannelId('channel')
.android.setSmallIcon('ic_launcher')
.android.setPriority(firebase.notifications.Android.Priority.Max)
.android.setColor('#121243');
firebase.notifications().displayNotification(notification);
}
});
So if the app is in active state the notification won't show.