React Native 101: Building Your First App and Troubleshooting Common Issues

hey there everyone it's here back again with another video and welcome to one of the most toughest video of the entire react native Series in building the mobile apps using react native Firebase is not tough your touch controls are not tough your uis are also not tough what stuff for beginners most beginners is the step one how to get started and run the Hello World app now this actually tests your patience as well as will test your programmer skills that how much patient you can keep and keep on hunting for the solution now don't you worry we are having a Discord Community where we help each other out in case you face any installation such problem also a lot of people have written some articles about installation they will also write some articles about the problems that they are facing and how they were able to solve this and also I will show you some of the problem that I faced while installing it for the first time so assuming that you have gone through with it and assuming that you have written the article for the previous assignment that I gave you on the hash node and big shout out to hashnot for sponsoring the series more about them in the upcoming section so first let's go ahead and see that what are the problems that comes around and how we can install the app and run our very first Hello World app on the device we will try to run and use everything through the device that is what we'll be using don't you worry I'll show you the USB debugging and everything all these things I'll mirror on my screen and will show it to you so that we can give a clear and transparent picture of it okay so first thing that assuming that you have installed everything on your device so first of all you should be having Java any version will be fine so we can simply go ahead and simply say Java version and there should be a ADB Dash version uh I guess dash dash version so simply go ahead and have this this actually uh gives you the list of the devices as well so I can go ahead and say list or there is a list let me just show you the command actually that how we can see that what are the commands are available sometimes even I forget that what are these commands and all of that so how many of the commands and everything are available let's go ahead and check it out directly from here so let's go ahead and list the devices that we have lots of documentation but we want to go ahead the very top of it there we go and looking at the option we have a simple devices that's how we read from the documentation it will list all the devices that are available let's go ahead and try it out so again same command and we're going to say devices run this and this says that hey this is the device that is connected and this is exactly the same device that is connected for me again always make sure to look into the help and the documentation nobody remembers everything just because there is a video doesn't means I know everything I always look into documentation and learn on the go all right now I am into a directory which is on my desktop you might have noticed this is a new folder that I've created I'll be creating all of my project inside it now how to create the first project I have no idea of that so we'll go into the documentation in the development settings if you scroll a little bit this is the where they actually mentioned that how we can install and create a new project it's really simple npx is a node package executor then the react native is a utility that we'll be using for downloading and setting up and installing the project in it is just a command of it and this is a project name that we'll be using now there is a little bit more to this one let's go ahead and try to run this I'll simply say npx node package executioner and we'll say react native init and I want to name my project as 0 1 and awesome so that I can keep a track of all the project but there is a small problem with this one if you go ahead and run this it will say that hey this is not allowed you cannot actually keep the name as alphanumeric in the start so use a different name so okay we can actually go ahead and do this instead of calling it as awesome 0 1 we'll we're going to call this one as awesome01 the numbering I'm doing with the each of the projects so that you can keep a track of which project was built after which project what are the complexity levels that we are increasing as we go and all of that let's go ahead and run this one so once we run this this will say that hey I cannot initialize because this project directory already exists this thing and yes this actually exists because I try to record this video there were a couple of issues that came up into the picture so let me go ahead and first uh try to open up this folder and we have this project already available so we're gonna right click and move it to the bin we don't want this let's go ahead and try to run this again let's see what happens now it will take a little bit time to actually download the template configure it and install it but during this I failed I found couple of issues in this one so let me walk you through and this one one particular issue is on Windows and one particular issue is on the Mac so let me show you first the Mac issue that I found so this is all okay let it happen in the background so what I found is onto the Mac the Ruby version was a little bit outdated so obviously I needed to find a way that how we can update the Ruby version simple stack Overflow that always helps so we simply updated our Brew then we installed the Ruby build and make sure when you are installing this Ruby build there is a command given to you at the end of the installation within your terminal you have to copy and paste that that simply exports your environment variable into the Z profile then simply go ahead and say Brew install Ruby environment this gives some setups all the environment and that's all we have to worry about it simply goes like that now notice here it says looks like your iOS environment is not properly set now this is something that you don't have to worry shortly my iOS environment might not be set properly but this doesn't mean that the project was not created project was still created and will be going through with it so let me first open up this project up here so notice here in the project we have all the things coming up and you don't have to worry anything at all on this one let me fire up the VS code and in the vs code we'll be simply going ahead and open up the awesome zero one so make sure just because there are some errors on the terminal don't get afraid of it the reason why this terminal is saying that hey this is all happening simply because my iOS environment is not configured I'm not bothered about it I'm not worried I'll run everything up here so that is why I'm doing up here all right let's go ahead and open this up now without worrying about anything what is the project file will go through in depth of each one of them definitely later on right now I want to directly jump into package.json and I want to see what are the scripts available to me there are a couple of scripts like Android and iOS so I can just run the command npx react native run Android npx react native run iOS or I can run the command npm run Android iOS simple basic so there are a couple of ways how we can run it now first and foremost I would love to run this application onto the Android device the device is already connected and let's see what are the options that we have set it up for this one so let me go ahead and open this up let me preview the devices so here's the device mirroring that I have done for you now in this one obviously the first thing that you would like to know is what is the settings of your device so I'll just go up here and into this about the device so this is the about the device a really bit of older version of the device that we are having and then into the system settings let's go into the developer options this is one which is most bothering you in case your developer option is not open up just tap on the build a number of times so these are all the options that I've set up here my USB debugging is on and also on top of that if I go up here a little bit more here is my USB configuration is selected to MTP which is media transfer it's not just for charging it is set for the transferring of the files as well so this is all the configuration in the USB configuration the file transfer is selected and that is all the things or the settings that you really need to know now let's go ahead and keep it at the home let's open this up onto the terminal there we go we have this terminal available up here for us and now what we're going to do is first of all we're going to Simply say that hey npx there are a couple of ways you can run npm also that is also fine I'm going to go ahead and say react Dash native and we're going to Simply say run Dash Android let's go ahead and run this on the Android now if my Java and everything is properly installed you might this kind of a window might have opened for you as well so this will say hey where you want to run this I want to run this on the Android of course so I'll just hit the a key and this will say hey I'm opening up the Android I'll try to transfer your app all the build process and everything that I need to do I will try to do that so it simply goes up like that and let me go ahead and open up my device that we have so this actually takes a little bit of the time right now notice here it says build failed it says hey I have received an error because there is some of the issues in the running on all devices and all of that don't you worry the SDK location this is majorly the culprit which is actually not allowing your application to run it is important that you learn about how the things work flawlessly but it is also important that you learn about when things go ahead and fail remember the errors are your friend just go ahead and read them so simply here we can see that that there is an SDK location that is missing and that is the reason why it is not able to run your application so what happens since we are in the Android there is in the Android there is a file which is missing in the default configuration in my installation in your it might be there but in case you don't find any file like known as locale.properties you need to create this file so right click on the Android create a new file and call this one as simply Locale Dot properties you simply hit enter now in this you have to locate your SDK Direction SDK path up here so I'm going to go ahead and paste the path definitely this file will be available to you now in my case the the device name is Apple so in case yours is hitesh or maybe something else go ahead and replace it with in case you are on the onto a Mac in case you are not on the Mac just comment this out and uncomment this one so it says SDK directory C drive users whatever is your username hitesh or whatever just replace this username with whatever your name is and this is where Android has installed your SDK and remember this is exactly why we installed the Android SDK or the Android Studio as of now I am not on windows so I'm gonna just comment this out and I'll uncomment this one so this is the file which is the major culprit that is not allowing us to actually have an installation of the project so now what we're going to do is simply come up here and we'll try to run this again let's go ahead and run this and hopefully this time it will be much better let's see where our application is and this is our app so it's installing and doing all these things hopefully this time it will be better there we go now this time it is bundling the app so this was the major culprit your local dot properties and now I'm able to see my app the app is running absolutely fine so again this is a little bit of a tricky process and you really need to know and I told you this is only the tricky process after this the Journey of working with it is absolutely amazing so this is what we have and after a little bit of a hiccup we were able to install the app never be afraid of the errors errors are our friends they actually help us how to resolve them itself and errors are the one which makes you a programmer not the code code anybody can write debugging that's an art that's a skill okay all right so this is a long process now coming back on to the part since we have struggled this much we don't want anybody else to actually struggle this much so we'll just go on to a hash node and we'll simply write a simple article and this time try to use their nap tune this is one of the new editor that they have rolled out absolutely killer it is such an amazing busy week editor what you see is what you get try to use this editor and write a simple installation and the hello world process installation we have already covered this time will be going simply as a make sure you're simply a title which says up and running your first react native app include all these process so that somebody don't have to watch entire video he can simply go on to article of yours you can simply click click see that okay this is how I have to update the Ruby file in case not this is might be another chance that there might be local properties missing on the windows or something like that this will be super helpful for the community and make sure you use hashnot to write the article on that and tweet them as well say that thank you for rolling out this series on YouTube we are really thankful for our sponsor so that is all for this video let's go ahead and catch up in the next one

Channel: Hitesh Choudhary

Views: 117,355

Keywords: Programming, react native, hashnode, blogs, mobile apps

Id: TXWYrnl6dZI

Length: 12min 19sec (739 seconds)

Published: Sat Jan 28 2023