Open Android Native Activity from React Native [Step-By-Step Guide]

hi let's see how we can open a native android activity from react native first let's create the react native project now that the project is created we can open android the android project as well as the um the react project separately so yeah and let's open up the android project as well tutorial and it's in android so we open up the android project okay so let's let the android project to build so let's go to app.js and let's remove the unnecessary parts yeah so in react native what i'm going to do is create a button so that i can open the when i click that button i can open up the native activity so let's create a wave first let's call it style as container and then container the container i'm going to give a flex of one and i'm gonna justify content center and i'm going to align items to center yeah so now that the button is in the middle we can create the button we can actually make it a touchable opacity with a import touchable opacity first t and make this touchable opacity and make this touchable capacity right so then we can style we can add a style style start button and we can give the button a style i'm going to give it a height off 120 maybe yeah i'm gonna give a height of 120 120 and a width of about 40 and let's see when it's built and i'm gonna justify content center so that the text is in the center as well as the and as well as align items to center yeah and then i'm going to give it a text and open android activity t and then i'm going to give it a color color of white yeah so now it's complete and we then we can give a on press so that we can see if it works so i'm gonna just console console.log something console.log press yeah so that's right so i think our android project is built and we can go to java and we can see two two java classes being made so we can we have to just rebuild it so that we won't get any errors so i'm going to rebuild it again and let's run the application and see first without altering any java code so to run the projector native start and when after the uh android project is built we can run that let's see it's installing there's something wrong with yeah i just didn't keep a color so we can't see it color is blue sorry background color yep so that's okay so the height should be 40 and which should be 120 yeah so it can be 140 160 maybe yeah yeah that's so when we click on this it should yeah it should cancel log pressed yeah that works so the react native part works now let's go to the part where we bridge the two things so first what we have to do is we should create a module so to do that we go to name we right click on the directory and go to new and we create a java class and there we call it whatever you want but i will call it open activity module yeah and we are gonna uh extend it with the super class react nate yeah sorry react context base java module yeah okay then press ok then you'll it'll open up a java class and just then you have to create the constructor public open activity module react application context react context it's just a variable and then super react context then that's the construct is done then hover over here and go to implement methods and implement this get a method so yeah so this should be any string you want i'll just name it open activity you'll want it later so then we have to write the method which we want to call from react native so let's create that method react method public void open and we can call whatever we want inside the method so what we want to do inside this method is to create a new activity open up a new activity so so it should be intent intent equals to new new intent get current activity and then let's go and create a new activity for us to call that activity so it should be um go to new and go to activity um go to empty activity create a new activity let's create a new activity and it should be and it can be anything so i'm just gonna call android activity let's click on finish so it should create us a new activity and then let's go to the xml file first and change the constraint layout to react a relative layer and then let's go back to keep that back here and let's bring a text weave over here and yeah let's bring it to the middle yeah now that's right so i'm gonna create the text as android activity yeah and make this a little bit bigger put it somewhere over here and i'm also going to increase the font size to about 24 put it into the middle and i'm also going to change the color of this to green yeah now that's perfect so now what we have to do is just open that activity here so it's android activity dot class yeah then we we created the new intent and just we have to just open that start that activity so it's got current activity dot start activity and call that intent over here right now that's complete so next what we have to do is we have to add this module to a package so we have to create a new package and add this module to that package so to create that package we'll go to new java class and we'll call it open activity package open activity package okay we created that activity so it should be implements react package yeah and hover over this and go to implement methods and implement those two methods so the use of this package is we can include whatever the modules we create inside this package so that react native can use it so first what we have to do is we have to create a list so that we can include our modules in that list and add it to the package so first what we are going to do is we are going to create a list list native module modules equals to new arraylist list should be a list and right okay then we are going to add our modules uh modules.and and new and we call our module that we created so it's open activity module and connectivity module yeah and it should be react context and we return that module uh that list and then you don't have to necessarily understand everything that we do here just remember that you have to whenever you create a module you just have to add it to this package whatever module you create you just add it to this package and then we call here collections dot empty list now that's done we created the package now we need to take this package and add it on to um to our to the rest of our packages so you just have to go to main application that which is given by uh react native to us and there's a comment over there saying that the the packages that cannot be auto linked we can edit manually through here so it's it's it's inside the main application and it has a method called get packages so we have to add the package into it so first what we do is we add our packages this list called packages we add um package to this list so it's packages dot and new my uh it's open [Music] activity package and then that's done so now the package is added and let's just check double check if everything's okay yeah it should be working now so now what we have to do is we have to go to react native and we have to import the module called native modules this module will allow you to talk with the native code so what you have to do is you have to create a variable uh i'll just call it open activity t equals to negative modules and then the string is used inside react native for us to call this module so what we do is we we use this string and call that module so we have to use this exact string over here so we can open it and then i'm going to create a function constant open open function call it open function equals to equals to yeah so here we are going to call the variable open activity dot and then we are going to call this method inside here so we are going to call that method so open yeah so what this will do is this will bring up this module and then it will call this method so open activity not open so then we'll call it over here yeah so we are going to call the open function yeah and then we are going to build our project so we are going to rebuild our project first let's wait till that tree builds if there's any error we'll know yeah it's built and then let's run our application and then let's start our react native server yeah now let's open uh android activity is open now so if we go back it will go back to the react native uh code and we can open it again we can close it thanks for watching this video if you like this video make sure to give this video a thumbs up and subscribe to my channel until next time bye

Channel: Malla

Views: 1,255

Keywords: Android Native Activity, React Native, Open Native Activity, React Native to Java, Android Activity from React Native, Javascript to Java, Coding, Programming, Mobile Development

Id: gkOGiArXvXQ

Length: 16min 34sec (994 seconds)

Published: Sat Nov 14 2020