React Native Tutorial for Beginners - Build a React Native App [2020]

welcome to my ultimate react native course Amash I don't wanna be your instructor in this course you're gonna learn how to build fast and beautiful mobile apps using react native I'm assuming in this course you know nothing about react native and want to learn everything from scratch I will explain every line of code awright so you learn and understand all the underlying principles now you're not gonna work on a dummy to-do app or a calculator you're gonna work on a real full-fledged app called done with it this app is a marketplace for selling this stuff you don't need any more anything you are done with here's the front screen of our app we can login or register let's log in with my account here you can see all the items that people are selling for example you have this guy over here he's selling his red jacket for $100 of course this is all dummy data that I have generated now we can tap an item to see more details about it you can see who the seller is we can see where the item is located on the map we can also send a message to the seller and this will send a push notification to the target mobile device now we can pull this down to close it we can also pull down the list to refresh it just like the apps you use on a daily basis we can filter the list and look at the cameras that are for sale we can add a new listing first we select an image we can add a second image up to three images now let's give it a title my first item we give it a price $99 now let's assign it to a category so let's put it in the category of furniture now when it posts us to the server you're going to see a progress bar and a beautiful animation at the end take a look there you go and done here are the listings I have posted you also have my account page where we can access my listings and the messages I have received now we can swipe an item to the left to delete it just like the apps you use on a daily basis so if you follow along by the end of this course you're gonna master react native and you'll be able to build mobile apps with confidence so are you excited to build this app with me then jumping and get started to take this course you don't need any familiarity with react native or mobile development in general but you need to know JavaScript not react because react native is built on top of react but instead of targeting the browser it targets mobile platforms you don't need to be a react expert but you need to know all the essential concepts such as components JSX props state and so on if you wanna learn react I have a two hour tutorial on my youtube channel as well as a complete 13 hour course that teaches you everything from the basics to more advanced concepts I'll put the links down below if you're interested so what is react native and is it the right tool for you or not well react native is a framework for building native apps for iOS on Android using JavaScript so if you know JavaScript you can use your JavaScript skills to build real native apps for iOS and Android these apps are truly native so they are not web apps that look like a mobile app so with react native you don't need to know iOS or Android programming unless you want to build a really complex app and you need to talk directly with the native API of this platform for the most part you don't need to do that so we can write pretty much all of your application code in JavaScript and share it across iOS and Android that's why a lot of companies these days prefer to build their apps using react native because they don't need to hire two separate teams of developers maintaining two different code bases one for iOS written in Swift or objective-c and the other for Android and Java or Cartland now one of the common misconceptions about react native is that you cannot use it to build any serious apps for example we have this guy over here his name is John Smith is a developer with a lot of strong opinions he believes that the only way to build anything serious is by using the native languages on tools well that's not true here are five apps are built with react native Facebook Instagram Pinterest Skype uber AIDS and many many more so if you have an idea that you want to turn into a real app using your JavaScript skills react native is the best tool to have your toolbox there are two ways to build react native apps we can use plain react native or Expo Expo is a set of tools and a framework that sits on top of react native and hides a lot of complexity from us it makes it incredibly fast and easy to build react native apps if you have never done mobile development before Expo is the way to go you can build and run your first app within a few minutes the other option is to use react native CLI or command-line interface when we create a project with react native CLI our project will look like this so we have these folders Android and iOS these are native Android and iOS projects we also have our JavaScript code on a site that can be shared across these two platforms so this approach is suitable for people who have some experience with iOS or Android programming in this course I'm assuming you don't have any prior experience in mobile development so we're gonna use Expo let me create a project with Expo we're not gonna have these Android and iOS sub projects we only have JavaScript code so that means we cannot work directly with the native API of these platforms we are limited to what expo gives us in terms of the native features now honestly this is not a problem for a lot of apps because Expo gives us a lot of native features so we can build a real complete app using just expo and that's what i'm gonna show you in this course but if you do have some experience with mobile development and you want to have some extra flexibility if you want to customize or tweak some native components you can always eject from expo and get access to the underlying ios and android projects i will show you how to do that later in this course so next i'm gonna show you how to set up your development environment alright the first thing i want you to do is to make sure that you're running node version 12 or higher so here in the terminal window let's run node dash V I'm running node version 12 point fourteen point one make sure you are running node version 2 or higher now let's install expose CLI globally so NPM if you're on a Mac and you haven't configured permissions properly you have to prefix this with sudo so npm install - g expo - CLI is going to take a while so I'm going to pause the recording all right Expo CLI is installed you might get some warnings don't worry about them they don't really matter so with Expo CLI we can easily create and run a react native project now you should also install expert client on your phone this is an app that you should download from the App Store it's available for both iOS and Android with this we can easily run our app on a physical device now as my code editor I'm gonna use Visual Studio code or PS code you can use any code editor that you prefer but it's easier if you download vs code and code along with me because throughout the course I'm gonna show you a lot of tips and tricks a lot of shortcuts to write code fast you're gonna love these tips so you can download vs code from code that Visual Studio comm like hearing vs code we're gonna use a bunch of extensions these extensions are optional but they make our job easier let me show you so over here let's search for react native the first extension we're going to use is react native tools this is built by Microsoft and with this we can debug our react native applications inside vs code it's very popular the second extension we're going to use is react native slash react slash Redux snippets this gives us a bunch of code snippets so we can type a few shortcuts and generate code really fast I love this extension I also use prettier for formatting my code so let's search for prettier there you go prettier code formatter made by spen peterson it's a very popular extension you probably have it yourself I also use material icon theme let's take a look with this extension installed we get pretty icons in our project so the files in our project are gonna get icons like these depending on their type now let's apply a setting so the moment we save our changes our code gets reformatted so on the top we go to preferences and then settings search for format on save so make sure to enable this option so anytime you press ctrl + S or command + S vs code will use prettier to format your code now that we have set up our development environment let's create our first Expo project so here in the terminal window let's type expo and it done with it that's the name of the app we're going to build you can call it anything you want so let's go with this now we have to choose a workflow for building this app we can use one of the managed workflows or one of the bare workflows if you use a manage workflow export is going to take care of all the complexity behind the scene so with a managed workflow we're not gonna see those iOS on Android projects we only have a pure JavaScript project if you use a bare workflow we're gonna have a bare bone react native project so we'll have those iOS on Android projects in this course I'm gonna go with this blank template we also have a template with typescript but I'm not gonna use that in this course because I want to bring extra complexity so let's use the blank manage workflow template now this gonna take a while so I'm gonna pause the recording all right our project is ready so let's go into this folder and then open it in vs code run this app let me give you a quick overview of what we have in this project so we have this assets folder this is where we put all the images audio files videos and so on any kind of asset that you want to bundle with our app now we also have after J s this is a basic react native component so on the top we are importing react we're also importing a couple of components from react native so this view that we have here is like a div in the web world and text is used to display text on the screen so in react native we don't have HTML elements like div paragraph anchor and so on we have to use the building blocks or the components that are provided by a react native here is an example this app is a function component so by default react native uses function components because there are simpler they're more lightweight you can use class components but it's better to use function components so here we're returning a JSX expression we have a view which is like a div this view has some style we'll look at that later and inside this view we have this text component for displaying this text on the screen now what is this style here well we're referencing this object Styles the container we're creating the Stars object over here using the stylesheet object so we call the create method and passes an object this object has a property called container that contains all the styles for our container now if you look at the name of your Stars they look familiar for example we have background color this is like a CSS attribute but this is not CSS this is just a plain JavaScript property when we compile our app react native it's gonna translate these properties and the components were using to their native widgets for example this view over here if we build this app for iOS this view is gonna be mapped to UI view if we build it for Android is gonna be mapped to Android view so with these components we can represent our UI in an abstract or platform-independent way when we compare our app react native is gonna map these components into their native widgets so that's why the apps that we build with react native are real native apps now we should open a terminal window to start Expo server to serve our app so on the top we go to the view menu look at the shortcut for the terminal window on Mac is control and backtick so let's open up the terminal window here we type NPM start now this opens our browser pointing to this address the port number might be different on your machine depending on what you are running so this is what we call Metro bundler it's the JavaScript bundler for react native so it's responsible for compiling all of our JavaScript files into a single file now here on the Left we have a few commands we can run our app on an Android device or emulator we can run it on an iOS simulator we can run it in a web browser we can send a link to our app with email so other people can try it we can also publish our app to expo so anyone in the world can view our app using expo client this is much faster and easier than going through app stores if you have done any kind of mobile development before you know that going through app stores is very tedious there are so many steps you have to follow with expo we don't have to worry about this we can simply publish our app to Expo and anyone in the world can easily view our app of course this is purely for development and testing not for production but talk about that later in this section so this is Metro bundler now if you go back to the terminal window in vs code you can see these commands and their shortcut these are the same commands that you saw in Metro bundler for example we can press a to run our app on an android emulator or I to run it on an iOS simulator and this is where the logs for our app will appear so if anything goes wrong this is the first place we want to look at all the errors and log messages will appear here so we want to have this terminal window open at all times all right now that metro bundler is running next I'm going to show you how to run our app on an iOS simulator in this lesson I'm gonna show you how to run our app on an iOS simulator to do this you'll need a Mac if you don't have a Mac don't worry you can still run the app on your phone whether it's an iPhone or an Android phone you can also run the app on an Android virtual device which I'm going to show you in the next lesson now I want you to install Xcode you can get it from the App Store so open our App Store and search for Xcode here you can get the latest version Xcode is a large app so installing it is gonna take a while perhaps 20 to 30 minutes depending on your internet connection once you install Xcode run it and then go to Xcode preferences on this window go to the locations panel and make sure you have installed the latest command-line tools now we can start analyst simulator so let's close this window we go to Xcode open developer tool simulator so here's our iPhone simulator we can move it around we can resize it we can change the type of this device by going to file open device under iOS you can see various iOS devices for example we can start an iPhone 8 it's gonna start a second simulator now unfortunately at the time of recording this video expert gets confused when you have multiple iOS simulators running so I'm gonna close this iPhone 8 I'm going to use this iPhone 11 now we go to Metro bundler and via app and the iOS simulator we can also write it in vs code by pressing I in the terminal window so this is gonna start our project in iOS simulator the first time you're gonna see this message popping up open and expo so let's open it so this is the expert client that you install on your phone let's close the welcome message and here's the output of our app we have this text in the center of the screen now let me show you something really cool I want to put this on the side and open our project on the left side now let's change the text here to hello world now the moment I save the changes our app is gonna refresh take a look save and here's the hello world message this is one of the powerful features of react native called fast refresh so we can see our changes as soon as we save we don't have to wait for native bills to finish now in this IRS simulator we can bring up the developer menu by pressing command + D now unfortunately this does not work on my mission anymore I think this happened after I upgraded my Xcode so I figured out to make this work I have to press control D first and then command D so this is the developer menu I was talking about this is part of expert client so here we can reload our app so in case something goes wrong and fast refresh doesn't work we can manually trigger a reload we can also copy the link to clipboard we can go to home so here we can see other expo projects we are working on at the moment we have a single project and it's here so let's get back to it so you can bring up the developer menu by pressing ctrl + D and then command on D like this so this is all about the iOS simulator next I'm going to show you how to run this app on an Android virtual device in this lesson I'm gonna show you how to set up an Android virtual device to run your apps now while you can always run your react native apps on your phone during development it's a lot easier to run it on a simulator or a virtual device because you don't have to constantly touch your phone so to set up an Android virtual device first we need to install Android studio you can get it from developer.android.com slash studio so go ahead and download the latest version of Android studio the first time you run Android studio you're going to see a setup wizard like this so click on next go with the standard installation because this is going to install all the necessary components you need to create an Android virtual device so click on next here you can select a light or a dark theme we don't really care about this because we're not gonna develop in Android studio so let's click on next now look at the components that are gonna get downloaded we have Android emulator Android SDK build tools Android SDK platform Android SDK platform tools Intel x86 emulator accelerator as well as a bunch of other components these are the components you need to create an Android virtual device if these components are not listed here don't worry I'm gonna show you how to install them later but if you go with this standard installation you shouldn't have any problems so let's click on finish this is going to take a while so I'm going to pause the recording right Android studio is ready now let's go to the configure menu and select SDK manager if you follow the standard installation here you should have all those necessary components so on the sdk platforms tab you should have the latest stable version of android at the time of recording this video that is under ten or queue under sdk tools you should have android sdk build tools as well as android emulator Android SDK platform tools and Intel emulator accelerator if these components are not selected select them click OK and then Android studio is going to install them for you now if you're in a Mac or Linux there is an extra step unit to follow if you're a Windows user you don't have to follow this step but please watch the rest of this video because there are more steps you need to follow so head over to Doc's that Expo at i/o now on the left under manage workflow you can find all the official instructions to install an Android virtual device so we have almost finished the first step so we installed Android studio now down the bottom of the first step you can find the extra step for Mac and Linux users so you need to add 100 SDK to your path so you should edit your bash profile or bash RC and add this export statement so let's copy this export statement now open a terminal window and use your favorite editor to edit your bash profile so I use Visual Studio code now we go to our home directory and open - under line profile so here's my bash profile at the end of bash profile I'm gonna paste what I copied from the official documentation of Expo so we're exporting Android SDK and here's the path to Android SDK but you need to replace this path with the path of Android SDK on your machine how do we get it very easy back to Android studio let's go to configure SDK manager here we can find the path to Android SDK so copy there's the back to your favorite editor let's replace the path with white be copied now here in Expo documentation if you're on Mac there is one extra step you need to follow you need to add platform tools to a path as well so copy the second export statement and paste it at the end of your bash profile now once again we need to replace the path to Android SDK so let's delete this and use what we have over here so here's the complete path library Android SDK platform tools okay save the changes now on my machine I'm using zs8 or z shell this is the fancy terminal window I have here for this I need to edit a second file that is in the home directory that is z SH RC now back to bash profile I'm gonna copy these two expert statements and paste them into Z shrc so copy and pace over here save the changes now back in the terminal window at this point we should be able to run a DB if you get an error saying command not found that means you didn't follow one of these steps properly all right we're done with instructions for Mac and Linux users so everyone should follow the rest of this video to set up an Android virtual device so here on Android studio let's go to configure a video manager if it is short for Android virtual device on the screen let's click create virtual device here we should select the hardware we want to emulate we have so many options we have various pixel devices we have Nexus and so on if you don't know where to start usually the latest pixel device is a good place to start I prefer to use the one with Play Store installed so I'm gonna go with pixel three a you can see the size resolution and density of this device so let's click on next now here we should select the image or the operating system we want to install on this device you can select any of the images here in the recommended tab I prefer to use the latest stable version that is often the second item here so let's go with this now Android studio is down within this image to install on our emulated hardware it's gonna take a while so I'm going to pause the recording all right we're done with the step so let's click on next like here we can give this device a name I'm gonna use the default that specifies the type of hardware and the image we have installed on it now let's click on finish all right our virtual devices ready we can run it by clicking on this play button here so here's our virtual device or emulator we can simply drag the sides and resize it so when I make it smaller and put it on the side now to run our app in our new Android virtual device we go back to metro bundler and on the Left select run on Android device or emulator we can also go to our terminal window and press a to run this app in our Android emulator but make sure that the emulator is up and running before you press a now over here you can see that expert client was installed on the device so now metro bundler is building our JavaScript bundler so here is expert client and as you see it's downloading our JavaScript bundle and here's our react native app now here we have hello world because in the previous lesson I changed this message if you skip the previous lesson let me show you something really cool so I put vehicle on the left side and now let's change this message to hello react native now the moment I save this change our app is gonna get refreshed immediately take a look so save and here's hello react native this is the beauty of react native so we see our changes the moment we save them we don't have to wait for native bills to finish so this makes development incredibly fast and easy now on this virtual device we can bring up the developer menu by pressing command + M on Mac or ctrl + M on Windows so here's the developer menu we can manually reload the app in case the automatic reload didn't work we can copy the link to clipboard we can go to home here you can see the list of projects we are working on currently we have only a single project that is done with it which is hosted and this address Expo here's the IP address of my machine and here's the port number now we can select it and go back to our app once again can bring up the developer menu by pressing command on M on Mac or ctrl LM on Windows here we have a few other items these are you sport debugging we'll talk about them later in this section next I'm going to show you how to run this app on a real physical device as I told you before during Duvall map it's a lot easier to test your app and a virtual device or a simulator because you don't have to constantly touch your phone however simulators are well simulators they don't always function like a real device also certain features are not available in these simulators so you want to test your app on a real physical device whether it's an iPhone or an Android phone so the first step is to install expert on your phone you can get this from the App Store once you install this to run your app on your phone all you have to do is to go to Metro bundler and look at this QR code so point your phone at this QR code and open the camera app your phone is gonna pick this up and run your app in Expo as simple as that just make sure your phone is connected to the same wireless network as your computer otherwise this is not gonna work now when you're running your app on a real physical device you can bring up the developer menu by simply shaking your device so when you shake your device you're gonna see something like this this is what we call the developer menu over the next few videos I'm going to show you a few tools and techniques to debug your react native applications we have a few different tools here you can choose the tool or the tools that you prefer and it really depends on what you want to do so the simplest way to debug our react native applications is using the good old console deadlock statements so here in app component we can do a constant blog and say app executors now save the changes bring up the embedded terminal we have two entries for app executed because I have two virtual devices connected to Metro bundler I have an iOS simulator and an Android virtual device and here in Metro bundler on the top left you can see the connected devices so I've connected an iPhone 11 Promax and an Android virtual device now we can click on any of these devices and see the log for that device so console that log is the simplest way to debug or react native apps however this concept the log statements can have a negative impact on the performance of our apps in production so use these only during development or testing once you're done with your debugging sessions make sure to remove them before building your application for production next I'm going to show you how to debug your apps in Chrome let's see how we can debug this app in Chrome so I'm going to create a bug in this app component let's declare a variable called X and without initializing it let's call X to 2 string let's save the changes we get this red box where we can find information about the error that just occur so here's the error message undefined is not an object evaluating X to 2 string and here you can see we're in our component tree this error accurate in this case it occurred in app component now to debug this app first we need to dismiss the screen so we press the escape button it's gone now we need to bring up the developer menu I explain how to do this in the previous lessons if you're using a real device you have to shake it if you're using an Android virtual device you have to press command + M on Mac or ctrl + M on Windows and if you're using an iOS simulator you have to press command + D on my machine that doesn't work so I have to press ctrl + D and then command + D now we need to enable remote debugging when we do this the JavaScript code for this app will end up executing in Chrome let me show you so we tap on debug remote yes opens up a new tab in chrome pointing to his address localhost / debugger - UI so now the JavaScript for this app will execute remotely in Chrome and that's gonna slow down our app so when you're done with your debugging session make sure to stop remote debugging now let's open up chrome developer tools here on the console tab you can see the message that we logged as well as the error that occurred cannot read property two string of undefined now to debug this app we go to the sources tab over here click on this icon pause on exceptions and then select pause uncaught exceptions let me enable this option if an exception is caught in our app chrome is gonna stop the execution and highlight the line where the exception occurred let me show you so back to our app let's bring up the developer menu and reload our app now we can see the line where the exception occurred X the two string so Chrome paused on this exception now let me show you a few tools that we have here for debugging we can click on any line to insert a breakpoint and when you reload our app Chrome is gonna stop execution right on that line so from that point we can execute our code line by line we can watch the value of various variables to see if our computations are correct or not so let's reload our app one more time so bring up the developer menu we also have a shortcut for it on Mac we can press command + R on an iOS simulator so reload now line five is highlighted and it's about to get executed over here we have various tools for executing our code so we can step over this line or we can step into it this is useful if in this line we are calling a function that we have written so we can step into that function and execute the code in that function line by line we also have step out so if you step into a function and we're done debugging that function we can step out of that function now in this case console the blog is not a function we have written so it doesn't matter if we step over it or step into it so I'm gonna step over it and by the way look at this shortcut here in the tooltip on Windows it's f10 on Mac its command and a single quote so when debugging always use this shortcut because it's much faster than constantly clicking on these icons so step over this now we are on this line and you can see that X is undefined that is the reason why we got this exception now here we also have this watch window where we can watch the value of various variables so click on this plus sign and type X and then enter so as you can see X is undefined so this watch window is really useful to see what's going on now we're done with our debugging we know why we got this exception so we should remove this breakpoint otherwise next time we reload our app chrome is going to pause execution on this line so let's go back to our code delete these two lines save the changes then reload our app okay there is gone so we should stop remote debugging otherwise our app is gonna be really slow so once again bring up the developer menu and stop remote debugging so this is how we can debug your apps in Chrome now here we also have the network tab this is useful when we have API calls to our back-end you haven't gotten there yet but we're gonna get back to it in the future now what about the LMS tab well the elements that you see here are not the elements were the components of your app these are the elements of the debugger window so unlike a web app we cannot select an element and look at its properties so this is all about debugging in chrome we can also debug our react native apps in vs code let me show you first we bring up the developer menu and enable remote debugging so this opens this window in chrome we have to close it otherwise we'll get an error but in this case in this demo I'm not going to close this window because I want to show you that error now back to vs code let's go to the extensions panel search for react native and make sure you have installed this extension react native tools with this extension we can debug react native apps in vs code now let's go to the debug panel the first thing we have to create this file launch JSON this is where we store our debug configurations currently we don't have this file in our project so vs code is suggesting to create it so click on this link now from this drop-down list select react native now sometimes we ask o doesn't show you this drop down list I'm not sure why but it immediately creates the launch duck JSON file if this happens to you don't worry just continue watching you'll figure out what to do in a second so we select react native now here we see various configurations for debugging react native apps these configurations are installed by that extension react native tools so if you don't install that extension you're not going to see these configurations now by default debug Android is selected I'm gonna deselect this and select attach to packager honestly this is the only configuration I'm familiar with so we select attach to packager and click ok and here's launch dot JSON so sometimes we ask Oh doesn't show you that drop-down list instead it immediately creates this file now here we have various debug configurations currently in our configurations array we have a single object a single configuration and the name of this configuration is attached to packager if you don't have this object here you can always add a configuration you can either click on this button add configuration or you can go to the run menu and select add configuration now in this context menu we search for react native and this brings up various configurations for debug and react native apps so here we have attached to a packager we also have debug Android and so on so for example let's select a second configuration like debug Android so now we have a second object a second configuration called debug Android a same the changes we're done with this file I think is you're curious this file is located inside this folder dot vs code now let's go to app that yes I'm going to declare a variable X and set it to one we're going to use this during our debugging session now we can insert a breakpoint on this line and start an app in debug mode and execute it line by line exactly the way we debug our app in chrome now let's go to the debug panel in this drop-down list we can see various debug configurations currently we have two configurations debug Android and attach the package er I'm gonna select attach the package ER and click on this play button our debugger is started and then it immediately feels stuck to see why this happened you go to the View menu and then look at debug console so here's the arrow - packager are you sure there's a packager and it is running in this port 8081 so by default PS code tries to connect to this packager react native packager to get the JavaScript code on this port 8081 we have to change the sport to this port over here nineteen thousand and one so back to vs code on the top we go to the code menu then preferences settings now under user tab here research for react - native that packager dot port so look here is support 80 81 we have to change this to nineteen thousand and one now we're done with this let's bring up the debug panel one more time and start our app in debug mode debugger failed one more time so let's go to view debug console here's the second error could not debug another debugger is already connected to packager this happened because we have this window open in the background so sometimes you have a million tabs or windows open you don't know that you have this window open somewhere that's why nothing works on your machine so make sure to find this window and close it because you can either debug in Chrome or vyas code at a single point in time not both these processes so now we're going to debug in vs code which means our JavaScript code is going to get executed inside vs code so let's bring up the debug panel one more time and start our app all right we establish a connection beautiful so here's our simulator bring up the developer menu and reload app so the debugger loaded now let me close the debug console take a look we are in apt at Jas and the first line where I inserted a breakpoint is highlighted so now we can execute our code line by line we have the same tools that we had in Chrome we can step over the current line we can step into it if you're calling a function that we have written if you're inside a function we can step out of it we can restart our debugger and we can disconnect from our debugging session so let's step over this line and by the way this shortcut is f10 now here on the left side we can see the value of various variables so vs code automatically detected the variables in scope so here we have X the value of X is 1 we also have our watch window so we can selectively watch various variables in case they are not detected over here so we can type X and we can see the value of X so now we can execute our code line by line and see what's going on when we are done we should always stop the debugging session because our JavaScript code is executed remotely inside vs code so we disconnect here then we go to our app bring up the developer menu and stop remote debugging now we get this error run time is not ready for debugging don't worry about this we just need to reload our app and here you can find this shortcut for reloading on Mac its command + R so now our app is running just like before and the debugging session is terminated so far we have been serving our app from this address local host port nineteen thousand and two and that means if we turn off our computer or if you stop expose CLI we won't be able to open our app with expert client this is where publishing comes to the rescue so we can publish our app to Expo and then our app is gonna have a public and a permanent address that anyone can use to open it with expert client just like how we can publish NPM packages to NPM directory we can publish our hab to Expo and it will be visible to anyone in the world this is much easier than going through app stores if you have done any kind of app development before you probably know that going through app stores is very tedious there are certain steps that you have to follow with export we don't have to worry about it we simply publish our app to Expo and anyone in the world can open our app and test it with expert client of course this is purely for development and testing not production when you want to put our app to production we have to go through app stores that's the topic for the future so this video I'm going to show you how to publish your app to Expo now we can publish using Metro bundler here so we can click on publish or republish project alternatively we can open a new terminal window and type Expo publish either way you have to get back to this terminal we know because Expo is gonna ask you a few questions let me show you so in this demo I'm not gonna run Expo publish here instead I'm gonna use the publish come out here so click the Expo is asking the name of our app this is loaded from after JSON so if you look at after JSON you can see various settings about our app here's the name of our app here's a URL slug for it this will be part of our apps URL on Expo you will see it in a second so back to Metro bundler we can optionally specify the github source URL as well as a description we can optimize our assets so they will be compressed and minified by default this is enabled now the URL of our app is gonna look like this expert at IO at sign after this we're gonna have our username which we're gonna create in this video and then we have done with it so this is our URLs luck now let's click on publish project so we get back to our terminal window in vs code this is where you're running X + CLI so export is asking how would you like to authenticate we can make a new Expo account or login with an existing account so let's create a new export count we have to enter our email so I'm gonna go with programming with Maj at gmail.com for my username I'm gonna type programming with Marsh let's give me the password and confirm it all right now Expo is building our iOS and JavaScript bundles all right back to Metro Bunner our app is successfully published at its address let's click on it so here's our app currently our app doesn't have an icon that is why we have this empty box we'll come back and fix this in the future now here we have this QR code so anyone can scan this code with their phone and open our app with export client as simple as that we don't have to go through app stores now our app currently doesn't have any descriptions so let's go back to Metro bundler click on and publish one more time and this time give our app a description I'm gonna say a marketplace for selling this stuff you don't need any more now let's publish it one more time now back in vs coke let's open up the JSON down the bottom you can see our new description so our app is republished let's open it one more time and here's the updated description beautiful hey guys ma chère I just want to let you know that this tutorial is the first two hours of my ultimate react native course the complete course is divided into two parts basics and advanced topics but each part being about five to six hours long so the complete course is over ten hours long it includes all the source code we write in this course every section has it before and after source code so you can easily code along with me plus you will get plenty of exercises and step-by-step solutions and a certificate of completion that you can add to your resume if you're interested I put the link down below I'm offering a discount to the first hundred students so if you're interested enroll now before it's too late now let's continue to the next lesson in this section we're going to look at some of the core components and api's in react native we'll be talking about view text image button touchable alert and so on there are more components in react native than we can cover in this section or in this course let's route the course you're going to learn the ones that you will use most of the time now if you're curious you can find the complete list of these core components and api's on react native website so head over to react native dot dev then go to API here on the Left we can see all the core components that we can use for building user interfaces these components are cross-platform so when we compile our app they will be mapped to their negative equivalent so if we use a button here on Android this will look like a standard Android button and on iOS it will look like a standard iOS button we can also customize the look and feel of these buttons using Styles you learn in the next section so here are all the cross-platform components you'll also have a bunch of components specific to Android and iOS and we also have a bunch of api's these api's give us access to native functions there are not UI widgets for example we can use keyboard to control the soft keyboard or we can use stylesheet to create a bunch of styles again these API is our cross platform we also have a bunch of AP is specific to Android and iOS again will study most of the essential components at API but we don't have time to look at every single component so once you learn the foundations you can learn the other components on your own so next we're going to talk about views so earlier I told you that in react native we don't have HTML elements like div span paragraph and so on so we have to build our UI using the built-in components in react native view is the most basic and fundamental component for building UIs it's like a div so it's a container component that we can use for grouping or laying out children so this way we have over here has a bunch of styles now we'll talk about styles in detail in the next section but for now let me briefly explain what these styles are so we have flex set to 1 this means that this view is flexible and it will grow both horizontally and vertically to fill the free space in this case it grows and takes the entire screen now the background color of this view is white let's change this to Dodger blue so here we can use named colors we can also use RGB colors exactly the same way with specific colors in web applications now save the changes look this view is filling the entire space now one thing I want you to pay attention to is this notch or the edge on the new iPhones sometimes you want to make sure that this notch doesn't cover your content for example back to our Styles let's remove these two properties align items and justify content with these we can put a component in the center of this view that is the reason why our text appears in the middle of the screen now we'll talk about layouts and aligning components in the next section for now let's just remove these two properties save the changes now look our text is over here it's too small let me make the simulator bigger look so part of the text is covered by the knotch this is where we can use a special type of view called safe area of view so on the top we import safe area view from react native now we can replace this view with safe area of view so with this view selected press command + D on Mac or ctrl + D on Windows now both views are selected we have two carats this is called multi cursor editing so we can replace both of these at the same time so type safe area view now press escape to cancel Multi cursor editing okay save the changes take a look our text is no longer behind this notch so safe area view adds a bit of padding on the top to make sure that our content is within the safe area alright so this is all about views for now next we're going to talk about the text component the second most fundamental component in react native is text and we use it for displaying text so here we cannot place text just anywhere within JSX as we do in web applications we should always wrap our text with the text component now this text component has a few interesting props let's look at the documentation for this component so here on react native web site under the API section let's look at the documentation for the text component so here we have a bunch of props I'm going to talk about the most important ones the first one is number of lines when we set this if our text is longer it will get truncated let me show you so back in vs code let's change this to a really really long text now I want to make this even longer and see what happens so now our text is wrapped we have two lines but if you set the number of lines to one our text will get truncated take a look so we set the number of lines to one now say take a look so we have dot dot dot at the end of the first line very useful we can also make this text act like a link using the unpress prop or event so here we set on press we set this to a function we can write a function inline here like this we can pass an error function the constant of log saying text click but this is useful for very small functions one-liners if you have a fair amount of logic we don't throw all that logic here in the middle of our JSX so we should implement it in a separate function so before our return statement we can define a function by convention we prefix the function name with handle so we want to handle the unprecedent we call this function handle press now we set it to an error function and this is where we do our console deadlock text pressed okay now we said on press to handle press save the changes take a look so I tap on this now if you look at the terminal window you see our lock message so we talked about the two essential props for the text component now as you're building apps get yourself used to reading this documentation for every component you come across it helps you better understand the capabilities and limitations of that component next we're going to talk about images now let's talk about rendering images first let's restore our app to its original state so let's change the background color to white now to put our content in the center of the screen we have to set two properties justify content we set this to Center and align items we should set this to Center as well okay so now anything that we put inside this container that is our safe area of you will be in the center of this screen like this okay now to render an image first we import the image component from react native with this component we can display both local images that we bundled with our app as well as network images that we download over the Internet so currently in our assets folder we have two images icon and splash which is used in our app is loading so let's display the icon right below the text so here we type image now because we're not going to put anything in between the image tags we can use the self-closing syntax that makes our code cleaner now here we should set the source prop to load our icon we use the require function and specify the path to our image so our app component is right here we should go to the assets folder and load icon the PNG so here we type period which represents the current folder then we go to assets and load icon that PNG so when we use the require function react native packager will include this file in our bundle so it's gonna increase the size of our app so we should use static images if they really have to be shipped with our app like the icon or splash screen otherwise we should download images from the internet so now save the changes here's our image beautiful now what do you think this required function returns it doesn't return an image or a string it returns a number that is a reference to our image let me show you so before our return statement let's do a console log and print require assets slash icon that PNG now look in the terminal so to is the reference to our image okay alright now let's delete this line so this is how we can render local or starting images but what about Network images well let's head over to pick some dead photos this is a random image generator here's an example look at this URL every time we hit this URL we'll get a random image with these dimensions 200 by 300 so let's copy this now back to vs code for Network images instead of the required function we have to pass an object here now this object will have a property called URI which we set to a string and this is where we paste the URL that we copied so save the changes back to our simulator our image is not visible because react native doesn't know its dimensions so we have to manually specify the dimensions for network images for local images we didn't have to do this because the require function reads the metadata about our images okay so back to our code and the object that we passed to the source prop we set two extra properties with the 200 and height to 300 save the changes so here's our image component and here's the result beautiful now here on the official documentation you can see various props for the image component let's talk about a few useful props here we have blur radius this applies a blur effect to our image so here we can set the radius to let's say 10 now look our image looks blurry we also have loading indicator source this is similar to the source prop so we can give it a local image using the required function or we can pass the URI of a network image the image we pass here will be displayed while the actual image is being downloaded we have another prop called fake duration as you can see in this table it's only supported in Android so Android loads this image with a fade effect and by default this fade effect takes 300 milliseconds let me show you here's my Android virtual device we can reload the app by pressing R twice now look at the Fed effect did you see that we can change this duration to make it more pronounced so here we can set fade duration to let's say 1 second now let's reload the app and here's our fade effect beautiful so this only works on Android it has no effect on iOS another useful prop is resize mode which is used if the dimensions of our image is different from the dimensions we specify so here we have various resize mode we have cover contain stretch repeat and so on these are the same resize modes we have in web applications we also have a bunch of events like unload on load and unload start and so on with these we can tap into certain moments when an image is being loaded in the previous lesson we added this image to our app now let's take this app to the next level and allow the user to tap on this image with our text component we achieve this by handling the unprecedent right but the image component doesn't have this prop or event this is where we can use touch upon components so we can make anything touchable here are the touchable components in react native we have touchable highlight touchable opacity touchable without feedback the touchable component we use will depend on the kind of feedback we want to give to our users let me show you so back to our code let's import touchable without feedback and note that I'm not typing the complete name of this component I'm using shortcuts so I'm typing a little bit of it like tou WF and then press Enter this is much faster than typing the complete name of a component okay now to make this image touchable we have to wrap it inside a touchable without feedback component so once again I'm gonna use a shortcut to touchable without feedback press Enter now let's move this image inside touchable without feedback so I'm holding alt and then pressing the up arrow with this we can move code like this okay now this touchable without feedback has an event called unpress it also has an event called on long press this is useful let me want to allow the user to tap and hold on a component so here let's handle the unprecedent here we can pass a function let's do a consult log and say image tapped now save the changes when I tap on this image nothing happens because we're using touchable without feedback it doesn't give us any visual feedback but if you look at our terminal we can see our message now let's replace this with a different kind of touchable so on the top let's import touchable opacity now let's replace this with touchable opacity so touchable opacity which will also replace this tag take a look so let me tap on this image its opacity gets reduced so we can see the background this is why this touchable is called touchable opacity for a fraction of a second it reduces the opacity of what we are making touchable okay now let's look at touchable highlight so we imported on the top touchable highlight and then use it over here now using command + D as I told you before we can select both instances and replace them in one go touchable highlight save the changes take a look so when we tap on this image its background is darkened for a fraction of a second this is the effect of touchable highlight so these are the three cross-platform touchable components we have in react native we also have a touchable that is specific to Android it's called touchable native feedback it's not supported on iOS so when we use it we get a warning let me show you so let's import touchable native feedback now let's use it here touchable native feedback save the changes on iOS we get this red box touchable native feedback is not supported on this platform so later in this section I will show you how you can detect the platform in which this app is running so if he's running on iOS perhaps we can use touchable opacity if it's running on Android we can use touchable native feedback now let's try this touchable on an Android virtual device so I'm gonna bring up my Android virtual device when I tap on this image nothing happens because this touchable doesn't really work with images it works with views that have a background color let me show you so back to our code on the top let's import the view component now we're going to replace this image with a view let's give this view a few styles so we set this time prop to an object with a few properties with let's say 200 height I'm gonna use 70 and background color let's set this to Dodger blue let's save the changes take a look this is the native feedback effect that we have on Android so this is all about touchable next we're going to talk about buttons now let's talk about the button component so I've cleaned up the code here we only have a safe area view no text no image no touchable component here we want to add a button to our view so we can import it on the top and then add it over here but let me show you a shortcut here we can type button now hearing the intellisense look we have auto import so we can have vs code automatically import this for us so here we press enter and our button is imported here beautiful now with buttons we can use the self-closing syntax because we don't put anything in between them so here we set the title - lets say click me and we handled the unprecedent pretty straightforward let's log button tapped now save the changes so here's our button on an iPhone and here's our button on an Android phone so each platform has a different way of presenting this button component because as I told you before this button component that we're using here gets mapped to its native equivalent son Android buttons look like this by default now we can change the color of this button for example we can set the color to our inch save the changes now our button has an orange background and on iPhone it has an orange text we can also create a custom button that has a unique look and feel I'll show you how to do that in the next section when we talk about styling next we're going to talk about alerts let's make this app more interesting instead of printing something on the console let's display a standard alert box so I'm going to delete console blog and use the alert function so the alert function that we have in browsers also works here so here we can display a message like button tapped save now take a look on iOS we get this standard iOS alert box and on Android we get a different kind of alert again this is because the alert we display gets mapped to its native equivalent now let me use the alert function we get a box the title of this box is alert and here we have a single button called okay if this doesn't work for you you can always customize it you can change the title you can change the buttons here let me show you so on the top we import alert this is not a component that has a visual representation this is on an API so it's an object with a couple of methods let me show you so I'm gonna put this on a new line now instead of alert you're gonna type alert dot look here we have two methods alert for displaying a message and prompt for asking a question and getting an answer so let's use the alert method this method has a few parameters the first one is the title of our alert box let's set it to my title the second parameter is our message I'm going to set this to my message the third parameter is the array of buttons so I'm going to pass an array here in this array we add an object now press ctrl + space you can see the properties of this object so every button can have a text it can have a style and it also raises the unprecedent so let's set the text of the first button to yes now we add a second button and set its text to no save the changes so this is what we have now take a look now we have a custom alert the title has changed and we have two buttons here now how do we know which button was clicked that's very easy we just have to handle the unpress event of these two buttons so here we can say on press we can set this to a function to a console that log of yes and over here we can set on press to a different function and here we can log a different message on the console take a look yes now back in the terminal here's our message beautiful now let's look at the prop method so I'm gonna delete this via lines here we call learnt that prompt this method also takes a title so here's the title of our box we also give it a message now the third parameter is a callback or buttons so we can pass a callback function that takes a parameter of type string this is the text that the user enters into the box so we can get that imprinted on the console pretty straightforward so save the changes now let's train on iOS so here we have this input box where we can type something so let's say hello world now if we press ok our callback function will get called so we get our message in the console now one thing you need to know is that this API only works in iOS at the time of recording this video so on Android when I tap on this button nothing happens hopefully this will change in the future another useful API you need to know about is this dive sheet API you have seen this before with this we can define stats but let me clarify a few things about stars in a react native app first of all as I said before these does we have here they are not CSS their names are inspired by CSS but they are not CSS these are just regular JavaScript properties so when we build our app react native will map is platform agnostic components to their native equivalent and then it will apply these properties on them okay so that means this object that we're passing here is essentially a plain JavaScript object so instead of referencing this object Styles that container we can pass an inline object here and set the background color to let's say orange now look we have this orange bar on the top because we are playing a single style we are only setting the background color okay we can also define this object somewhere else for example I can cut this from here let's define a constant called container style and say to this object now we can reference this object over here container style our app still works now previously we were using styles that container styles is the object that we're defining over here so when we call strategy that create we pass an object this object that we pass here is the same object that we get as a result so our Astana's object has a property called container which is an object itself this is the reason why we can reference styles that container over here so whatever we pass to the create method we get it as a result now you might ask but what is the purpose of this method why can't we just use a plain JavaScript object why do we have to call stylesheet that create well there are two reasons the first reason is that this method validates the properties that we use here so it ensures that we don't accidentally misspelled a property so if he misspelled this property let's say we add an e at the end look what happens we get this red box background color with an E is not a valid style property this validation doesn't happen if we use a plain JavaScript object directly so let me revert this back now let's pass an inline object and set its background let's misspell it to something else look we don't get any errors but our app doesn't have the right look either so this is one benefit of using stylesheet that create let me remove this so star as that container so this method validates the properties that we pass here the second benefit is that the react native team have been working on implementing some kind of optimizations behind the scene as far as I know these optimizations are not available at the time of recording this but they're coming in the future so it's the recommended practice to use the statute API to define stats so this is all about this stylesheet api now here you can also combine multiple styler objects so instead of passing a single object we can pass an array of objects so in this array first we have styles that container and then we can add a second object like this object that we defined over here now take a look the result is the combination of these two style objects kind of similar to how we can apply multiple CSS classes to an HTML element but here the results are more predictable so the object on the right over eights the properties of the object on the left in this case container style is defining a single property that's background color so this is over writing the background color that we defined earlier so the results are more predictable now another question you might have is do we have to put these styles in the same file not really you can extract this from here put it in a separate file and then import it in this file that's totally fine but it's very conventional to define their size below it component because quite often you need to work with both the structure of your component as well as it stars in the same session if you put the size in a separate file you have to constantly go back and forth between two files I personally even though I'm all about writing clean code and separation of concerns I prefer to have those styles below my components it has worked better for me but if you don't like it that's totally fine you can separate your status in the next section I'm going to talk about stars in detail for now that's all you need to know about stars there are times way to detect the platform in which our app is running and customize some styles or behaviors here's an example look at our status object let's remove these two properties so our button is no longer at the center of the screen take a look so it's here on the top but look at our Android virtual device our button is below the status bar so this safe are your view component that we used earlier it only works for iOS so it makes sure that our content is not covered by this notch on iPhone it has no effect on Android at the time of recording this video so in this case we need to manually add some padding on the top to push this button down so it's no longer behind the status bar this is where we use the platform module so on the top we import the platform module from react native now over here we can add a third style padding top we want to set this dynamically if the current platform is Android we're gonna set this to let's say 20 otherwise we want to set it to zero so here we type platform now this object has a few properties os returns the operating system which can be Android iOS and so on we can also get the version of our platform we can check to see if this is an iPad if this is a TV and so on so let's read this property we can compare this with now here we press ctrl + space we can see various values that are accepted so we have Android iOS Mac iOS web and windows so if this is Android you want to set padding top to 20 otherwise we're going to say 2-0 say take a look now our button is below the status bar but wait 20 well this was just for a demo the proper way to do this is to calculate the height of the status bar and use that as the value for this style so on the top we gonna import the statusbar api now we're gonna replace 20 with status bar dot current height this is the proper way to add padding on the top because the height of the status bar might be different from one Android phone to another so save the changes now our button is just below the status bar hey guys Marsh here I just wanted to let you know that this tutorial is the first two hours of my ultimate react native course the complete course is divided into two parts basics and advanced topics but each part being about five to six hours long so the complete course is over ten hours long it includes all the source code rewriting this course every section has it before and after source code so you can easily code along with me plus you will get plenty of exercises and step-by-step solutions and a certificate of completion that you can act your resume if you're interested I put the link down below I'm offering a discount to the first hundred students so if you're interested in role now before it's too late now let's continue to the next lesson in this section you're gonna learn how to create layouts in react native and this is where the fun begins because we're gonna build the first two screens of our app so we're gonna talk about dimensions device orientation flexbox as well as absolute and relative positioning so pay close attention to the lessons and take note because you're going to use these materials as part of the exercises at the end of this section so I'm super excited about this section I hope you're too now let's jump in and get started let's talk about the dimensions of components on the screen so let's import the view component from react native now in our safer your view let's add a view we give it a style let's set the background color to Dodger blue I'm gonna give this a width of 150 and a height of 70 now these numbers we have here are if density-independent pixels or dips the actual size equals density-independent pixels times scale factor of the device for example iPhone 4 can display 320 by 480 points these points are abstract units they're not pixels now the skill factor of iPhone 4 is 2 or 2x that means every point contains 2 pixels so the screen resolution of iPhone 4 equals 640 by 960 pixels now if the with our view is 150 density-independent pixels or dips its actual width on an iPhone 4 will equal 150 times 2 which is 300 pixels that is roughly around half of the screen width right now in contrast iPhone 11 pro max can display 414 by 896 points with a scale factor of 3 here's the screen resolution of iPhone 11 pro max now what is the width our view on this iPhone it is 150 times 3 equals 450 pixels so again it's roughly around half of the screen with roughly not exactly in fact our view looks a little bit smaller on an iPhone 11 pro max but don't worry about memorizing any of these numbers they don't matter what matters is that by expressing the size of our components in density-independent pixels we can feel relaxed that they look almost the same size across different devices now if you want to make sure that this width is exactly half of the screen width which with a percentage value here so we replace 150 by 50% make sure to put this in quotes because this is a string value now save so here's our view it's taken exactly half of the screen now in some situations you want to fine tune the size of a component according to the size of the screen in those cases we can use the dimensions API so on the top we import dimensions from react native now let's lock dimensions that get here we should pass a string that can be either window or screen screen returns the size of the entire screen whereas window returns the size of the visible application window on iOS these dimensions are equal they're only different on Android so the window size is a bit smaller than the screen size so I'm gonna pass screen here now save at the terminal so here you can see the width and the height of this iPhone as well as is scale factor so every point on this iPhone has 3 pixels so this is how we can get the dimensions of the device using the dimensions API now the problem in this API is that it doesn't respond to orientation changes so if the user rotates the device these numbers don't get updated we'll talk about how to handle that in the next AESA there are times want to detect our screen orientation and resize our components accordingly for example let's set the width of this view to 100% and its height to 30% so imagine this is a media player in portrait mode you want to have this video player on top and in landscape mode we want to have this take the entire screen right now the height of this imaginary video player is always 30% of the height of the screen this is where we need to detect the orientation of our screen and resize this component accordingly and by the way to rotate this iOS simulator we hold down the command key and use the left or right arrows like this okay and for Android we have this toolbar now look at the shortcut on Mac its command + left on Windows it's probably ctrl + left I'm not entirely sure so to support different orientations first we go to app to JSON by default the orientation of our app is set to portrait so it only supports the portrait mode we can set this to landscape to only support the landscape mode but this is not very common we can also set this to default to support both modes so let's save the changes now to detect screen orientation we're going to use this library called hooks develop by react Native community so on this page you can see we have various hooks hooks are functions that bring extra capabilities to function components for example we can add state to a function component you see one of the built-in hooks in react if you're not familiar with hooks I highly encourage you to watch the last section of my react course I covered hooks in detail in that section so here we have various hooks or various functions all these hooks by convention start with use for example we have used back Handler to work with the back button on Android we have used camera roll we have used dimensions use device orientation and so on so first let's install this library here in the terminal window at react - native - community / hooks all right this is installed now let's go back to after Jas first special import use dimensions from at react native community and slash hooks with this hook we can get the correct dimensions of the screen whether we are in portrait mode or in the landscape mode this hook always returns to updated dimensions this is one of the limitations of the dimensions API in react native so this is the preferred way to get the dimensions of the screen if you support multiple orientations so let's do a console that log statement and call use dimensions say now here you can see the width of our screen is 414 now if I rotate this device in the landscape mode we get this new with 896 so every time we rotate our device our component gets recalled and here we recalculate the updated dimensions now we also have another hook for detecting the screen orientation use device orientation so let's call it here so let's reload the app in portrait mode okay so we get an object this object has two properties landscape is false and portrait is true now if I rotate this simulator we get an eel object now landscape is true and portrayed as false so to make this imaginary video player take the entire screen in landscape mode we can write code like this first we call this function then we store the result in this object or we can use object destructuring here and pick the landscape property from that object now we can calculate the height dynamically so if you're in the landscape mode we're gonna set the height to 100% otherwise we're gonna say it to 30% take a look so let's reload the app all right in landscape mode our video player is taking the entire screen we have this white edges this is because we put this inside of a safe area of view perhaps for a video player this is not something we want to do we want to make sure that the video player takes the entire screen but let's not worry about it in this lesson now if we rotate this too right the height of our video player will be 30% of our screen height so using the hooks in this library we can get the dimensions and the orientation of our device now for the app that we're going to build on this course we're not going to support the landscape mode so I'm going to go back to after JSON and set the orientation back to portrait now let's talk about flags for a flexbox with flex we can easily build complex layouts that work consistently across different screen sizes we are the same concept in CSS but flexbox in react native is a little bit different so make sure to watch the next few lessons even if you are familiar with flexbox in CSS so I've removed all the code we have written so far we're only importing the view component from react native now in our app component let's return a view and give this view a couple of stats so I'm gonna set the background color to dodge or blue and flex to one when we set Flex to one this view grows to take the available free space so save our view is taking the entire screen what if you set flex to 0.5 now our view takes half of the screen okay so with Flex we typically set up a view as a container and then align children inside that container so let's imagine this view is our container so let's change its background color to white and set flex to 1 so it takes the entire screen now inside this view we're gonna add another view here we can use the self-closing syntax because we're not gonna put anything inside this view now let's give this view a couple of styles so I'm gonna set the background color to Dodger blue and flex to one let's see what we get once again we get a blue screen because our parent or container view is taking the entire screen and inside this container we have this other view the blue view which is growing to take the available free space so it feels it's container that is why the entire screen looks blue now with this view select that let's hold down shift and alt and then press the down arrow for this we can duplicate coding vs code so let's duplicate this one more time now we have three views the first view is Dodger blue the second view let's make it gold and the third view let's make it tomato that's a kind of red so this is what we get so now our screen is divided into three segments each view is taking 1/3 of its container or 1/3 of the screen now what if we set the Flex property of this blue view to 2 now the blue view is twice as big as the other views with this setup we're essentially dividing the space into four segments why four well we have two plus one plus one so we have four segments two out of four segments is allocated to the first view to the blue view so this view is taking half of the screen or half of its container and these other views each is taking one-fourth of the screen so this is the basics of flex over the next few lessons we're gonna study other properties of flex now let's give this viewers a fixed-size so in this blue view I'm gonna remove the Flex property let's set the width to 100 and height to 100 as well now you're going to repeat so let's change the second view and the third view here's what we get our views are laid up vertically in a column because that makes more sense in mobile apps typically we hold our phones in portrait mode so that's why by default react native vertically aligns the items in a container if you have worked with flexbox in CSS you probably know that by default items are laid out horizontally so this is one of the differences we have in react native now to lay this out horizontally we go to our container so here's our container we set the Flex Direction property to row here's what we get we also have real reverse so items are laid out from right to left and we also have column reverse so here's what we get now any time if you wonder what values are acceptable here simply delete this press ctrl + space so here are the list of values column which is the default value column reverse row and row reverse now let's set this back to row with this setup we say our main or primary axis is the horizontal axis and the cross axis is the vertical axis this is an important property of flex we're going to get back to it over and over next we're going to talk about aligning items in this lesson we're going to talk about aligning items in a container so currently our items or our views are appearing at the top left corner of the screen what if you want to push this to the right or put them in the center of the screen we go to our container and set the justified content property to one of these values so let's set it to center here's what we get so with this property we can align items along the main or the primary axis what is our main axis here it's the horizontal axis because earlier we set Flex direction to row so now our main axis is the horizontal axis now what if we change this to column now our items are appearing at the center of the vertical axis because the vertical axis is now our primary or main axis this changes back to Rome and look at the other values so we have flex and now our items are appearing at the end of the horizontal axis we also have flex start which is the default value and we have three properties for distributing space we have space around so with this property the space between each two items is equal so look at the space here it's equal but the space around the first and last item and the edges of the screen is different so here we have less space if it changed this to space evenly now the space is evenly distributed between items and we also have space between with this setup the first and the last items are pushed to the edges of the screen and the remaining space is distributed between the other items so let's change this back to Center now we have another property called aligned items and with this we can align items across the secondary axis so what is our secondary axis here is the vertical axis right so if we set this to Center now our items appear at the center of this screen let's look at the other values you have baseline the impact of this unless we change the height of one of these views so let's change the height of the first view to 300 and the second view to 200 now these viewers have the same baseline okay let's look at another value flex and this is pretty self-explanatory so our items appear at the end of the secondary axis okay what else do we have here flex start now the items appear at the start of the vertical axis and finally we have stretch which is the default value now we don't see the impact of this property unless we remove the height of one of these views so I'm gonna comment this out see what happened the blue view stretched to fill the entire vertical axis so this is the default value if we comment out aligned items we get the exact same result so let's bring it back and change it to Center and bring back the height property as well so we justify content we align items across the main axis and with align items we align them across the secondary axis now the first time I learned about these properties I was a bit confused I was wondering why the names are not consistent every time I wanted to align something I wasn't sure which property I had to use honestly it's a bit weird I know but you will get used to it as we go through the course you're gonna use this properties over and over so that would be second nature to you now what if you want to change the alignment of one of these items let's say we want to put the blue view over here so we go to this view and set aligned self to flex start so look at these two properties we have aligned items which we apply to the container and we have aligned self which we apply to an individual item now here's what we get so this is all about aligning legs we're gonna talk about wrapping items let's talk about wrapping items so I'm going to go to the last view this view over here let's duplicate this change the background color of the new view to gray so here's our new view and we have a bit of extra space here so what do you think will happen if we add an extra view here let's find out so let's duplicate this one more time and change the background color of the new view to green yellow do you see what happened the blue view got shrunk so the green view can fit on the screen so this is the default behavior if our items overflow across the main access one or more items get shrunk so other items can fit on the screen we can change this behavior by enabling wrapping so we go to our container here's a container we apply a new style called flex wrap the default value is nowrap we said this to wrap but when I save the changes the alignment of this items is gonna get screwed take a look see what happened so we have wrapping because the green view is appearing on the second line and the blue view is no longer shrunk but what happened to our vertical alignment we wanted all these items to be vertically in the center of the screen this is where a lot of people get confused so let me clarify for you when we enable wrapping the align autos property behaves a bit differently so if you have multiple lines the align autos property determines the alignment of items within each line let me show you with a good example so I'm gonna change the height of the first view the blue view to 300 see what's happening within each line our items are vertically centered now currently we have a single item on the second line but if you had multiple items with different heights all these items would also be vertically centered so a line items property determines the alignment of items along the secondary axis with an H line now if you want to put all these items together in the center of the screen or in the center of the vertical axis we use a different property it's called aligned content so we want to align the entire content as a whole we said this to Center now all these items are appearing in the center of the vertical or the secondary axis so this is the difference between a line items and aligned content the line items determines the alignment of items within each line and aligned content determines the alignment of the entire content that line content only works if we have wrapping if you don't have wrapping it has no effect so this is all about wrapping so we have covered all the essential properties of flex but there are three other properties that you need to understand you may not use them as much but it's good to know them in case you see them in someone else's code so here's our blue view here we can apply a property called flex basis and with this we can set the size of an item along the primary axis so our primary axis here is the horizontal axis so if we set this property to 100 this is equivalent to setting the width to 100 so if I comment out this property and save the changes look we get the same result knife our primary axis was the vertical axis setting Flex basis would be equivalent to setting the height property so Flex basis can map to width or height now we have another property flex grow if we said this to one the moment I save the changes you will see the blue view grow to fill the available space take a look here it is in fact selling flex grow is exactly the same as setting the Flex property now if I say the changes we are not going to see the same result because I don't know if there is a problem with a simulator or the tooling so let's verify this save look we don't get the same result but if you manually refresh using the developer menu we see the same result as applying the Flex grow property okay now we have another property called Flex shrink honestly it's not something used that often but let me explain how it works it's essentially the opposite of Flex grow so to simplify things let's get rid of these two properties and set the width to 400 now our blue view is taken so much space so the orange view is not fitting on the screen we have overflowing in this case we can set Flex shrink to 1 and with this we are saying that hey if you have overflowing this item can get shrunk so other items can fit on the screen take a look save there you go I told you that flex is a shorthand for flex grow and flex rank so if it said flex to a negative number this is exactly the same as setting Flex rank I save the changes we don't get the same result because there is a problem going on here so you have to manually refresh now we get the same result as setting the Flex shrink property so this is all about Flex bases Flex grow and flex rank in this lesson we're going to talk about absolute and relative positioning in react native so we have our container with three items in it just like before now what if you want to move this gold view without changing the layout around it it's very easy so here's our gold view we can set top to 20 now when I save the changes this gold view will move 20 independent pixels from the top look here it is we can also set a negative value so our gold view move- 20 pixels from the top this is exactly the same as setting the bottom property so if I said bottom to 20 that means you want to move this gold view 20 pixels from the bottom we also have left on right so let's move this 20 pixels from the left or 20 pixels from the right so with these properties we can position a component relative to its current position without affecting the layout around it so in all these examples the blue and the red views have been exactly where they're supposed to be they didn't move around right this happens because in react native all components by default have their positions set to relative so this is how relative positioning works in CSS as well in contrast to relative positioning we have absolute positioning now if I save the changes this gold view would be positioned relative to its parent which is this container that takes the entire screen and these other views will move around as a result of this positioning let me show you before I save the changes let's set top to 20 and left to 20 as well so we can see clarity so save look our gold view is positioned 20 pixels from the left and top of its parent that's the container that takes the entire screen and as a result of this positioning these other views moved around so they're not in their original position let me show you one more time so I'm going to change position back to relative look with relative positioning these two views did not move they stayed in their original position if we use absolute positioning for this gold view it will be positioned relative to its parent and these other views will be repositioned look they moved around okay so to recap in react native all components by default have their position set to relative which means we can move them relative to their current position without changing the layout around them if we change the position to absolute we can move a component relative to its parent and the layout around it will get affected this is all about absolute and relative positioning in react native all right now it's time for an exercise so I want you to implement two screens of our app the welcome screen and the view image screen for the welcome screen we have this logo and this background image you can download these below this video now in this section our focus is purely on laying out components on the screen so we're not concerned about styling for example our text here it's very small and it's close to the logo we don't want to worry about these details we're gonna talk about styling in the next section so then we're gonna come back and fix those problems now this red and green boxes they are placeholders for the login and register buttons that we're gonna create in the next section now for the view image screen again we have two placeholders for the closed and delete icons that we're gonna add in the next section so go ahead and implement these two screens this is gonna take about 15 minutes of your time once you're done come back see my solution all right the first thing I want to do is to create a new folder here in the root call app I'm gonna put all of our application source code inside this folder this is a good practice to follow because with this we can separate our application code from the code that is automatically generated by our tooling let's say tomorrow something crazy happens with this project we can create a brand new react native project and simply copy your application code into that project okay so here's our app folder let's move the assets folder inside this folder now we need to go to after JSON and update the path to these two images so app slash assets and one more time save let's make sure that everything is working properly good so in our app folder let's add a new folder called screens I like to add all our screen components inside this folder this is a convention that a lot of react native developers follow you don't have to follow if you don't like it so in the screens folder let's add a new file called welcome screen look at the naming convention I'm using to name this file so for this components I like to use the word screen in the file and the components name now here we want to implement a function component earlier in the course I told you to install this extension react native react Redux snippets with this extension we can quickly type code so throughout the course I'm going to use the shortcuts that come with this extension you can always learn about this shortcut down below or on the github page of this project ok so here is an example we type our SF that is short for react stateless function now we have the basic template for a function component with multi cursor editing enabled so here we can rename this component if you want to once we're done we press the escape button to disable multi cursor editing now first we want to add an image background component here so let's delete the div element we type image background here we have auto import so let's import this now we need to set the source of this image so source equals here we call the require function then currently we are in the screens folder so let's go one level up now we go to assets and load background dot jpg okay save the changes that we should give this component a style so after this component I'm gonna type r n SS that is short for react native stylesheet so this quickly generates this code style sheet that create we store the result in this object Styles and unfortunately this is not imported on the top so we have to manually import it style sheet okay so in this object we're gonna have a bunch of key value pairs so let's add a new key value pair it's called background this is where we're gonna add all the styles for our image background component so I'm gonna set flex to 1 so this image background takes the entire screen ok now here we sell our style to styles that background save let's go to our app component and render our welcome screen so I'm going to delete all the code here we don't need it anymore so we type welcome screen and have vyas code automatically imported on the top beautiful let's see what we get so here's our background image now let's add our buttons so over here inside this component we're gonna add a view let's give it a style so we're gonna set this to styles that login button now let's create that over here so as you see I'm not writing in nine stands anymore I like to separate these so login button let's say it's with to 100% and its height to 70 pixels the background color should be now let me look at my cheat sheet so that's going to be F c5 c6 5 save the changes we can find variable view because we didn't import it on the top so let's add it to this list say so our button is currently on the top we want to put it down below over here how do we do that well earlier we talked about flex direction so by default flex Direction is set to call him so our primary access is this vertical line I told you that using justified content we can align items along the primary access so we go to the styles for our container which is this background image here we set justify content to flex and the default value is flex start that is the reason why our button appears here on the top so we said this to flex and save the changes now our button is here beautiful let's duplicate this to add the second button I'm gonna rename this to register button now let's duplicate these styles and rename is to register button I'm gonna use the same width and height but change the background color to 4e c-d-c for now you might be thinking I'm typing too fast but at this point you should have already done your exercise you shouldn't code along with me so I don't want to waste a lot of people's time by typing really slowly okay so save the changes here's our second button beautiful now we need to add the logo on the top but here's a problem if you had the logo because we said justify content to flex and our logo is gonna end up here so how do we put it on the top this is where we can use absolute positioning so we can position the logo relative to its parent which is this background image so let's hat here image now let me show you something in this case auto import didn't work this item with this blue icon so if you look on the right side we don't have auto import sometimes this happens in the context menu that appears here so look we have two image instances the second one where the orange icon has auto import so make sure to select that one so now you can see image is imported on the top so here I'm using the self-closing syntax because we're not gonna put anything inside this image now let's set its source once again we used a required function we go to the assets folder and load logo - red dot PNG let's test the result up to this point our logo is way too big so let's give it a couple of stars we set style to styles that logo now over here and by the way note that I'm sorting these keys so if you have background login button logo and so on this makes it easier to maintain your applications so let's set the size of this logo to 100 by 100 so width is 100 and height is 100 as well save okay this is good our logo is down below now we should use absolute positioning so I'm gonna set position to absolute and let's put this 50 pixels from the top of the screen so here's what we get we can push it down a little bit let's say 70 that is better but how do we put in center well Ernie we talked about the primary and the secondary access in flex so our primary axis is the vertical line and the secondary axis is the horizontal line using what property can be aligned items along the secondary axis using align items so you go to our container over here we said align items to Center and with this we can align items along the secondary axis take a look now the image is right in the middle of the screen beautiful so finally we need to add our tagline below this logo so let's add a text component so we have this orange icon here so we can automatically import this what was our tagline cell what you don't need say our text appears here so what we need to do is to put the text and the logo inside a container and I apply absolute positioning on that container okay so let's add a new view here then we're gonna move the image and text components inside this view so with these lines selected I'm gonna hold down the Alt key and then press the up arrow with this we can move code okay so now let's apply a style here we can say styles that logo container whatever you want to call it now let's create this so here's logo now we create local container this is very simple I just want to move these two properties inside this object let's see what happens so our text is in the right position but our logo is not exactly in the middle of the screen this happened because once we added this new container the alignment of this container is reset to flex start by default so in this container once again we need to set align items to center so we can align the items along the secondary or the horizontal axis take a look and here's the final result in the next section we're going to apply a bunch of styles to make this screen pretty now if you want my source code you can get it from the zip file that I gave you at the beginning of the course in the first section that zip file contains all the source code that we're gonna write throughout this course so every section has a start and a finish folder where you can find a relevant source code all right now in the screens folder let's add a new file called view image screen that Jay has here we're gonna create a function component I'm happy with the name now in this component first we want to add an image so image let's set its source to require we go to the assets folder and load chair jpg now let's test our application up to this point so we go to after j/s and render view image screen ok let's see what we get so we get this kind of whitish screen because this image that I have supplied is very big and it doesn't fit on the screen so we need to apply a bunch of stars here we set style to first we should create a style to object so we type our NSS good now let's import style sheet on the top so in this object we're going to find a bunch of stands for our image I'm gonna set the width to 100% and the height to 100% as well and finally let's add style to styles that image let's see what we get so here's our image but if you pay close attention the sides of the image are cut off let me show you so here in the project let's take a look I just shared that jpg do you see the sides of this basket is cut off here this is because of the resize mode so to solve this problem to our image and set the resize mode to contain now our image perfectly fits on the screen but we have this white background so we have to change it so let's wrap this inside the view that's going to be our container so view let's import it now we give it a bunch of styles so style equals styles the container now let's define the stance it's a container once again I'm trying to sort these alphabetically this makes it easier to maintain our application also if you see eslint instant automatically does this for you but in this course I'm not using es lane because it keeps complaining and it creates a bad experience for you so I have to manually sort these so this container we're gonna set its background color to black and I also like to set Flex to one to make sure that this view takes the entire screen so here's what we get beautiful now let's add the placeholders for the clothes and delete buttons so back to our container let's add another view give it a style let's say styles that close icon now we define the styles close icon comes before container so let's set its width to 15 the height 15 as well I'm gonna set the background color to FC 5 C 6 5 now if we save the changes our button appears here to solve this problem we're gonna use absolute positioning we want to put this exactly right here so we set position to absolute so now we can position this component relative to its parent which is the container so let's say we want to position this 40 pixels from the top and 30 pixels from the left so it appears here I'm happy with this so let's move on now let's add our second placeholder so I'm gonna select this hold down shift alt and down to duplicate this code now let's rename this to delete icon and then when you find a stylist delete icon now to save time I'm going to copy these fuel styles I know copying code is bad but they're gonna fix this in the future so for now don't worry about it so let's change the background color to 4e CD C for now we want this to be 30 pixels from the right of the screen take a look here's what we get so I'm happy for now as we go through the course we're gonna improve our code we're gonna refactor it we're gonna make it more professional alright one problem I see in our current implementation is the duplication of these color codes we have repeated this in a few places so what we can do now is to extract these color codes put them in a separate file like colors of Jas and with this we have all the colors that our application users in a single place so if tomorrow we decided to rebrand this app and use different colors there is a single file we have to modify so in our project inside the app folder let's add a new folder called config here we add a new file called color CAS now in this file I'm gonna export a default object with these properties we can define our primary color so we're gonna set this to F c5 c6 5 and our secondary color to 4e CD C for now save the changes we go back to our view image screen on the top we import colors from config slash colors and note that I'm separating the import statement from my code from the import statement from our third-party libraries again this is a convention that a lot of people follow to make their code clean and maintainable so we imported colors this is an object that we exported over here ok so we can replace these hard-coded values with colors that primary and colors that's secondary save the changes so take a look we get the same result as before but our application code is more maintainable now we have a single place where we can define our color palette now some people argue that even black or white should not be hard-coded they should be part of the palette so in our color palette we can define a new property black and set it to zero zero zero because tomorrow if we decide to rebrand this app we might use a different dark color rather than pure black so it's a good practice to include it here so save now we can replace this hard-coded value with colors that's black that's good now we have another problem here the duplication of these properties so both our icons these icons over here have the width and height of 50 so you might be wondering if we can define this properties in a single place and reuse them in two places we certainly can but we're gonna get rid of this view in the future we're gonna use a real icon so for now I'm not too worried about this this is just a temporary solution hey guys ma chère so as I told you before this tutorial is the first two hours of my ultimate react native course the complete course is divided into two parts basics and advanced topics but each part being about five to six hours long so the complete course is over ten hours long it includes all the source code rewriting this course every section has a before and after source code so you can easily code along with me plus you will get plenty of exercises and step-by-step solutions and a certificate of completion that you can add to your resume if you're interested I put the link down below I'm offering a discount to the first 100 students so if you're interested enroll now before it's too late thank you and I hope to see you in the course

Channel: Programming with Mosh

Views: 1,539,300

Keywords: react native, react native tutorial, react native app, react native tutorial for beginners, react native crash course, react native project, react native app tutorial, react, javascript, mobile app development, tutorial, react native for beginners, app development, react-native, programming, react native course, code with mosh, programming with mosh, mosh hamedani, learn react native, react native 2020, learn react, reactnative

Id: 0-S5a0eXPoc

Length: 126min 30sec (7590 seconds)

Published: Mon May 11 2020