Skip to content

Commit 3c7aab4

Browse files
nilavanrajnilavanraj
authored
Update README.md
1 parent 6cacaaf commit 3c7aab4

File tree

1 file changed

+97
-139
lines changed

1 file changed

+97
-139
lines changed

‎README.md

Lines changed: 97 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,116 @@
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>
8-
<p align="center">
9-
<img width="80%" src="https://user-images.githubusercontent.com/58332892/166133982-effe321c-a0fd-4315-bb29-cc7ee29d0bd4.gif">
10-
</p>
3+
A powerful, flexible notification library for React Native Android that enables custom timer-based notifications with advanced customization options.
114

5+
## 🚀 Key Features
126

13-
## Installation
7+
- **Customizable Timer Notifications**: Create dynamic, time-based notifications
8+
- **Animated GIF Support**: Enhance notifications with animated graphics
9+
- **Fully Customizable Notification Layouts**: Design unique notification experiences
1410

15-
```sh
11+
12+
## 📦 Installation
13+
14+
```bash
1615
npm install react-native-custom-timer-notification
1716
```
1817

19-
AndroidManifest
18+
## 🛠 Android Setup
19+
20+
### 1. Add Permissions to AndroidManifest.xml
21+
22+
Open `android/app/src/main/AndroidManifest.xml` and add:
23+
2024
```xml
25+
<uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
26+
<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
27+
```
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+
### 2. Register Receivers and Services
30+
31+
Inside the `<application>` tag, add:
32+
33+
```xml
34+
<receiver android:name="com.reactnativecustomtimernotification.NotificationEventReceiver" />
35+
<receiver android:name="com.reactnativecustomtimernotification.OnClickBroadcastReceiver" />
36+
<service android:name="com.reactnativecustomtimernotification.ForegroundService"/>
2937
```
30-
## Usage
31-
### Timer notification
3238

33-
Only Timer notifiction with default Title and body
34-
```js
39+
## 🎯 Usage Scenarios
40+
41+
### Basic Timer Notification
42+
43+
<p align="center">
44+
<img width="80%" src="https://user-images.githubusercontent.com/58332892/166133982-effe321c-a0fd-4315-bb29-cc7ee29d0bd4.gif">
45+
</p>
3546

47+
```javascript
3648
import { TimerNotification } from "react-native-custom-timer-notification";
37-
```
3849

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|
46-
47-
48-
#### Example
49-
50-
```js
51-
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-
50+
TimerNotification({
51+
id: 1,
52+
title: "Meeting Reminder",
53+
body: "Team meeting starts in:",
54+
date: "30-12-2024 15:00:00",
55+
payload: "meeting-123"
56+
});
6457
```
65-
<h3>Full custom notification </h3>
6658

67-
Full custom notifiction with custom image, text and cronometer.
68-
```js
59+
### Animated Notification with GIF
6960

70-
import { CustomNotification, TYPES, FB_TYPE } from "react-native-custom-timer-notification";
61+
<p align="center">
62+
<img width="50%" src="https://github.com/user-attachments/assets/cea88228-602a-42df-8326-569fd0a03cf1">
63+
</p>
64+
65+
```javascript
66+
CustomTimerNotification.TimerNotification({
67+
id: 2,
68+
title: "Special Offer!",
69+
body: "Limited time offer ends in:",
70+
date: "25-12-2024 23:59:59",
71+
gifUrl: "https://example.com/animation.gif",
72+
payload: "offer-456"
73+
});
7174
```
75+
#### Options
7276

73-
| Property | Description |
74-
| --- | --- |
75-
| `eventData` | sent data will be received when click or canceled |
76-
| `title` |Title of the notification|
77-
| `body` |Body of the notification |
78-
| `id` |unique number|
79-
| `View` |View that needs to be added (Array)|
77+
| Parameter | Type | Required | Description |
78+
|-----------|----------|----------|---------------------------------|
79+
| id | number | Yes | Unique notification identifier |
80+
| title | string | Yes | Notification title |
81+
| body | string | Yes | Notification message |
82+
| date | string | Yes | End date (dd-MM-yyyy HH:mm:ss) |
83+
| gifUrl | string | No | URL to GIF animation |
84+
| payload | string | No | Custom data payload |
85+
86+
## 🎨 Full Custom Notification
87+
88+
Create fully customized notifications with detailed configurations:
89+
<p align="center">
90+
<img src="https://user-images.githubusercontent.com/58332892/208312749-58586dba-da62-4531-85bb-62346a57aa03.gif">
91+
</p>
8092

81-
<h3> View Properties </h3>
93+
```javascript
94+
import { CustomNotification, TYPES, FB_TYPE } from "react-native-custom-timer-notification";
95+
96+
CustomNotification({
97+
eventData: JSON.stringify('notification_data'),
98+
title: 'Custom Notification',
99+
body: 'Detailed Notification',
100+
id: 1,
101+
View: [
102+
{
103+
name: 'Limited Sales',
104+
size: 20,
105+
type: TYPES.Text,
106+
bold: FB_TYPE.BOLD_ITALIC,
107+
color: '#ed1a45',
108+
},
109+
// Additional view configurations
110+
]
111+
});
112+
```
113+
#### ViewOptions
82114

83115
| Property | Description |
84116
| --- | --- |
@@ -94,88 +126,14 @@ import { CustomNotification, TYPES, FB_TYPE } from "react-native-custom-timer-no
94126
| `color` |Text color|
95127
| `ZeroTime` |Time at which zero comes|
96128

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";
162-
163-
RemoveTimer(1);
164129

165-
```
166-
### onclick and cancel listner
167-
```js
168-
import { onEvent } from "react-native-custom-timer-notification";
169-
170-
onEvent(event=>{
171-
console.log(event)
172-
});
130+
## 🤝 Contributing
173131

174-
```
175-
## Contributing
132+
See the contributing guide to learn how to contribute to the repository and the development workflow.
176133

177-
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
178134

179135
## License
180136

181137
MIT
138+
139+

0 commit comments

Comments
 (0)