React Native Custom Timer Notification 🔔

A powerful, flexible notification library for React Native Android that enables custom timer and GIF-based notifications with advanced customization options.

Now v0.9.1 supports Gif in Android 14+

Key Features

• Customizable Timer Notifications: Create dynamic, time-based notifications
• Animated GIF Support: Enhance notifications with animated graphics
• Fully Customizable Notification Layouts: Design unique notification experiences

Installation

npm install react-native-custom-timer-notification

🛠 Android Setup

1. Add Permissions to AndroidManifest.xml

Open android/app/src/main/AndroidManifest.xml and add:

<uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />

2. Register Receivers and Services

Inside the <application> tag, add:

<receiver android:name="com.reactnativecustomtimernotification.NotificationEventReceiver" />
<receiver android:name="com.reactnativecustomtimernotification.OnClickBroadcastReceiver" />
<service android:name="com.reactnativecustomtimernotification.ForegroundService"/>

Usage Scenarios

Basic Timer Notification

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

TimerNotification({
  id: 1,
  title: "Meeting Reminder",
  body: "Team meeting starts in:",
  date: "30-12-2024 15:00:00",
  payload: "meeting-123"
});

Animated Notification with GIF

TimerNotification({
 id: 2,
 title: <p style="color: #ff5722; font-size: 18px;"><b>🔥 Limited-Time Deal! Hurry Up! ⏳</b></p>,
 body: <p style="font-size: 14px;">⏳ Time is running out! <b>Claim your exclusive discount</b> before it's too late.</p>,
 subtitle: "💸",
 date: new Date(Date.now() + 20000), 
 giffyUrl: "https://media1.tenor.com/m/EBdqcf-JxpYAAAAC/6m-rain.gif",
 payload: "offer-456"
});

Options

| Parameter | Type | Required | Description | |-----------|----------|----------|---------------------------------| | id | number | Yes | Unique notification identifier | | title | string | Yes | Notification title with HTML support | | body | string | Yes | Notification message with HTML support | | date | Date | No | End date with time (dd-MM-yyyy HH:mm:ss) | | giffyUrl | string | No | URL to GIF animation | | payload | string | No | Custom data payload |

Full Custom Notification

Create fully customized notifications with detailed configurations:

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

CustomNotification({
  eventData: JSON.stringify('notification_data'),
  title: 'Custom Notification',
  body: 'Detailed Notification',
  id: 1,
  View: [
    {
      name: 'Limited Sales',
      size: 20,
      type: TYPES.Text,
      bold: FB_TYPE.BOLD_ITALIC,
      color: '#ed1a45',
    },
    // Additional view configurations
  ]
});

Options

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

View Options

| 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|

Event Handling

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

// Listen for notification interactions (press/cancel)
onEvent(event => {
  const { action, payload } = event;
  
  switch(action) {
    case 'press':
      // Handle notification press/click
      console.log('Notification pressed:', payload);
      break;
    case 'cancel':
      // Handle notification dismissal
      console.log('Notification cancelled:', payload);
      break;
  }
});

Remove Notifications

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

// Remove a specific notification by ID
RemoveTimer(1);

⭐️ Support the Project

If you find this library helpful, please consider:

• Giving it a GitHub star ⭐️
• Creating issues for bug reports and feature requests
• Contributing with pull requests

📄 License

MIT Licensed. See LICENSE file for details.

🔍 Keywords

react-native, notifications, timer-notifications, gif-notifications, android-notifications, custom-notifications, countdown-timer, animated-notifications, react-native-notifications, mobile-notifications, push-notifications, notification-system, react-native-android, notification-timer, countdown-notifications, custom-notification-layout