Merge pull request #53 from Naveen-g09/notifee

Notifications Feature
Naveen-g09 · Jun 23, 2024 · d9f28a2 · d9f28a2
2 parents 8f272e4 + 8a33fbe
commit d9f28a2
Show file tree

Hide file tree

Showing 8 changed files with 276 additions and 6 deletions.
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1,4 +1,6 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
+npx expo-doctor
+
 yarn pre-commit
diff --git a/app/(tabs)/home.tsx b/app/(tabs)/home.tsx
@@ -2,6 +2,8 @@ import { Link } from "expo-router";
 import React from "react";
 import { Text, TouchableOpacity, ScrollView, StyleSheet } from "react-native";
 
+import { onDisplayNotification } from "@/utils/helpers/notification";
+
 //TODO: this is homepage of the app
 //TODO: add a notification icon
 //TODO: it will have details of the society, details of the resident, details of the flat, details of the family members, details of the parking, details of the utilities, details of the maintenance, details of the bills, details of the orders, details of the payments, details of the receipts, details of the complaints, details of the suggestions, details of the feedbacks, details of the polls, details of the announcements, details of the notices, details of the chats, details of the events, details of the posts, details of the category, details of the community, details of the account, details of the index
@@ -41,11 +43,18 @@ const Home = () => {
         </TouchableOpacity>
       </Link>
 
-      <Link href="/visitor" asChild>
+      {/* <Link href="/visitor" asChild>
         <TouchableOpacity style={styles.button}>
           <Text style={styles.buttonText}>Visitors</Text>
         </TouchableOpacity>
-      </Link>
+      </Link> */}
+
+      <TouchableOpacity
+        style={styles.button}
+        onPress={() => onDisplayNotification()}
+      >
+        <Text style={styles.buttonText}>Display Notification</Text>
+      </TouchableOpacity>
     </ScrollView>
   );
 };

