npm install react-native-alarm-notification --save
or
yarn add react-native-alarm-notification
If you are using react-native version 0.60 or higher you don't need to link react-native-alarm-notification. The package is automatically linked when building the app. All you need to do after installing package is:
For iOS pod installation:
npx pod-install
or
cd ios && pod install
For android, the package will be linked automatically on build.
IMPORTANT
If your app crashes on Android, it could probably mean auto linking didn't work. You will need to make the following changes:
Prop | Description | Default |
---|---|---|
auto_cancel |
Make this notification automatically dismissed when the user touches it. [boolean] |
true |
channel (Android only) |
Required: - Specifies the channel the notification should be delivered on.. [string] |
"my_channel_id" |
color (Android only) |
Required: Sets notification color. [color] |
"red" |
data |
You can add any additional data that is important for the notification. | data: { foo: "bar" } |
fire_date |
Required: Set date for Alarm to get triggered. eg '04-03-2020 00:00:00' . Should be a date in the future . |
None |
has_button |
Show snooze and dismiss buttons in notification. [boolean] |
false |
large_icon (Android Only) |
Add a large icon to the notification content view. eg "ic_large_icon" . PS: make sure to add the file in your mipmap folders [project_root]/android/app/src/main/res/mipmap* |
None |
loop_sound |
Play sound continuously until you decide to stop it. [boolean] |
false |
message |
Required: Add Notification message. | "My Notification Message" |
play_sound |
Play alarm notification sound. [boolean] |
true |
schedule_type |
Required: Type of alarm schedule. "once" (to show alarm once) or "repeat" (to display alarm after set repeat_interval) |
"once" |
repeat_interval |
Interval set to repeat alarm if schedule_type is "repeat". [minutely, hourly, daily, weekly] |
"hourly" |
interval_value |
Set interval_value if repeat_interval is minutely and hourly. [number] |
1 |
small_icon |
Required: Set the small icon resource, which will be used to represent the notification in the status bar. eg "ic_launcher" . PS: make sure to add the file in your mipmap folders [project_root]/android/app/src/main/res/mipmap* |
"ic_launcher" |
snooze_interval |
Interval set to show alarm after snooze button is tapped. [number] in minutes |
1 |
sound_name |
Set audio file to play when alarm is triggered. example "sound_name.mp3" . Add the file in your res/raw folder [project_root]/android/app/src/main/res/raw/ for android and in your ios folder [project_root]/ios/ for iOS. PS: After adding file in your iOS folder, open your application in xcode and drag your audio file into your project. |
None |
sound_names |
Set multiple audio files to play when alarm is triggered, each file will be picked to play at random. Separate files with a comma (, ) example "sound_name1.mp3,sound_name2.mp3" . PS: make sure to add the files in your res/raw folder [project_root]/android/app/src/main/res/raw/ |
None |
tag |
Add a tag id to notification. | None |
ticker |
Set the "ticker" text which is sent to accessibility services.. [String] |
None |
title |
Required: Add a title to notification. | "My Notification Title" |
vibrate |
Set vibration when alarm is triggered. [boolean] |
true |
vibration |
Set number of milliseconds to vibrate. [number] |
100 |
use_big_text (Android only) |
Set notification message style as big text. [boolean] |
false |
volume |
Set volume. [number between 0.0 and 1.0] |
0.5 |
bypass_dnd (Android only) |
Sets whether or not notifications posted to this channel can interrupt the user | false |
import ReactNativeAN from 'react-native-alarm-notification';
const fireDate = ReactNativeAN.parseDate(new Date(Date.now() + 1000)); // set the fire date for 1 second from now
or
const fireDate = '01-01-2060 00:00:00'; // set exact date time | Format: dd-MM-yyyy HH:mm:ss
const alarmNotifData = {
title: "My Notification Title",
message: "My Notification Message",
channel: "my_channel_id",
small_icon: "ic_launcher",
// You can add any additional data that is important for the notification
// It will be added to the PendingIntent along with the rest of the bundle.
// e.g.
data: { foo: "bar" },
};
class App extends Component {
...
async method(){
//Schedule Future Alarm
const alarm = await ReactNativeAN.scheduleAlarm({ ...alarmNotifData, fire_date: fireDate });
console.log(alarm); // { id: 1 }
//Delete Scheduled Alarm
ReactNativeAN.deleteAlarm(alarm.id);
//Delete Repeating Alarm
ReactNativeAN.deleteRepeatingAlarm(alarm.id);
//Stop Alarm
ReactNativeAN.stopAlarmSound();
//Send Local Notification Now
ReactNativeAN.sendNotification(alarmNotifData);
//Get All Scheduled Alarms
const alarms = await ReactNativeAN.getScheduledAlarms();
//Clear Notification(s) From Notification Center/Tray
ReactNativeAN.removeFiredNotification(alarm.id);
ReactNativeAN.removeAllFiredNotifications();
}
...
}
...
import android.content.Intent;
import android.os.Bundle;
import com.emekalites.react.alarm.notification.BundleJSONConverter;
import com.facebook.react.ReactActivity;
import com.facebook.react.modules.core.DeviceEventManagerModule;
import org.json.JSONObject;
...
public class MainActivity extends ReactActivity {
...
@Override
public void onNewIntent(Intent intent) {
super.onNewIntent(intent);
try {
Bundle bundle = intent.getExtras();
if (bundle != null) {
JSONObject data = BundleJSONConverter.convertToJSON(bundle);
getReactInstanceManager().getCurrentReactContext().getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit("OnNotificationOpened", data.toString());
}
} catch (Exception e) {
System.err.println("Exception when handling notification opened. " + e);
}
}
}
import { NativeEventEmitter, NativeModules } from 'react-native';
const { RNAlarmNotification } = NativeModules;
const RNAlarmEmitter = new NativeEventEmitter(RNAlarmNotification);
const dismissSubscription = RNAlarmEmitter.addListener(
'OnNotificationDismissed', (data) => console.log(JSON.parse(e));
);
const openedSubscription = RNAlarmEmitter.addListener(
'OnNotificationOpened', (data) => console.log(JSON.parse(e));
);
...
// unsubscribe, typically in componentWillUnmount
dismissSubscription.remove();
openedSubscription.remove();
import ReactNativeAN from 'react-native-alarm-notification';
// check if notification permissions has been granted for iOS
ReactNativeAN.checkPermissions((permissions) => {
console.log(permissions);
});
// Request iOS permissions
ReactNativeAN.requestPermissions({
alert: true,
badge: true,
sound: true,
}).then(
(data) => {
console.log('RnAlarmNotification.requestPermissions', data);
},
(data) => {
console.log('RnAlarmNotification.requestPermissions failed', data);
}
);
This module is customized to help with scheduling and sending notifications (local) in react-native. A couple of helpful features may be missing but hopefully they can be added as time goes on.
NOTE: If you need a react-native module that takes care of Firebase Cloud Messaging, you could use react-native-firebase