React Native CLI full setup and error fix: error Failed to install the app. Make sure have Android

hi everybody today we are in react native website and i am trying to configure react native cli in my windows machine so that's why i have chosen windows and target os is of course android because you must know or you must understand that inside a windows machine we cannot run ios emulator so for windows people we are left with a choice of running android's emulator so that is why as you can see when i click react native and i choose windows android emulator is being chosen so first of all this website says you have to install node.js and of course i have already installed node.js and i will be showing my error first because once the error is resolved to create the error back it's a big job so let me show the error first in fact as of now when i am speaking to you i have not yet resolved the error i am struggling a lot but i hope to succeed to install this react native in my machine and hence i will show you the solution as per the tips and tricks so let's simply go through the instructions first setting up the development environment react native cli quick start windows android installing dependencies node.js must be installed then android development environment install android studio of course i have installed android studio in my previous tips and tricks you can see how i eliminate the error let me close this project okay so this is the starting screen of the android studio and you can configure abd manager here also we face some issues like the bridge not working and hence you will have to clear the bridge not working error which is not happening to me now because i have cleared that error in my previous tips and tricks video if you like my channel please show your support by subscribing and leave your good comments and whatever you faced and how you resolve so that let us make this youtube channel a lively chat group where we can discuss our technical issues you can also put your resolutions if you have any links so that core is looking at my youtube channel for any fixes they also will be benefited that's how we helping each other in the web developer community right so let us grow up this channel and please subscribe to my youtube videos and put a like button okay now if you see the error is not there the previous error so it has been cleared this usually happens when port 5037 is being loaded and we did not clear that and we tried to reload the android studio using 5037 which is the default port let us now look at the error so as per instructions in the website i have already installed and my virtual device is working without any error so far so good right so let me just close my or let me leave it like that let's go into the instructions install the android sdk so in order to install the android sdk you have to open i'll show you i did install it already so that let's open it and i will show you how to do that probably i had to close this one okay so now i am back to android studio here you go to the configure and then go to the sdk manager so inside the sdk manager you will be automatically inside the android sdk this is the latest version as of now android 11 then we have android 10 android 9. i have installed all these all these three versions of android and if we go to the sdk tools you can see whatever i have selected truly speaking i also don't know the impact of all these modules but you also can install it and later on if we are really interested on all these modules we can go and study what is their functions but currently i just follow some technical article i click everything here whatever i checked not everything whatever i have checked here so once you click that it'll just go to ok and install for you it did not install for me because i have already installed it okay so that is how you install the sdk then you come back to the avd manager and you can choose your virtual device remember that it should run without any error if any error is there please refer to my previous tips and tricks videos where i am explaining to you how to clear the 5037 port error and also i have given you some links in that video where some other technical reviewers and others are explaining how to clear such errors maybe one of those methods will help you as well because it varies from system to system and maybe version of your operating system or you know the android studio version so now there is no error we are safe okay so let me close this one and i am going to look at the instructions again so in the instructions you can see that they are asking us to put a path you see go to the windows control panel and all and then you have to declare android home so let me show what i have done for the android home path variable declaration so you can go to env so the edit environment will automatically come to you so you click that and open and if you open you can go to android home and then you can check edit you can see android home this is my let me copy this path and show you where i am so this is my path in my computer so i'll go to the c drive and then i will click here copy paste the path you can see this is my path users rijpp is my username and then app data you will also have your username here you must check in with your own computer it is definitely not rijpp because this is belong to my username and then of course this will be common app data local android sdk so inside there you can see all those android sdk installations especially the platform tools which is uh cost for the adb or android debug bridge okay this was explained to me in my previous videos now once that is done let me close this that has been done here so after that what they do is add platform tools the path so this python tools has been already added but let's check again [Music] to the path remember you have to add it to the path so let's go into the environment variables again probably sometime when i explain to you my error could get corrected as well so let's see so i have already added to the path you see local android sdk platform tools has been done already this was done in my previous video for the adb so react native command line interface creating new application so currently i have created a new application which is now resident in my c dot let me clear the screen so currently i'm in git bash remember there are two or three ways to go into the command line interface one is using git bash you can install git bash for windows whatever version you have i am currently in windows 10 so this is my git bash and i have seen that the command you know the command cmd is and running as administrator is very effective for android studio as well as for react native so let me go to cdc slash exam slash hd docs and let me class here it is cls there it is clear there means in git bash you type cls it will not work so you have to type clear syntax varies from terminal to terminal so here it is cls okay so now we are clear of the screen board currently what i am going to do is i am going to show you these commands so let me make it bigger okay so you can see that i have put i will give you these commands in the description so no need to worry you can copy paste and do so let me bring it shown here so that we can understand what is the difference this is probably for git bash as i have explained to you you can see the screens as well for git bash the command varies a little bit compared with the cmd so let's check what is the which are the ports are being used here so remember for react native eight zero eight one and five zero three seven are the most important ports so let's look at the eight zero eight one is it being used or not not yet so it's clear 5037 is being used so what we can do is we can clear the port now or we can click kill the port now so let me kill the port with the command line interface i see it's more effective so let's go here and then click here guys remember that this is my solution you know this is not a universal solution maybe you are more expert about this of course you can leave it in the comment you know this is i'm just following a practical solution which is helpful for me if you can follow this it's okay but if you don't want to follow never mind it's okay as well so i am using command for clearing this so it has been terminated i come back to the git batch and check what is status of 5037 there is a sys sc nt still there sometime it gets cleared by itself sometime is there so it's uh the pid number we call it 14948 as you can see here so let's go to the four 14948 and repeat the same process one four nine four eight and then click it off it has been terminated and then let's click here five zero three seven is clear so let's clear the screen now and let's clear here number is cls here so once that is done i have to go to this folder which is called budget builder this is my symbol react application react native application in truly speaking bu d get build up you know when i was studying in the university i happened to get a c plus plus book which was quite new the time when i was studying that way back in 1990s so this c book i still remember the author was teaching us how to exit out and how to go into c plus terminal even before he started to teach us how to use the c plus language till now i bow before that particular master but i forgot his name the author of the book but i bow before him to impart inside me a safety method what i call it safety method is whenever you are entering a new technology you need to know how you can log in or logout or how to move in and out of the system so that is the procedure i am following here before we study the react native we need to know how to set up the react native environment so some of the advanced orders which i came across in youtube channel as well as in other platforms they were telling that establishing this react native network or the environment is really tough and a challenge and even they have spent one or two days to make it happen so that is why i bring the tips and tricks to you of course this may be a little bit lengthy video but you had a bear with me so that i can rectify this effect and let's make the react native platform working for us in the windows but of course i am unable to explore the ios system sorry for the motor is making a big sound here okay so i'm unable to explore ios because i don't own a mac machine or an apple machine so i will fit only with windows so if you come across any good technical reviews or explanations either in youtube or any other web links you can post that in comment section so that other people will get benefited of that and also you can say to me through comment section was it effective for you or not my teaching so that i get inspired by your comments and i will bring forward more tips and tricks in the future so i have a lot of plan to do udemy courses which will be like focused on whatever you want you can leave it in the comments so that i can make lot of udemy courses as well and also some free courses in the youtube channel short courses you know so everybody gets benefited i always think that i have studied a lot of things through the helps of masters and gurus so there will be a time you know when we are understanding many things and we can give something back to the community so that whoever is struggling there out there they will get a helping hand as well as newcomers who are welcome to the development community they can also learning the baby steps here okay so let me see the two actually the problem was i did not put a cd here because i was focusing on the talking so never mind let me do that budget build up okay so let's clear the screen i'm in the budget builder and let's go to the instructions again so i have already you can open a new product by this way npx react native init awesome product this is your project name so whatever name you can put there then they are asking you to connect a physical device or virtual device so we will be using virtual device they say you can click here for physical device i am not exploring it now because i am not going to connect a physical device at this moment maybe in my later part of the research i will do that but in my previous video there is one youtube instructor who is giving way or who is showing a way to connect an android device to the computer through usb you can look at his video as well if you are interested okay this is not in my current youtube video link it will be in my previous video tips and tricks when i resolve adb issue so if you have currently installed android studio yes that is what we have done here then pick the phone and then select the queue api level 2 image remember that yes i missed out this you know maybe this only will work so let's try that let's try that okay so let's put the android studio in place so just to recap while the android studio gets loaded we have cleared five zero three seven eight eight zero eight one ports as of now both are free you can check again just to make sure you are cleared those parts yes nothing there and then 8031 sorry 8081 these are the two most important ports guys adb is working in 5037 and android server is working in eight zero eight one that is the reason for that as far as i understand the documentation so let's look at it so in order for the metro metro is nothing but a server you know a server for react native so that will be running in eight zero eight one so we had to come back here and remember that i need two terminals because once i run this metro password is not recognized i don't know the dos command for getting the path but never mind i know it's uh this one so let me copy this it's better to copy and then let me do another comment window later on in my video channel i'm going to bring out a small series where i'll bring out a small series where how to become a good web developer i want to tell my experience to the world through this youtube channel so you can look forward to that i hope i can make it because i am from the very grassroot level or the you know start from scratch and then i develop interest in my web development and then i become a certain level of course i am not a big master or whatever like as my teachers who taught me but i just try to help the community through this youtube channel so coming back to one thing i notice here is that in the command probe when you are in an administrator mode right it's showing administrator command prompt can you read that so both of the cmds are in administrator mode so let's clear the screen clear the screen here so one i will use for the server the meta server so i did the wrong pasting i had to do that npx react start this command so let me copy it and i bring it here so i'm not using the git bash anymore as of now so it's starting can you see that this is being fully utilized that's why i got two command terminals here so this one i'll use for running the rear application so let me go to this one and then remember that they were telling you how to use cue api and level 29 image so let me see i have got it or not if not i need to install it and pause this video okay so probably i had to delete my virtual device and i had to create one anyone is okay so let me take this 3a and we go to the next so remember they are telling q9 q9 level 29 image q 9 but there's a bit of confusion here guys did you see that q is there but there's no q 9 right oh i i sorry i read it wrong it's q api level 29 image documentation is correct i am wrong for that sorry about it q level of api is q 29 yes so let me click this one and then i finish this off so i have this virtual device running here so let's click that one so let us wait for the adb issue anything is popping up or not okay the screen got loaded and hopefully everything is good as of now so now let's see what is to be done they say npx react native starts that's all you have to do remember it had to be in your project folder click it off let's see yeah this is the issue which one of the issues i'm facing can you see that so what we can do is let's go into the the git bash and let's look at it so the pid is one five five one two so let's kill this pid one five five one two okay so let me type it out one five five one two okay if i restart what will happen so that means that means this takes over right it's a bit confusing guys so i want to show you all my confusions here you know not to just make you a beautiful video and then you see everything done nicely and you know like a very good master i want to show you how a web developer will struggle with this okay so that is a realistic video i think that add values to whatever work you're doing you know so probably i am bit confused here because this is npx react native start and then is a first command so coming to step two so that is the first so what happened is i was using the same command again and again that's why we have this issue so the first command is for you to start inside the cmd as an administrator this step to run the metro server and then you come down to step 2 and then you give this command to run the android so there are two commands here and we'll use two terminals so let's click this one and see what is the status now remember my virtual device is running here so let's see how it goes can you see the failure build failed so of course i am going to put this error in my youtube video as a heading so that people can understand that there is a solution given by me the penang web developer for this issue era failed to install the app make sure the android development environment set up so let me copy that let me paste it in the notepad here for my future use so at this moment i'll take a pause and i will continue with you guys once i found the solution so please be patient i'll come back to you guys with a solution okay thanks for watching please subscribe my youtube channel and video and give a like thumbs up button and also click the bell button okay guys i am back i just restarted my windows machine and let's see what is the error now because now the reporting structure is different so as usual i have got my two command roms or command windows together with my git bash window so both the command windows as usual are in admin mode and one is running eight zero eight one as you can see here eight zero eight one is being served and then for five zero 5037 the adb is active so everything is active now only thing is we are going to do the second command as per this page here the second command npx reactive run android so let's copy this clear screen please watch carefully what is the error now app is being initialized but now the error signature is different as you can see from my previous screenshot or previous situation so there are few errors coming in first one is task app compile debug java with java c failed that is what the main error and finally there is another error fail to install app make sure you have android development this is what we saw earlier okay so probably this is the error which we need to tackle so let us tackle this error i will pause the video again and i will come back to you with a solution thank you okay guys now we are seeing the react screen react native screen in our android emulator so how is this happening so let's look at my visual studio code so where i have just changed something so let us put happy day hooray this is in my app.js as you can see inside my budget builder the main app.js so let's go and see what it is showing now can you see that happy day hooray of course there's a spelling mistake h-u-r-r-a-y that is also a test to see it's working or not can you see hooray it's changed so i'll just cut this out app.js let's see what it is showing now so app.js so i bring back you see so the system is working now but now the question is after having shown all these error screens how i achieved the react native to work on the emulator so now we are going to see how i resolve the errors first thing you have to do you go to environment variables environment variables edit environment variables and here you see i'll show you i put java underscore home value variable you see program files x86 java and my java version which is currently available in my machine so that is for the first thing you have to do and then if you look at the path we edit the path the path is like this you have to show c program for files java jre 1.8.0 underscore 281 which is my version slash bin you have to add this so these two done of course the android home was done in my previous video so you can look at it if you still have a doubt this also need to be done so once that is done close everything and maybe you do a restart again i restarted so you can do a restart so everything becomes normalized you can come to the command prompts or the command prompt screens the two windows remember then you will be able to run this command which is npx react native run android and you should be seeing all these screens okay my power drifted a while okay now it's charging okay we are in good shape now so let us look at this second command npx reactive native run android so i did that command here and you can see build is successful connecting to development server so you can pause this video and look at the healthy screen i now remember my tutor or the author of my c plus book his name is benjamin franklin he's the guy who taught me when you enter any new system you have to in and out first you have to study how you go in and how you go out first that is the first thing you have to study and after that you start your syntax study or development or whatever so now let us look at the healthy screen just like a pilot of an aircraft understands what is shown by the green screen or healthy screen you can see it here so here you can see build is successful 27 actionable task 27 has been executed info connecting to development server 1881 remember the development server starting the app on emulator 5554 starting intent and main activity with that it's just like a hot reload it's waiting for us to change anything for example if i say it's a good day okay save it i go and check the emulator it's a good day it's being reflected right so just for academic interest i'm not building an app here so these are like some typescript errors are coming probably we may not need this we can just delete this and make it a full functional component and then the dot we can remove then we can come down here and delete everything just to see it's fully working and customizable for us or not to study the next step for react native so we have to put text as many of you know you cannot put like h2 or x3 tags in react native hooray it's a new page right so let's check what is showing is showing some error so probably the error okay the error comes here because we did not put the equal to here hooray it's a new page so let's look at it yes hooray it's a new page from penang web developer let's see here is a new page from penang web developer so that is how it's coming in so now i have shown you the healthy screen right so let me slowly tackle the errors so that i can deep dive into more details of the error which i have seen and i will show you the trick through which i resolved okay first of all let me go to [Music] this folder which is windows c drive program files java remember wherever you have installed java with the version shown it will be looking like this this will be the installation and there will be a bin folder legal folder and library folder so once you click the library folder there is a particular file which i have copied from another place i will show you from where so this is the tools file that we are looking at here this is under the java installation remember that when you do a fresh installation of java to your windows machine you will not be getting this tools executable java file so you have to take it from another folder inside the android studio so i will tell you how to get it then only this will work but what i want to show you is i want to give a credit to this wonderful gentleman stephan densoo who has replied in stack overflow questions and he says that he is pointing java home to android studio jre so let us just recap what we have to do in the environment variables for everything to work properly so i will type environment variables so let me go into that and open it first of all android home need to be configured java home need to be configured this way remember it is the folder which i just shown you this is the folder except the library don't put the library in the environment file so you just where was said where's the environment file environment file enb okay so okay so here it is uh being shown java home so you have to declare like this whatever the path for you java underscore home you have to declare like that and then you go to the path and edit the path you should be putting the pin folder inside the path together with together with let me see yes this android sdk platform tools this was discussed in my previous video so i am not going deep down into it so what is relevant to this video is you have to add in jre bin inside so once all these environment variables are configured so let us look at the configuration number one number two and inside the path edit number three and number four so four places you have to change or add in the data once you've done that it's better you restart your computer once you restart the computer you come back to the command prompt windows and let us look at the budget builder so i am here so let me change this one cd okay so i am changing cls clear screen clear screen done and then let us go and check clear inside the git dash what is 5037 nothing running there it's right one nothing running there so in order to demo for you about the importance of this particular tools file let us rename it as one two three four okay continue let us rename it so let's do one by one now is as if this file is not existing in this folder let's see what is happening so i am going to go back to the good old command under the react i will run the second command which is this npx react native run android so i'm going to run it now watch carefully what's happening now the tools file is no more there server starter emulator started starting the demo on idle things are going on screen the bill is successful okay so let me close this again i want to demo to you the error that's why i told you once i rectify it bring back the error it's not so easy but let me try for you guys yes terminate the job and then control c it's gone let's look at what is the status of our 8081 nothing there five zero three seven there are five eight two zero and six eight two four here so let's copy this command okay five eight two zero six eight two four five eight two zero six eight two four and uh so let's check again what is the status of 5037 all are zeros that means hopefully everything is okay so let's go back to our htdocs folder where i have the budget one android app i got a build there so let me delete the build okay and then let me try again before that let me check that inside my c drive program files 86 and then java library name sort by name do i have that tools yeah tools i have renamed it okay so why i renamed it just is just because i wanted to create the error again let's see the error comes back or not okay server starting emulator starting let's see what the terminal says for us connecting to daemon looks like the error started to come but let's see what it is showing yeah we got a full error now and it's a halt on the program can you see that what it is trying to say could not find tools dot jar you see could not find tools dot job this is the main error why because we have renamed it to tools one two three four and the program cannot find this file but where do i get this tools.jar because it doesn't come with the ready installation so this stefan who i gave credit he's the guy who made the thought process for me he is telling that inside the android and jre something is there so i just went there into the android so where's the android it's inside the c program files android android studio and then you go to the jre you go to the library jre and then you go into the jre again and then you go to the library there's two jr is there and then once you go inside the jre let's check that tools is there or not so the tools file is missing probably i have copied it and there's no harm in putting back so let's go to our folder the one two three four remember it's in java and then we go here library so where is that file let me sort it out yeah it's here so let me copy rather than i move it let me go back to the android studio i have to be faithful and put it back if not there'll be some other error coming in so under the jre under the library there is a tools right it's already there yeah i think this is the one and quite confusingly there is another jre inside the jre and there is this tools is missing i just put it back so now you can see that everything is successful and running and this is how you clear this particular error and launch react native in the cli environment setup so that's completes our error finding and clearing the errors to make it a successful launch once more let us go into the open code and let's change it to edtalk sound bow bow okay so let us look at it yes it has changed right hello guys and girls so that concludes our successful launch of react cli in the windows environment setup reactive react native cli pardon me in the windows setup of course you if you have mac or linux platforms you can consult that respective operating system and change accordingly but i hope basically the idea will be the same so through this video you guys and girls have studied a lot so keep on subscribing to my videos liking my videos and press the bell button for new subscriptions and have a wonderful development time ahead see you guys in another video till then bye bye from raj kumar the penang web developer

Channel: Penang Teams

Views: 6,573

Keywords: angular, php, programming, angularjs, laravel, angular 6, angular 7, CLI, html, css, web, website, web-developer, developer, development, software, codes, snippets, github, tutorial, tutorials, guide, study, learn, react, native, setup, environment, errors, fix

Id: 8V9U-ATg714

Length: 49min 38sec (2978 seconds)

Published: Fri Feb 12 2021