React Native app from scratch | Part 1 Setup & Navigation

Hello, everyone welcome to this brand new series, where I will show you how to develop a react native app from scratch. In part. One of this video. I will show you how to set up the react native app and set up the development environment, and then I will show you how to create a basic navigation using react native router, and I will also show you how to use style components. This is sort of welcome to my channel screens, where I post videos related to design and development. If you like, the video hit the like button and subscribe to the channel. Let'S set up our react native project, okay, so we need to open, react native website and then go to the docs and we will go to environment setup and we'll go to setting up the environment. Okay, and in this I will choose, react native CLI, Quick Start. Rather than Expo go through this set of documentation and install the Android emulator and the node environment to create the project to create our project, and I will name the project as so, I will use this name beat react native you, okay! Now you can see the projector setup so we'll be using Android for this, so we will CD into the project and then we need to do MPX run Android. So this will build the project and install the apk on the emulator. So it's launches the emulator and it's building the apk for us. So now you can see the app is launched. So this is the default screen which you get when you first create the project. So let's go ahead and close these all so I'll, be using vs code for this. So let's open that we have opened the up in DVS code and we have iOS and Android folders and we have our ab dot Jason and index dot GSA. So what I'll do is I go to this and do NPM run so you can see all these scripts have been set up. So if you want to run on Android or iOS, then you can use this script run Android or iOS. So when you run this project, you see that there's another terminal with this lock. So basically, this is the server which serves the J's bundle and pay for it to keep it in the obvious code itself. So I'll add another terminal here and I'll close this out and I'll do NPM start. So this will start J's bundle server which reserved the bundle to this to this app. So when you make refresh our, you can see that it is fetching the bundle from this. First of all, I'll be creating a folder called app and I'll move up, GSS ride up and less in the reference. So let's call it okay, I restarted the server. You can see that it's reloads, so we will put all our J's code inside this app folder and we'll have all the Android and the iOS code in their folder respectively. So let's go ahead and remove everything which is not needed. So let's remove this scroll view. Okay and use text - okay, I will remove these tiles as well, so I'll be not reusing. This default styling here. So I remove this instead, we'll be using style components. So I remove this bunch of unused inputs. Remove this as well, and now you can see that hello from react native is displayed on this screen, which is cool and close this out yeah. So let's go ahead, and https://privatephotoviewer.com/how-to-use-drafts-on-instagram/ 'll get rid of this as well. Okay and use function, so I prefer my components to be F to be functions, so that is great, so I'll, be using sty components to style my components. So what I'll do is? I will quickly installed and can install style components. We have stalled the style components. Let'S see if it is working so I'll start the server when p.m. start. Okay, then everything is working, fine I'll, go ahead and import tiny components and then out text so I'll. Remove the text here and use the text from the style components. So will you do style, dot text and you can see everything is working fine, so let's go ahead and change the font size. Let'S do four to fix pixels, so you can see that it has picked up this type from react, style components, so style calmness gives you the power of styling the components or the elements in form of just like the CSS. So when you're searching from react to react native everything's give me is the same: if you are used to designing your web applications, it's mostly the same styling which you can use here as well, so this is cool, so I'll throw in a reactor outer here. So let's go ahead and see how that works. So this is the documentation here, so let's go ahead and store it. So let's compare this. This will install the react native navigation and then we need to install a bunch of dependencies, which is here so I am since I did not use Expo - will be going through this step, which is installing dependencies into a bear, react native project. I will copy this and you paste this you let these dependencies install. So, let's see if everything is fine. [ Music ] read this okay, since now we have the very act out installed: let's go ahead and create some screens. So what I'll do is I'll create a folder and name it screens, and then I will create a new file which is login purchase and in login dot. J'S, I'm going to create a react component, continue on correct logging and then I will also import react, net style component and then an input. So I will define a container and a text, so I will do and I will use child and also I will define the text and call it style text. Okay. So let's go ahead and return this. So I get a container inside a container. I will use the text and call it plugin: let's go ahead and return, so that's cool, so we have our login screen setup. So let's go ahead and see how the router works. So in order to see the router I'll, just let's open the documentation here. So react also says you need to import in the architecture handler so I'll import it at the top most level, which is app dot J's, and then I will also import this navigation container. So we need to import this navigation stack as well. Okay. So this is a stalled. I will go ahead and import that as well, so you need to import, create a stack navigator, so we have our navigation container and the stack create stack navigator. So we need to create a stack out of this tab navigator and this coffee place the fly in here and, let's change this to so. I will copy this from the example here and just paste that and instead off so I will just remove the airports which is not needed and also remove this. So now we don't need the style component as well and I'll import. So we need to import the login screen, so let's import login, so everything should work. So, let's see me mr. login, so let's start the server first. So this requires some media dependency. So, instead of so we need to run Android first. So basically, this will run that I install the apk as well, so this will bundle any dependencies which are native to the app. So now you can see that we have our app here. So let's go ahead and start the ji server and then deload. So this says yak navigation, slash native, could not be found within the project, so let's go ahead and check if we start that I think it's amor did get installed. So let's install that as well. So I don't know what was the problem here so when I use the terminal they've got installed so I'll open the cordon again think they should start walk me now. So I'll start, the je server when I hit Trello do okay. So this is not return to. That'S fault, so, let's reload it so now you can see. We cannot see anything. I think we need to get the android apk once again, so in order to do that, we'll just to npm run android. So you need to keep in mind that whenever our narrative dependency is installed, you need to package the apk and install it on the emulator. So anything with any changes which you make to the GS side, it can be picked up directly, but anything which is related to the native side. You need to install the apk. So what I'll do is I'll close this and, let's start the J's over here and now you can see that we have our login page setup here. So let's go ahead and start giving shape to our project. So I'll add a couple of screens here. So, let's go ahead and add registers got chairs, will also add, we'll also add dashboard or let's call it home, and then I will also create profile page as well. So what I'll do is I'll copy, I'll copy, the login code and paste it in all the components and rename it so we need to find login and then they place it with home. So I then paste it here and Lesley place login with profile and then for the last time I will rename register as well. So let's rename login to register well. So now we have our screens for screen setup. So, let's see how we going to how we are going to create the navigation for all these four screens. So what I'll do is? Are you in order to go to in order to go to home or profile? We need the user to be logged in so I'll. Keep a flag here is logged in and if the user is logged in, I will create a tab and I'll put two tabs inside that which is home, not jsm, profile, dot, J's and I'll provide a link from login dot, J's to open register dot J's. So, let's create link to register to GS from profile page from login, page first, so so, let's import all the screens at home and this import profile. So let's rearrange this since these are are logged out, screens and dealer, and these two are our login screen cool. So, let's add another screen here and correct register: okay and let's go ahead and create a link or button from in the login page which navigates to register. So let's open, login and we'll create a button, just create a button. So here you can see that normally I would import button from from react native, but since I am using the style components allocate a constant called button and create a style version of this button. So I don't need to import this. So what I'll do is let's put a button here, so you can call, you can put a button and say log in register. Sorry, so butter will take the title drop, a gesture as where and close this okay and we have our button okay. So, let's do an on click on this, so on makeup, this button, i'll console.log, clicked so in order to open the debug or the console, you need to press ctrl M on this hundred emulator and then click debug. So what will this do is attach a debugger to the app. So now you can see that we have our console, which is here so anything which I console.log it will appear in the console log here. So let's go ahead and click register. Okay. First, I need to do a reload, so I don't think so. Anything is working, so let's check why it is not working. Let me check button first. So sorry, this is not on click; rather it is on press. So I change this to on. First, let's see if it is getting blocked, so you can see it is getting logged so good. So now we need to navigate to the register page when I click on this button. So, in order to do that, I will quickly show you the react native docs here, so you see when you go to moving metering screens. So it's this is the example which is there. So all these screens have this prop called navigation which we can deconstruct and use it to navigate. So when you see here when I define the screens so this started screen so anything which is any component which is defined here, we will have the navigation prop attached to it. So let's go ahead and deconstruct that so what I'll do is I'll go to login and then deconstruct the crop and use the navigation prop here. So you can see in order to navigate to different screens. You need to just call navigation, dot, navigate and the name of this cleans. So let's change the name of the screen which we define in amperes, which is a stir. So all the SCOTUS register. So, let's check if everything is working. So when I click on register, it takes me to the register screen and when I click back, it takes me back to the login screen. So I think we have our navigation between two screen setup. So now we need to set up the taps which are home and profile, so let's go ahead and do that, let's open app dot, Cheers so I'll create a constant here called logged in is and I'll change this to true for now. So I'm just assuming our constant, which is is logged in and we will later on see how to wire this up. But for now I'll just keep a constant in a broad chairs and based on this flag, I will either go to log in or create our tabs. So, in order to do that, what we need to do is we need to have a conditional rendering here so I'll use a Slaton, and then we need to so, and we do so for now. What I'll do is Papa? This is this here and instead of login I would have home. So if it is locked in, I will go to this screen or the screen. So let's negate this and when I am locked out or not logged in, I show this login and when I am logged in I'll show this home. So I think everything is working. So let's go ahead and change this to false. So when I am not logged in I'll go to login page when I'm logged in I'll go to the home page home screen, that is cool. So since we need to change these two tabs, let's see how taps are implemented, I'll, go and open the react. Navigation Docs and go to guides and let's go to navigation. So in order to have to have navigation, we need to install this bottom tabs. So, let's go ahead and weakly install that, while it installing less CD documentation how to do it, so basically we need to import, create bottom tab, navigator and then stuff all these screens. He said that tablet navigator as a tab. Okay, so let's go ahead and do that so I'll open abroad Cheers so instead of this, the less import the tab navigator. First, so let's open this and let's create tabs. So the documentation is like this, so you need to create tab so I'll open and keep tab, usually bottom tab navigator and instead of stack dot navigator, I need to do tab navigator, okay, let's team tab here as well. Let'S open what so it's just a brass screen cool, so let's feel or let's check what is happening to the town downtown. I think we need to so in so, let's add the profile as well. First so I'll add five investor profile. I think we need to do run Android here so now you can see that we have our tabs here, just close this out and do NPM start there reload. So now you can see that we have our tabs loaded. When I click on profile. I go to profile and when I click on home I could home and when I change this true to false, a login screen is there, so this was it for part. 1 of the series see you in the next part, subscribe to the channel and hit the bell icon to get notified for the part 2 of this series.