How to display Local Notification in Background - react-native

Question

I am trying to set up a local notifications with certain time to pushed for user when the time arrives.
I want help in two steps :
1) How to let that notifications fired while the app is in Background
2) How to add a sound to notifications when fired
Also I want to know if the approach I am using is right ?
import React, {useEffect, useState} from 'react';
import { Text, View, Button, Vibration, Platform , Alert} from 'react-native';
import {Notifications} from 'expo';
import * as Permissions from 'expo-permissions';
import Constants from 'expo-constants';
const LocalNotificationsScreen = () => {
const [notification, setNotification] = useState({});
useEffect(() => {
askPermissions();
}, []);
let Times = [
{time: '3:16' , name : 'test1'}, {time : '0:7', name : 'test2'},
{time : '0:9', name : 'test3'}, {time : '2:8' , name : 'test4'},
{time : '3:37' , name : 'test5'} , {time : '3:39', name : 'test6'}
];
const askPermissions = async () => {
const { status: existingStatus } = await Permissions.getAsync(Permissions.NOTIFICATIONS);
let finalStatus = existingStatus;
if (existingStatus !== 'granted') {
const { status } = await Permissions.askAsync(Permissions.NOTIFICATIONS);
finalStatus = status;
}
if (finalStatus !== 'granted') {
return false;
}
return true;
};
const localNotification = {
id : 1,
title : 'Testing',
body : 'The body ',
data: { name : 'This is the data'},
ios : {
sound : true,
_displayInForeground : true
},
android : {
name : 'Sound',
sound : true,
vibrate : [ 0, 250, 250, 250 ],
repeat : false
},
userText: 'Hi from Notfications'
}
const schedulingOptions = {
time : (new Date()).getTime() + 5000,
}
console.log((new Date()).getTime())
const currentTime = `${new Date().getHours()}:${new Date().getMinutes()}`;
console.log(currentTime);
const pushTime = () => {
return Times.map((t) => {
if (t.time === currentTime) {
let notificationId =
Notifications.scheduleLocalNotificationAsync(localNotification, schedulingOptions);
console.log(notificationId);
setTimeout(function () {
Notifications.cancelAllScheduledNotificationsAsync()
}, 8000);
}
})
}
pushTime();
Notifications.addListener(
notification => {
Vibration.vibrate();
console.log(notification);
setNotification(notification);
}
)
return (
<View>
<Text>LocalNotifications </Text>
</View>
);
}
export default LocalNotificationsScreen;

Answer 1

I have no idea with expo but I have used local notifications in my app by using this package..
Check local notifications section... I hope it will work with expo..
https://github.com/zo0r/react-native-push-notification

Answer 2

You can use notification schedule of react-native-firebase:
https://github.com/invertase/react-native-firebase-docs/blob/master/docs/notifications/scheduling-notifications.md
Install and setup react-native-firebase
create notification and schedule as below
Create a notificationListener to listen and trigger to show notification.
Setup a schedule notification firebase.notifications().scheduleNotification(notification, {
fireDate: date.getTime(),
}), notificationListener will be triggered when fireDate comes
.setSound(channel.sound) set sound for notification
import firebase from 'react-native-firebase';
// Build notification
const notificationListener = firebase
.notifications()
.onNotification(notification => {
const {title, body, data} = notification;
console.log('onNotification:', notification);
if (typeof onNotification == 'function')
onNotification(title, body, data);
const localNotification = new firebase.notifications.Notification({
sound: 'sound',
show_in_foreground: true,
show_in_background: true,
})
.setSound(channel.sound)
.setNotificationId(notification.notificationId)
.setTitle(title)
.setBody(body)
.setData(data)
.android.setChannelId('#string/default_notification_channel_id') // e.g. the id you chose above
.android.setSmallIcon('#mipmap/ic_launcher') // create this icon in Android Studio
.android.setColor('#000000') // you can set a color here
.android.setPriority(firebase.notifications.Android.Priority.High);
firebase
.notifications()
.displayNotification(localNotification)
.then(() => {
cancelNotification(notification.notificationId);
})
.catch(err => console.error(err));
});
// Schedule the notification for 1 minute in the future
const date = new Date();
date.setMinutes(date.getMinutes() + 1);
firebase.notifications().scheduleNotification(notification, {
fireDate: date.getTime(),
})