Show Notification when app is open, not just when it's closed - react-native

I'm working on project using react-native-push-notification my config file is like below:
PushNotification.configure({
onRegister: function (token) {
},
onNotification: function (notification) {
console.log("On Notification",notification)
},
onAction: function (notification) {
console.log("On Notification Action")
},
onRegistrationError: function(err) {
console.error(err.message, err);
},
permissions: {
alert: true,
badge: true,
sound: true,
},
popInitialNotification: true,
requestPermissions: true,
});
If the app is closed the notification is shown, but if it's opened the notification is not showing, I want to show the notification even if the app is opened.
how to achieve that is this a parameter to add in the configure ?

Related

Schedule local notifications of React native push notification in react native

I am using react-native-push-notifications npm library to implement notifications feature in my app. However, I want to schedule the notifications and I am using PushNotification.localNotificationSchedule for doing so. Initially, it was working fine for me yesterday, But somehow it is not working now when I am trying to trigger. I have pasted the code below. Someone could please help me with this.
PushNotification.configure({
onRegister: token => console.log('Token', token),
onNotification: notification => console.log('NOTIFICATION', notification),
permissions: {
alert: true,
badge: true,
sound: true,
},
popInitialNotification: true,
requestPermissions: true,
});
PushNotification.createChannel({
channelId: 'hello',
channelName: 'my channel',
channelDescription: 'A channel for Notification',
playSound: true,
soundName: 'default',
importance: Importance.HIGH,
vibrate: true,
});
PushNotification.localNotificationSchedule({
channelId: 'hello',
channelName: 'my channel',
autoCancel: true,
bigText: `Time to do ${text}`,
title: `Start doing ${text}!`,
date: new Date(Date.now() + 60 * 1000),
playSound: true,
soundName: 'default',
importance: Importance.HIGH,
vibrate: true,
vibration: 300,
repeatTime: 1,
id: id,
});
LocalNotification(
task?.notId,
task?.date,
task?.start_time,
task?.tname,
);
I have followed the documentation and spent hours on solving issue but couldn't succeeded.

ERROR [Error: notifee.displayNotification(*) 'notification' expected an object value.]

const onDisplayNotification = async () => {
await notifee.displayNotification({
title: 'Notification Title',
body: 'Main body content of the notification',
android: {
channelId,
// color:'#9c27b0',
// backgroundColor:'transparent',
style: {
type: AndroidStyle.BIGTEXT,
text: 'Large volume of text shown in the expanded state',
},
smallIcon: 'ic_launcher', // optional, defaults to 'ic_launcher'.
// pressAction is needed if you want the notification to open the app when pressed
badgeIconType: AndroidBadgeIconType.SMALL,
badge: true, // disable in badges
pressAction: {
id: 'default',
},
},
});
};
above code is an error in notifee.displaynotification in my code.so kindly help this error

No channel id passed, notifications may not work. react-native-push-notifications

Error: WARN No channel id passed, notifications may not work.
[LOG] createChannel returned 'false'
How to pass the channel id ?
Here's my code:
export const LocalNotification = () => {
PushNotification.localNotification({
autoCancel: true,
bigText:
'This is local notification demo in React Native app. Only shown, when expanded.',
subText: 'Local Notification Demo',
title: 'Local Notification Title',
message: 'Expand me to see more',
vibrate: true,
vibration: 300,
playSound: true,
soundName: 'default',
actions: '["Yes", "No"]'
})
}
const startFunction = async () => {
PushNotification.createChannel(
{
channelId: "channel-id-1",
channelName: "My channel",
channelDescription: "A channel to categorise your notifications",
playSound: false,
soundName: "default",
importance: Importance.HIGH,
vibrate: true,
},
(created) => console.log(`createChannel returned '${created}'`)
);
LocalNotification();
}
PushNotification.createChannel(
{
channelId: "channel-id-1",
channelName: "My channel",
channelDescription: "A channel to categorise your notifications",
playSound: false,
soundName: "default",
vibrate: true,
},
(created) => console.log(`createChannel returned '${created}'`)
);
PushNotification.localNotification({
channelId : "channel-id-1",// this is where you need to add local notification
autoCancel: true,
bigText:
'This is local notification demo in React Native app. Only shown, when expanded.',
subText: 'Local Notification Demo',
title: 'Local Notification Title',
message: 'Expand me to see more',
vibrate: true,
vibration: 300,
playSound: true,
soundName: 'default',
actions: '["Yes", "No"]'
})

vuejs 2 - vue-auth JWT token not possible to safe

