Skip to content

Commit 749c0b3

Browse files
nilavanrajnilavanraj
authored
Merge pull request #10 from nilavanraj/feat/giffy-notification
New giffy notication support added
2 parents a31c1b7 + e019e90 commit 749c0b3

16 files changed

+43065
-12844
lines changed

‎README.md

+97-129
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,130 @@
1-
# React Native Custom Timer Notification
1+
# React Native Custom Timer Notification 🔔
22

3-
Custom timer notification for React Native Android 🔔<br>
4-
**Now version 0.8 Supports full size custom notifications** <br>
5-
<p align="center">
6-
<img src="https://user-images.githubusercontent.com/58332892/208312749-58586dba-da62-4531-85bb-62346a57aa03.gif">
7-
</p>
3+
A powerful, flexible notification library for React Native Android that enables custom timer and GIF-based notifications with advanced customization options.
4+
5+
Now v0.9.1 supports Gif in Android 14+
86
<p align="center">
9-
<img width="80%" src="https://user-images.githubusercontent.com/58332892/166133982-effe321c-a0fd-4315-bb29-cc7ee29d0bd4.gif">
7+
<img width="50%" src="https://github.com/user-attachments/assets/5578e1aa-ac4c-458e-a661-c334e6bf8741">
108
</p>
119

10+
## Key Features
11+
12+
- **Customizable Timer Notifications**: Create dynamic, time-based notifications
13+
- **Animated GIF Support**: Enhance notifications with animated graphics
14+
- **Fully Customizable Notification Layouts**: Design unique notification experiences
1215

13-
## Installation
1416

15-
```sh
17+
## Installation
18+
19+
```bash
1620
npm install react-native-custom-timer-notification
1721
```
1822

19-
AndroidManifest
20-
```xml
23+
## 🛠 Android Setup
24+
25+
### 1. Add Permissions to AndroidManifest.xml
26+
27+
Open `android/app/src/main/AndroidManifest.xml` and add:
2128

22-
<receiver android:name="com.reactnativecustomtimernotification.NotificationEventReceiver" />
23-
<receiver android:name="com.reactnativecustomtimernotification.OnClickBroadcastReceiver" />
24-
<!--
25-
if foreground service used add this line
26-
-->
27-
<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
28-
<service android:name="com.reactnativecustomtimernotification.ForegroundService"/>
29+
```xml
30+
<uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
31+
<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
2932
```
30-
## Usage
31-
### Timer notification
3233

33-
Only Timer notifiction with default Title and body
34-
```js
34+
### 2. Register Receivers and Services
3535

36-
import { TimerNotification } from "react-native-custom-timer-notification";
36+
Inside the `<application>` tag, add:
37+
38+
```xml
39+
<receiver android:name="com.reactnativecustomtimernotification.NotificationEventReceiver" />
40+
<receiver android:name="com.reactnativecustomtimernotification.OnClickBroadcastReceiver" />
41+
<service android:name="com.reactnativecustomtimernotification.ForegroundService"/>
3742
```
3843

39-
| Property | Description |
40-
| --- | --- |
41-
| `payload` | sent data will be received when click or canceled |
42-
| `title` |Title of the notification|
43-
| `body` |Body of the notification |
44-
| `id` |unique number|
45-
| `date` |Time at which zero comes|
44+
## Usage Scenarios
4645

46+
### Basic Timer Notification
4747

48-
#### Example
48+
```javascript
49+
import { TimerNotification } from "react-native-custom-timer-notification";
4950

50-
```js
51+
TimerNotification({
52+
id: 1,
53+
title: "Meeting Reminder",
54+
body: "Team meeting starts in:",
55+
date: "30-12-2024 15:00:00",
56+
payload: "meeting-123"
57+
});
58+
```
59+
### Animated Notification with GIF
5160

52-
TimerNotification({
53-
payload: JSON.stringify('notification.data'),
54-
title: 'My notification',
55-
body: 'Much longer text that cannot fit one line... ',
56-
id: 1,
57-
remove: false, // optional
58-
foreground: false,
59-
date: new Date(Date.now() + 20000),
60-
isCountDown: true, // false for positive timer
61-
setCustomContentView:true // optional
62-
});
63-
61+
62+
```javascript
63+
CustomTimerNotification.TimerNotification({
64+
id: 2,
65+
title: "Special Offer!",
66+
body: "Limited time offer ends in:",
67+
date: "25-12-2024 23:59:59",
68+
gifUrl: "https://example.com/animation.gif",
69+
payload: "offer-456"
70+
});
6471
```
65-
<h3>Full custom notification </h3>
72+
#### Options
6673

