1
1
# React Native Custom Timer Notification 🔔
2
2
3
- A powerful, flexible notification library for React Native Android that enables custom timer-based notifications with advanced customization options.
3
+ A powerful, flexible notification library for React Native Android that enables custom timer and GIF -based notifications with advanced customization options.
4
4
5
- ## 🚀 Key Features
5
+ Now v0.9.1 supports Gif in Android 14+
6
+ <p align =" center " >
7
+ <img width =" 50% " src =" https://github.com/user-attachments/assets/5578e1aa-ac4c-458e-a661-c334e6bf8741 " >
8
+ </p >
9
+
10
+ ## Key Features
6
11
7
12
- ** Customizable Timer Notifications** : Create dynamic, time-based notifications
8
13
- ** Animated GIF Support** : Enhance notifications with animated graphics
9
14
- ** Fully Customizable Notification Layouts** : Design unique notification experiences
10
15
11
16
12
- ## 📦 Installation
17
+ ## Installation
13
18
14
19
``` bash
15
20
npm install react-native-custom-timer-notification
@@ -36,14 +41,10 @@ Inside the `<application>` tag, add:
36
41
<service android : name =" com.reactnativecustomtimernotification.ForegroundService" />
37
42
```
38
43
39
- ## 🎯 Usage Scenarios
44
+ ## Usage Scenarios
40
45
41
46
### Basic Timer Notification
42
47
43
- <p align =" center " >
44
- <img width =" 80% " src =" https://user-images.githubusercontent.com/58332892/166133982-effe321c-a0fd-4315-bb29-cc7ee29d0bd4.gif " >
45
- </p >
46
-
47
48
``` javascript
48
49
import { TimerNotification } from " react-native-custom-timer-notification" ;
49
50
@@ -55,12 +56,8 @@ TimerNotification({
55
56
payload: " meeting-123"
56
57
});
57
58
```
58
-
59
59
### Animated Notification with GIF
60
60
61
- <p align =" center " >
62
- <img width =" 50% " src =" https://github.com/user-attachments/assets/cea88228-602a-42df-8326-569fd0a03cf1 " >
63
- </p >
64
61
65
62
``` javascript
66
63
CustomTimerNotification .TimerNotification ({
@@ -83,7 +80,7 @@ CustomTimerNotification.TimerNotification({
83
80
| gifUrl | string | No | URL to GIF animation |
84
81
| payload | string | No | Custom data payload |
85
82
86
- ## 🎨 Full Custom Notification
83
+ ## Full Custom Notification
87
84
88
85
Create fully customized notifications with detailed configurations:
89
86
<p align =" center " >
@@ -110,14 +107,24 @@ CustomNotification({
110
107
]
111
108
});
112
109
```
113
- #### ViewOptions
110
+
111
+ #### Options
112
+ | Property | Description |
113
+ | --- | --- |
114
+ | ` eventData ` | sent data will be received when clicked or canceled |
115
+ | ` title ` | Title of the notification|
116
+ | ` body ` | Body of the notification |
117
+ | ` id ` | unique number|
118
+ | ` View ` | View that needs to be added (Array)|
119
+
120
+ #### View Options
114
121
115
122
| Property | Description |
116
123
| --- | --- |
117
124
| ` name ` | text that needs to be displayed |
118
125
| ` size ` | Size of text|
119
- | ` type ` | Type of view (Text,Image, Cronometer) |
120
- | ` bold ` | Font (NORMAL,BOLD,ITALIC,BOLD_ITALIC)|
126
+ | ` type ` | Type of view (Text, Image, Cronometer) |
127
+ | ` bold ` | Font (NORMAL, BOLD,ITALIC, BOLD_ITALIC)|
121
128
| ` uri ` | Image in base64|
122
129
| ` PaddingLeft ` | Left Padding|
123
130
| ` PaddingTop ` | PaddingTop|
@@ -131,9 +138,12 @@ CustomNotification({
131
138
132
139
See the contributing guide to learn how to contribute to the repository and the development workflow.
133
140
141
+ ## 📄 License
142
+
143
+ MIT Licensed. See LICENSE file for details.
134
144
135
- ## License
145
+ ## 🔍 Keywords
136
146
137
- MIT
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
138
148
139
149
0 commit comments