@janiscommerce/app-push-notification 0.0.3 → 0.0.5

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 ## [Unreleased]
 
+## [0.0.5] - 2025-06-17
+
+### Added
+
+- Sound to notifications
+
+## [0.0.4] - 2024-06-25
+
+### Added
+
+- Added notification channels
+
 ## [0.0.3] - 2024-06-13
 
 ### Added

package/README.md

@@ -29,12 +29,37 @@ Inside remoteMessage you get the notifications object that contains the informat
 
 For more information about this, read https://rnfirebase.io/reference/messaging/remotemessage
 
+## Customize background notification sound:
+
+To customize the background notification sound, you can pass the `backgroundNotificationSound` parameter to the `NotificationProvider` component. By default, it uses the 'default' sound.
+
+```javascript
+import NotificationProvider from '@janiscommerce/app-push-notification'
+
+return (
+ <NotificationProvider
+   appName='pickingApp'
+   events={["picking:session:created","picking:session:assigned"]}
+   environment='beta'
+   backgroundNotificationSound='custom_sound' // Custom sound file name
+   >
+   <MyComponent/>
+ </NotificationProvider>
+)
+```
+
+To use a custom sound on Android, you must:
+1. Place the sound file in the `android/app/src/main/res/raw/` folder
+2. The file name must be lowercase and without special characters
+3. The sound file must be in .mp3, .wav, or .aac format
+4. Pass the exactly file name (without extension) as the value of `backgroundNotificationSound`
+
 # This library provides the following components and methods:
 
 ## Functions
 
 <dl>
-<dt><a href="#NotificationProvider">NotificationProvider(children, appName, events, environment, additionalInfo)</a> ⇒ <code>null</code> | <code>React.element</code></dt>
+<dt><a href="#NotificationProvider">NotificationProvider(children, appName, events, environment, additionalInfo, channelConfigs)</a> ⇒ <code>null</code> | <code>React.element</code></dt>
 <dd><p>It is the main component of the package, it is a HOC that is responsible for handling the logic of subscribing to notifications and receiving messages from the Firebase console. The HOC contains listeners to listen to notifications in the foreground and background, so (unless we cancel the subscription), we will receive notifications from the app even when it is closed.</p>
 </dd>
 <dt><a href="#setupBackgroundMessageHandler">setupBackgroundMessageHandler(callback)</a></dt>
@@ -91,7 +116,7 @@ For more information about this, read https://rnfirebase.io/reference/messaging/
 
 <a name="NotificationProvider"></a>
 
-## NotificationProvider(children, appName, events, environment, additionalInfo) ⇒ <code>null</code> \| <code>React.element</code>
+## NotificationProvider(children, appName, events, environment, additionalInfo, channelConfigs) ⇒ <code>null</code> \| <code>React.element</code>
 It is the main component of the package, it is a HOC that is responsible for handling the logic of subscribing to notifications and receiving messages from the Firebase console. The HOC contains listeners to listen to notifications in the foreground and background, so (unless we cancel the subscription), we will receive notifications from the app even when it is closed.
 
 **Kind**: global function  
@@ -107,6 +132,7 @@ It is the main component of the package, it is a HOC that is responsible for han
 | events | <code>Array.&lt;string&gt;</code> | is an array that will contain the events to which the user wants to subscribe |
 | environment | <code>string</code> | The environment is necessary for the API that we are going to use to subscribe the device to notifications. |
 | additionalInfo | <code>object</code> | fields to be sent as part of the body of the subscription request |
+| channelConfigs | <code>Array.&lt;(string\|object)&gt;</code> | is the configuration that will be used to create new notification channels |
 
 **Example**  
 ```js

package/lib/NotificationProvider/index.js

@@ -9,6 +9,11 @@ import {
   isObject,
 } from '../utils';
 import usePushNotification from '../usePushNotification';
+import {
+  makeDefaultChannel,
+  makeNotificationChannels,
+  parseNotificationChannel,
+} from '../utils/channel';
 
 /**
  * @function NotificationProvider
@@ -18,6 +23,8 @@ import usePushNotification from '../usePushNotification';
  * @param {Array<string>} events is an array that will contain the events to which the user wants to subscribe
  * @param {string} environment The environment is necessary for the API that we are going to use to subscribe the device to notifications.
  * @param {object} additionalInfo fields to be sent as part of the body of the subscription request
+ * @param {Array<string | object>} channelConfigs is the configuration that will be used to create new notification channels
+ * @param {string} backgroundNotificationSound is the sound that will be played when the app is in the background
  * @throws null when not receive a children argument
  * @returns {null | React.element}
  * @example
@@ -41,6 +48,8 @@ const NotificationProvider = ({
   events,
   environment,
   additionalInfo,
+  channelConfigs = [],
+  backgroundNotificationSound,
 }) => {
   if (!children) return null;
 
@@ -48,6 +57,13 @@ const NotificationProvider = ({
   const validEnvironment =
     !!environment && isString(environment) ? environment : '';
   const validEvents = !!events && isArray(events) ? events : [];
+  const validChannelConfigs =
+    !!channelConfigs && isArray(channelConfigs) ? channelConfigs : [];
+
+  const safeBackgroundSound =
+    isString(backgroundNotificationSound) && backgroundNotificationSound?.trim()
+      ? backgroundNotificationSound.trim()
+      : 'default';
 
   const isRegistered = useRef(false);
   const {
@@ -95,6 +111,18 @@ const NotificationProvider = ({
     return updateNotificationState({backgroundNotification: data});
   };
 
+  const createNotificationChannels = async () => {
+    /* istanbul ignore else */
+    if (validChannelConfigs) {
+      const parsedChannelConfigs = validChannelConfigs
+        ?.map((config) => parseNotificationChannel(config))
+        .filter(Boolean);
+
+      await makeNotificationChannels(parsedChannelConfigs);
+    }
+    await makeDefaultChannel({sound: safeBackgroundSound});
+  };
+
   useEffect(() => {
     const alreadySuscribed = isRegistered.current;
     if (environment && appName && !!pushEvents.length && !alreadySuscribed) {
@@ -102,6 +130,10 @@ const NotificationProvider = ({
     }
   }, [pushEvents]);
 
+  useEffect(() => {
+    createNotificationChannels();
+  }, []);
+
   /* istanbul ignore next */
   useEffect(() => {
     const foregroundMessageHandler = setupForegroundMessageHandler(

package/lib/constants/defaultChannelConfigs.js

@@ -0,0 +1,13 @@
+import {AndroidImportance, AndroidVisibility} from '@notifee/react-native';
+
+const DEFAULT_CHANNEL_CONFIGS = {
+  badge: true,
+  importance: AndroidImportance.HIGH,
+  lights: true,
+  sound: 'default',
+  vibration: true,
+  vibrationPattern: [500, 1000, 500, 1000],
+  visibility: AndroidVisibility.PUBLIC,
+};
+
+export default DEFAULT_CHANNEL_CONFIGS;

package/lib/utils/channel/index.js

@@ -0,0 +1,75 @@
+import notifee, {AndroidImportance} from '@notifee/react-native';
+import DEFAULT_CHANNEL_CONFIGS from '../../constants/defaultChannelConfigs';
+import {isObject, isString} from '..';
+
+export const parseChannelConfiguration = (params = {}) => {
+  if (!params || !isObject(params)) return null;
+
+  const {name, id = '', description = '', ...restConfigs} = params;
+
+  if (!name || !isString(name)) return null;
+
+  const isValidDescription = !!description && isString(description);
+  const hasValidId = !!id && isString(id);
+
+  return {
+    ...DEFAULT_CHANNEL_CONFIGS,
+    ...restConfigs,
+    name,
+    id: hasValidId ? id : name,
+    importance: AndroidImportance.HIGH,
+    ...(isValidDescription && {
+      description,
+    }),
+  };
+};
+
+export const parseNotificationChannel = (channel) => {
+  const channelType = typeof channel;
+  const allowedConfigs = ['string', 'object'];
+
+  if (!allowedConfigs.includes(channelType)) return null;
+  const channelData = channelType === 'string' ? {name: channel} : channel;
+
+  const parsedChannel = parseChannelConfiguration(channelData);
+
+  return parsedChannel;
+};
+
+/* eslint-disable consistent-return */
+export const makeNotificationChannel = async (channelConfig = {}) => {
+  const {id, name} = channelConfig;
+
+  if (!id || !name || !isString(id) || !isString(name)) return null;
+
+  try {
+    await notifee.createChannel(channelConfig);
+  } catch (error) {
+    return Promise.reject(error);
+  }
+};
+
+/* eslint-disable consistent-return */
+export const makeNotificationChannels = async (channelConfigs) => {
+  try {
+    await notifee.createChannels(channelConfigs);
+  } catch (error) {
+    return Promise.reject(error);
+  }
+};
+
+/* eslint-disable consistent-return */
+export const makeDefaultChannel = async (configs = {}) => {
+  try {
+    const parsedChannel = parseChannelConfiguration({
+      id: 'channel_default',
+      name: 'Operational notifications',
+      description: 'Default channel to receive operational notifications',
+      ...configs,
+    });
+
+    await makeNotificationChannel(parsedChannel);
+  } catch (error) {
+    return Promise.reject(error);
+  }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@janiscommerce/app-push-notification",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "type": "commonjs",
   "description": "This package will take care of performing the main actions for registration to receive notifications in the foreground and background.",
   "main": "lib/index.js",
@@ -28,6 +28,7 @@
   "license": "ISC",
   "dependencies": {
     "@janiscommerce/app-request": "^2.2.0",
+    "@notifee/react-native": "^7.8.2",
     "@react-native-async-storage/async-storage": "^1.18.1",
     "@react-native-firebase/app": "^18.3.1",
     "@react-native-firebase/messaging": "^18.3.1",