here is my Vue Object:
Vue.use(require('#websanova/vue-auth'), {
auth: require('#websanova/vue-auth/drivers/auth/bearer.js'),
http: require('#websanova/vue-auth/drivers/http/axios.1.x'),
router: require('#websanova/vue-auth/drivers/router/vue-router.2.x'),
fetchData: {url: 'http://localhost:5000/auth/user', method: 'GET',
enabled: true},
tokenDefaultName: 'access_token',
parseUserData: function (response) {
console.log('found user')
return response.data.user
},
tokenStore: ['localStorage']
})
Here is my login:
this.$auth.login({
data: {
username: this.model.email,
password: this.model.password
},
success: function (response) {
alert(response)
console.log(response)
this.$auth.user = response.data
},
error: function (res) {
console.log(res.data)
console.log(res)
this.$notify({
component: {
template: `<span><strong>Oops, something went wrong... </strong><br>Not possible to login because of an internal server error</span>`
},
icon: 'fa fa-exclamation',
horizontalAlign: 'right', // right | center | left
verticalAlign: 'top', // top | bottom
type: 'danger' // info | success | warning | danger
})
this.model.error_msg = 'Not possible to login'
},
rememberMe: true,
url: 'http://localhost:5000/auth/login',
redirect: '/dashboard',
fetchUser: true
})
The workflow should be
POST to /login the API returns the token (this works)
Store the token (this doesnt work)
Use the Token for the fetch user route (this doesnt work)
If vue posts to the /login route the API returns the following:
{
"access_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE1MjA5Mzg2MTcsIm5iZiI6MTUyMDkzODYxNywianRpIjoiZTZiNmViNTItMTI4NC00NzA5LWEwYTMtOTk5YTM4YmIyMTcwIiwiZXhwIjoxNTIwOTM5NTE3LCJpZGVudGl0eSI6eyJmaXJzdG5hbWUiOiJHZW9yZyIsImxhc3RuYW1lIjoiU2F0dGxlciIsImVtYWlsIjoiZ2VvcmdAc2F0dGxlci5pbyIsInV1aWQiOiI2ZTU1OGZjM2ExYjg0MTQ0YWQ1ODU1N2JlYWMxMjFkOCJ9LCJmcmVzaCI6dHJ1ZSwidHlwZSI6ImFjY2VzcyJ9.0EhkUXZpG4WTxhnDvQQp8i97GaNXoNyp24P7qLMRUPM",
"message": "successfully logged in - welcome",
"refresh_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE1MjA5Mzg2MTcsIm5iZiI6MTUyMDkzODYxNywianRpIjoiNzAxNTAxYWYtODJjMC00YmQ5LTg1YjAtZjQ0ZTNjNzgzYmY1IiwiZXhwIjoxNTIzNTMwNjE3LCJpZGVudGl0eSI6eyJmaXJzdG5hbWUiOiJHZW9yZyIsImxhc3RuYW1lIjoiU2F0dGxlciIsImVtYWlsIjoiZ2VvcmdAc2F0dGxlci5pbyIsInV1aWQiOiI2ZTU1OGZjM2ExYjg0MTQ0YWQ1ODU1N2JlYWMxMjFkOCJ9LCJ0eXBlIjoicmVmcmVzaCJ9.gRH3nJQEaBc2_0iZ9E9fhGg-9i-fil8c5SOvh8Tvsbg",
"request_id": "037dd993-1c19-4c68-8e5a-e060e11d3ce8",
"status": "OK"
}
If i check the local storage in the dev tool it seems to be empty
How can I tell vue-auth to store the access token?
Thanks
You should save the access_token in the success case.
this.$auth.login({
data: {
username: this.model.email,
password: this.model.password
},
success: function (response) {
alert(response)
console.log(response)
this.$auth.token('access_token', response.data.access_token)
}

Vue2 update parent scope from modal component

I have a modal component that takes some input, creates a record on the backend and then as part of the success response I would like to push data to an object on the parent scope.
I have tried emitting an event from the child on success with the data I would like to append but I can't seem to get it to fire.
When addNote() successfully completes what would be the best approach to update the "notes" array object on the parent scope with the data I get back in my component?
Vue.component('modal', {
template: '#modal-template',
data: function() {
return {correctiveAction: this.correctiveAction}
},
props: ['notes'],
methods: {
addNote: function () {
axios.get('/quality/ajax/add-note/', {
params: {
action: this.correctiveAction
}
}).then(function (response) {
// append new corrective action
app = this;
this.$emit('addingNote', response.data.data.success[0].data);
//app.notes.push(response.data.data.success[0].data);
swal({
title: "Boom!",
type: "success",
text: "Corrective Action Successfully Added",
});
}).catch()
}
}
});
var app = new Vue({
el: '#app',
data: {
segment: "",
customer: "",
product: "",
startDate: "",
endDate: "",
notes: "",
showModal: false,
correctiveAction: ""
},
delimiters: ["<%","%>"],
methods: {
refresh: function () {
location.reload();
},
getNotes: function () {
app = this
axios.get('/quality/ajax/get-notes/').then(function (response) {
// populate notes
app.notes = response.data.data.success[0].notes
}).catch()
},
removeNote: function (id, index) {
app = this
axios.get('/quality/ajax/remove-note/', {
params: {
id: id
}
}).then(function () {
// remove note from list
app.notes.splice(index, 1);
swal({
title: "",
type: "success",
text: "Corrective Action Successfully Removed",
});
}).catch(function (err) {
console.log(err)
swal({
title: "",
type: "warning",
text: "Error Deleting Corrective Action",
});
return;
});
},
generateReport: function () {
$('#loading').show();
}).catch()
}
}
});
// get all active corrective actions
app.getNotes();
Well for one, you are setting a global variable app as a result of new Vue() and then you are blowing that variable away in your addNote method by setting app = this. That changes the variable to a completely different thing.
Also, you don't show anything listening to the addingNote event.
Don't use app everywhere. Use a scoped variable.
getNotes: function () {
const self = this
axios.get('/quality/ajax/get-notes/').then(function (response) {
// populate notes
self.notes = response.data.data.success[0].notes
}).catch()
},
And change addNote.
addNote: function () {
const self = this
axios.get('/quality/ajax/add-note/', {
params: { action: this.correctiveAction}
}).then(function (response) {
// append new corrective action
self.$emit('addingNote', response.data.data.success[0].data);
swal({
title: "Boom!",
type: "success",
text: "Corrective Action Successfully Added",
});
}).catch()
}
Looks like you should also fix removeNote.