Onesignal pushNotification in react native - react-native

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]'

Related

Open deep link url when clicking on FCB notification for both iOS and Android

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);
});
}, []);

How to bring a react native(expo) app to the foreground when user recieves a notification

I have set up expo notification wherein my app listens to incoming notifications and can execute tasks in the background but my question is how do I bring the app to the foreground upon receiving a notification without the user pressing on the notification first?
Something like this:
import * as Notifications from "expo-notifications";
import * as TaskManager from "expo-task-manager";
const BACKGROUND_NOTIFICATION_TASK = "BACKGROUND-NOTIFICATION-TASK";
TaskManager.defineTask(
BACKGROUND_NOTIFICATION_TASK,
({ data, error, executionInfo }) => {
console.log("Received a notification in the background!");
// Bring the app to the foreground
}
);
Notifications.registerTaskAsync(BACKGROUND_NOTIFICATION_TASK);
The closest thing that you can do, is to create a local notification and encourage the user to press the notification to put the app to the foreground. But the exact thing you are asking is not possible with Android or either with iOS.

React native firebase messaging notification sound not change in background

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.

React native firebase notification shows while the app is running

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.

Launch React Native App from Background on Notification Received

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?