I am implementing push notifications in my application using the react-native-firebase library, but I have a question. I need to mount custom notifications in my app, and assemble them from React without the server sending me Title / Body, I need these notifications with the app in the background and fully closed.
I made the following attempt, but to no avail.
In my index I registered my class
AppRegistry.registerHeadlessTask(
"RNFirebaseBackgroundMessage",
() => bgMessaging
);
In my JS class, I treat the following way
import firebase from "react-native-firebase";
import type { NotificationOpen } from "react-native-firebase";
export default async (notificationOpen: NotificationOpen) => {
if (notificationOpen) {
const notification = new firebase.notifications.Notification()
.setTitle("Android Notification Actions")
.setBody("Action Body")
.setNotificationId("notification-action")
.setSound("default")
.android.setChannelId("notification-action")
.android.setPriority(firebase.notifications.Android.Priority.Max);
// Build an action
const action = new firebase.notifications.Android.Action(
"snooze",
"ic_launcher",
"My Test Action"
);
// This is the important line
action.setShowUserInterface(false);
// Add the action to the notification
notification.android.addAction(action);
// Display the notification
firebase.notifications().displayNotification(notification);
}
return Promise.resolve();
};
But I was not successful. Push notifications sent from firebase with fixed title and body work normally.
Thanks and sorry for my english.
Hi Please try with below,
Change .setNotificationId("notification-action") to .setNotificationId(notificationOpen.notification.notificationId)
Change .android.setChannelId("notification-action") to .android.setChannelId(notificationOpen.notification.android.channelId)
Related
Attempting to let Firebase persist authentication within the app.js of React Native by doing the following:
There is a sign in page that envokes auth() sign in via Firebase, which works fine, and redirects to the home page via navigation.replace("Home"); however, once the app is closed and relaunched on the emulator, it redirects back to sign in.
This is seemingly what the App.js looks like, I assume that the AuthStateChanged would be prevalent as depicted below, however, user is not accessed in App.js as it is established in SignIn.js, when the Firebase credentials are sent, but I assume it would be similar to this layout?
const App = () => {
var initialRoute = null
React.useEffect(() => {
const unsubscribe = auth().onAuthStateChanged(user => {
if(user) {
initialRoute = "Home"
}
else {
initialRoute = "SignIn"
}
})
return unsubscribe
}, []);
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown: false,
}}
initialRouteName={initialRoute}
>
The reason it needs to affect the initial route, and not just redirect anyone who reopens to the home page, is because after registration, there are extra steps included that adjust the database, such as location mapping and etc., therefore, the redirection has to occur within the initial route.
Thanks for your assistance.
This is not how you build a navigation flow with react-navigation. But that's no problem since theres a guide here on the official react-navigation side on how to do that: https://reactnavigation.org/docs/auth-flow/
Fixed by setting two different returns within App.js, one for if the user is authenticated with Firebase that sets the initialRoute to "Home", and one for else that sets it to "SignUp", seems to work fine.
In my ionic5 app I am sending events like so
export class Logger extends FirebaseAnalytics{
...
aFunction(tapTarget: string){
const logData = {target: tapTarget};
this.log(EventType.TAP, logData);
}
Based on this
but I do not see the event parameters in my firebase console? I see the events but not the payload that the app is sending... ?
Is there a magic setting on firebase console to see those values?
Or is the code above not working?
You are not supposed to extend FirebaseAnalytics.
You must inject it in your constructor.
import { FirebaseAnalytics } from '#ionic-native/firebase-analytics/ngx';
constructor(private firebaseAnalytics: FirebaseAnalytics) {}
this.firebaseAnalytics.logEvent('event_name', {param: 'value'})
.then((res: any) => console.log(res))
.catch((error: any) => console.error(error));
Make sure the Ionic Native wrapper is installed alongside the Cordova plugin itself.
ionic cordova plugin add cordova-plugin-firebase-analytics
npm install #ionic-native/firebase-analytics
According to the documentation: https://rnfirebase.io/messaging/usage I want to display the background notification from firebase but with custom configuration, like a custom icon, custom data, and custom function on tapping on a notification.
// index.js
import { AppRegistry } from 'react-native';
import messaging from '#react-native-firebase/messaging';
import App from './App';
// Register background handler
messaging().setBackgroundMessageHandler(async remoteMessage => {
console.log('Message handled in the background!', remoteMessage);
});
AppRegistry.registerComponent('app', () => App);
How to customize this?
https://github.com/invertase/react-native-firebase/issues/3826#issuecomment-648903659
As per this statement and also referring the doc, react native firebase version 6+ messaging only supports cloud integration and simple notification display.
If you need extra configuration while displaying a notification, you should use any other local notification library like "Notifee"
I have been using Expo to develop a react-native app, The functionality I am currently trying to implement is to share a link with friends on platforms such as fb messenger/whatapp or even normal texts and when they click this link it will launch my app to a specific page using the parameters.
After extensive research online - I’ve come to a blocker, following expo’s documentation I defined a scheme for my app - when I press share everything works correctly a message is created and I’m able to share content but only as string.
I am using react-natives Share library to share to an app and I’m using Expo to provide me with the link.
Ideally my first goal is to get the app opening using the Expo Link before I explore further into adding more functionality to the link.
Share.share({
message: "Click Here to View More! " + Linking.makeUrl( ' ' , { postkey : "7a5d6w2x9d6s3a28d8d});
url: Linking.makeUrl( ' ' , { pkey : gkey });
title: 'This post is amazing',
})
.then((result) =>{
console.log(result)
if(result === 'dismissedAction'){
return
}
})
.catch((error) => console.log(error))
In the root of my app I have also defined the event handlers: App.js
_handleRedirect=(event)=> {
let {path,queryParams} = Linking.parse(event);
Alert.alert(`queryparams : ${event} path : ${path} `)
this.props.navigation.navigate("Post_Detail",{key:queryParams.postkey})
}
}
componentDidMount() {
let scheme = 'nxet'
Linking.getInitialURL()
.then(url => {
console.log("App.js getInitialURL Triggered")
// this.handleOpenURL({ url });
})
.catch(error => console.error(error));
Linking.addEventListener('url', ({url}) => this._handleRedirect(url));;
}
componentWillUnmount() {
Linking.removeEventListener('url', this.handleOpenURL);
}
When I share the link to Whatsapp, Facebook Messenger or even just messages or notes it appears as myapplink://, I try to enter this into the browser and instead of asking me to open my app - it does a google search.
Please note I am attempting to have this working on Android Device and facing this issue
Is there something I am doing incorrectly?
Any help is much appreciated. Thanks.
You can not open external links, means other than http, https on Android. But you can on iOS. In order to be able to open your expo links, you need proper anchor tags on android. You can create html mails and give it a try, you will see it is gonna work on Android as well.
I am creating an app using Angular 4, that should receive push notifications from time to time. I have managed to make the notification appear, but I wasn't able to customize its styles and its content.
What I am looking for is a way to change the background color of my notifications so that I can make them blink to call the user's attention.
Here is my code:
public showNotification(title: string, text: string): Notification {
// Check if notifications are supported
const notificationOptions = {
body: `<div style="color:red"><p>${text}</p></div>`,
icon: 'assets/img/logo_onyo-simples.png',
badge: 'assets/img/logo_onyo-simples.png',
vibrate: [200, 100, 200]
};
try {
// Throws an exception if the browser doesn't support a notification.
const notification = new Notification(title, notificationOptions);
notification.onclick = (e: any) => {
window.focus();
notification.close();
};
return notification;
}
catch (e) {
if (e.name === 'TypeError') {
this.raven.captureBreadcrum({
message: 'This browser does not support notifications',
level: 'warning',
category: 'notification'
});
}
else {
this.raven.captureException(e);
throw e;
}
}
}
I've tried to add a test HTML tag to the notification body, but that didn't work. Is there a way to do this?
Note: the reason because I am not using Toastr notifications is because I want the user to receive my notifications even if the browser is minimized or behind another application.
Note 2: here is an example of the type of notification that I am using: https://tests.peter.sh/notification-generator/.
I believe that what you're trying to do is not possible, at least according to the spec. There are no properties nor methods for passing / setting of visual presentation.
I'm speculating here, but it could be because browser vendors want to prevent exactly the type of behavior you're trying to create. Maybe you can style a notification with good taste and design. However, this would also open the door to people creating bad, annoying and straight up predatory notifications. It would open the door to dark patterns.
Although, it's possible that this kind of stylistic flexibility will be added in the future. I just don't think so.