Kotlin Notification Alert & Toast Alert | React Native Modules

[Music] hello everyone and welcome to this video tutorial so before you proceed please do make sure hit that like button and also smash that subscribe button so that youtube can show this video to many people that are willing to learn called linearian native integrations so what you're going to be doing in this video is to actually use scotland to trigger an alert sorry and educational ads for our applications using read native so if you see here we are going to be using kotlin and uh red native notification and when i click on this button here you could see we have that notification triggered so here we have the notification title as well as notification body so please don't forget again to hit that like button and also the subscribe button so what we are going to be doing next is not really that much because this is not just like an advanced tutorial i got some requests to actually do this so just come over to your android app folder then over there you could see the gradle file over here so this gradle file we first of all we're going to be adding a coupling version here and i'm gonna add a 1.3.31 you can actually use any version you want but sometimes most of these are not convenient with some dependencies or java dependencies on your machine on your application i mean so you have to be sometimes selecting the version until you find a compatible one so i'm just going to put that down and save that and come down to dependency and what i'm going to do here is to add a class path of that jetbrains dot kotlin then i'm going to add another call in there with credo we have the plugin and here we're gonna select our kotlin version so i'm just gonna close this left pane so we have the jetbrains plugin and we're gonna be using the version that we put down over here so you could see when i had like when i selected that it got both highlighted so we have to save that and the next thing you can do is to come over to this app folder and click on gradle and at the top here you could see under this apply plugin you're just going to bring down apply plugin twice so the first one here we're going to apply the kotlin android and for this one we're going to apply the kotlin android extensions now what i'm going to do next is to come over here and copy this and then come down to dependencies under this gradual file inside your app folder so beneath these you just have to paste that and we are not going to be using compiled we just have to change this to employee augmentation so make sure you format everything and also it's not going to be a plugin we're going to be using kotlin standard library so i'm just going to use a standard library of jdk 7 then it's going to be using the current version the calling version that we specified from our android uh viewed gradle file so i'm gonna save that so if i try to run this application right now so my console i'm going to run this application so i forgot to tell you guys that i grabbed this file or this uh project from our github repository so if you notice here from the last project we have a starter template of bata application so if you check here i think inside this uh app.json you can see we have the bata app so if you check in that video you could see the github repository i'm still going to provide that in the description of this particular video so just go ahead and grab that and then do the steps that we've done so we're going to give this some couple of uh minutes to finish installing them we can continue so right now that is done installing and we can just run npm run android and hit enter so right now we have the application started and in case you kind of uh saw some error or something like an error on your console while running the application just come over here and change this from t to s so that was the only error i encountered and right now we are done with that so before we proceed one more thing i forgot to tell you is that we are going to do this in two ways we are going to add the toast notification and then lastly we add the normal notification so let's go ahead and work on the toast notification and i'm going to come inside the source folder main folder i'm going to create a folder inside the java.com folder and i'm going to call this folder cut lane notifications so inside here we're gonna create three files the first one is gonna be main.kt then the second one the toast module dot kt and then the last one is also the notification module so i just say notification pop so whatever you want to name me just go ahead and name it you don't have a problem with that i'm going to close every other file except for the trimming files we're going to be uh working with and inside here i'm going to bring in my package so let's just quickly bring the things needed down so i'm just going to uh quickly do that and then we can proceed so these are things that we brought down we have the real package then we have the native module the initial module with the help of that we can access any method that we put on here or any function then the context the application is running with and then we have the view manager maybe you want to use custom views so these are just like uh dependencies or modules that helps you in some utils that you want to add to your applications so the first thing i'm gonna do here now is to create the main and we're gonna extend the react package i'm going to close this so so inside here we're gonna have the view manager so we are not really focusing more on the view manager i'm gonna put that down quickly so like i said if we have custom of use we can now pass it down but we don't need that and then we are going to focus mainly on create native modules which is going to use the react context and we are going to extend the giveaway type of react application context and it's going to return at least so this is more like solidity at least of native module and we can close that and here we can just construct an array of native modules so let's give these an array of relative modules we have the native module type and here we can now return the modules so we are going to be working with two modules we have the toast module and also the notification pop module so making sure that everything is done correctly and here i'm gonna use the modules dot add so we're gonna first of all work on the toast modules and then which is gonna accept the react context so without this context our application will run because we are now actually working with activity so if we work with activity we can actually use the context of that activity but over here you could notice that we're just using a single react application context which makes it kind of tricky and also kind of complicated but don't worry we'll see how these things are going to work so let's first of all put this down then we can go ahead and work on the notification module so if you check here you could see we have the tools to jet and then we have native module the context type from the react contest and here one new thing we have here is the react context based java module and also the react method so these are just the utility dependencies or modules so over here we created a class and then we grab the context that we are going to be passing from this place the contest coming from our application so we are still going to show you where this contest is coming from and now we're going to be returning a type of react context page of our module so blah blah blah a lot of things there but actually i'm not taking my time to read more on these documentations but for now just know that they work perfectly and without them working of course i wouldn't make the videos so here we give this iteration of short or long which is for the toast and then over here we have the uh the gate name so the get name is what we're gonna be using whenever we uh want to use this on the react.js or the javascript part of this tutorial so this is the name we're gonna be using then here we have the constants like i said i've not done a lot of research but they work perfectly but what i fully understand here is about the react method so without this attribute method we will not be able to trigger this function using our real native application or the javascript part of it so that's why we have to use the reaction method whenever we want to pass a function over to the javascript parts we make sure at the top we add that react method so here we use the toast and make the test pass the context the message as well as the duration and then the next thing we have to do now is to add this main file or the main package to the main application for application to be able to recognize that so i'm going to terminate this application that is running and i'm going to come here you could see the way we can add a new package that is why it's good to group it together then we can now bring it over to this place then we have the packages dot add new main so that solves it if we are using something like intellij idea or android studio we should actually get some recommendation but nevertheless this is also working perfectly so right here you can see we've added everything that we want from our main file over here we added the module that we actually we actually created or we want to bridge together with our real native application then we now brought it over to this main package or main application so that's it for the toast module so the next one the focusing or the focus of our tutorial which is the notification pop so before we proceed to work on it what i have to do first is to come over here and add the notification pop here so i decided to add that first because of this context then we pass that context and i'm going to import everything that we need at the top so you could see a lot of things that we need from android in order to be able to use the android notification and this also the same thing that you use even whether you're working directly with java or kotlin so these are the necessary things to import so we have them imported and right now let's go ahead and create our class called notification pop and then it's going to extend the context i think context based java module so right here it's it actually should be necessary if we can actually use the super blah blah blah to grab the context but if we do it that way it's not going to work out so we're gonna do it in another way but first let's just bring down every other things that we need so i'm just going to bring it down a variable called loading which is a type of boolean and by default let's give it a false value uh let's just give this a comment at the top here so i think i'm kind of making some mistakes so the next one is called the lead integer so with the help of late integer we actually wait in order for us to use that variable until a value is assigned to this particular variable so i'm just gonna give this a notification manager which is a type of notification manager so let me just use that up to suggest and also we have a list integer or variable notification channel with so say notification channel then we have the elite integer or variable viewer which is also in notification dot builder and then we're gonna have a value of the channel id so channel ids are actually very nice to use because they kind of group your notifications very differently so i'm just going to give these a both skills id so anything you want to call it you can call it and then we have a late integer again or variable my context so this is where we're going to be grabbing that context that we passed down so we're going to be using react application create application context so these are everything that we need that we actually brought down and the next thing now is to be able to assign the contents that we actually pass from this uh main package over here and we have to assign that to this my context in order to be able to use that so quickly i can just bring down the constructor so we have the react application context so here we can use the super and then here i can now say these dots are loading this equals true and then these dots my context is equal to context so this is one of the best way to do it because if uh right now i can actually figure it out the way uh it should be done normally but if you do it this way it should perfectly work because i gave this a lot of try for me to actually come to this conclusion and this with the help of this you can actually go ahead and build your own uh modules or packages and upload it to npm where people can actually grab it and use it anytime so let me kind of create this and uh we are done with that and after the constructor we can use the override function of get name like i say this is the name that we're gonna be using from the react or the javascript part of this which is going to return a pop then lastly we're gonna create a function called trigger so i'm just going to quickly use the react method and we are going to call a function called trigger which is going to trigger our notification but for now let's go ahead and save these and run this application to actually see what you've done so far so everything is working perfectly and everything is working nice and i think i didn't spell this correctly because this is too small to and here we have the choose module so this is actually toast module so make sure everything is typed correctly and let's go ahead and run the application before we can be able to proceed so if you followed everything the way we did it you shouldn't get a single arrow and right now everything is working perfectly and let's go ahead and test run the toast i'm going to quickly come over to the source folder and go back to component and click on notifications so the first thing first is to import from react native and i'm going to import the native modules and here i'm going to import the native modules let's say grab so we have the cars from our native modules so the first one we have here is the toast example so this more like the simpler one you will find mostly online whenever you are searching for something like that and i'm going to kind of uh let me kind of push this better left and let's do it this way let me just increase it a little bit of this way which is better and let me just go ahead and save that and i'm gonna create a function so this one is called show toast so let me just use comma case and here we have the toast example.show let's say give it a private message is a toast message then we can still use that toast example.shots so all these things are actually coming from our tools module so if you check here you can see we have the get name and also we have the duration of short and long so you could see we have the message and also the duration so normally whenever you're using an android tools you must pass the context so let's just go ahead and save that and let's look for a way to trigger that so triggering that is a very simple thing we have to do but first there are some things we can bring up quickly so i'm just going to import from native base and i'm also going to import from constants also i'm going to import from theme so for this one we just need a theme then for this one we need the width and for this one we need the button so i'm going to clear everything inside here so this is just a simple design we are going to be working on we have a flex of one so guys i know that this kind of uh taking time so let me just go ahead and put them down so we are done with that and uh i'm going to come here i'm just going to change this button to sorry then press button to show source so let's save that and refresh our application so i kind of restarted my application because it was not responding properly all right now let's go ahead and click on trigger and here you could see the custom toast message that we passed down from this toast example show so whatever we pass down here let's say this is a toast and save that and run it after re refreshing the application we should actually see this zip toast so uh okay you could see this is it tools showing down here so right now uh we are done with the toast example and let's go back to notification pop and go ahead and finish that so coming back into our trigger function the first thing we have to do is to define a value called that is supposed to be at the top not just like that we have the notification channel which is going to be a notification channel of channel which is going to accept the channel id and we can just give these a string of my notifications and then here we can give a notification manager dot important let's use important high which will kind of trigger put the sound and also a vibration if we allow that then we have configor the notification channel so we have the notification channel dots so the first one is to set the description which is the channel description then we have the notification channel dot enable lights so enable light like you want uh the lights to power up power on or sorry turn on the light of the phone then we also have a set light color so here we have the color dot red and i think i've not brought in color yet but you're gonna bring that in and then we have the notification channel that sets or enable let's use vibration which is going to say that true so let's say that now we have to register this channel with the system or the mobile phone so we we have to do that with the notification manager which is uh which is gonna use the contacts the current contest from the system or from the system service and it's gonna accept the notification manager class so let's make sure that things are typed correctly and lastly we have to now create that notification channel using the notification manager so we have create notification channel and here we can now pass the notification manager so that's it i think sorry not the notification manager the channel that we created at the top or the channel that we get set up here using the notification manager so the color here still not uh showing and i think we have to import that from the android graphics so dot com.android.graph i think that's color i think that should be it so that seats okay everything got rearranged properly so hopefully when we are on our application issue to grab that and put it in our application so that we don't see any error so we have color here and here we do have a follow so the main reason why we did this this way is for us to be able to use this my context so if you notice here it's kind of showing us that the late integer is not actually necessary because the my context was using the constructor but i tried as much as possible to uh use this super directly on this function on this class over here it didn't work until i did it this way so just ignore the error and go ahead but we are still not going to be able to access the context from the lead integer so what we want to do is to make sure that this loading is true then we can now use this context to actually do whatever we want to do whenever we press on trigger so i can say if this.loading whenever is true we can use we can now build a notification using the notification builder so my viewer is gonna accept the context and also the channel id so you could see everything is working perfectly and we are now gonna use the notification builder dot set auto console so what we set auto console whenever identification appears maybe after some milliseconds it goes away so we have to set when we just want the system to be able to decide on its own and not us so we can use system. current set milliseconds then we can set a small icon so right now i don't have any icon i brought in but i'm gonna bring a simple icon from our drawable i think i have to just quickly create a folder inside the res folder so here let's go ahead and create a drawable folder and inside here you can use the drawable dots let's just give the image a name we're gonna bring that in then for the set ticker so we can just give it a hearty sign 265 then we have to set a content title and also they set the content text or the description so make sure all these are camel cased lastly we have to set the contents info so content info you can actually use it maybe whenever someone clicks on that but we are not actually working on these but all these things are very necessary for you to be able to build your own custom notification or react native then lastly we can now use the notification manager and notify the user so here we are gonna notify the user what tree for and we can use the notification educationview.view so that's your service and let's go ahead and run the application again so npn run android so right now everything has started and one more thing i forgot to tell you was that this comb was not supposed to be in in front of these graphics so you can just go ahead and get rid of it and restart the application so for some reason it crashed and that's because i needed to restart taking so i started the application and everything is working fine and right now let's go ahead and give that a try i'm going to come over to the notification file again and for this one i'm going to call it show notification and uh here we're gonna bring in the pop from the notification module because if you check from our notification pop you could see we have the pop over there and uh we can now say pop dot trigger so i think that should be it and over here we can now replace this on show notification so it's actually the first time but hopefully everything should work and it just showing so let's give that a try again so guys i had to like restart the emulator because when i ran the application and installed it it wasn't running perfectly so i had to reclose the emulator and reopen that and everything is working perfectly so the only new thing i added here was to add the version codes so with the version over here the sd sdk integer you can see here is actually the current version of our correct sdk that our application is actually making use of and we want to actually check whether it's greater than version code or already existing so maybe you want to target some certain api sdks you can actually do that specification here or if you want to make it possible that every sdk can be able to run with that notification system you can then get rid of this one but it's more safer to actually use a more uh nearer or a more future version code than using old older version codes which can result in a clash sometimes so that's why it's good to actually wrap it in something like this and the application can be saved on any device then any device that is not going to work it just has to notify the user that the user has to maybe change the mobile device or upgrade the operating system or the os so right now let's go ahead and click on that trigger and right now i clicked on that trigger you would see we have the notification title as well as the notification body and if we are to connect this to a sound we should definitely hear the sound of this android emulator from our speaker but in this case we don't have it connected so everything still works perfectly so on your side you should definitely hear a sound if your system is connected to your speaker so that's it for this tutorial we're actually done with every other thing that we wanted to do and we've come to the end of this tutorial so guys please before you leave do not forget to hit that like button and also smash the subscribe button so that youtube can show these videos to many people that are willing to learn more about react native and see you on our next video so thank you and bye

Channel: Bolt Skills

Views: 814

Keywords: Kotlin Notification Alert & Toast Alert | React Native, react native kotlin module notification, react native vs kotlin, kotlin notification using react native, kotlin notification vs react native, react native nativemodule, native module with react native, react native toast alert, react native notification alert system, react native alert with third party libraries, react native vs kotlin notification, kotlin and react native notification, notification alert with react native

Id: DK-L8ensdlc

Length: 33min 28sec (2008 seconds)

Published: Wed Apr 21 2021