React native firebase notification shows while the app is running - react-native

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.

Related

Onesignal pushNotification in 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]'

useURL hook expo-linking for background app

The expo-linking React Native package has a hook named useURL that isn't working for me when the app is in the background. From the docs it Returns the initial URL followed by any subsequent changes to the URL. The problem I'm having with my managed expo app is that the hook doesn't work when the app is already open in the background. Here is the hook:
export default function App() {
const isLoadingComplete = useCachedResources();
const url = Linking.useURL();
useEffect(() => {
Alert.alert(url ? url.substring(20) : 'null');
}, [url]);
if (!isLoadingComplete) {
return null;
} else {
return (
...
);
}
}
If I open the URL exp://exp.host/#myprofile/myproject?a=bwhen the app is closed, I get an Alert as expected. If the app is in the background, the Alert doesn't go off. I've tested on an iOS emulator and a physical Android. Any solutions? Note that similar problems happen with Linking.addEventListener().

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?

Can I get push notifications with React Native when app is closed?

I'm trying to get notifications and update launcher icon badge on IOS with React-Native/RNFirebase when app is closed. But unfortunately it seems RNFirebase doesn't have any support for it. onNotification() listener doesn't seem working when app is closed. (background modes/push notifications are enabled on XCode)
Is there any workaround for that to update launcher icon badge when notification received and app is closed?
If your app is closed, you can check if it was opened by a notification using:
firebase.notifications().getInitialNotification()
here is a sample using it:
const notificationOpen = await firebase
.notifications()
.getInitialNotification();
if (notificationOpen && notificationOpen.notification) {
let { title, body, data } = notificationOpen.notification;
if (!title && !body) {
title = data.title;
body = data.body;
}
const notification: Notification = notificationOpen.notification;
//firebase.notifications().removeDeliveredNotification(notification.notificationId);
this.handleNotificationActions(
title,
body,
data,
navigator,
t,
"background"
);
}

Notifications - Clear all notifications in the android notification tray

I'm sending multiple notifications to my app. What I want to achieve is whenever a user clicks one notification then all notifications in the notification tray disspear.
I've tried adding
notification.android.setAutoCancel(true)
which does the trick for only one notification (the one which is being clicked)
I've also tried:
firebase.notifications().removeAllDeliveredNotifications()
which doesn't have any effect.
How can I achieve this?
Here's my full code:
componentDidMount() {
firebase.notifications().removeAllDeliveredNotifications()
this.notificationDisplayedListener = firebase.notifications().onNotificationDisplayed((notification) => {
});
this.notificationListener = firebase.notifications().onNotification(async (notification) => {
// Process your notification as required
notification.android.setAutoCancel(true)
firebase.notifications().removeAllDeliveredNotifications()
}
async componentWillMount() {
this.notificationDisplayedListener = firebase.notifications().onNotificationDisplayed((notification) => {
});
this.notificationListener = firebase.notifications().onNotification((notification) => {
});
this.notificationDisplayedListener();
this.notificationListener();
}
Try moving the code for removing notifications
(removeAllDeliveredNotifications()) from onNotification listener to onNotificationOpened listener. There might be a race condition as you are trying to remove notifications on arrival.
Also because you want to clear notifications when user taps on one notification.
PS. Keep the notification listeners in either componentDidMount or componentWillMount, not both.