67-
Full custom notifiction with custom image, text and cronometer.
68-
```js
74+
| Parameter | Type | Required | Description |
75+
|-----------|----------|----------|---------------------------------|
76+
| id | number | Yes | Unique notification identifier |
77+
| title | string | Yes | Notification title |
78+
| body | string | Yes | Notification message |
79+
| date | string | Yes | End date (dd-MM-yyyy HH:mm:ss) |
80+
| gifUrl | string | No | URL to GIF animation |
81+
| payload | string | No | Custom data payload |
6982

83+
## Full Custom Notification
84+
85+
Create fully customized notifications with detailed configurations:
86+
<p align="center">
87+
<img src="https://user-images.githubusercontent.com/58332892/208312749-58586dba-da62-4531-85bb-62346a57aa03.gif">
88+
</p>
89+
90+
```javascript
7091
import { CustomNotification, TYPES, FB_TYPE } from "react-native-custom-timer-notification";
92+
93+
CustomNotification({
94+
eventData: JSON.stringify('notification_data'),
95+
title: 'Custom Notification',
96+
body: 'Detailed Notification',
97+
id: 1,
98+
View: [
99+
{
100+
name: 'Limited Sales',
101+
size: 20,
102+
type: TYPES.Text,
103+
bold: FB_TYPE.BOLD_ITALIC,
104+
color: '#ed1a45',
105+
},
106+
// Additional view configurations
107+
]
108+
});
71109
```
72110

111+
#### Options
73112
| Property | Description |
74113
| --- | --- |
75-
| `eventData` | sent data will be received when click or canceled |
114+
| `eventData` | sent data will be received when clicked or canceled |
76115
| `title` |Title of the notification|
77116
| `body` |Body of the notification |
78117
| `id` |unique number|
79118
| `View` |View that needs to be added (Array)|
80119

81-
<h3> View Properties </h3>
120+
#### View Options
82121

83122
| Property | Description |
84123
| --- | --- |
85124
| `name` | text that needs to be displayed |
86125
| `size` |Size of text|
87-
| `type` |Type of view (Text,Image, Cronometer) |
88-
| `bold` |Font (NORMAL,BOLD,ITALIC,BOLD_ITALIC)|
126+
| `type` |Type of view (Text, Image, Cronometer) |
127+
| `bold` |Font (NORMAL, BOLD,ITALIC, BOLD_ITALIC)|
89128
| `uri` |Image in base64|
90129
| `PaddingLeft` |Left Padding|
91130
| `PaddingTop` |PaddingTop|
@@ -94,88 +133,17 @@ import { CustomNotification, TYPES, FB_TYPE } from "react-native-custom-timer-no
94133
| `color` |Text color|
95134
| `ZeroTime` |Time at which zero comes|
96135

97-
#### Example
98-
99-
```js
100-
101-
CustomNotification(
102-
{
103-
eventData: JSON.stringify('notificationOpen?.data'),
104-
title: 'notificationOpen.data.title',
105-
body: ' notificationOpen.data.body',
106-
id: 1,
107-
108-
View: [
109-
{
110-
name: 'Limited Sales',
111-
size: 20,
112-
type: TYPES.Text,
113-
bold: FB_TYPE.BOLD_ITALIC,
114-
PaddingLeft: 10,
115-
PaddingTop: 50,
116-
PaddingRight: 0,
117-
PaddingBottom: 0,
118-
setViewVisibility: false,
119-
color: '#ed1a45',
120-
},
121-
{
122-
uri: image,
123-
type: TYPES.Image,
124-
PaddingLeft: 0,
125-
PaddingTop: 0,
126-
PaddingRight: 0,
127-
PaddingBottom: 0,
128-
},
129-
{
130-
name: 'Buy now',
131-
size: 30,
132-
type: TYPES.Text,
133-
bold: FB_TYPE.BOLD_ITALIC,
134-
PaddingLeft: 10,
135-
PaddingTop: 100,
136-
PaddingRight: 0,
137-
PaddingBottom: 0,
138-
setViewVisibility: false,
139-
color: '#fbd335',
140-
},
141-
{
142-
type: TYPES.Cronometer,
143-
size: 30,
144-
ZeroTime: new Date(Date.now() + 20000),
145-
PaddingLeft: 800,
146-
color: '#0000FF',
147-
PaddingTop: 0,
148-
PaddingRight: 0,
149-
PaddingBottom: 0,
150-
},
151-
],
152-
},
153-
(e: any) => {
154-
console.log(e);
155-
}
156-
);
157-
158-
```
159-
### Remove Notifications
160-
```js
161-
import { RemoveTimer } from "react-native-custom-timer-notification";
162136

163-
RemoveTimer(1);
137+
## 🤝 Contributing
164138

165-
```
166-
### onclick and cancel listner
167-
```js
168-
import { onEvent } from "react-native-custom-timer-notification";
139+
See the contributing guide to learn how to contribute to the repository and the development workflow.
169140

170-
onEvent(event=>{
171-
console.log(event)
172-
});
141+
## 📄 License
173142

174-
```
175-
## Contributing
143+
MIT Licensed. See LICENSE file for details.
144+
145+
## 🔍 Keywords
176146

177-
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
147+
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
178148

179-
## License
180149

181-
MIT

‎android/build.gradle

+3-3
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ def getExtOrIntegerDefault(name) {
2929
android {
3030
compileSdkVersion getExtOrIntegerDefault('compileSdkVersion')
3131
defaultConfig {
32-
minSdkVersion 16
32+
minSdkVersion 21
3333
targetSdkVersion getExtOrIntegerDefault('targetSdkVersion')
3434
versionCode 1
3535
versionName "1.0"
@@ -45,8 +45,8 @@ android {
4545
disable 'GradleCompatible'
4646
}
4747
compileOptions {
48-
sourceCompatibility JavaVersion.VERSION_1_8
49-
targetCompatibility JavaVersion.VERSION_1_8
48+
sourceCompatibility JavaVersion.VERSION_11
49+
targetCompatibility JavaVersion.VERSION_11
5050
}
5151
}
5252

‎android/gradle.properties

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
CustomTimerNotification_kotlinVersion=1.3.50
2-
CustomTimerNotification_compileSdkVersion=29
3-
CustomTimerNotification_targetSdkVersion=29
1+
CustomTimerNotification_kotlinVersion=1.8.0
2+
CustomTimerNotification_compileSdkVersion=33
3+
CustomTimerNotification_targetSdkVersion=33

0 commit comments

Comments
 (0)