Native Modules in React Native | Crash Course

react native is an amazing technology but there is one thing that can cause a lot of confusion which is native modules cuz that goes basically against the idea of react native itself which is to not have to write any native code neither for Android or for iOS and if you really want to become a good react native engineer you will have to learn how to use native modules so in this video we are going to build a very simple we that's going to detect the physical key events and and it's going to adjust the brightness of the device using those key events all right so for this project I actually have something already made I'm going to leave in the comments the link to this reple so you can just get clone but I'm going to go ahead and do the sing here let me get clone this and let's see get clone so we have the project in here yarn to install all of our dependencies so let's run here AGB devices and I have this device connected and I'm going to run yarn start Android all right so it's bundling and this is the device I'm going to be using it has the screen completely messed up but it doesn't really matter and the main idea in here is going to be to use these two buttons to control the bar in here so we can increase the brightness and decrease the brightness using that all right so let's create our native modules what we need to do is actually open up on Android Studio so let's open that up not in here Android Studio all right so let's open our Android folder from here let's YouTube Native modules Android make sure you select Android and just press open that's going to open our project and when you open open this for the first time this might take a while all right so let's just close these messages in here let's go to app cotl Java home native modules and let's go to main activity and in here what we want to do is basically override on key down that receives a key code with an integer and a key event which is a key event let's import that that's going to return a Boolean we are going to later on have an instance to our native module and we are going to pass to the instance the key event all right and we also going to do super on key down and here we want to return true cuz we want to stop the propagation cuz in here we don't want to change the volume of the device we just want to change the brightness because we are going to control that all right so let's create another one in here it's going to be overwrite function on key on key up that's going to receive the same from here let's just copy this let's put that in here and this is going to return something similar but it's going to be here on key up we will go back to this file in a moment let's maybe now just start creating the actual native modules for the key event so let's create a new package and let's name it key event and in here let's create a new codling class and let's call this key event module yeah all right so our key event module is going to receive a react context which is a react application context let's import this and this needs to return react context base Java modu which receives a react context and here we need to override function get name which returns I string and let's see here that's going to return key event module I keep seeing Funk instead of function let's now actually create two functions to handle the key events the key down and the key up if you're confused with these two methods in here this is basically when you press down a key and then you release it so basically when you press a key the event is on key down and when you release the key it's on key up so let's create those methods in here now so let's say private fun function on key down event this is going to receive a key event which is a key event let's grab that from java and in here what we want to do is basically react application context get TS I'm going to explain what this means in a second so get JS module device event manager modu RTC device event emitter and we want to do the following here class Java and in here emit oops not Java this way it needs to be do Java and we want to emit the event called on key on key down and we want to pass brms in here this which will be obviously an object but let's do this a bit later let's just have our other method in here which is going to be very similar but instead of on key down it's going to be on key up and let's not forget to change this here as well so on key up we have on key up on key up in here and let's have one more function here here which will basically handle which one of these methods in here will be called so let's call this one dispatch key event and this is going to return a key event which is a key event key event and in here if key event action oops not the type key event action is equal to key event action let's maybe do action down if that's the case we want to call on key down event and pass the key event all right and if if that's the opposite if the action is actually on key up action up we want to call on key up event and then p the key event all right so let's create now a function that's going to map all of the PRS that we need all of the info that we need to send to the reaction native part so let's call this one maybe private function map event PRS o event PRS and this needs to receive a key event which is a key event and this is going to return a writable map which will be basically an object in react native so in here we want the foll we want the prms which will be a writeable map and in here let's do writeable native map all right so we want to couple things in here let's maybe give it a bit of space just so it's better to read we want in here the key code which is from the key event the key code and we also need the key character so let's say key character which is from the key event uni code Char the Char and we also want an action name which comes from action to string which we don't have yet so let's maybe create this function now and for that we need a compain in your object let's say function action to string and in here let's say that the action is just an integer and this is going to return a string so let's return When action key event action down then it's going to be let's just let's just return in here the I String of this action and in here let's do the same with the action up so let's do action up else what we need to do in here is just action to string and again I'm writing this the wrong way this is a function just like that not a funk and here instead of saying action this is going to be actually key event action so let's also have a key name let's see key name key event key codes to string and let's pass the key code all right so let's view our prams with those data so let's say prams but integer let's say here uh key code is the key code fors but string and in here action name is going to be the action action name let's put another string this one is going to be key character let's just copy this as easier let's pass the key character and for the less let's get this actually let's copy this and let's get the key name put that in here key name key name key character to string so that's good let's now just return the PRS and let's up here instead of just sending perms let's see map event perms and let's return let's pass the key event let's do the same in here and we are good to go let's just finishing here a couple more of stuff cuz we want an instance from this companion object so let's see our instance it's going to be a key event module and it can be new and let's see here private set let's add a new function here which is going to be init oops init module instance let's say react context which is a react application context that returns key event module key key event module which can be new I keep saying new but it's no but you get the point all right so instance is going to be key event module let's pass the context and let's return the instance all right so that's it for this native module let's now go back to main activity cuz we can use that file now in here let's say key event module instance dispatch key event and let's just send the key event and let's do the same down here and now we have to do one more step which is basically to add our native modules to package list so let's create a new file in here which is a codling glass file let's call this Custom Custom modules and here our custom modes will actually be a react package you can call this whatever you want I'm just going to say custom modules so let's overwrite in here function create view managers that receives a react package which is a react application context which is going to return a list of view manager and the type in here it's going to be this type so in here let's just return an empty list all right so let's do another overwriting here which is going to be create native modules and in here let's pass the react package which is the same and here let's return return a list of native module and here let's see value modules is a mutable list of nature module and it's going to be an array list and now let's actually add our native module that we just created key event module initialize module instance and let's pass the react package and as this can be new let's do the following let module add it modules actually and here for now let's just return modules all right so that's good for the custom modules there is just one more step in which is back in here in our main application instead of saying my reaction native package let's say custom modules and then we have our modules working in the native side of Android so let's close all of these files and let's go back to vs code now let's actually create a folder in here which we are going to call native modules just to keep it clean so let's say make directory native modules and inside of native modules let's create the key event and inside of key event let's create a couple of files let's say key event DS let's also create in here a key mapping and let's create in here types right so let's close this and now let's open up the key event file and here let's import from react native the device event emitter and also the emitter subscription and let's create in here a class that's going to be the key event and here we want two things we want at least Turner key down and we also want a listener key up and both of these will be emit subscription or no and by default no so let's now start adding some of the methods that we need in here let's start with the own key down listener so for this one we want a call back which is an event and this is going to be basically key event props we don't have this type yet so let's maybe create this let's create let's export a type key event props which going to be key name as a string key code as a number an action name as an an event action which we don't have so let's export in Num event action and here action down is zero and action up is one right so in here we also want key character is also a string so let's close this file and in here let's import that and the Callback is going to return void and this function itself is also so we going to return void all right so in here we want to do the following this listener key down it's going to be a device event emitter and we want to add a listener and on this case it's a on key down event and we just pass the call back and here we also want to actually remove the previous events that we have listening just so we don't have a bunch of event listeners listening at the same time so what we can do is basically remove key down listener and we don't have this function yet so let's create this on oops remove key down listener and this is going to return wide and here if this do listener key down let's do the following this do listener key down remove to remove the event and we also want to get rid of this variable so let's say this do listener key down is back to n and we need to do the same for on key up event so let's maybe just change in here this word and I think that's enough yeah that's pretty much all we need to do in this case all right so we don't want to actually call inside of a user effect call both of this method and then remove one and then remove the other So to avoid that we can just do a bit of abstraction here so let's do add listener which needs an event action which is an event action that we created previously and this is going to receive a call back which is basically this callback so let's put that in here and this returns white all right so in here let's just keep the pattern that we have so far which is before adding the event listener let's remove that so in here if event action is uh event AC oops not event event action action down let's just call this on key down listener and let's pass the event not the event action let's pass the Callback else we just want to call this Onkey up listener and let's pass the call back all right so that's pretty much it for this this class let's now export a single tone of this class so let's say key event thiser it's going to be key event which is a new key event so let's open n let's create in here a new user effect and inside of this user effect let's use our singl tone key event listener let's add a listener and down here let's return a cleanup function which is going to do key event listener and we are missing one thing in here which is also remove listener let's pass the the same we have in here the event action let's go down and here it's going to be pretty similar to this let's just grab this space stting here and here instead of this what we can do is just action down let's remove key down and if it's an action up let's remove the key up listener so that's good and here let's remove listener and we just need to pass the event action that we are going to using here and the event action we want so let's see event action action down so let's pass in here the same right so for the Callback we are going to have the event available so let's from from the event get the key name and in here if key name is equal and yeah we forgot one more thing here let's go to key mapping cuz we want to map the volume buttons keys so let's do that so we want to export const volume keys which will be basically key code volume up volume down and in here let's just give it a string and key code volume down which is also a string oh and this is an num not a const in here let's go back let's close this file let's go back to here from the volume keys if we are pressing the volume up key code volume up here's what we want to do we want to return set bar height because we want to update that so let's say con value it's going to be math mean if we are pressing the volume up we want to increase the brightness and set the bar to be bigger so let's say in here it's going to be preview plus 10 and we want the minimum from both so it's either the new value or 100 and let's return the value in here all right so the next part in here it's going to be pretty much the same but the difference in here is that let's first change this so we when we press the key down we want the maximum from previous minus 10 or zero so it's going to be zero but never less than zero all right so that's pretty much it for the key event listener let's clean this and let's start again to see if we can change the height of the bar just using the the physical Keys let's open on right all right so I have the app running on the device right here so let's try to use the physical keys to do that and this is working as expected great so our first Native module is done the only thing missing is to actually control the brightness of the device and for that let's create another native module all right so I'm back to Android Studio let's create in here another package package let's call this one bright and let's create in here a Cod link class let's call this one brightness module so in here what we want very similar to what we did for the key event module we want inter react context which is a react application context and we want in here react context base Java module which receives a react context so in here let's overwrite the get name and let's return in here the name of our module and here let's have two methods one is going to be to set brightness set brightness level and in here we want the level which is a float oops float so let's do the following value activity is current activity return activity run on U white thread oops run on your white thread and in here value layout params is going to be activity window attributes and layout params screen brightness let's set that to the level that we are passing and activity window let's set attribute and let's pass the layout fors and we also need to say that this is a react method and we need to import this all right so that's good let's create a new react method in here which is going to be basically function get brightness level and let's pass in here a promise this is going to return a promise and here value which is just a let's call this also layout forms it's going to be from the current activity window attributes let's say promise do resolve layout params screen brightness and here again function instead of fun let's import the promise and that's all we need to do in here let's now just add our new native module to custom modules and here what we want to do is basically modules add brightness module and let's pass the react context oops not react package react context oh we call this react package this is not a react package this is a react application context let's change the name here the name is not good let's say that this is a react context actually all right so that's good for the custom modules let's go back to vs code let's close this start it again just to make sure we don't have any errors all right so build successful it's bundling the app and that's good we don't have any issues so let's maybe now create on our na modules a new a new folder let's make directory nature modules let's call this one brightness let's create in here let's touch uh let's call this brightness as well let's open this oh we that's missing the GS obviously all right so in here let's put this to this side in here here's what we need to do all right so this time we do need to import native modules so let's do the following native modules const bright brightness module from native modules all right so let's create a class let's call this we have the same let's call this just Rec native brightness module and in here this is going to be very short we will just have two methods in here which is set set brightness set brightness level and we just pass the level which is a number and in here we want to return the brightness module and the method from the brightness module which has the same name set brightness level and oops and let's pass in here the level and we need an async function here to get the brightness level get brightness level this is going to be a a promise that returns a number and this is going to return a wage uh let's copy this brightness module which as this function which does not accept any arguments and let's create in here let's export our single T from this module which is export const brightness let's just call this brightness which is reaction native brightness module new reaction native brightness module so let's close this file and here we want a new stage we want in here the current current let me just say current brightness current brightness is good let's copy this and we want to also set the current brightness this is going to be a user State as well and the default value is going to be zero so every time we set the bar height we update the bar height we want to call our brightness single tone and set the brightness level and this is basically the value divided by 100 and down here it's going to be exactly the same brightness set the brightness level to the current value divided by 100 because the brightness level is actually 0 to one now let's add a new user fating here cuz we also want to have to actually get the brightness level and this user effect should run every time the bar height changes so let's have an e in here eia self- invoking function whatever is the name um and here let's say that the level is going to be a weight oops a r brightness Gap brightness level which is going to return a number and then the current brightness is going to be if the level is less than zero then return zero else if the level is bigger than one let's return one else let's say math. round and let's see that the level is multiplied by 10 cuz we might have in here things like zero uh zero do a number like that from one to this kind of number to minus one so that's why we have this logic in here anyways with with that said let's set the current brightness to the current brightness multiply it by 10 and let's do just one more thing here guys which is basically to display the number of the brightness the device currently has so let's add a text in here right after the container let's say text and the style we are going to add this which is going to be oops memo Styles text we don't have that yet let's create that in a moment but in here let's just say that's going to be the current brightness plus percent so the percentage of the brightness and here let's let's do the F let's see text we want the font size to be big so let's give it 30 pixels and the font weight let's say B and here just so we don't have the bar too close to the number let's say that the Gap is going to be 20 all right with that done let's maybe now run the app again and see if that's going to work so let's say yarn start and I already can see that we have an issue in here that's not going to work because of this T that happens so many times to me this is going to bundle again let me just restart the application here and that's probably going to be just fine all right so let's maybe now show the app running on the device so this is the app and what should happen here is every time time you press up or down the brightness is going to change but also the bar is going to change so let's try this let's increase the brightness and let's lower the brightness and this is getting darker and darker as you can see this works really well so that's pretty much it for this lesson guys that was a long one but I hope you enjoy it and I hope you learned something and I hope you have an easier time for now one when you start to build your native modules so have a good day and I see you on the next one bye-bye

Channel: Vaillant

Views: 131

Keywords: reactnative, android, ios, programming, go, golang, mobile development, software engineering, app development, programming tutorials

Id: mL1LFMK_myY

Length: 33min 41sec (2021 seconds)

Published: Tue Jul 02 2024