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?
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?
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.
);
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...