React Native Tutorial #28 (2021) - Local & Scheduled Push Notification

hi welcome to programming with mesh in this session we will get acquainted with the push notification locally and on a schedule [Music] in the preview session we learned how to call an api using fetch and use its response to display a list now we are going to display a notification using the data of the same item by touching each of these items to do this we first put each item inside the touchable so that the emperor section can be added to it now we use this module to use the notification feature using this command we can install it and if your target is to display notifications on ios you should also use this link to install this module well our target is to display the notification on android so we only install this module now we need to make change to the android folder first in the build.gradle file we add these two lines this file is located in this path i paste those two lines at the beginning of the ext object and set the default values mentioned in front of it as the value [Music] now we need to put these codes in the androidmanifest.xml file inside the application tag [Music] find the application tag and paste the code at the end we also place these two lines at the top of the application tag to create the access needed for the notification inside this code is a color code that reads it from a file in this path we create a color.xml file or if it exists we put this code in it in the project we created we don't need to make this change because there is no a new intent function in the mainactivity.java file this part is also related to sending notifications remotely which i will explain in the future now we need to put the notification configs in the first file of the app that runs which is usually the index.js file you can find this file in the root path of the project first we import push notification in this file then enter the configs as follows from the configs listed here i only enter the required items [Music] first we enter this function this section is for ios which you can remove it this function is actually called when the notification is clicked also if you only want to use the notification locally be sure to add these to the configs here as we don't currently intend to use the notification remotely i will add it to the configs [Music] in android to create a notification you have to do this on a channel so i create a notification channel on the first page of the app the login page first i import push notification into it [Music] then i create a function to create the channel inside it i use the create channel method and as its input i define the channel id and name now i put this function in use effect to create a notification channel in the first run of the login page now we want to display the notification by clicking on the list items so first i import push notification on the home page now i create a function to manage the notification display and set it as empress of items we want to use the information of each item to display the notification so we consider the item object as the input of this function we use the local notification method to display the notification locally as the first parameter we put the notification channel id in it and use the same id that we created in the login page in the next parameter we define the notification title here for example i use the name of the country and in the next parameter we define the main text inside the notification in which i use the city name now i run the app to see the result as you can see by clicking on this item the relevant notification is displayed correctly now according to the notification configs in the index.js file by clicking on it we should see the relevant data in the console and as you can see data is displayed correctly in the local notifications section you can see all the parameters that you can have within this method some of them can be used only for android one of them can be used only for ios and the others for voice platforms for example i use some parameters the big text parameter can be used to display linear text [Music] in this case the notification in the unexpended state displays the content of the message and in the expanded state it displays the big test content using the next parameter you can specify the color of each notification to distinguish it from the others you can also specify an id for each notification created if this number is constant its id remains constant each time a notification is created here we can use the index of each item to make the notification id for each item unique so if we create a notification with a predefined id its content actually replaces the previous notification if you don't use the id in the notification definition each time a new id is generated randomly for it so every time we create a notification we will have a new notification [Music] you can use the cancel all local notifications method to remove all notifications for example here by clicking on each item first all previous notifications are removed then a new notification is created you can also use the cancel local notifications method with the desired id to remove just one of the notifications [Music] now suppose we want to display a notification at a specific time to do this we use the local notification schedule method [Music] in it i define three parameters required to display the notification in addition in the date parameter i specify the time for displaying the notification i put its value here 20 seconds from the time of creation also using this parameter a notification will be displayed if the device is in the idle mode now if i click on one of the items the first notification will be displayed immediately and the next notification is created what is displayed 20 seconds later as you can see the scheduled notification was displayed correctly so there we go we learned how to create notifications locally and on schedule so in the next video we will learn how to curate notifications remotely using firebase now if you enjoyed the video please don't forget to like comment share and subscribe and i'll see you in the next session [Music]

Channel: Programming with Mash

Views: 10,864

Keywords: react native schedule local notification, react native android notification channel, react native scheduled notifications, Push notification local react native, react native local notifications, react native notifications, programming with mash, notification react native, react native push notification ios, react native push notification firebase, push notification react native firebase, react native 2021, react native push notification, react native notifications firebase

Id: RgN1TEnULVQ

Length: 15min 6sec (906 seconds)

Published: Fri Jun 18 2021

Reddit Comments

[u/sharifimehr]

🌟 In this session we will get acquainted with the Push Notification locally and on schedule.