timotismjntk/react-native-custom-timer-notification

react-native-custom-timer-notification

Custom timer notification for React Native Android 🔔
Now version 0.8 Supports full size custom notifications

Installation

npm install react-native-custom-timer-notification

AndroidManifest

      <receiver android:name="com.reactnativecustomtimernotification.NotificationEventReceiver" />
      <receiver android:name="com.reactnativecustomtimernotification.OnClickBroadcastReceiver" />
      <!--
      if foreground service used add this line
      -->
      <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
      <service android:name="com.reactnativecustomtimernotification.ForegroundService"/>

Usage

Timer notification

Only Timer notifiction with default Title and body

import { TimerNotification } from "react-native-custom-timer-notification";

Property	Description
payload	sent data will be received when click or canceled
title	Title of the notification
body	Body of the notification
id	unique number
date	Time at which zero comes

Example

  TimerNotification({
      payload: JSON.stringify('notification.data'),
      title: 'My notification',
      body: 'Much longer text that cannot fit one line... ',
      id: 1,
      remove: false, // optional
      foreground: false,
      date: new Date(Date.now() + 20000),
      isCountDown: true, // false for positive timer 
      setCustomContentView:true // optional
    });
    

Full custom notification

Full custom notifiction with custom image, text and cronometer.

import { CustomNotification, TYPES, FB_TYPE } from "react-native-custom-timer-notification";

Property	Description
eventData	sent data will be received when click or canceled
title	Title of the notification
body	Body of the notification
id	unique number
View	View that needs to be added (Array)

View Properties

Property	Description
name	text that needs to be displayed
size	Size of text
type	Type of view (Text,Image, Cronometer)
bold	Font (NORMAL,BOLD,ITALIC,BOLD_ITALIC)
uri	Image in base64
PaddingLeft	Left Padding
PaddingTop	PaddingTop
PaddingRight	PaddingRight
PaddingBottom	PaddingBottom
color	Text color
ZeroTime	Time at which zero comes

Example

    CustomNotification(
      {
        eventData: JSON.stringify('notificationOpen?.data'),
        title: 'notificationOpen.data.title',
        body: ' notificationOpen.data.body',
        id: 1,

        View: [
          {
            name: 'Limited Sales',
            size: 20,
            type: TYPES.Text,
            bold: FB_TYPE.BOLD_ITALIC,
            PaddingLeft: 10,
            PaddingTop: 50,
            PaddingRight: 0,
            PaddingBottom: 0,
            setViewVisibility: false,
            color: '#ed1a45',
          },
          {
            uri: image,
            type: TYPES.Image,
            PaddingLeft: 0,
            PaddingTop: 0,
            PaddingRight: 0,
            PaddingBottom: 0,
          },
          {
            name: 'Buy now',
            size: 30,
            type: TYPES.Text,
            bold: FB_TYPE.BOLD_ITALIC,
            PaddingLeft: 10,
            PaddingTop: 100,
            PaddingRight: 0,
            PaddingBottom: 0,
            setViewVisibility: false,
            color: '#fbd335',
          },
          {
            type: TYPES.Cronometer,
            size: 30,
            ZeroTime: new Date(Date.now() + 20000),
            PaddingLeft: 800,
            color: '#0000FF',
            PaddingTop: 0,
            PaddingRight: 0,
            PaddingBottom: 0,
          },
        ],
      },
      (e: any) => {
        console.log(e);
      }
    );
    

Remove Notifications

import { RemoveTimer } from "react-native-custom-timer-notification";

RemoveTimer(1);

onclick and cancel listner

import { onEvent } from "react-native-custom-timer-notification";

onEvent(event=>{
console.log(event)
});

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT