Create notification channel react native

Question

I'm using react-native-firebase v6 to handle push notifications. since there is no create channel id feature in this version, What is solution to create channel id in react native project?

Answer 1

Basically Channels are created only once, until you un-install and re-install the Application.

So add createChannel in main file[i.e index.js/App.js]. e Refer the code below for creating channel

PushNotification.createChannel(
    {
      channelId: 'channel-id', // (required)
      channelName: 'My channel', // (required)
      channelDescription: 'A channel to categorise your notifications', // (optional) default: undefined.
      playSound: true, // (optional) default: true
      soundName: 'notification.mp3', // (optional) See `soundName` parameter of `localNotification` function
      importance: Importance.HIGH, // (optional) default: Importance.HIGH. Int value of the Android notification importance
      vibrate: true, // (optional) default: true. Creates the default vibration pattern if true.
    },
    (created) => console.log(`createChannel returned '${created}'`), // (optional) callback returns whether the channel was created, false means it already existed.
  );

Once the Channel creation is done, then create file to handle pushNotifications and the code below

export const showLocalNotification = ({title, body, id, number}, messageId) =>
  PushNotification.localNotification({
    channelId: 'channel-id', // (required) channelId, if the channel doesn't exist, notification will not trigger.
    ticker: 'Hey', // (optional)
    showWhen: true, // (optional) default: true
    autoCancel: true, // (optional) default: true
    largeIcon: 'ic_launcher', // (optional) default: "ic_launcher". Use "" for no large icon.
    // largeIconUrl: 'https://www.example.tld/picture.jpg', // (optional) default: undefined
    smallIcon: 'ic_notification', // (optional) default: "ic_notification" with fallback for "ic_launcher". Use "" for default small icon.
    // bigText: '', // (optional) default: "message" prop
    // subText: '', // (optional) default: none
    // bigPictureUrl: 'https://www.example.tld/picture.jpg', // (optional) default: undefined
    bigLargeIcon: 'ic_launcher', // (optional) default: undefined
    // bigLargeIconUrl: 'https://www.example.tld/bigicon.jpg', // (optional) default: undefined
    // color: 'red', // (optional) default: system default
    vibrate: true, // (optional) default: true
    vibration: 300, // vibration length in milliseconds, ignored if vibrate=false, default: 1000
    tag: 'some_tag', // (optional) add tag to message
    group: 'group', // (optional) add group to message
    groupSummary: false, // (optional) set this notification to be the group summary for a group of notifications, default: false
    ongoing: false, // (optional) set whether this is an "ongoing" notification
    priority: 'high', // (optional) set notification priority, default: high
    visibility: 'private', // (optional) set notification visibility, default: private
    ignoreInForeground: false, // (optional) if true, the notification will not be visible when the app is in the foreground (useful for parity with how iOS notifications appear). should be used in combine with `com.dieam.reactnativepushnotification.notification_foreground` setting
    shortcutId: 'shortcut-id', // (optional) If this notification is duplicative of a Launcher shortcut, sets the id of the shortcut, in case the Launcher wants to hide the shortcut, default undefined
    onlyAlertOnce: true, // (optional) alert will open only once with sound and notify, default: false

    when: null, // (optional) Add a timestamp (Unix timestamp value in milliseconds) pertaining to the notification (usually the time the event occurred). For apps targeting Build.VERSION_CODES.N and above, this time is not shown anymore by default and must be opted into by using `showWhen`, default: null.
    usesChronometer: false, // (optional) Show the `when` field as a stopwatch. Instead of presenting `when` as a timestamp, the notification will show an automatically updating display of the minutes and seconds since when. Useful when showing an elapsed time (like an ongoing phone call), default: false.
    timeoutAfter: null, // (optional) Specifies a duration in milliseconds after which this notification should be canceled, if it is not already canceled, default: null

    messageId: `${number}:${id}`, // (optional) added as `message_id` to intent extras so opening push notification can find data stored by @react-native-firebase/messaging module.

    // actions: ['Yes', 'No'], // (Android only) See the doc for notification actions to know more
    invokeApp: true, // (optional) This enable click on actions to bring back the application to foreground or stay in background, default: true
    // repeatType: 'day', // (optional) Repeating interval. Check 'Repeating Notifications' section for more info.
    /* iOS only properties */
    category: '', // (optional) default: empty string
    // subtitle: 'My Notification Subtitle', // (optional) smaller title below notification title

    /* iOS and Android properties */
    id, // (optional) Valid unique 32 bit integer specified as string. default: Autogenerated Unique ID
    title: title, // (optional)
    message: body, // (required)
    // picture: 'https://www.example.tld/picture.jpg', // (optional) Display an picture with the notification, alias of `bigPictureUrl` for Android. default: undefined
    userInfo: {}, // (optional) default: {} (using null throws a JSON value '<null>' error)
    playSound: true, // (optional) default: true
    importance: Importance.HIGH,
    soundName: 'notification.mp3', // (optional) Sound to play when the notification is shown. Value of 'default' plays the default sound. It can be set to a custom sound such as 'android.resource://com.xyz/raw/my_sound'. It will look for the 'my_sound' audio file in 'res/raw' directory and play it. default: 'default' (default sound is played)
    number, // (optional) Valid 32 bit integer specified as string. default: none (Cannot be zero)
  });

To Handle messages when the App is in background write below code in index.android.js

import messaging from '@react-native-firebase/messaging';
messaging().setBackgroundMessageHandler(async (remoteMessage) => {
  showLocalNotification({title: remoteMessage.data.title, body: remoteMessage.data.body}, remoteMessage.messageId);
  return Promise.resolve();
});

To Handle messages when the App is closed/Terminated write below code in index.android.js

AppRegistry.registerHeadlessTask(
      'RNFirebaseBackgroundMessage',
      () => firebaseBackgroundMessage,
    );

where firebaseBackgroundMessage function looks like below, and return a promise resolver

export async function firebaseBackgroundMessage(message) {
  showLocalNotification({title: message.data.title,body: message.data.body}, message.messageId);
  return Promise.resolve();
}

Happy Coding...

Answer 2

You can use this library https://github.com/zo0r/react-native-push-notification And then

      PushNotification.createChannel(
    {
      channelId: "channel-id", // (required)
      channelName: "My channel", // (required)
      channelDescription: "A channel to categorise your notifications", // (optional) default: undefined.
      soundName: "default", // (optional) See `soundName` parameter of `localNotification` function
      importance: 4, // (optional) default: 4. Int value of the Android notification importance
      vibrate: true, // (optional) default: true. Creates the default vibration patten if true.
    },
    (created) => console.log(`createChannel returned '${created}'`) // (optional) callback returns whether the channel was created, false means it already existed.
  );