diff --git a/eas.json b/eas.json
@@ -1,19 +1,34 @@
 {
   "cli": {
-    "version": ">= 7.0.0"
+    "version": ">= 5.9.3"
   },
   "build": {
     "development": {
+      "ios": { "image": "latest" },
       "developmentClient": true,
       "distribution": "internal",
-      "channel": "development"
+      "channel": "preview",
+      "credentialsSource": "remote"
+    },
+    "preview-apk": {
+      "android": {
+        "buildType": "apk",
+        "resourceClass": "large",
+        "credentialsSource": "remote",
+        "image": "auto"
+      },
+      "channel": "preview-apk"
     },
     "preview": {
       "distribution": "internal",
-      "channel": "preview"
+      "channel": "preview",
+      "ios": {
+        "simulator": false
+      }
     },
     "production": {
-      "channel": "production"
+      "channel": "production",
+      "credentialsSource": "remote"
     }
   },
   "submit": {

diff --git a/hooks/notificationHelpers.ts b/hooks/notificationHelpers.ts
@@ -0,0 +1,142 @@
+import notifee, { AndroidStyle } from "@notifee/react-native";
+
+import {
+  BigTextNotificationProps,
+  InboxNotificationProps,
+  MessageNotificationProps,
+  PictureNotificationProps,
+  SimpleNotificationProps,
+} from "./notificationInterfaces";
+
+export async function displaySimpleNotification(
+  props: SimpleNotificationProps,
+) {
+  const channelId = await notifee.createChannel({
+    ...props.config,
+    id: props.id,
+    name: props.id,
+    vibration: true,
+    vibrationPattern: [500, 300],
+    sound: "notify",
+  });
+
+  await notifee.displayNotification({
+    title: props.title,
+    body: props.body,
+    id: props.id,
+    ...props.notificationConfig,
+    android: {
+      channelId,
+      ...props.notificationConfig?.android,
+    },
+  });
+}
+
+export async function displayPictureNotification(
+  props: PictureNotificationProps,
+) {
+  const channelId = await notifee.createChannel({
+    ...props.config,
+    id: props.id,
+    name: `Residentron channel`,
+    vibration: true,
+    vibrationPattern: [500, 300],
+    sound: "notify",
+  });
+
+  await notifee.displayNotification({
+    ...props.notificationConfig,
+    title: props.title,
+    body: props.body,
+    id: props.id,
+    android: {
+      channelId,
+      style: {
+        type: AndroidStyle.BIGPICTURE,
+        picture: props.picture,
+      },
+      ...props.notificationConfig?.android,
+    },
+  });
+}
+
+export async function displayMessageNotification(
+  props: MessageNotificationProps,
+) {
+  const channelId = await notifee.createChannel({
+    ...props.config,
+    id: props.id,
+    vibration: true,
+    vibrationPattern: [500, 300],
+    name: `Residentron channel`,
+    sound: "notify",
+  });
+
+  await notifee.displayNotification({
+    ...props.notificationConfig,
+    title: props.title,
+    body: props.body,
+    id: props.id,
+    android: {
+      channelId,
+      style: {
+        type: AndroidStyle.MESSAGING,
+        person: props.person,
+        messages: props.messages,
+      },
+      ...props.notificationConfig?.android,
+    },
+  });
+}
+
+export async function displayInboxNotification(props: InboxNotificationProps) {
+  const channelId = await notifee.createChannel({
+    ...props.config,
+    id: props.id,
+    name: `Residentron`,
+    vibration: true,
+    vibrationPattern: [500, 300],
+    sound: "notify",
+  });
+
+  await notifee.displayNotification({
+    ...props.notificationConfig,
+    title: props.title,
+    body: props.body,
+    id: props.id,
+    android: {
+      channelId,
+      style: {
+        type: AndroidStyle.INBOX,
+        lines: props.messages,
+      },
+      ...props.notificationConfig?.android,
+    },
+  });
+}
+
+export async function displayTextNotification(props: BigTextNotificationProps) {
+  const channelId = await notifee.createChannel({
+    ...props.config,
+    id: props.id,
+    name: `Residentron channel`,
+    vibration: true,
+    vibrationPattern: [500, 300],
+    sound: "notify",
+  });
+
+  await notifee.displayNotification({
+    ...props.notificationConfig,
+    title: props.title,
+    body: props.body,
+    id: props.id,
+    android: {
+      channelId,
+      style: {
+        type: AndroidStyle.BIGTEXT,
+        text: props.text,
+      },
+      ...props.notificationConfig?.android,
+    },
+  });
+}
diff --git a/hooks/notificationInterfaces.ts b/hooks/notificationInterfaces.ts
@@ -0,0 +1,50 @@
+import {
+  AndroidChannel,
+  Notification,
+  AndroidMessagingStyleMessage,
+  AndroidPerson,
+} from "@notifee/react-native";
+
+export interface MessageNotificationProps {
+  id: string;
+  config?: Omit<Omit<AndroidChannel, "id">, "channel">;
+  title: string;
+  body: string;
+  notificationConfig?: Omit<Omit<Notification, "title">, "body">;
+  messages: AndroidMessagingStyleMessage[];
+  person: AndroidPerson;
+}
+export interface PictureNotificationProps {
+  id: string;
+  config?: Omit<Omit<AndroidChannel, "id">, "channel">;
+  title: string;
+  body: string;
+  notificationConfig?: Omit<Omit<Notification, "title">, "body">;
+  picture: string;
+}
+
+export interface InboxNotificationProps {
+  id: string;
+  config?: Omit<Omit<AndroidChannel, "id">, "channel">;
+  title: string;
+  body: string;
+  notificationConfig?: Omit<Omit<Notification, "title">, "body">;
+  messages: string[];
+}
+
+export interface SimpleNotificationProps {
+  id: string;
+  config?: Omit<Omit<AndroidChannel, "id">, "channel">;
+  title?: string;
+  body?: string;
+  notificationConfig?: Omit<Omit<Notification, "title">, "body">;
+}
+
+export interface BigTextNotificationProps {
+  id: string;
+  config?: Omit<Omit<AndroidChannel, "id">, "channel">;
+  title: string;
+  body: string;
+  notificationConfig?: Omit<Omit<Notification, "title">, "body">;
+  text: string;
+}
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "@expo/vector-icons": "^14.0.2",
     "@expo/webpack-config": "~19.0.1",
     "@gorhom/bottom-sheet": "^4.6.1",
+    "@notifee/react-native": "^7.8.2",
     "@react-native-async-storage/async-storage": "1.21.0",
     "@react-navigation/native": "^6.0.2",
     "axios": "^1.7.2",

diff --git a/utils/helpers/notification.ts b/utils/helpers/notification.ts
@@ -0,0 +1,46 @@
+import notifee from "@notifee/react-native";
+
+export async function onDisplayNotification() {
+  // Request permissions (required for iOS)
+  await notifee.requestPermission();
+
+  // Create a channel (required for Android)
+  const channelId = await notifee.createChannel({
+    id: "default",
+    name: "Default Channel",
+  });
+
+  // Display a notification
+  await notifee.displayNotification({
+    title: "Notification Title",
+    body: "Main body content of the notification",
+    android: {
+      channelId,
+      // optional, defaults to 'ic_launcher'.
+      // pressAction is needed if you want the notification to open the app when pressed
+      pressAction: {
+        id: "default",
+      },
+    },
+  });
+}
+
+// export async function sendPushNotification(expoPushToken: string) {
+//   const message = {
+//     to: expoPushToken,
+//     sound: "default",
+//     title: "Original Title",
+//     body: "And here is the body!",
+//     data: { data: "goes here" },
+//   };
+
+//   await fetch("https://exp.host/--/api/v2/push/send", {
+//     method: "POST",
+//     headers: {
+//       Accept: "application/json",
+//       "Accept-encoding": "gzip, deflate",
+//       "Content-Type": "application/json",
+//     },
+//     body: JSON.stringify(message),
+//   });
+// }
diff --git a/yarn.lock b/yarn.lock
@@ -2076,6 +2076,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@notifee/react-native@^7.8.2":
+  version "7.8.2"
+  resolved "https://registry.yarnpkg.com/@notifee/react-native/-/react-native-7.8.2.tgz#72d3199ae830b4128ddaef3c1c2f11604759c9c4"
+  integrity sha512-VG4IkWJIlOKqXwa3aExC3WFCVCGCC9BA55Ivg0SMRfEs+ruvYy/zlLANcrVGiPtgkUEryXDhA8SXx9+JcO8oLA==
+
 "@npmcli/fs@^1.0.0":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@npmcli/fs/-/fs-1.1.1.tgz#72f719fe935e687c56a4faecf3c03d06ba593257"