I need to remove old notification form status bar in ionic 3.
I have used firebase plugin( "#ionic-native/firebase": "^4.20.0" and "cordova-plugin-firebase": "2.0.5"). Here is app.component.ts file
import { Firebase } from '#ionic-native/firebase';
constructor(private platform: Platform,
statusBar: StatusBar,
splashScreen: SplashScreen,
public firebase: Firebase) {
platform.ready().then(() => {
this.firebase.clearAllNotifications().then(clearData => {
console.log('removed all notification');
}).catch(err => {
console.log('error in removing notification');
});
});
}
and gives error something like
ERROR: Unhandled Promise rejection: undefined is not an object (evaluating 'this.fcm.clearAllNotifications().then') ; Zone: <root> ; Task: setTimeout ; Value: TypeError: undefined is not an object (evaluating 'this.fcm.clearAllNotifications().then')
how can I achieve this functionality, can anyone please help me.
Thank you.
#ionic-native/firebase": "^4.20.0"
has no method available called clearAllNotifications() you have to download the latest version or need to add manually here
Related
I'm new to React Native. I am sending a link to the app with "push notification". When I tested it, everything works both in the background and when the application is closed. But every time I open the application, I get the following warning. How can I resolve this situation?
WARN Possible Unhandled Promise Rejection (id: 0):
TypeError: null is not an object (evaluating 'remoteMessage.data')
My codes:
import React, { useEffect } from 'react'
import { Button, Linking, View } from 'react-native'
import styles from './styles/SplashStyles'
import messaging from '#react-native-firebase/messaging'
import { DASHBOARD } from '../navigation/routesNames'
const Splash = ({ navigation }) => {
useEffect(async () => {
messaging()
.subscribeToTopic('users')
.then(() => console.log('Subscribed to topic!'));
//Notification caused app to open from background state:'
messaging()
.onNotificationOpenedApp(remoteMessage => {
if (remoteMessage.data.url) {
Linking.openURL(remoteMessage.data.url)
}
});
//Notification caused app to open from quit state
messaging()
.getInitialNotification()
.then(remoteMessage => {
if (remoteMessage.data.url) {
Linking.openURL(remoteMessage.data.url)
}
});
}, [])
return (
<View style={styles.container}>
<Button
title={"Start"}
onPress={() => {
navigation.reset({
index: 0,
routes: [{ name: DASHBOARD }]
})
}}
/>
</View>
)
}
export default Splash
I think it is because at initialization, the value for remoteMessage is not yet defined when it is rendered specifically via remoteMessage.data, causing the error. If you don't mind introducing a dependency on the lodash package, there's a helper called 'has' that checks if path exists. For example:
if (_.has(remoteMessage, 'data.url') { ....
I'm trying to implement notifications with Capacitor FCM plugin in my Android app. However, when running the following code in Android Studio, I get this error message: "TypeError: Cannot read property 'getToken' of undefined".
I'm using Ionic 5 with Vue 3.
App.vue
async pushInit() {
const fcm = new FCM();
alert("...");
try {
PushNotifications.addListener("registrationError", (error) => {
console.log(`error on register ${JSON.stringify(error)}`);
}),
PushNotifications.addListener(
"pushNotificationReceived",
(notification) => {
console.log(`notification ${JSON.stringify(notification)}`);
}
),
PushNotifications.addListener(
"pushNotificationActionPerformed",
async (notification) => {
console.log("notification succeeded");
}
),
PushNotifications.register();
const fcmToken = await fcm.getToken();
alert(fcmToken);
console.log("token:" + fcmToken);
} catch (e) {
console.log(e);
}
}
I already ran npx cap sync android.
Solved it by the following steps:
Added in data return:
fcm: new FCM()
Added the following in Android Studio:
MainActivity.java: import com.getcapacitor.community.fcm.FCMPlugin; and then inside the init callback add(FCMPlugin.class);
I am getting the following error when uploading an image to Firebase:
Error: No Firebase App '[DEFAULT]' has been created - call firebase.initializeApp()
Here is my code:
App.js
import * as Firebase from 'firebase';
componentDidMount() {
Firebase.initializeApp(firebaseConfig);
}
Profile.js
import * as Firebase from 'firebase';
import rnFb from '#react-native-firebase/storage';
uploadImage = localUri =>
new Promise((resolve, reject) => {
const localUri2 = Platform.OS === 'ios' ? localUri.replace('file://', '') : localUri;
const fbUri = Firebase.storage().ref();
rnFb().ref(localUri2).putFile(fbUri)
.then(
() => { resolve(); }
)
.catch(
(e) => { reject(e); }
);
});
It's failing at the .putFile line.
I don't understand what the problem is because I am calling .initializeApp() in App.js
UPDATE 12/21
I added console.log(Firebase.apps.length); right before rnFb().ref(localUri2).putFile(fbUri) and the output is 1...very strange indeed.
...and if I do exactly as the error asks and call firebase.initializeApp() right before rnFb().ref(localUri2).putFile(fbUri) I get the error Error:
Firebase: Firebase App named '[DEFAULT]' already exists
Help!!
My understanding is that the Firebase SDK used internally inside #react-native-firebase is independent of the ordinary Firebase SDK from firebase.
It can be exposed using:
import firebase from '#react-native-firebase/app';
// OR
import { firebase } from '#react-native-firebase/storage';
Applying these changes (and simplifying your code), leaves you with the following:
import storage, { firebase } from '#react-native-firebase/storage';
// can possibly be somewhere else
firebase.initializeApp(firebaseConfig);
uploadImage = localUri => {
const localUri2 = Platform.OS === 'ios' ? localUri.replace('file://', '') : localUri;
return storage().ref('/path/to/upload/to').putFile(localUri2)
}
Rather than use "client initialization" using firebase.initializeApp(), you can also use "native initialization"
for Android and iOS.
Have you followed the API documentation? I can't seem to find anywhere in the docs that you need to manually call initializeApp()
I think your fbUri is wrong. The param has to be a string.
For ex:
firebase
.storage()
.ref('remote_path') // remote path where you want to store
.putFile(
'local/ok.jpeg' // local file
)
.then(successCb)
.catch(failureCb);
I'm new to React Native and doing a project following some online tutorials. In given step, I have created a Firebase database (also added some dummy data and set a standard rule). In my React Native project, to fetch data after user being authenticated from Firebase, I'm doing following action :
import firebase from 'firebase';
export const loadInitialContacts = () =>
{
const {currentUser} = firebase.auth();
return (dispatch) => {
firebase.database.ref(`/users/${currentUser.uid}/people`)
.on('value', snapshot => {
dispatch({type: 'INITIAL_FETCH', payload: snapshot.val()});
});
};
};
I'm calling the above method from my list view Component :
componentWillMount()
{
this.props.loadInitialContacts();
}
Authentication to Firebase pass successfully, at the time of fetching data from Firebase it throws exception :
Error: TypeError: TypeError: _firebase2.default.database.ref is not a function
What I'm doing wrong?
Looking into the package.json, I'm on this following version :
"dependencies": {
"firebase": "^5.0.2",
"lodash": "^4.17.10",
"react": "16.3.1",
"react-native": "^0.55.4",
...
},
I faced a similar error.
My original code was:
const rootRef = firebase.database.ref().child('react');
However, I changed it to
const rootRef = firebase.database().ref().child('react');
and it worked.
Change firebase.database().ref from firebase.database.ref
I got error when I tried to build ionic app.
Actually it wasn't a problem when I build in local, but when I check build status in ionic website, I got a bellow error.
using
angular5, ionic3
typescript: node_modules/angularfire2/firebase.app.module.d.ts, line: 10
Class 'FirebaseApp' incorrectly implements interface 'FirebaseApp'. Property
'automaticDataCollectionEnabled' is missing in type 'FirebaseApp'.
L9: export declare const FirebaseAppConfigToken: InjectionToken;
L10: export declare class FirebaseApp implements FBApp {
L11: name: string;
I have no idea. Should I downgrade firebase version?
UPDATE
I edited firebase.app.module.d.ts like the answer, but I got another error now. I edited .gitignore like this.
node_modules/*
!node_modules/angularfire2/firebase.app.module.d.ts
npm WARN angularfire2#5.0.0-rc.6.0 requires a peer of
#firebase/app#^0.1.6 but none was installed.
npm ERR! Invalid tar header. Maybe the tar is corrupted or it needs to
be gunzipped?
npm ERR! A complete log of this run can be found in: npm ERR!
/home/gitlab-runner/.npm/_logs/2018-04-20T07_49_29_110Z-debug.log
I solved with npm install #firebase/app#0.1.10.
Error doesn't happen and build success.
I solved this problem adding this line:
automaticDataCollectionEnabled: boolean;
on the file:
node_modules/angularfire2/firebase.app.module.d.ts
Final result:
import { InjectionToken } from '#angular/core';
import { FirebaseAppConfig } from './';
import { FirebaseApp as FBApp } from '#firebase/app-types';
import { FirebaseAuth } from '#firebase/auth-types';
import { FirebaseDatabase } from '#firebase/database-types';
import { FirebaseMessaging } from '#firebase/messaging-types';
import { FirebaseStorage } from '#firebase/storage-types';
import { FirebaseFirestore } from '#firebase/firestore-types';
export declare const FirebaseAppConfigToken: InjectionToken<FirebaseAppConfig>;
export declare class FirebaseApp implements FBApp {
name: string;
options: {};
automaticDataCollectionEnabled: boolean; // missing line
auth: () => FirebaseAuth;
database: () => FirebaseDatabase;
messaging: () => FirebaseMessaging;
storage: () => FirebaseStorage;
delete: () => Promise<any>;
firestore: () => FirebaseFirestore;
}
export declare function _firebaseAppFactory(config: FirebaseAppConfig, appName?: string): FirebaseApp;
You have to add the property automaticDataCollectionEnabled to the FirebaseApp class (node_modules/angularfire2/firebase.app.module.d.ts).
export declare class FirebaseApp implements FBApp {
name: string;
options: {};
automaticDataCollectionEnabled: boolean; // add it like this
auth: () => FirebaseAuth;
database: () => FirebaseDatabase;
messaging: () => FirebaseMessaging;
storage: () => FirebaseStorage;
delete: () => Promise<any>;
firestore: () => FirebaseFirestore;
}
npm i #firebase/app#^0.1.6
This worked for me. As the warning says, firebase/app needs to be installed separately. Did the same and my project compiled successfully.