Build your first app with React Native and Expo

1. About the course: Do you want to learn how to build mobile apps than this react native course By rusty courses. It's being the value packed course will show you how to create APS using React native, which means you ride at once and it'll work on both IOS and Android. We will cover everything you need to know to go from a beginner to being ready to publish your first act to both the APP Store and Google play, including what is react native. Why used the Expo Framework Components state and props in react, creating your first making a real world example up Andi Bonus videos and downloads. After completing this course, you'll be confident to start planning and building your own apse with react, native and exploit. 2. Welcome to the course: Welcome to this course on React native with Expo. I will be your instructor for this course. My name is Russell. I have over 12 years experience in both Web and APP development, and I'm also the founder off a number of online software businesses during this course will cover the basics of react native before moving on to create a simple app using the's basic components. We will then create a weather app using the methods we have learned. This will also use an A P I. I will also ensure this course is kept up to date as possible. But if you have any suggestions for videos to update or any material toe, add, please contact me. The best way is normally Vyron Instagram GM. You can find me on Instagram at Rusty Wicket, so let's get started with this course. Starting with why react Native on Expo is the best way to build APS. This will be followed by the software we need to install to get started 3. Who uses React Native & Why Expo: the first, we're going to take a look at some of the companies that use react native to power their mobile APS. No, I'm sure you'll recognize some of these names. So Facebook actually invented, react and react native on, they obviously use react for both their IOS on android APS. Now, if you want to read more about just how this is used for the Facebook actual app itself, you can view this page here now actually include this slighter as a PdF. So if you look up in the top left hand corner, it should say resources available. So if you just click on that, you should be able to access this this page and click this link, so you should go to find it'll there also. There's Instagram now. Facebook owned Instagram, so obviously they've used this used rag native for Instagram as well. But that shows just how powerful react is because of the different features that Instagram uses. It shows just how flexible react native is again. This is for IOS and Android, and they have more information here about just how react issues for the instagram now also react. Native is used on so many other APS. Now here's just a selection of some off the most popular ones, but you can see here over one of the biggest companies in the world. Tesla, Walmart, Skype, Pinterest. Even so, it's such a powerful and flexible way that could be used for so many different types of maps. So considering this, let's now take a look at Expo particular and see why it's such a great framework to use when working. We've react native. So just in terms of development Expo makes this process so much faster. It's easier to quickly build and test your APS on they take away some of the complexity in terms of configurations has felt, so you can focus on just making your act on the Expo. STK makes it easy to start working with the camera location data in many of the different types of development that sometimes can take a while to set up. So with Expo STK, you can just start to use the camera right away on a lot off. The analytics is built in, so you just have to connect up external provider such as Heap Expo also makes it really easy to work with both IOS and Android. So with just one piece of code, you can release an app using Expo for the Google App store on the iPhone Apple App store as well, so you don't have to have two sets of code now, along with this, you can also use the Expo client to test your app without having Teoh actually install any software you contested both for an iPhone andan android phone as well. Now, this is also the same for when it comes to actually building and publishing your naps. So if you want to get your app onto the Android Google Play store and the Apple Store extra nexus process so much easier. So Expo can handle all of the certificates, or you can do with ease yourself. But they can have all of the certificates on the configuration needed to actually get your APS onto the APP stores. Now, along with this, when you use Expo, they have this special feature that lets you make changes to your actual APS and published them live straight to your actual app without having to go through an extra absolute of you . This is ideal for sort of bug fixes on do why design updates, But it's a really quick way to change your act without having to wait for the APP review. And there's so many other reasons you can use expose well. He's just a few reasons where Expo is so useful when building react nectar that. But again, they have great support for developers on their forums, and they really have a helpful community. This is why Expo is one of the best frameworks for building APS in react native. 4. Software to install: So now we're going to look at the actual software on into in store before we can start with the rest of the course. So to begin with, you need to install node now, everything that we're gonna be working with runs off of note. So if you go to no Js doc, or this will take you to D download page and then just make sure if you're on a Mac you download for Mac and PC from Windows General for Windows and then just followed the installation instructions on it should install within a couple of minutes. So the best thing to do is probably pause this video and it still node and then come back and character of the next thing in between stool after that, if you're on a Mac, you need to install X code windows. Users can only actually work on android builds. But if you're using a Mac, you can create APS for both, uh, IOS Andi Android, without having to go into any different, uh, southwest. So to install X code you convey Aegis Way is to open the Mac App store. Just search for X code, and it will look a little bit like this and you just click Get just here just like any other and it will take a choir. Last download is quite a big download, and it takes a while to install. But once you're set up with that, you'll be ready to go next. You need to install the expo app on your phone. Now, this is on both the android Andi Apple APP stores and it will look like this when you search. This will allow you to actually run, perhaps on your phone. And then the next thing you need is atom or any code of this Really? But for this course, I'm gonna be using active. So if wanna have it easier to follow along with, then it's probably best have the same code editor. So if only use assam, you can find it on atom dot i o. And then, obviously, if you're a Mac, you download here, and then if you're on Windows or other platforms, you can click just down here. So there are a couple of other optional downloads you can make us well, so in the next module, we're going to be using a command line Utility called creates reacts native app and will also be using hyper, so we'll cover how to install those at the time. But if you want to use any extra development tools, you can check out expo dot io four slash tools. Andi the actual official react Native Getting started guide But these aerial optional everything that we've covered so far is what you need to actually start and use this course . 5. Intro to React Native: case. Welcome back. Now, in this module, we're gonna be looking to the basics off reactor natives, the react native. It's a framework that lets you create absolute IOS, and I enjoy it using JavaScript. These are fully native APS, not like, um, the other apps of the frameworks out there that, like part Web elements part this part that is fully native, so red native is made up of these main aspects which are components, states, props and, of course, styling. So first we'll look at components. Now, these come in two ways. You can create your own custom components or download and import of a custom components. Or you can use the built in components things like views, text images, scrolling views, list styles, buttons, everything. Basically. So there's there's lots of different components you can use and Israel built in, um, from reactor could look on the docks, which will look at later on. You can start using components straight away, So along with this, there's the state. Now the state is one of the most important parts off react for both normal react and react natives very similar for if you to react before, so this actually control the data that shown you can interactive components change things that being displayed on the screen, and it's a really powerful way to build your wraps, which also is really good for performance as well. Along with state, there's also props. Now. This is essentially the settings that each component will use, and this can help to tweak a different sort of way to components. Use, for example, a one time for proper could be styling for fun. So the font size, which would using a text component Andi every component would have different props that basically that you customize how a component is used. And then there's styling. So the styling again is done in JavaScript, as everything is in react native which so if you know JavaScript or a sort of an understanding of it, you can use everything straightaway. It's quite similar to CSS, the way this styling is put together, and you can also have almost cascading styles like you wouldn't CSS as well. It's just the the attribute names off. The types of styling is slightly different, but we're looking to all of this, and there's a PDF chicken look at the explains all of this, but styling in reactors really powerful, and they keep it really simple as well. So, again, this is a quick overview of react native on and will now start to look into the components first in more detail. 6. Overview of React Native components: Welcome back. Now in this section, we're going to be taking a closer look at components and how to use components to start to build an interface for your app. Now, as we mentioned earlier in the intro, a component can be a custom component or using any of the bill in components that are already there. So, for example, here we have a really simple app that's actually using too components so that we're using this view component here, which everything needs to be contained. At least one view component. Is there really important toe? Understand? You could use a scroll of you instead of a few component, but we'll get to that later on Now. We're also using a text component here, so it's quite simply, just open and close the brackets here. A news, uh, slash to close it off. Now, Inside, you just actual ad your text, and it's the same here for the view. You open it and close it. This is very if you have used HTML or almost any color language before, you will see how similar this is, so it helps you get to grip to it straight away. This syntax, electrical J s ex if you need to know that. But anyway, that is a component. Now, as we mentioned earlier, it's viral props are other elements you can enter in here. So the most commonly used one, its style and opening up have to curry brackets like this. And then you can just stop. I didn't things such as color, so that would make the text become white. There's other props you can use a swell, but we'll go into those in more detail as we look into each component so you can use another component as well. See that in the button like this. Now you just open it and close it. So it's quite easy to get to grips with but were stopped breaking these elements down in more detail in the next couple of modules. But before the end of this video, I want to tell you about another useful tool called Snack by Expo. Now this likes you use this snippet of code we've just created and run it straight away on your device. If you have expert app, which I'll add a link to below now, one thing I want to point out leading on from that last lesson where we added this button module here. Button component. Sorry is whenever you use any of the inbuilt components, you have to make sure you important first. So, as you see, we've got this little error over here on down here, which you probably would have in your your codes for us. Well, so to change this to pictures, we just add in button up top. And then this would run normally. So to see what this code would look like. We just got here to the top and click run on device. Not so long as you have the expo at installed, you can just open up the IOS camera. If you used on IOS, I just hope right, And that should read the QR code, and then it'll just take a little moments, the load, and then this piece of code will appear on new device. So at this, in a link to hiking usace 7. Find more information on the React Native docs: Now that you have an understanding of what components can be used for, I'm gonna show you how you can find all of the documentation you need to see a list of all the different components that I know in to react native. So, first, if you go to this address up here, this is the react native official documentation site and click on docks up here using to scroll down this left turn side column here, a ticket to components and then all of the's, the different components that you can use. And it will give you an example of what they can be done. So what they could be used for the different props they have associated this component. You can actually use these quick examples here to adjust the CO two and get understanding of how they work right away. And then you can either copy and paste this another bit at the top. But just a component part here into your code so you can start using a straight away. One thing you always need to remember, though, is to make sure you import correct name of the component appear, and then they'll be all the extra information below on how these components could be used. So this is there's a lot of components seeking get started with on Later on in this module will show you life examples off H in each of these components, the main ones you'll be using so you can get to grips of house. Use these straight away. As you can see, there are lots of different components. Some of them, uh, for android items. I'll s what I would suggest is to use ones that don't have a specific operating system so that you can use this code across both devices, having to create a separate piece by 8. Looking at the Expo docs: as this course is not just for react. Native actress for a reactor native APS using Expo You also have access to the components provided by expose. Well, now what you need to do is make sure that you're using the correct version off Expo. Some of the components is slightly different. This is actually the same for react native as well. So just check the version. Using is correct. So then you just scroll down the site similar to react, and you are look for they call it a difference. The sdk ap I reference. But this is the same as the components there. So if you want to use, for example, a image picker, you can click straight into here and I'll give you all the information you need to get started. Use it right away, so it always be a code example. You can see how it's used in here. So, for example, I think he's a button with a nod press event. This wouldn't call this function, which opens the image picker, but again, the Expo docks could be really useful place to check when building your naps 9. What are "props" in React Native?: so to start, if we're gonna add in an image component on ancient my safe, the Coty should notice Still update on the simulator as well. So let's get started. So we're gonna start of an image component, Onda. As you can see, we just at this in by make sure we important component at the top. So we've used in the image components we had an image and that allows us to use it done here. So now we're going to use a product. This will be the source problem on the open up in two objects here. The reason be at this second object is because we're not using a variable. So if you wanted to use a a NA object for your styling, you could import fire a style sheet. But we'll look at that more as we get further into this course. So back to the image component you can see, we have created a source prop. We've created the object they were gonna enter the, uh, drop data into. So for this example, the extra is euro. And now we're just in a tie pin, the address of the image you want to use and it's gonna use a placeholder image. This example. Okay, When using an external image like this, you have to also set the height and whipped off the image. So we'll use a style prop very similar to way above since the whip. So if I just close this up now and save, you can see straight way here is the image that we're Houston. It's just the simple placeholder image for now, the street where you can see how props can be used to actually manipulate the components that we're using. So again, the same example for this text, but issues a style component to change the color. Oh, the text. Now again, as I mentioned before about the styles, we can also use a style sheet. Teoh no have to create thes thesis second object inside the object. Here we can actually choose a style sheet and used the set components. So as long as we have style she imported at the top, we can actually start Teoh right at own starship below and used these elements instead of having to input the styles in line like this. So to get started with, just create a new variable on give it a name of what we used for our style sheets. Let's just call that styles to now. This will be equal to the store. She we imported the top. Then we just call the create function and pass in object. So we're gonna be replacing this line of in line styling up here. So we just call this text style. We just create an object faster in this blues dialing. I haven't also changed the front weight as well. So if we save this, obviously nothing happens just yet. If we change this in line, starting up here to call styles, then test style, we should now save and see that this fun wait has changed in the color has changed. Just using this style she is. This is just a little bit extra. You can see how props can be used with both variables. Andi in line information reviews for this image here. So again, all props or components use props and props for an easy way to start to customize Andi really use components for the needs that you have for each of your naps 10. What is "state" in React Native?: so now revoked two components and we've looked at props. The next, most important part of react native is the state. So the state is what sort of holds everything together. So to look at this for first going to set actual state that we can use in our example up here. So first we go into the main area off screen and we're going to create a constructive function. This also just takes one input, which is props. And now that we created constructors, this will be called as soon as our component or screen is actually loaded up, we're gonna sense a state. Now, for the first time, you load the state that's just sets the initial state that will be loaded to since the things that we can use for the first time we've been rendered function. So, for example, we could set a simple string. So if we call this, let's say hello text and then in here, we could say Ally. Yeah. So you opposite. That's incredibly simple right here. But if we then replace this text here, so we turn us into the curly brackets, then they're gonna call this dot state Doc. Hello, test. If we know, save this, You can see we're using this very bill up here. Now, this might look just like a simple way of one upset of variable to use this sport. Any such things at this pace actually becomes quite powerful for a lot of different ways off rendering items on the screen such as overlays, interaction with buttons and events and all sorts of things that the state is really important. So I show you another example here. So if we open some curly brackets right inside a return function off return from the render function, we can actually check what the state is right now and then return different elements based on this. So if we add a new item toe estate, let's call this one just a number. It's we're gonna set. This has one to begin with. So we're going to say this don't state number equals one. So essentially, if the number is equal to one, we're gonna rent up a different component. Same number is one. And then, if not, sex uses the turn. Ary um especially tannery Centex from Java script. So if it's one, we're gonna do this and it's No, we're just gonna say this again, is it is a simple example. Should we save this? Now we can see that the number is one. If we change this ourselves. Zero we can see this is not one. But what you have to imagine is in app, we can have buttons and different types of interaction that can change the state. This will allow us to actually update the elements that displayed on the screen really quickly and efficiently without having to create different types of interactions. Now this number up here could be something that's updated live from a database. So if you think this is something that's changing behind our back end and it's actually updates now screen straight away. This could be useful from loads of different types of needs for APS, such as like a stock market where you have the prices updating live on the screen lots of different ways. So again, if we change us again, back to one E N. C. This is changing right here. So this gives you a quick overview of what the state can be useful will be going over this stuff quite a lot more for at the course, But this is the States, and now we have seen what the components are used for, what the props within the components used for and how we can use the state to actually change the display on items that were rendering on the screen. 11. Install Hyper for terminal commands: So before we get started and create our first up, we need to download a separate app for interacting with the terminal. So I suggest downloading hyper, which you can get from going to hyper dot i s. This is a free app that will allow us to have a separate terminal window for us to use when we're building an app. So this is quite useful. Eso weaken, always go back to hyper. So as you see here, this is what I used rather than the normal terminal window over here just to keep things separate and also means you can use up and down arrow keys when you're in the actual app itself to see the actual command you've been using most frequently. So to get started, just click on the download link here or if you're using windows, you down, I think will be down here and then just follow the installation Instructions on were built to get started in the next module. Also, you'll find just after this this video WPTF you can access, which will show all of the commands we're gonna be using most frequently on what they're actually going to be used for. So again download hyper and see in the next video 12. Create app in React Native using the command line in Hyper: back this new module. So in this module, we're going to be creating our first actual app in react, which we're gonna use to showcase a number off the most common components so we can get used to using these different components in the ways that number beauty does this include things like navigation lists, images, texts and views. So after this module, you'll really have a strong understanding of how you can create an app and put different modules different components together. So the first we wanted look at is this getting started guide on the official react dunks. Now, the main thing is, we look for here it is this on this now, oft, uh, as long as you followed the step in the last module to instill hyper, you can keep all your terminal commands that you need separate from your normal terminal in case you sat from things. So if we look down here, I've got hyper open at the head. So all you need to do is just copy this command here. This will make sure you have the create react native command line utility installed so you can run the rest of the command state. So if we don't run this and just run three and pray everything now, you might get era. Now, that would just mean that you don't have the correct commissions. So you can fix this. I thought ensued. I in front of it. They run again. It will ask you for your part. So this is the past word that you used to log in to your user. So I just went in there a TV guy. So it's just been still to create great reactivated up so is ready to use. And if you look back over here, we've been at this command for about the name of that project. So if we just copy this here back, we're gonna call this just example Basic, uh, stick that way. So example, basic cap. This is the one we're gonna be using throughout the rest off this module. So it would just go together pulling along the scripture we need shouldn't take too long all the dependencies that we need, and it will automatically link up with experts. Well, so the later parts of this module running much faster. Okay, So that is that installed, As you can see, it's told us where APP is located. So for me that's in my documents courses, the Expo Course and in the example, basic app. This is what we're gonna open in a career officer next. And a number of commands that we can use this wells we've got young. Or it might say, NPM he had depending on the type of package ease and said It's probably with fate will say MP empty and so that the MPM start This will start the development server enable us to text this hat and run it. You can have the option to run it on IOS simulator. Well, the Android simulator. You also have the test so you can if you I want to create tests elements for your app. You can run them separately here. So for now, all we need to do is move into our product directory, which, if you haven't news terminal before, this might look a little bit intimidating. But it's really not too complicated. There'll be a pdf you can download a swell that would go through all of the main commands we're gonna be using, which is mainly switching between directories and running commands. So most of the things you'll find that is gonna be repeating itself, so you'll get used to them pretty quickly. So for now, let's just move into this folder. So it's example basic app, and then we want to stop. So you run again. What's happened there? I didn't put pseudo in front of it. I see. Okay. And this will just take a little while the first time he's got us everything up. Make sure every well, the dependencies were installed, so it might take a couple of minutes still ago. It's already now. So from here, you could straight away pick up your phone, open expo app, and you should see this or if you don't see, you can just scan the QR code. So if you're on Android, you just scan the QR code directly from the expo up. And if you're on iPhone, you can go into the default um IOS camera up. And so long as you hover over the QR code, don't have it to Christ. That little Bannon will appear saying open this an expo songs. You have the expo app installed, or you can run it on your computer. So as we mentioned We gonna be using IOS simulated most of this. So we need to press. Is I? So once you tap that key, it would start to open up the estimator again. This will take a little while the first time you're then see the simulator appear on the right side of the screen or possibly the center of the screen, and it would just load up and then what you'll notice is the phone will appear on. If you move toothy, swipe to the right. You'll see the Expo app should appear just here. If it doesn't, there's a number of reasons this could be, But the easiest way to then get the extra up to appear is to open the Expo X d E and try and run the simulator from there. But for now, we're open expert at which it should do work for you think we're going to the Project tab and then what we want to do is click on APP just here. Now, if this doesn't chauth e, you can open it from your clipboard, or you can click the plus icon up in the corner here and paste in the Ural off your project now to find the u R l What you want to do is look at the terminal before you press I there will be a QR code that shone on the euro is just underneath there. But for us, this is fine. We just click here and then with the apple load up on witnesses loaded, we can get ready and start the next step. So now the APP is created. We need to open it in a code editor. Now you can use any editor you like that I would recommend atom just because it's quite light way and it's easy to use with your whole directory. So you just want to open the folder that we just created. So we go open, they were navigate your directory. So here's the example Basic app on just click open. So what we want to look for first is this marvelous equaled app Js. So if you successfully got your simulators who appear over here, we'll see the simulator. So any changes we make here will actually run an update straight away into the simulator. So if we just take away one of these lines like this, then save it we can see the simulator is updating and changing low life as we make changes , which is really useful for us now, just to quickly run through the code that we get given to start with. What you can see here that were important react from react. This is what you'll see in every single screen that you use, and then you want to import the actual components that you're using for this particular screen, and then we just exporting out up here. This is a lot of dates that we're using now. This is a really, really simple example, but I would recommend that you always try and keep its simplest possible so you can follow the roots even when we get into navigation and having separate files for separate screens later on, You want to try and keep the flow of each individual page nice and structured like this. So, again, any changes you make, even changing the background color updates life. So in the next steps, we're gonna be going over some of the most common components that will be using. So we'll start with looking at Platt lists, which is basically a scalable list of data that you could control from an array that could be takes its podium from external server or just from a local file, or even just a list that you've created already Andi images. And then we'll look more detail into lists again to see how you comport to refresh. And there would take a close look at navigation so you can have different types of navigations such as a tab are we have these icons on the bottom, which was seeing a lot of APS in other ways you can move between screens. 13. Using the FlatList component: and this module, we're going to be using our first component. So for this first example is gonna be a flat list. So we're gonna be creating a list of names over. You can have an array of names here, and they'll be shown in a list like this. So this one just be used in the view component will be actually isn't a flat list which will show in more detail next. So, to begin with, we want to set this array. So to give you an idea of just how this is done, we use a constructor. This is one of Britain earlier. So if we just copy this here, I'll explain which of these lines of code are responsible for. So as you can see, we opened up this constructor and make sure we passed through props which we spoke about before. But we're going to send in more detail nature on. So we initialize props here, and then we set the state for this screen. So we create the data variable, and then we just entrant Honore just to now, in order to make haste appear, we want to remove all of this code from here So just to show you what we're working on well , I think just a example lined here and save this update over here. So here we can see what we have right now. She just has changed this back. The white disliking have a clearer view of what we're working on. So we're going to change this into are flat list now for this type of component, we don't need to close it off. So we just had this as we're gonna be entering a number of props directly into this. And of course, we also need to import this component. So again, that's flat list. So if we saved this now, you see, we have a blank screen, so we'll start first by entering the data for this component. So you always put data or the name of the prop equals and anyone I print curly brackets. What kind of braces jumped me much called it. They want to put this the state data now just to run through this. So this will allow us to access variables inside a screen. And we have states which is accessing the states and then data this variable just here so you'll quickly get used to how these are put together. So if we say this now, you're noticed that nothing actually appears yet and we have an error. This is because we haven't told the flat list how to display this data, that we're providing it. So if we scroll down here, you can against see this example of created earlier. So it's we're looking for the render item. So all of this information you can find for a number of different components on react native docks always recommend looking through this because it's impossible to remember everything. But if you have a strong understanding of the core components, you can always think cross reference the docks whenever you come up against something that you might have used before. Boots. One double check. This can save a lot of time for silly little niggly errors. You won't be wasting time checking things that you already know or could be a small line like done here we have thes could be difficult to remember, so it's always best to cross reference the docks. So if we head back to our editor, if we just copy this for now, I'll run through each of these elements, he useful So here, as as we just saw the opening three rockets here, they're closing these two here, and this one is just to define the data that we want to use. So this item will be used when we iterated its array. So any data that we sent through from here, So in this example, this is the data. It's gonna be this. It's obviously you can be sending in an array inside this array. So say you wanted to have each of these names have an image with the MUS. Well, we'll show you how to do this later on, but for now, we're just gonna cool this item now. This means when we call the item here, this would just be this text element. Obviously, if this was an array or an object as well, we could access these further parameters like this. So this would be each element just here. Now, this is just a text, a text variable strength. So we're just gonna access it like that, stepping up the simulator again. So if we run this now, we should actually see the text displayed. Now there may be an error because we need toe given Index to each of these lines. But for now, let's just save this and okay, so here we have the list a little bit similar to what we had before, but we want to make a few changes. We also want to get rid of this error. So as you can see, this error here is just missing a key. Now it's important to have a key. This can improve performance and also allow us Teoh, add more custom styling if you wanted Teoh use even or odd numbering and ah, whole host of different things. But for now, we just want removed the era. This is a good habit to get into. So again it's called key extractor. I've copied it from what, my friend audio. So just to run through this So we have key extracted here, and if we look in the docks again and such que extract, we can see where it's mentioned. So if we go to the drops, here we go. So if you scroll down to the props and if you're looking for a particular element and then you just click and I'll explain what it's useful. But this is important for again cashing on general performance. So I normally if you have a key in your data, So if he said an array that has a number of objects inside that array, if you have a key, this will be used for the index. But you can also define a key as well. So for this example, Justin abusing an index off the array. So this will be 01234 and so on. And you also want to convert this to a string, so we just convert this number into a string. So if this sounds confusing, don't worry. It just takes a little while to get used to. So if we save this now, this era has disappeared. Now what you might notice is foes that the top part of this list has been cut away. So to give you a quick example in styling, you can use both in line and customs dialing. So as we already customs sorry style sheet, which is very, very similar to CSS. So and as we are already using a style sheet for this component, will just add into here a margin top off around. Let's say 50 and then save. Then they should update. Here we go. So this is a very rough example, but it shows you how quickly you can start to display data on the screen. 14. Using the image component: Welcome back in this video, we're going to be taking a look at the image component and how this could be used. Teoh display images across your app. Nice is one of the most important components on its also want the most simple components. So this we'll give you an overview on how this works. So in this module, we're going to be adjusting what we've made so far and turning our flat list into something like this. So the first step is to convert a data array over here so that each of these elements of theory A is now an object that will contain the name on the source of the image. So again, I've made an example already. So if we look down here, we can see how this is gonna look. So I'll write out the 1st 1 and then copy and paste this to speed it along. So instead of having just this text ring, they're gonna open up these curly brackets and create name and image on image. And in here we'll enter the source off the image. So for this one, is this so we're now go through and do exactly the same thing for the rest of these elements. The case. Now that you have this, we have the array and then each element in the array is now an object with a name and an image. And as you can see, it's row. Each of these images are different. Okay, so now we need to move on to actually display this data. So what we want to do first is import the image component. See when I image up to the top, and then we're gonna add image before the text. So that will be image like this and its source. And then we went open to curly brackets on each site. That's really important. And then it's just a simplest cooling item image and the most we need to make sure we update this to be the name. Now, if we save this, we'll update the app on what you'll notice. Is that because is is this is an external image will need to define the height and whip. So if we say this at the moment when it does, we get an error. But that is just because we have missed off you. Are I? This just tells the component. This is an external image. It's not something that we have in our assets folder, which again will explain a little more about that later in the course. So if we say this now and reload, we have this empty list. So now we just have to define Ah, high and a width to these images. So let's add some in line styling again. You open two brackets here, the difference between in line and juiciness dull. She, as you can see, is that this just opens one and then cause this variable and end the style done here. But for us, we want to do this in lines at a wit. Oh, let's say 30 Onda Heights off 30 again. And this is you just come a separate the different values along. So let's save this. And there you can see we have a list with an image on the name. Now, this looks a little bit strange having this right in the centres. Let's just make sure this Blatt list has taken up the entire screens less at a width for now off 100% and say this again. So actually could say this is now taken up the entire screen. So if we wanted to look a little bit more into the styling because this actually looks a little bit condensed, let's add some styles to each of these elements in our list. So this is where we inside the render item. We can control what's going to be displayed. So if we go into this view and add some styling, what do you think would look good here? Exerts first, add some padding above and below each of the elements. So for that we can say padding vertical. Let's just at 15 and see how that looks. It's that's a little bit better and then we just add a border to the bottom. So you want to set border bottom width off one and there we have it. This isn't the nicest app to look at in the world, but we can start to see this coming together. So first, let's just add a little bit more spacing. Just we can see how this would scrolled along that screen. So if we change this number here Teoh 45 that should be enough. Here we go. Site Now we scrolled. We can see this is updating. So in the next step, we're gonna look at how we can change the data that shone by adding a pool to refresh responder to this flat n'est. 15. Using pull to refresh with a flatlist: welcome back. So as we just mentioned in this next step, we're going to be adding a porter refresh responder into a code. So to start with, let's right the function that we're gonna be calling when this is this action is made. So to start with, let's go into this space just here and we'll call it for fresh data equals a function time TV Guys, this is how you create your functions. And if you wanna send any parameters in, we'll do that just here. So to start with, we just want Teoh change this this data So what we're gonna do again? It's called this dot set state That should be a capital letter. So in here, what this will actually do is any time this set state function is called, it will update the elements off the state that we're going to change. So for us, we want to change data, and what we're gonna actually do for now is copy this and we're gonna make some changes so that we can easily see if this has been changed. So what we'll do first is removed a number of these and change it just to update it Data. I'm make at so different numbers here. So 10. 20. So it should be really obvious that this has been changed. So again, it's political When we pulled to refresh is gonna cool this refresh data function, which in turn or instantly change the states. So we now need to add this cool back. So the win that we pull this list is gonna update. So first, let's go back to the docks. So there are two elements we need to add on refresh and refreshing. So if we just check here, this is the function on refreshing is a true or false variable that will tell the flat list have to show a loading indicator or not at the top. So let's had both of these into here so refreshing, its first at this dot state fresh and then on refresh. They're going to cold this function appear that we've just made that be this because it's still within this screen. We can still access this to be this stop fresh data. So one last thing before we save this and see if it works is to just add this variable here . So we're gonna add it into the states. I'm gonna call it those because to begin with, it's not loading. Then we want to do is before we really update it. Just so where former good habits we want. Teoh, add refresh in here. Set that to true on down here after you updated state as it's done me no longer loading well said it to folks. So we're just quickly run through this all before we save this and see what happens. So we've added refreshing on on refresh. We've made a new function appear that we're gonna cool when they're fresh. Action is made and we've added this new variable to the state which is currently set to close So we save this now we have an era Oh, I've missed felt this so set state Mr T Side heavy guy. So for change this Okay, so here we go. So you just need to have moved those brackets just there. So now if we go to pull and a fresh this we see this is updated night into this a number of times so only happens the first time. So if we just change this change a line on refresher. So you can see now we'll pull down, and this loading indicate would appear we let go and it has been updated, and the next module will start to look at navigation and the various different types of navigation you can use with react. 16. How to use React Native Navigation: welcome back. So in this next module, we're going to be looking into navigation and how we can create multiple screens for up. So the first meeting to do is open up your browser and go to react. Navigation dog. So when he first cant there, you should see this Read guides button. If you scroll down, we get to the installation instructions, so depends on if you use in yon or MPM, you want to copy this line. So for my example, I'm using John. So they want to go to our terminal and make sure you navigate to the directory that has your project. So I just check if I'm in the right place, so for me, I'm in the right shoulder. So then you just paste in this command and all in stool rat navigation. Okay, so this do this, uh, has now been installed, so you can now use rack navigation inside. So in this next step, we're going to be importing the components we need and started to build out the new screens with the pages were going to be added now that we have the react navigation installed, Andi added to our project, we can start to use this so desired outcome in this module is to create something the looks like this. So we'll have a tab, are along the bottom and will be able to switch between two screens. So as you can see, this text is changing as we move between the screen. So right now we have a flat less code that we've been working on. So what I'd recommend is just to copy all of this hands, make a new a new file just paste into their for now just so you don't lose any of this and then moved back into your app Js So what we're going to start to Dio is create these screens, the screen one and screen too. So they're really simple. They just have this line of text and we're gonna also at the navigation bar. So the first thing we need to do is import the navigation component from react navigation. So to do this, we're just imports creates bottoms, have navigator. It's suggesting it. Hear me. It may be that for you. You seem to make sure that you're using curly brackets there like this from react navigation. Okay, so that will allow us to use this navigation done here. So the next part we want to do is create the screens for each off a tab are icon. So we click on one. We want to see the screen for one when we click on to you want to see the screen for two. So he's gonna be really, really simple. So if you just follow me with this, you big toe create these as well. So we start way in class and we wanted just call each one on to and this would extend react component when we open up a screen. Here's this is gonna be everything for this green be defined within these T brackets. So everyone to add a constructor just so that we can access any props on and also be able to access the navigation from within this screen. Okay, so that's the first step. And then we want to just return actual. The things must display for this screen. So that would be the render function, which is what you call whenever you want to display Isom in your screen. Then return like this. Then in here we can have you. I'm just at some text. Now, One thing I want to mention Harris well, is that normally you would have each of these screens inside their own file. As this can help Teoh restructure your project, which will do towards the end of this, these modules that you never listen to kiss on one screen on one file, just toe make easier to show you what we work on my own. So the next you want to do is copy this class we just made and paste it and then just change this to in this city. This is this would just allow us tohave a simple screen like we have here the screen one on screen too. So the next thing we need to do is actually create on tap Navigator. So to do this, we're going to create a stack. So we're gonna call this Let's just call it Main Stack. But now and this is equal to again. This may also complete for you and create bottom tab Navigator. So if we enter that, open up our brackets, then open up curly brackets and then within here we can enter all of the tabs we want tohave available for this navigation. So we want one when we entered the screen, which is looking for the class. So this is one and then to and then as before screen gems, green is too. Okay, so this is a navigator defines. We can add a number of options as well. This would less set the Icahn shown on what we want to show text on here. A swell. So you can have a whole host of different options that come with the bottom Tabin applicator, which you can find in the docks which will look at ah, in a separate video. But for now, we just want to render out this screen. So to do this, we instead of having this here where we're entering this, we're now going to just Brenda And we were time main stack, then close ill. So just stop this from being seen. That's I. So this is all that file has now, this is just the old code. In fact, I think we did save this somewhere else, so you can actually do that. So if we go through this will now. So first we import the create bottom top navigator from react navigation. We have defined screens for screen one on screen, too. We've created Stack tap Navigator, main stack, and then we're rendering this main stack just here. We also need to close this off. Make sure you always open the have the same number of opens as you do closing brackets. So if we save this now on defy change this back. Just say this old file. Okay? So if we just saved this and reload what we have, what you should see now is we have our screens with one and two. At the moment, the text is wrapping the corner here, which isn't exactly what we want. So let's just update these with some really simple styling. Who's in line styling for this? So we're just at the flecks of one on a line items center and justify content center. Copy this for the second screen as well. So if we save this now, here we go. So we have screen one that looks like this and screen to that Looks like this. This is very similar to the example we were looking at before, and this shows how simply is actually to create thes tab navigators. So if we copied this line here. We had to and changes to three. And we did exactly the same thing here. Let's make this a little bit differently. Side of background color. So we now have three taps down here, one to at three. And that has now obviously had this green styling in the background. So in the next module, we will start to look more closely at this flex styling I've just used here on start to change some of these very roar looking pages we've made to make them look a bit nicer. 17. Styling options in react native: In this next video, we're looking to combine the tabs we've made in the last lesson on the flat list. We've made in the lesson before that to create something that will look like this. So as we can see in screen one, we have a flat list which is no being styled to look a little bit nicer. Proceed. This is still a rough example. This will show us how you can use em in line styling. Andi objects inside a style sheet to create different designs and make you up look nice. So first, let's go back to the does the code we had in the last lesson. So this will now update the simulator. So here we go. This is what we are currently working with. So the first step we need to do his updates screen one to use a flat list. So to do this, we just can copy across the code if you still have it or rewrite it so this will be start with setting the state. So as we have before, we had fresh as false. Make sure that's not a string needed to be a pulled a Google, and it's at the data as an array with all of your objects are just copy them have from somewhere else a guy copy, um, and paste. And then we need have refresh data function. So again, that equals function, and then we wanna paste it. I think I still have that here. A swell? Yep. Just to save some time. We've already written this. So no point in writing it again. I'm going to do this. Just help stuffy in the indentations, Uh, together. So in this next step, we actually need Teoh style this page a little more than we had before. So what we're going to do is at a padding talk water just so that we're not gonna be interfering with this top bar up here. Obviously, the iPhone X that we used in this simulator yours may be different. Has a user's most based on the top. So 40 picks will should be okay. And that is ah, good enough number for android devices as well. So can we have a text and then we're gonna add in a flat list. So to make things easier for you here, we'll copy and paste again. We have before that we're gonna make a number off changes. Where was this guy? Okay, so here is the code that we had before. So if we paste that in now, we need to make a number of changes here. Teoh defying the styling that we need and and get at desired results the first. If we save what we have now, you can see that Ah, flat list is very basic. This the images and the text are are vertically aligned underneath one another. The spacing, ysl wrong, the the elements that pushed right up against the side of the screen here. So we want to improve all of this. So to begin with, let's jump in Andi, start making it so that the image and the text displays alongside each other. So this is a relatively easy change to make. So in this view element here, we want to add a little bit of styling. So the first we're gonna do is called flexed direction, which will let us decide over the elements should be vertical or horizontal. So to do this, we want to switch this to row. The other option is column. So if we save that now should notice that they're displayed alongside each other. We also I want to move this image slightly inside a bit because works we don't want to be pushed right up against the side. So as you can see here, we have padding vertical. So we also want to add padding horizontal just so that it's even on either side. It's on the left and on the right of this road. So we're gonna add padding horizontal off 15 just to. So if we saved that again now we could see this is already starting to look a lot better than what we had before. So again, where we have the border bottom with, we want to change this. So have a specified color for this border. So in here, we're just gonna add lights gray so you can use a hex color. I missed other cover that you can also use hex colors in here, but this should be a nice enough color for what we want to use here. So this is already starting to look a lot better. But we want to do is space out the image from the text. So if we look at these, you can probably guessed that the thing we want to change is this image styling. So we'll jump into this image on at a border radius. Now this. We need to be the same as to make it work. To make this around image, we need to make sure that this is exactly half off the whip on the height so you can actually user some directly into this styling so you can put 30 divided by two. And we saved that. You're noticed that this is now grounded. So again, this looks a lot nicer. One thing that probably would help Paris world there is to make the image a little bit bigger. So if we change the height and the width up to 50 and make sure you update the border radius that you notice, it's it's updated and it's kept that same. So you know, shape to the image. So let's now has some styling to the text now so you can see for these elements were using in line styling on next. Will you some object star machines styling as well. So first, let's add a margin left to the text off around the state 25 and we want to add a line height so that our text is centered. We've been this element I can spell that's line height, and we want to use 50 is That's the height of the image. So as you can see, this part here is putting. This is padding that we set before, so we want the actual text to be, ah, line height within here. So if we save this now shows you start to look a lot better. See at this is a lot nicer than what we had before. But let's try a few more types of stylings less at a quantity, weights the boat and safe again. You can see that's directly applied to this text, and then that's color the text. But I would just use a named color blue and say that's quite a strong color, though. Select issues. Yup, a city. It's just dumping that down a little bit. It's their 0.75 So if you have a pay city, one is Feli displayed. Zero would mean you can't see anything. Then somewhere in between is a nice level of transparency. So if we look now, we can see this. This looks OK, it's not perfect, but it's it's a lot better than it was before. So what we should probably change, perhaps, is this padding. But this this this vertical padding, which is a bit too much at the moment. So let's move this down to 6 25 So it's the same as the putting on each side. So here we go. If that looks a lot better. So one thing we could do next actually is find a way to tell between the odds and even elements in this flat list. So you can do this by changing this. Render right and function. Let's change this to Index. So this will now give us the index number off each of the elements in our flat list. So the 1st 1 would be 0 10 1234 cents, and so on site. If we had a piece of code in here that can tell the difference between even and odd, number will be able to change the styling based on that. So let's just jump straight into it. So it first you want to you adjust the style so that we don't gonna use an array. So this means we can set a a number of different styles into the same elements, so that might sound a bit complicated. But it's not celestial streets. It's so first, let's take this styling we currently have here and set this as an object. So if we make sure where underneath this glass here, we're going to create a style sheet. So 1st 1 a constant styles, and this is equal to stall. She talk, create they want to open nor brackets curly brackets. And then in here we can start to define our style objects. So for this 1st 1 we're gonna call it road style. We were just paste in what we have here. It's probably good practice, though. Just toe space. This our little bit so you can quickly see them to scrolled old way across. Then you can add other styling in easily enough by just putting a comma entering in the name of the style cyclist. Less to say, item odd. Open up the curly brackets again. The easiest way would be to probably see this is with the background color slits at a simple enough color just here We've already closed toe and then another comma, even wrong color again. And then this is make this phone whites. So if we save this, nothing will happen just yet. In fact, would get an error because we haven't fix this up here. So first, let's set styling We had before into Harris that bay styles. Doctor, what do you call it? Very style. We can remove this from here. One thing I don't know. If you noticed. We need to make sure we close off this curly bracket as well. So then, just like any other array, if you add a comma, you can then add more. But what we want to do first is find out if this item we're rendering here isn't even or an odd number. So that's where we use this index. So we'll start would take the index and we'll check to see if this is even or what? So what we're using here is what's known as a turn every operator. So it's basically an it function, but we're using it in one line. So after this question mark, if this is true, we will say styles dot item. It's an odd and then set the false element of this array. You just type in here and then set your other parameter staying close that with with a commerce what? We don't have to have this unless you wanna add more elements below. So take that waiting out. So if we save this now, we should have a different background color for each of these elements, depending on if the index is even or odd sums. I got these the right way around. So that's saved this and see what we've got. First we have an era of That's just because I felt style, not styles. So if we save this now, every guy whites, then slightly grey, white and then slightly great although it down. So if we change these color, see if we made this color be like a bright blue well, just the same as that text kind of that doesn't really help. Say what's right that we have it. That's for a even number zero and to full six. Then it goes on. So this is a quick introduction toe how you can use styling in a number of different ways. So this is how we created natural style objects and then here were using in line styling. So if we wanted to, it could take this styling away and actually move this out so that this would mean we actually used these styles in these other, um, for screens as well, because we've kept this outside off the screen. As you can see, it's not inside here. That's very important to note that you keep the styles of way for Mitchell to screens. He could actually save thesis up pithy style sheets into a separate file all together and then import them as we do up here. I think it import your style sheet separately and use it across the whole number of different screens. Let's not jump into that right now, so to continue this example. So we wanted to have this image styling that say, image that will open this up pace to end off extra brackets there, make sure you Atacama of waste average think, caused sister the break. So we've got a different styling in here and then would go up Teoh the style Over here. Ankle styles, docks image. Now, as you notice, this is slightly different because we're not using an array, just adding one style to this element if we saved this now, then again, styles not style. They have image is still round from this and we could still again make these smaller from here. Save it. You can see this. This change is effected so again for that would have to change this slightly to keep that text centered. 18. Using Flex Box: Okay, welcome back. So now we're going to take a look at some live examples to get my dear a better idea of healthful X box actually works. So to begin with, I've put together a really basic example of thes three view components within this parent view component. So what we have here is this Red view Green, blue, green view and blue view. So we have the red one, the green one on the blue one. So at the moment, you can see their position from left to right. As we're using the flex direction, option off road and the justify content option is set to space between on line items, its center. So if we change this from Row two column and save it, you can see that now. This one started hit him. But they're now positioned from talk. It's a bottom. So if we then start to change these items around so instead of space between if we choose this as center, you can see her positioned without any spacing in between in the center, by horizontally and vertically, we could change this to flex starts Flex and Andi. Then we have space between space around on space evenly. Now, this obviously doesn't show much at the moment. But you can see how this can be used to create a really powerful interfaces just from these three styling options. So if we change this back to Monroe again, you keep this option in. You can see how this spacing is even between these And if we don't go to space between again, you see how this has changed. We can also set this to deflect starts. Is this some prissy precious them to the top flex end? Eso is It's a really powerful way, but it's also incredibly simple, so I would recommend you. You take this code here, I'll provide a link to this coach in the in the notes, and so you can actually start to play around with. This is that's one of the best ways to actually start to really understand how to put together some interfaces 19. Building a weather app - creating the app from the command line: welcome back to this new section. So in this module, we're going to be going through all the steps to create our own real life up like this example you can see here. So this is called City Weber. So just to run through what this actually will do, we will have a array off cities, approximately 20 to 30 cities. And then when the APP loads, it will select seven random on, then fetch the live temperature off that city on display it in this flat list, we will also look into adding these styling here. The font color will change based on the actual temperature of the city. I will have a different emoji based on the actual weather conditions in each location. So what, You're notices? If you click on one of these cities, we will see a little a lot box here giving us the humidity on the weather conditions. Now all of this information will be provided firing a p I. So we'll also run through registering with a free service that will provide us with this a p I with the responses from this AP, I so we'll run through those next. But this is Thea poor going to be making So the process off this section will take us through creating this new app in the command line with implying out the basics of what this APS actually going to do, how we're going to structure this. Then we're gonna set up our data sources through this, a p I that we mentioned. And then we'll start to make first functions that will get this data and display it. And then we'll check the console log to make sure we've got the correct data that we need with and start to create the actual flat list that you can see here and put the data within and will Then look, Teoh improved the actual look of the at work on some or you I styling Andi also add in the ability to actually refresh the city. So if you look, if I pull this down, the cities will update and he conceived a new data and this is all fetched live. So when I mention the console, look there, you can see this is the actual console we're using here in hyper so you can see this data has been looked. So we can actually check what we're working with. So again, if I go back to the simulator, this is what we'll be working with. And then towards the end, we will. Look, Teoh improves the look of this even further, such as thes alert boxes don't look too appealing, so we'll find a way to actually make these fit fit the the styling that we're looking for here. So again, this this section will take us through more advanced on a more practical ways of using react native with expo. Okay, so the first step off creating this app will be to actually creates the the folder and the actual files we're going to start with for this. So, as with the last example exited the start of the previous section we need to typing, create react, native, uh, and then we're going to call this city weather, so that should run. You may need to add sued I but let's just run this for now. So creating up, that's all the necessary dependencies on files that we need. So just wait a moment for this. This may look slightly differently for you if you're not using young as this also works with NPM, but there basically the same. Okay, so there is first files created again. This may look slightly differently for you. It might not say young here it produce a NPM, but he can also use yon again. They're very, very similar. It's just Yang just works slightly faster I find on my on my machine. So the next we want to do is move into this directory. So you do that by tapping in C d and then the name of that up, which is City Weber. And then what we're gonna do next is load up. This that this new app to see that it's were working correctly in the simulator. So to do this, you type in MPM start or for May that be yon stopped. So then load up the act. Actually, you need to put Sudi pseudo Yeah, stop and then just york your password fuel user the past that you log into your computer with so that within load up on start the gap. Now I This is the first time you have loaded this app. It may take a few moments to actually get this started, So if it seems like It's taking a particularly long time to load. Don't worry. It's just the first time it will be like this so they can see it was pretty quick for me. There seem one type in. I have you in the the ex code Iowa simulator. No, My example here already had a simulator running, so I just need Teoh shake this Go to exploit home. This is not gonna You're gonna restart this this device missing greater. Sometimes you'll find when using expo, that the simulator can be a little bit temperamental. Especially when you're switching between different APS. Now, this isn't a problem to begin with. If you're working on a number of APS at the same time, which you know is a normal thing, he may come into some issues like that, but normally, if you just restart it, Andi reopened Expo. It should, uh, have the correct app for you. So if you just go back to your projects tab, you may need to copy and paste the euro that you get from expert when it first starts before you type in. I, um but let's just drone load this up and see what we get this should be the new app we've just made. Yes, it's it's building the bundles. This is for the brand new app, not the one I made before. So let's just see if this is all working correctly. Another way you can check this. A swell is by using the Expo app on your your own phone. So so long as you're connected to the same WiFi as the server bundle that's creating your your app. You can use this on your phone as well. Just like Expo on the simulator, which I find to be slightly easier to use because you can actually interact with the app as you would normally rather than having to use use the mouse. But again, it's not a massive, massive difference. But sometimes the phone the hat of phone is easier to use than this indicator case. This is this is all loaded up now. So what we're gonna be working on next is just looking through the overall plan on flow of what we're looking for from this app, and then we'll start to actually register with the weather AP. I was going to be using and actually build in this house 20. Planning the flow of the app & adding folders: So for this app that we're going to be creating, this is the overall flow we're going to be looking to create. So first of all, obviously, the APP will load up on. Then we will want to pick seven cities at random from a pre defined array off cities from those seven cities. We want to then fetch the live data, the wet weather data for each of the city's fire and a P I. We will then begin to actually display this data before we actually render it will take the temperatures that are provided for each city and check which range there in. So this will be, um, for example, in Celsius, say, from zero or minus 2 10 degrees would be a certain color. The safer cold temperatures, then from anything from 10 to 20 degrees, would be another range. We call this off medium temperatures and then obviously would have warmer temperatures, which would then be displayed in another color. This just helps to break down the temperatures with a color, so users can easily look at the at and get a feel for the temperatures without having to really think too much or too old. We then want to create a function that will allow us to display the temperatures of different cities. So for us, this will be adding a poor to refresh, uh, function to a flat list. So this will then create a cool to update this data which, as you can see, starts this whole process again. So we pick seven new cities at random, fetch the data, render it check the temperatures and so on. So this is the overall flow for our app. Service is really, really, really simple, but it's important to actually start to plan any app you're creating, it could be as complicated or not necessarily complicated, but as detailed as you want. But it's very important. They've got something to go back on and just check. Okay, What happens next wave? Where is this function in relation to everything else that I need to create and so on. So for this app, this is all we need because it is quite simple. We don't have to worry about multiple screens or different, um, types of data we need to pull in. But yet this is what we need for now. So what we need to do is actually open co editor and start to create a set of folders for each off, uh, screens we're gonna be creating now. Obviously, we only have one screen, but we need to start making the right habits. So if we jump into our code editor, let me just move this away. So we're going to create a script, a new window for this Memphis from the sides. We're gonna open up at New City Weber. So here is A or B files that are created force when we used to create rag native up in the command line. So what we need to do is create a new folder called at and then inside here, we want Teoh create a folder, obviously four screens. So this check that's in there and we want another folder for our components is this will be any custom components we want to create on and a number folder for assets. Now, this could be for funds, images and any sort attacks we need to pull in. So this is what we need for now and then next we want to actually creates home screen as well. So we just open up a new file on my way to school. This I'm screen dot Js This will help us to actually separate out data North Sea in our previous module. We only use this app dot Js So a single a single screen. So in the next video, we're going to be starting to actually create the app on starting with registering with the weather a p i and where they'd start to use this new home screen Onda up Js 21. Register with weather API: now his day p I were going to be using. So if you just navigate to open weather map door or ford slash AP, I you then want to sign up and create an account. This will then let you, uh, get an A P I key. This is what we're gonna be using to interact with this a p I. So once you register, you should get an email with all of the we've actually with a link to start using the A P I . So sign up which email address, choose the free option of the A P I and then wait for your confirmation email. So once you have your confirmation email, you can then come back to the the FBI docks on what will be looking for is an example, a p I cool. So we want Teoh. Make sure that we're using metric, uh, temperatures for this but this app. So if he keeps going down, you should see the options, all of the different options. So if we actually just type in metric, you can see here is it will be looking for So not this one. Here we go. So if you see here. This is an example off the temperatures for London in metric. So if we actually click on this, it would give us an example of the the actual feedback we're going to get. So this is all in Jason, if you fuse Jason before this, Uh oh, be easy to understand, but we want to just break this down. So let's open this in. Jason. Viewer, this is a really useful site for looking at Jason objects. So first we can see the data that's repeat responded with here. So we have this main object of the temperature is what We're gonna be working temperature here. Then we have coordinates of the city, which we won't be using. This it's a wether object is where we can get our main description or Maine string of what the actual weather conditions are. Since it's missed, obviously the other types could be clear snow, thunderstorm and so on. We're also gonna be used in this humidity percentage here on the rest of this we probably won't need. Maybe the name will for use the name as well. So this is just, ah, a good way of breaking down the date that we're gonna be using. So again, what you want to do is register with this A p. I wait for the confirmation email you gets Andi, look at the link, and that should open up a link very, very similar to this because it's just a example. So you want to make sure that you get an email and take a close look at your app? I d string off the example. Link your given in your confirmation email. So once you have that ready, you ready to move on to the next video? 22. Install dependencies and begin to create home screen: Okay, so now we're navigating back into this folder in the hyper terminal window. So what we need to do before we start actually, building our app is to install react navigation. So we saw in the last section how we used the reactor navigation component to have a number of screens. So we're also gonna be using that in this project as well. So to begin with, let's install this so fear you're probably mpm and stole React navigation. I just need to switch this Dion. Sorry. The young is nine stool, but for you again, it should be npm installed. Okay, so this is now installed for me. So one thing I should probably point out as well is these version numbers you see just here . So if you're having any issues following along with these with these steps going to your your project, open up package dot Jason. And just make sure that all of your dependencies on the same with the ones I'm using here and then if you need to make any changes, you can then run MPM installed or mpm update, and it will make sure they have all of the correct packages for version of this that you're using. This should make sure that the code on dependencies you're using are exactly the same as the ones used in this course. That's quite important to make sure you follow along with Okay, but now we have rat navigation installed. We can actually start Teoh, create the up. So what we should start with is actually creating theseventies screens so that each of our each of our vials like home screen here, but actually used so to begin, If we're gonna go into app dot Js on just make a couple of changes. So first we want to import the red navigation of just mates were confusing. Create stuck. Now, Gato. So again, that's from react Navigation. This is exactly same as we did in the last section. Andi, this is how you actually use multiple screens like home screen. Any components? Andi, like conflict files in things like that. So because we've made this file here where you want to import it, so do that. You type in import home screen from No. So you wanna go because we're in this directory here. We need to make sure that we're going first into the AP photo, then screens and in the name of the file. So what this would do is allow us to use the actual home screen, which we haven't. I haven't written yet, but will be able to use that in this inside this file. Okay, so next we want to get rid of all of this because we're going to be creating a new, uh at essentially we want to return. This will be a navigation using this home screen, which will create next. So this would be create stack Navigator. I could have rackets. So at home screen is going to be a screen of home screen. In case of that is the name off the screen that we're using. So if it was a tab Navigator, this would obviously be that the name on the icons, Andi. Then you just type in the different parameters. So this is the the name of the attributes screen. And then he provides either a a created object. You've been in this page that we did before or you couldn't import one from an external file which will write the actual home screen later on. But for now, let's just finish writing in this. So we just need to make sure that we set a couple of options. So now we're just gonna make sure that there's no header for this. This is where you have the box that appears at the top. That could have a name of the page, for example. Then we're gonna add some navigation options as well. Again, Just toe. Ensure that the header It's not showing. That's already Christ off case. Let's just check that this is old or correct, Okay? And then we just export. He felt that this will make sure that when that floats up, first thing it does is go into the APP gs file. And it's looking for the export default line here which correlates to this stack enough gate to just defined. So this all looks great. So the next you need to do is moving to our home screen and actually start to create the the page. So it's gonna be shown when app lights up. So for this first example, let's obviously import react from correct. I need this on every single, every single screen, and then we're going to import all of the connective components that we're gonna be needing for this project. So let's see. We'll also need of you, uh, text style sheets. We need a flat list. A swell, probably a status bar, Andi, something we can interact. So for now, let's user touchable such will highlight, which is essentially a button or a view that you can interact with. So I want to put all of these from rat Native. Let's check that spending. Okay, so that is every few minutes there, Andi. Then we need to actually create a component. So it exports de Focht X. We open this up here. Andi, as in the last section, is exactly the same. So I want to set the constructor. So by now, this should starts become a little bit familiar. But if not, don't worry too much because you get used to it. The more the more time t bright this out, rather than use the the generated files will become a lot easier for you. So can we want to set navigation? I haven't actually used this yet, so I try to make sure to show an example of this in this section. So again, it's making short that the navigation drop is accessible for the whole of the screen, so we can use this to navigate Teoh a different screen, automatically making check other props off the actual navigations or see and hear. We haven't set anything, but sometimes you can set special parameters for each of your different screens. So it could be certain data you want to access. Not normally dated, but certain things will access that is just for that particular screen. Second, that's the an advocate the navigation problems, um, and were sentenced. Eight. We won't feel stay out yet, but we'll we'll be adding this very soon case of that Is that constructor on? But for now, let's just make sure that we're returning something we can save. Both these files didn't have a look what we've actually got so far. That's just create a view with text inside. Okay, so if we save this that we saved this, let's see what we have. So far, we haven't actually open toe appear halfway, so we need toe. One thing you might notice feel when using hyper. If you press up the up or down arrow keys, you can go through the recent commands that you've made which safety a bit of time. But if you need reference of the different commands, just check out the pdf that was in the first or second module that has all of the common commands we're gonna be using in this course. So for now, which is starting the project and then repressed, I open it. Indeed, the Iowa simulator. That's just loading up now, Case never loading up Project. This is gonna build a bundle. We should notice over here, or we've got an error. So let's have a look what line this is related to. So it's in the app Js online 17. So we checked in here. It's the first we want to do is make sure that we're opening and closing the same number off brackets. So you see there we had a simple error, but it just shows how you want to check your spelling each time. So I just hadn't spoke default correctly. So now you can see this is exactly what we were expecting. You got the home screen. It's hidden up in the top here that's just had a little bit of styling, so this is easier in line for now. so we'll set justify content to center and a line items to Santa. I'm also gonna add a flex of one is this should allow the view to fill the screen on my century both both horizontally and vertically. 23. Fetching data from an API: Okay, so now that we've created at home screen, we need to start thinking of ways that we can actually display, fetch and display the data off the different cities temperatures onto onto a screen, as that is the point of the whole app. So the first step we need to do if we look back at the diagram we made previously is we want to. So when the upload, you wanna have seven random cities and fetch the data, So let's start by actually fetching the data, and then we'll work back. So how will actually get the cities? So if we go back, Teoh a code we need to create a function that will allow us to use the A p I that we've registered for to actually fetch the data that we need. So let's call this function, um, fetch city Tim on for this, we're gonna need ah two parameters, which will be the city on the country. Okay, so this is what we're going to send to the A P. I is This, for example, could be, um, Paris, as the city on France as the country. So we then need Teoh actually build out the array. So now we need to use the fetch function and actually put in the euro off the A p I. So throughout sandwich http to fix that it's a p. I don't open whoever Matt the dog four stash data. So if you check the euro, we got from the welcome email, there should be similar to that. You have one thing you need from that euro in the email is the i D. So essentially the a p I key. So it's forces to put five for it slash whether, Mrs Weber said in the queries, This is the, uh, place we're going to use in the city and the country. So the first thing got to do is at these as a variable. So at a variable like this, and they want a comma in between of a variable. And then at the end, we want to put up I d equals r a p I key. This will be a long a long string off both numbers on letters. But before we do that, we just add in the city on country. So, as you can see, it is using these variables here. So the euro should look like this on this. Obviously replaced this A p I key with your actual a p I key. So then we need to set what we're going to do with the response. So you type in, then response is equal. Teoh response. Jason, call the function. And then with that, we want to take this response. According response, Jason. And with this, we want Teoh open an array open object on so we can actually start to use the response that the A p I will give us. So we will set a variable. Um, let's just call it our which we used the response, Jason and then the main object. So obviously, if we, uh, look what would actually get as a response from this a p I So the a p I will give us something like this. So I blood up my a p I key here, but we'll get all this data sent back. So if we look to see the way it's a structured, we can see this main object here is where we can find the temperature and the humidity. So that's what we're going to be using first. So if we jump back here and use main. Make sure you close yourself on them will also just make sure we have another object set. Let's just call it object, which is the response on its side. Just weaken access Any other variables we may need? So now we want to actually set an object that we're going to be adding to our state to create an array off the cities that we want to show any one time on. So we need to create an object that we're gonna then add into this array. So for now, were you city equals the name. So this will be the objects that we may just here dot name. We want to pass through the country as well, which will just pass in this, uh, variable way set we sent to the to the function. So again, that would be country. And then we want the temp, the temperature that we received. So for this, we're actually going to do is around down using the meth seal function. This would just round down the response, forgetting So we'll use our Dr Tim. So if we look at this, we can see that the temperature for this example. It's actually, um, around number already. But food to change this Teoh strike London. You can see your 27.18 So if we just round this to the nearest whole number, it it just makes it. Yeah, Look, a little bit more put together on We also need the type off, um, weather conditions. So again, this will be the main object on the weather objects. What? The first I've been in that ray, but made so again this links up to each individual part off the response. So if we look at this 1st 1 which is object dot name on object at whether if we go back and look at the response So we're looking for name because the name is here. Andi was This is the same situation with whether he can see whether main and then we have a word for clouds. So with this code, we've created a way that will actually allow us to create this object based on the response . Each time we ask the function to fetch us, that's the weather conditions for a particular city. So for now, what we'll actually do is look this to the console so you can start to get an idea off. The responses were receiving So what we do for now just to test this is saved this out. But before we save, it will just set our own call to this function. So we're type in this doc vetch city temperature, and we're manually type in a city for now. So for this example, wedge issues London, UK Then we're safe this on, See what happens first, though I just update my a p. I keep okay, So I've now update my a p I key and just building this project. So what, We should see who we are is three response from the a P I. So again, we have the country name, temperature and clouds, but something doesn't seem quite right here because the temperature obviously shouldn't be 301. So if we look back at what we're sending here, we conceive that we haven't actually set a type, so obviously we want to use Celsius, So we're gonna add towards the end here, units equals metric. We're going to save this on running again and check a response. Here we have now 28. So you just need to make sure that the A p I is being set with a with the correct experts that you need to run this properly. Now, if you need to use Fahrenheit or other off units, we're looking that towards the end. But for now, we're just going to stick to Celsius just so that everything is gonna be consistent. 24. Set array of cities and create random function: Now that we have a way of actually calling the FBI to get the temperature data for each city that were using, we now need to actually set on array of all the different cities that we want to actually be able to use in is up. So to start this, we're going to go Teoh this dot states were set in the state object and creates a new array called Cities. This is gonna be an array like you mentioned, and it's gonna be filled with a number of objects that will look like this, for example, have name in the city name and then the country like this. So I look in a quickly run three on, adds a number of these on. You can use any cities you like. Just make sure that it's built correctly. Andi are provides a natural file that you can download to use this This one piece off go just so you don't have to spend ages typing it all now. Okay, so here is what the Array will look like once you have added all of the different cities. So you can see we have quite a few here just so that each time the arrays refreshed, we can have a nice, uh, selection of cities to choose from, but they want to set a another array here on empty array of list. This will be the actual items that are shown in the flat list. Each time we refresh on load the we also need to set a another variable here off refresh. This will be used to know if the flat list is loading or not, or if it's refreshing any data Each time we open that, it's now that we have, uh, a list of array of cities onda wave actually fetching the temperatures and weather conditions for a city. We need a way of actually joining this all together. So the next we're going to do is create a function, will actually let us randomize seven cities from this array into a new, um, a new array of cities, so you can actually affect the temperatures for each of thes at a time. So to do this for first going to create a function that will allow us to get a set number of cities from the array that run to so we're cool dysfunction, get random this will need to take in, uh, to, um, parent parameters. So one of these will be the array, and the other will be a number off. How many items rectory wants at random. So once we have, please, where they actually start? Teoh Teoh, create a new array off these elements. So I just take this. Now, if you just copy this and follow along, you need toe worry too much about what this is doing because there's a number of different ways you can do this. But this is essentially just letting us take the array and randomly select a number of elements that we define from there at Renton with that were actually taking each of these, adding them to a brand new array again at random. We just returned the new All right, so this might look quite complicated, but essentially, it's taken in it's array here, checking how long this ray is and then going through each of the elements, taking at random and argument with his brand new array off the length that we've set just here. So say this is that object are array atop, and we want to say we want seven objects from this ray into a brand new array. So what we do now, it's actually tests that this is working so well coming out this line we're using to test our other function. Andi actually called this get random. We're passing the array. Want to use it is in this state cities, and then we'll set a number. For now. Let's just say five. No one actually got to access this. We just called it list. Then we're gonna constant look out this list. Let's see what happens. So we've actually gone era here, so let's just check what lines is coming from. So it's like 102. So if we check in hair, see what? Where we've gone wrong? I haven't actually talked this out correctly. It's every safest now. Country load. Yeah, I miss spelt that. Okay, so if we check the the logs now, we can see we have 12345 cities returned from our, uh, array of cities. So if we refresh this again, call it like this. We have a lyrical we have five new cities at random, so this has proved dysfunction. It's working for their what we need. So next we need to actually join us together even more so we're going to create a new function that will be called each time the APP is loaded to fetch seven cities at random meeting this new country in here. It will then go through each of these cities and such that that temperatures once it's done , that temperatures and weather conditions one has done that Will Adam to this list array. And then we will actually start Teoh display these using a fat list. 25. Using the console to log responses and start building FlatList: Okay, welcome back. So in this next step, we're going to be creating this new function that will allow us to actually join thes two functions for random izing and getting these elements that we need a random on getting the temperatures off the cities. So this is gonna be called up here instead of these other functions that we're over testing . So we're going to call this fetch temps, and this won't take in any parameters. So run something a little bit like this. So first we need to, uh, sets list. And this would then use the get random function again with stakes, got cities. And then this time, we're gonna actually pass in seven. As we actually want to show seven cities each time we use that. So then we're going to actually looked through all of the items in this new array. So we're gonna call City in a list. So in here, we're actually running a loop, so we can actually then define the name of the city. So this will be the list and then the index off this array and then the name I wonder the same thing for the country as well I'll explain what this is actually doing. Okay, so what this is actually doing here is for each element off this new array that we've made . So, for example, you can see this one here. The index, this ray would be 012345 And so on. So, obviously, in this new ray we've made, it's going to go up to seven. So be 012345 You know, again. So this variable here is actually the index off these items. So as long as we used this, we can use the same Ah, ray here. So this is what we call in each time. Each time this four loot is actually interacted with this city number will increment each time. So first will be zero and then one. This is why we can actually use this, uh, Teoh get each of the different cities in a right. So then what we're gonna do is cool the the temperature function. So I fetched City tempt, and then we're just gonna passed through the name on the country. So the name is is the city The reason I didn't call the city issues because we're already using it here. That's what that should do. Now it's actually looking out. So if we run this function when we like that, we should be first getting our random seven cities and in the temperature for these cities . So let's save this and see See what we get so far. So here we go. So this is there should be 712345 67 These are the cities it's chosen. We can see that we've got the weather conditions on the temperature in so serious that each of these cities and if we refresh this again, it happened. A simulator U shaped gesture. We load. There we go. We have different cities each time. So now this is quite a big jump forward. We have joined these two elements together. What we need to actually do next, though, is ensured that when these cities we won't affect the temperature for these cities were actually adding this to the list array here, rather than just locking them into the console. So to do this, we just type in this dot state the list push city. So it's just check what we have here. So now instead of looking out the city, we're gonna look state and then the list part off that state. It's every check. Well, see, it's actually quite a lot, because each time it's looking, it's so this time here we should see we have the correct results so fast a scroll back. You'll see this one would have 6123456 Yep. And then here we have seven. So each time it's adding to that function. But what we should also do is make sure that we're emptying this each time. So to explain what I mean here, when we're fetching the temperature, we want to make sure that we're not adding more than seven items to the list. So we're just set a new function here. We call this new list on well, actually set the state. Okay. So as you can see here by calling Set State here, it's actually before the component has actually mounted onto the app. So instead of doing it this way, we're gonna actually passed this new list array that we're making actually through into the fact city temperature. This will allow us each time where either loaded AK or actually refreshing to get new city data will pass this three and then when we access it in here, this is what we're gonna use. Teoh actually adds to an array. So instead of adding it to the overall, um, city, we're gonna add it to this array just here. Let's just see how this looks when we run it. So again, we have seven elements each time. And then from here, we can actually successfully set the states on update the list to use and new list. So, actually, we need to change this here. So instead of looking this, we're gonna treat log the ST dot list running after here is where we should see a difference between the two. So what say before come up on 10 after? Come on. So if we check here, we have 1234567 Okay, so now we're at the stage where we have the data have been actually set for these cities on . We can refresh this and get updated data each time. Way need to. So now we can actually begin to actually display a flat list. So the first step we're going to do is a tree gets the simulator on and text I mean careerist on either side of each other. I'm going to start actually displaying the data onto a flat list. So to do this, let's change this instead of staying home screen to city weather, which is the name off at success updated now and then we're going to actually create, uh, flat list. So we'll start this again by I don't the flat list as normal. Check it spelt correctly, and they were going to start adding the props for flat list, so the 1st 1 will be the data. Now, this, as we've shown up here, is going to be at states list variable. So you act us that by typing this states and list, and we want to be able to refresh this, so we need to set a a variable that will be sure whenever the state is refreshing and then we need a function we're gonna show when we want to get new temperatures. So for now, we're gonna add the on a fresh brock. We're gonna set this to this load. New temps. So just actually check would probably create a function for this now. So pick up here, load new attempts, this one taking any premises and so we want to do in this function is actually I'll take the States to show that the list is now going to be emptied and we're also going Teoh, tell the flat list that were actually refreshing so that we're actually accessing new data . So down here is where we'll be setting this meters set fresh as folks. So if we go back down to here, we can continue Now we have added this this new function up here. So if we out the such on and continue creating after that list So again, we need a key extractor as we didn't set one in a data or even done here when we're creating cities. So let's just to find out own index for this. So again, make sure that index is a string they should work fine. And then we can actually get to displaying a data. So again, use the render item. Prop on this is where we actually start. Teoh display all of elements. So again we is the item on the index, then inside here, we can actually rendah city data So for now, let's just put a simple view with a text intimate unless try and display the city name. So this should be item jobs. What we call up here name. So we just paying name and that's close off this and see what we get. So again, we haven't era here. Hurry, because we haven't actually closed this. Oh, yet we haven't actually stopped the flat list, so we save this again now, haven't spelled this correctly. You can't have a guy. So again, it is just showing that we have to make sure that the theory tells because this on on refreshing, uh, broke was calling refresh. But up here, we transfer this correctly. So anyway, you can see now that we have a list off cities, seven cities on this again, if we refresh this, you're actually update each time. But what? We actually want to do it instead of just showing the name. We want to actually update this so that we're showing the temperature and everything as well. So for now, if we just put a dash here and access the 10 What we used to have attempt and put see associates, you can see here we have each of the temperatures from the A P I. Okay, so before we continue, we just want to fix this issue here, where if you pull to refresh, it's not actually refreshing the data. So we do this just to show that era more clearly. If we pulled to a fresh, you can see the list is actually going empty. So that's because when we call this load new temps function, which is on the honor fresh hay. See, we're calling this prop on in the function is low. New temps. We need to actually make sure that we're updating the data because at the moment, but just taking away. So all we need to do here is actually called fetch temps function as we do in the the uploads on this wall update everything here. So if we just save this now, we should actually see that the yeah, the cities are going to update. So we're actually really far along with this this app now, So next we can actually start to improve the look and feel on design and everything off this, so to begin, if we're going to start to set some styles Teoh screen. So we're gonna add a style sheet. So to do that, we're just gonna move to the bottom off this home screen file on to create a new, uh, object, because you could see we've just set const equals styles. And this is a new style sheet. Houston to create function here. We open these brackets, and now we can actually start to style. Uh, so we're going to start by adding a a container object since we're gonna hold everything inside. So here we're just gonna essentially use the same styling we have. Pierce, this is just my content line items and a flex, but we're just space these out a little better. We're also gonna add a background color off white. So says, or we need for here, and then we'll take this away and cool styles contained. So refresh this. We haven't added this coming here, So if we're freshness and reload, we should see Now we have this white background, so that, again is it's a big step forward. Next step is to actually move this down a bit and improved the whole no feel of this up. So as you can see right now, we're right up against the top off the screen. So to improve this, we're gonna actually put some styling around this city weather. So we'll do this one in line. So here, we're going to add a width 100%. Make sure that's inside. Here on. We're gonna add some padding to the top of around 40 some padding to the bottom off about 15. We're gonna make the background color the black on. We're gonna set the font color for this example. Clear white. So if we say this now, we should start to see here we are. So we have the city weather now. We don't like it right against the edge. So we're gonna send to this be safe, that centred. Let's also think this fun bowl, just which stands out a little bit more. Okay, that's starting to look quite nice, But what you may have noticed there is theme status bar, which was on the top here with the time on the bachelor level. This solving has actually disappeared because we haven't set this to, um, to change anything. So to fix this, what you want to do is just inside the parent view off this screen. We're going to add the status bar component and just arrives at the bar style broke two lights content and then close it off. But before you saved, just make sure that you have imported the status bar component from react native. So so long as that's there, you should be all good to save this and he should notice. Now that thesis bar can work with the black background color we've added. This is a big step forward already. Can see that the at now is starting to look a bit a bit nicer. But next, we're gonna move on to actually styling each of these items. 26. Add styling to FlatList rows and add conditional font colours: welcome back. So the next step in creating this is to start to actually style the each of the city temperature rose in this flat list. One thing we also need to do is at the of the correct text to when displaying the temperature and associates. So to do this, just go and search for soc s. But it correctly on just copy the no, I can't hear. And just place this like Sai This should now render in here just so you have a better all round display. So the next we're going to be doing is actually adjusting the output off elements in here slightly before we start to move into more styling. So for the view, we want to actually add ah style using a style sheet down below. So we're called this one road. Andi, we're going to this same process for a city. So actually, gonna separate these out into two separate elements of the 1st 1 will be for the temperature on the 2nd 1 It will be for the name of the city, so we're going to get a style to life. So now we'll start with the city for this styles city name on first, We'll we'll add styling for the road, Andi for the city name. So I start with Therefore I so the same as before. When a set a new object in the style sheet a row. We're gonna get this flex off one putting vertical patting off around 25 horizontal patting of 15. We also want to change the flex direction, which we learned in the previous modules is this will allow us to position these elements either above or below beside each other. We're going to set this as row so that they display alongside each other like this. Now that we've made these two separate text components, we also want to set justify content off space between this will mean that our new separate text elements will display right on the left and the right hand side of the screen, with all the space added in between the two components. Gross. They're gonna add a border to the bottom of this component. Andi set the color as well. So if we add this this, come here to make sure that everything's correct, check that there's no missing covers and if we save this, we've missed. Uh, Indian color. I just here missing Koran from there. So we're just safe this now, So here we go. We can see what we have right now is the spacing between But one thing actually to do is at a, um a style to the flat list itself to ensure that the wet is going to be 100% just so that expands the entire screen. So again, this is ah, big jump forward Already, this is starting to look a lot better. So what we want to do now is add on next styling object for the name of the city. So again, we're goingto the style sheet. We create a new parameter for us on to be on a set, the font size at 20. I want a line height of this a swell so that we can have, uh, say one fun size on this side on another front size for the actual temperature. Different font sizes. But we want the overall element to take up the same height so that each line is the same and they'll both be aligned to the center of each of these rows. So we want to set the line height at 40. We'll also set the font family just so that we can customize this a little bit more on a farm. Nothing they look well for this is Avenir. That's what the ones called on. Make sure again. You had this coming here. So if we save this now, we can see that systems like a little bit more styled. It's what I want to do next is set some type styling for the temperature here. So if we move back Teoh the, uh, the temperature text component, we're gonna add a style off tempt. So again we move into here and we're gonna set this starting objects. Also, don't forget this comer each time that a new style. So first we're gonna add a fun size off around 30 pixels or 30 Andraz. We're gonna set a line hike again. As you mentioned before, we want this to be the same as the line height for the city name. So they both take up the same amount of height overall, Even though they are different fund sizes, this would be 40. Andi will set a wit fear a swell. So that, um all of that Ah, uh, temperatures take up the same article with So a good amount here will be 130. I will also add a margin on the right hand side. About 15 on. We're gonna set a funding quake. Just said this stands out a bit more to be bold and we also need is the same fun that we use for the city name. So if we save this and see what we have now, see, I've missed a comma. It's actually missed this. This coming here for the margin, right? Okay, who's gonna wait to the simulator now? I just restart this simulator. This happens sometimes if you make a lot of changes in one go. Okay, so here we can see our ass dialing. Now, that's actually starting to look quite nice. So again, we can pull to refresh that function of the added earlier so you can change the cities and each time opens up also be new cities than we had before. So a couple of things have actually improved a styling a lot here is if we can add a range for each of these temperatures. So, for example, if the temperature is below 10 degrees. It could be at the phone call here. Could be blue. If it's then in a medium range of temperatures, we could make it green and then for warmer temperatures orange and red. So for us to start to implement their three first to goingto ads a difference. New objects to Estelle, she for each of thes temperature ranges. So we'll have cold and we'll set the color to play well, then have median and set the color to green and then hops. It's that the carts orange very halts and set the color to red. So you see, this won't do anything right now. What we're going to be doing is moving up to this temperature style. Andi, we're going, Teoh actually use a function to see which range this temperature will fall into. So first, let's actually go and make dysfunction. So scroll up here. So we have our functions, we're going to create some space, and we're gonna start to write out this new function. So we're going to call this gets temp range and we're gonna pass in the temperature. So we just call this tea. I never gonna create out this function So we're going to keep this really simple and just use if statements for this function. So we'll start by just saying if the temperature is less than 11 return what? This is her first range and then if the temperature is, um was greater than 10. But it's also less 20. We want to return to just be in that second range. And then, obviously, if the temperature is greater than or equal to 20 because we want anything above 20 to be in this new range. So this is this one here would only get temperatures up to 19 so we want to capture this if it's 20 or above. So if it's 20 or more, but also less and 30 this will be in 1/3 range. And then, as you guessed it like we've done to hear if the temperature is greater than or equal to 30 going to return for this might look a little bit confusing, but if you actually really break it down, we're just seeing which range each of the temperature is that going to be within? So now we're going to get no matter what number we send, um, into this function they're gonna get by the 123 or four. It's now that we know this, we can move back to, ah, temperature styling just here. They can start to actually, um, check the actual temperature for each city in relation to these, uh, ranges. So first thing we want to do is change this in line styling will be using this object here . It's using array. So we do that just by adding in these brackets, and then we want toe create a bit of space just here and pass in this actual temperature to this new function to see what strange it falls into. So we're going to start just by using a turn every operator, which basically means an if statement, which is all on one line. So we start just like calling this dots. What we call this function get temp range. So just here, we're gonna pass in the actual temperature off this, uh, rented items. So this row off this city So this is just here. So the item, Doc, Tim. And again, remember, we've already rounded this up here, so we know that it will fall into this range and it will be a whole number. So once we've done that, we can just check what this is So for this 1st 1 want to just see if it if it's equal toe one? So this will mean Is this this temperature less than 11 degrees? So if this is we want to then but a question mark, which is that when we put the first option, So if this statement So if this is correct, we want to set this to be the styles off cold, and if it's false, we can leave this blank. But I like to always put something in here. So it is not safe style stop temp, even though we've already set this down below. So as you can see, this is actually quite simple. So we're just performing a if statement just here. So is this. So the response of this function, which returns arrange each time if this is equal to one, make sure that we add the style stopped cold, um, starting object to this components style. So again, we're gonna copy this pace this full of the rest off the possible options. Say, just make sure they're one in the same level of indentation. We're gonna change each of these 23 and four and then change each of these to match up to the, uh, styles who may? Pelosso had cold, medium hot and very hearts. And then we also have measure the comments that we also have this style being passed through no matter what. Anyway, So we could adopt with a lot of these functions. But that's OK. So now what is going to save this and see what we have? So obviously these ranges isn't the best example. But all of these elements fall into the medium or hot range. So refresh it now, have a couple more, but not too many once and lower temperatures. Okay, so what we got here? This temperature is coming out as black, which shouldn't be possible. So let's just check what could be causing this because you can see here. I've been in the wrong operator for this. Uh, if they've been just here. So now that we've rerun this, we can see that the elements that should have bean in this second range, which would be medium one being styles, they'll come back just as plain black text which we had set in this original temp style because it was the default color. But now we've had this styling in a whole range should be correct. So if we refreshments a couple more times, simply confined one that will be in the blue styling or effort is just too warm in the moment. So you have one again in the medium range. Go anyway, a silicon force this to find somewhere cold. This is fresh air cover more times because there should be never go. We've got one in this in this cold range. So that's why this one is blue. So you can see it's already starting to look. Andi feel quite nice. And we have this range off different styles based on this actual live data that we've set from a style sheet. So in the next video, we're gonna look at styling this actual road the background color here a little bit more nicely. They're gonna start using a Grady int here, which would take advantage off a component that's provided by Expo. Andi, they should help you just bring a little bit more of a dynamic feel. Teoh 27. Adding Expo gradient component and touch event: welcome back. So as we mentioned before, we're now gonna be adding in a radiant so that these Rose could just have a little bit more substance to them. So to do this, we're gonna screw up the top of my first gonna import the Grady and component from export. But before we do that, I'm just gonna jump to the Expo docks just to show, ah, a little bit more about this component. So as you can see, we're in the expo docks for this version 28 expo, and we just scroll down to find the component wanna work with. I actually can see this is the components. So there should be an example here if we just clicked. The preview sometimes just takes a moment. Big gives you a quick understanding of what these components actually do. So, as you can see here, is this light Grady in to this? This is basically a view component that has a great in around it. This is what we're gonna be using for this next step. This this next video. So if we jump back now, Teoh code editor and they're going to work with this, So with first we want to import Andi. It's called a linear Grady. And so that's what we're gonna type in on then We're actually important. This from Exploit. This is one of the benefits of using export. They have so many useful components that are ready to use straight way. And this is when you combine this with the ability to build, run and test your APS from android or IOS phones. Andi, have the built in support to you have the simulator. It just makes exposed so good to work with. So anyway, what we're gonna do is import this Grady in just here on. Then we're going to scroll down Teoh Flat list. I'm gonna wrap each of these, uh, render right and views with a radiant. So we start this by making sure we go outside of this parent view component for render items and we're gonna adds a new one. So we're going to call this Lenny ingredient like that, and then this takes a number of props. You can read more about them in the the docks. So the problem he can learn more. But for this example, just gonna add a really simple ingredient. So it's gonna be, um, slightly off whites to a slightly darker off white. Just so you have something, uh, to determine each of the rose. So we start this by adding in the colors prop. And then here we want to create an array on this. Courageous contains the colors we want to use. So we're gonna be using RGB A for this. So that's Red, Blue, Green and Alfa. So we're just gonna put in zero for bread, zero for green and zero for blue and an Alfa of zero point 05 So this has a really, really, really, uh, light, And then we're just gonna do the same again. Say that the comma in create the next part of this array and this is gonna be completely, completely empty. This is so fully transparent. And then we just pick the starts again and in the proper, like so this is also an array. And then in hey, just put the angle that you want this, uh, these colors to start with. So this is what we've added. Now, um, this should be enough. And then we also need to make sure that we actually close this component just like anything else. So it's essentially a view component with extra props for adding the Grady int. So if we make sure it's tomatoes here, we're gonna save this Now on. We should see here we are a slight Grady in that just gives a bit more, um, substance to these roads. And you can now see the white border in between the rotors at the bottom of the most. Well, so this looks a little bit a little bit nicer. So we want to do now is actually have some sort of event if we tap on each of these wrote. So I'm clicking on Theseus, make to him now and you can see that nothing's actually happening. But we want to create something that will give us some feedback when we tap on these on these rows. So this could be telling us a little bit more about the weather conditions or showing us the temperature or humidity, just something like this. So what we're gonna want to do first is at a a component we can actually interact with. So this is why we've imported the touchable highlight component were used in the previous video. So if we scroll down and wrap everything we have so far inside this render item inside, a touchable highlight will actually be able to interact with each of these rows. So as the same thing we did with the linear ingredient we can add for touchable highlight. So as you see, it's auto completed for me here. So if we add this on, make sure you close it as well. We should. Actually, in Denton, he's a little bit just so you can see that the's inside these other elements or components now that we have this touch will highlight. We haven't actually added any props to exist yet, but I just say this to show you how this works. So any click on these at the moment nothing's happening. But if we ads on on precedent just here, so it's the same as what we did for colors and start, even for data and starting up here, it's just a simple prop. So it's called on press, and this will allow us to actually run a function when this is tapped or interacted with. So we start by just calling a function like this, and for now we're just in a, um, a lot A shown a lot dialogue onto the screen. So we just put alert, then tough made. So if you had that for now and save as he can, I just This is just loaded. Maintenance has gone slow for a moment. So if we actually tap on these items, you can now see, we get a natural a lot response each time we interactive on these albums. So refresh this. The same thing happens. I can't reach of things, but we don't want to have such a, um a drastic, uh, styling change from actually interactive thieves. So what we want to do is add and underlay color. This will stop the, um, the whole row from changing its background color to black each time. Interactive it. So if we just put a color that's similar to what we have here. So, for example, the only real color we have is this white border heads of we just change this under. They come upto white and save when we now interact with these elements. See, this is Betty any and he changed, but we can still see some sleight. Um, interaction we make this one might change. Obviously, we don't want it to this to just say tap made. So we want to upset something in the ah, the lists. The states that contains lists. So this list part of state we want to send objects for, um, a description that we can work with. So instead of just saying tap made, you want to be able to call something similar to item dot description. So, for example, if we could item name right now, this will show us the name of each of these cities. We want to get a bit more description than just the name. So if we scroll back up, Teoh, fetch city temperature function and look at what we're setting. It's this object just here. If we had a description, we can start Teoh, build up something that weaken renter into this a lot box. So for now we will try and just display the weather conditions on the current humidity percentage. So I will start by add in the humidity. This is the percentage. Andi will also highlight the weather conditions as well. So first, let's just find out where the humidity is. So this will use the This is in the same part off the actual temperature since his daughter humidity with love case better there. And then we also I want to highlight the weather conditions. This will be in the object. Seriously, To make sure we're saying this here, just be object darts. Whether Andi as the same as his type, just here. We want to set the weather too. The first part of this weather array, and then we want the main. Okay, so if we check what we have here and save, we should have a string that will have to humidity. That's just a little dash in between here. So we can I usually see the difference. So have the humidity percentage that we have a dash and I want tohave the first weather condition that should always be at least one. That's for additional access. The first part of this weather. All right, here. This is all returned from the a P I. So if we scroll back down now on change this alert box from name to description what disk? And then click on these. We can now see, we're actually getting a response that is adding something to at. So you can see the humility percentage. Andi, the weather conditions. This is quite nice, but maybe the weather conditions shouldn't be hidden beneath this menu. Maybe that's reached. Have some sort of, um, icon or emoji or something. Next, toothy weather, temperature, the temperature of the city. That could give us an indication of what's the weather conditions might be. So in the next video, we're gonna look at how it can add an emoji just here that we use a similar function to this temperature range to change which emoji we're going to see. Based on the actual conditions, the weather conditions off each of these cities that we're gonna be working on next. 28. Add conditional emoji for weather types: Okay, welcome back. So as we mentioned in the last video, we're now gonna be adding some type of icon or emoji just to the side off the temperature here that can show us the weather conditions. So we're going to start by creating a brand new function. So we're going to call this function, gets emoji, and this will take in the weather type, and then we just write out a function here so very similar to the temperature range function up here. We're going to use a number of if statements based on the most common types of weather conditions. So for the 1st 1 let's just say if the type is equal to clouds, we want to return on emoji. That will show us clouds. So if you're on a Mac, you can, um, opened the selection of emojis. You can If you're on a Mac, you can open it by typing control, command and space. It's this will open up a selection off different emoji Seacon use. So we look for something that is done. A highlight clouds. So this one here looks like it should fit this, uh, usage pretty well. So let's just click on this. And if you're on a Windows computer, you can also search on Google for different types of emojis. And it is copy and paste the, um, their characters into into the coded so it should work pretty similar. So we're going to do this again, reach of the most common weather conditions. So the next one is probably going to be clear now. I found these conditions just by going to the A p I and talking a number of different cities and looking for the actual conditions that the that would most commonly al put it. Those were clouds clear Hayes, thunderstorm, rain, snow and mist. These the ones who were going to be adding emojis for so again for the clear. We're gonna use a something to serve son on. The next one is going to be hes now we haze. There's nothing that's really fits this perfectly. But I just fought the sun behind the clouds look quite good for this on then. Next one is gonna be fun to storm. So this one is quite good for this on then rain again we can't copy and pasty to save time is that brain this one. That's quite good then. Just two more. It's no, I missed the snow. I just have this icicle and missed. Maybe you can just his clout. So now we have this, Um, this new function is gonna return us back on emoji based on the type of weather conditions were actually want. Teoh have a way of calling this from, uh, new text in part just here. That's next. The temperature. So we want to show this just before the temperature. So in here, we're gonna coal, uh, function. So what we're gonna be using is the the type ah, parameter from our object that we're saying here is this is the weather conditions. So, as you can see, this is exactly the same variable were accessing as the one in the description. So if we click any of these and see, we have clouds, rain and so on. This is what we're gonna be using. So if we pass in item doc, type to the US this this new function, we should get the emoji that we need. So we just put this don't get emerging. And then we passed. Three items don't type, so they should be all we need to actually render the emoji is just too. So if we save this now, let's see what we get. And there we have it. So we have the emojis now linking up to the types of weather conditions that each off the cities have just quite effective. So if we pull to refresh again, we can see this is actually updating all of the different types of data on the different font colors. All whilst where on that there's actually quite powerful app Now it's all right, This is going on another emoji Next the city Name the app name just to make it look a little bit nicer. So let's move this onto a new line just to match the rest of this s the sun Emoji. So here we have this section starting to now look at quite complete up. We can refresh this. We can interact with it, Seymour information and on someone. So the only thing we could really do now to actually improve this app, um, make it look a bit mawr designed is to change this alert box to actually look a bit more, um, styled. Because at the moment this stands out a little bit too. Um, two basic for us. Now, as we have this, these radiance everywhere else, you should probably have a little more starting to it as well. So India advanced part off off. This course will have a another video about how to style this box. But for now, this is the end of this module. 29. Intro: Taking the CityWeather app further: the case over the next couple of videos, we're going to be adding some more features to the city weather app that we've been working on, so the biggest change is going to be adding more screen. So up until this video, we just had everything up until this tab are down here. So the next we're going to be dio going to do is look at adding this tab are to Stack Navigator using before and actually adding this search screen to up. So this search page will contain a A box rusted input text on a on a button for us to actually make a search, and this will actually check the A P I to see if there are any cities that match search. So if I show an example of what this could do by time in London here and then tap one search, you can see it's updating screen with the results that it's found and again, like we, um, made in the previous video, you can click on this and half are more information showing in an overlay onto the screen. And if you haven't seen house, do this design this designed to monitor we get. Check the advanced video at the towards the end of the course, and that shows how you can get this effect as well. Yes. Over the next couple videos we're gonna be looking at how we can update app to first at this tap navigator and how we can work with text input and actually make requests to the A P I on update ass cream. 30. Use tab navigation: The first step we need to look at is how we can actually change the app to start to have ah , tap bar down the bottom here. So you may remember from the previous videos, we will work with the Tab Navigator. So the first we need to do is actually look for where we import the stack navigator at the moment, which is here in line three gs. And we're just gonna change this to actually import the bottom tab navigator instead off the stack Navigator. So what we can actually do, for now is just at this, um, just before the stock navigator, rather than just remedia jazz, you can see we just import the two top navigations now. So if we saved this, we won't notice anything different at the moment. But now is the part where we actually start to change the navigator that we're using. So, as you can see, we created this up variable here and exporting it down here. So if we just changed this line from using Stack Navigator to create, create bottom Tab Navigator, if we save this now, you'll see straightaway. We have, uh, that's updated. Its using its have bars that we want to do. So that was that was really easy, uh, to get started with now as a quick way of showing how we can have more taps again, you may remember this from the previous video. We just want first at the name off a new screen and then the date of that screen. So the main committee to provide is the actual, um, the imported screen. Or, if we had written this directly on the same page, the object that contains this actual screen data. So for this quick example, use the home screen again. So they should have two tabs at the bottom once and home once saying search actually contained the same data. So if we save this now, we don't just here's an extra screen, and if we top on it, you can see we have actual cities. Now this is separately contained to the other page. That's why the cities are different. And if we pull to refresh, this will update the same way that the home screen would as well. It's going to put down far enough. Does he consider this is quite a useful way off, quickly adding more screens to app. But what we want to do is actually have a obviously a different page than the home screen. So we're gonna do is import search screen. But first we need to actually create this. So if we just total this side by here to appear, we're going to start by just duplicating the home screen. So drink duplicate just here. And then we want to name this such screen. I was going to say This puts it in the correct directory and everything, which saves us a bit of time. So if we took this back on just to make a vector space and close the home screen now being seen to screen to actually be working with for the next part off the's video, so we'll save. Don't say, they said. We're just in cool such screen again from that screens such screen. So if we save this again, it should look exactly the same, actually, because the code in this screen is the same, but now will start to actually build out the search screen and the date we want to show that 31. Add search screen: Okay, so now we're going to start to actually change this search screen page Teoh contained the components and elements we need to make this search screen actually work. So one of the way, one of the reasons we actually duplicated the home screens because quietly, off this code, we can reuse on when you're working in especially larger projects. Any code you can reuse is, you know, is a massive benefits. It's 80 time. So, too, even if we're going to start to actually change the initial state we're gonna need for this screen so we can start by removing this list of cities Onda, we don't need this list. That's true anymore this weekend, right? Our own new state items on to here, So the 1st 1 we need is search inputs. This is gonna be an empty string For now. We're also gonna need such results. You can just set that to zero. For now, we also need some type of error message. Not necessary. An error message, but a string we're going to show on the screen that will tell the user if we managed to find a city. So if we don't find a city it needs to say no results found on If the sir if research isn't currently being made, we need to give them and display some text on the screen just to tell them to search for a city. So for now, we'll just call this drink. Error on by default will set it to actually say search for a city. And finally, we need an empty object where our search results data will go to. We don't actually want to run any functions when the screen loads were removed. This for now as well. So that also means we won't need a fetch temps function. We can make that we won't need the get random function so you can get rid of that. And we don't need the load New temps function either, so you can also get rid of that. So we're really looking at a much more streamlined page, which which is really good. So one thing we want to do next is actually start to change this fetch city temperature function. So only gonna be sending the search input dysfunction now so you can actually remove these two other, uh, variables from assumption and this means of course. One of the things need to check for is any places that we are interacting with those two variables. So me to make sure that we're not call it needs anymore. Sis includes country just here on new list. So we're not gonna be needing new list anymore through this coming these out for now because we will need to just remember what we were calling before. Okay, so let's just make sure we remove these items up here. So as we're allowing the users to actually add their own import, we need to actually check the type off response we're getting from this. A p I So just underneath this object, well, this object variable, we're setting care. We're going to check the response code from the A P. I is this basically is Whenever we call the A P I, it gives us a response. So 200 means there was a success. Then there's a variety of error messages and eric codes, but all we need to know is if the actual a p I could was a success. So what we're gonna do is that if statement in here and so we're going to check the response, Jason dot c o d Which is the response code on. If this is not 200 then we're gonna want Teoh said our message that we, uh, setting the state up here. Otherwise, we want to continue to actually display the results of the A P I as normal. So what we're gonna add in here, it's actually going to set the state as well. So we're gonna uses that state function again. Open up, have brackets. I'm just gonna say such result, What will happen that sex result is still zero. You can see up here, it starts with a zero. But we're just said it again just to make sure. And we're going to say Herro city no found. It's an exclamation mark. Just add a bit of emphasis there, So close this off and further down here, we want Teoh actually changed the state that we were updating before. So we removed these two items completely, actually, and we're going to set the item again, which he says, empty object up here. This will now be city. So, as you can see, this is object we're setting. That's what we need to show so the response from the FBI's. We're going into this object and we also want to say search result. It's one system. Misty is the opposite of oneness and era 11 thing that we should actually look to do a swell. It's Each time we are calling this function, we should update the the state as well to reset any previous searches. User has made so well basically reset everything that we had set before. So the ice and we're gonna set back to be empty. The search result we want to set to be zero again. And, uh, message. It's not really an error message, but it wouldn't do for this example. We're changes back to search for a city. Okay, so if we look at this now, we're really starting to to build something that we can actually start to use. So the next we want to do is add components onto the screen, goes again Right now, we're still displaying the same information we had before. So we're going to start to actually remove this blacklist on ads, actual text input functions that we need or components are. So we're scroll down now, Teoh Page. So obviously here is a flat list that we're working with before this is going to be completely removed. But we're actually going to still be using everything that was inside this render item. So this again saves us a lot of time. So what we want to do is remove the top part off this blacklist here. So everything from will be open this bracket to start of this blacklist. So if we just highlight all of that until it just entered on a couple of lines so we can see what we're working with and then we want to do the same again for under here. This is where the flat list is closed and this is where that bracket would have been closed . So if we just closed this and this is now, what was I rent direct him. We need to make a few changes here because obviously this was using the item variable that the flat list provides. So we're going to change this to actually use the item object we set up here in the state. So if we go back down every time, every place where we are referencing item, we're gonna change this to look for this stock state. So like him, The case we just update thes of ones were actually copy this just to say, with some time, they were gonna paste in here and here on here. I'm here. Okay, so it almost done with this part. But we just need Teoh at a check in here. So this code is only shown for these components are only, uh, displayed on the screen. If search results the reset here, if I search result is one. So if I search result is empty or zero, we don't want to be running this piece of code because I always think we won't have the item set. And it's good, cause us a number of issues. So we're gonna go up to here and we're gonna make a if statement to check. Yeah, the searchers hold is one. So again, it is quite straightforward. We just go for this dot State search results. April's one and a question mark will be open a bracket, and we just want to move this. It's the bottom of this element. Just here was component. Does that seem closing all of that response code here and then we also want Teoh. Um, just play something if such result is zero. So if this is false Soviet, uh, Colin here on open another bracket again. And then here straight one on display. Uh, Erin stable again. There isn't quite the best word for this, but it will do for now. So if we scroll back down with honest out of you, I just had a little bit of styling just so that this is centered in the screens reflects of one. Just my content to the center, a line item to the center and then inside. Today we're just gonna add some text and invest will then cold the variable we were talking about before. So again, this is even actually written too much new coated. But we just removed the flat list. Check this. The state to see if there was a search result, then if no prints now, our era. Now, you may have noticed this code down here. This is just what we had, uh, instead of our alert box. So again, if you scroll to the towards the end of the course, you'll see the extra video on how to customise this. But don't worry about that for now. We're not gonna be changing any of this so again up here, we can actually save this now and see what is actually happening when this page it's opened . Okay, so if we navigate to the such screen, that's we still have a mission because we're still actually no using the search screen here . So if we just update, uh, up Js to use the search, we revel in the home screen, wish to see changes. Okay, so now we're gonna never get to the such screen. And you can see we have a basically empty screen. We're still the the logo at the top and search for a city. Okay, so every scroll down. Now we can see that this is looking OK, but we will see need to add a couple more elements that will allow us to actually make on perform searches 32. Final changes to improve the CityWeather app: The next thing we need to do is add a text input component and start to create the components on the screen up here so we can actually perform searches. So to start this, when you just go to the top and import the text input component, so for now, let's go back down. We can now use this in a screen. So to start with, we want to contain all of the's components inside of you and then we're going to need a text component. Head would just say search for city and then we're going to jump straight in on add text component or text input component. So again, it just add text input like this on. Now we're going to start to use the props that are for the text input. So you can also find these on the react native docks which will look at in a moment. But first, listen to start typing out the props that we need to you. So the 1st 1 is on chains text. Now this prop you can call a function each time you type a new character into the inputs drinks. This is where we're gonna update the search input field up here or may correct create a separate field This But anyway, so So unchanged texts, text when we opened our brackets, Then we have this this bracket here, which is the the variable we want to use. You could you could just put t here, but let us put text to make it more or less what we're working with. We're going to send this to a function on the function we're gonna use for this is to directly update the state, and then we're gonna literally set this to such input, and then we just simply say text now what? This will actually, um What this line will do is it will update the state each time you type a new letter into the input box. But for this example, we don't want to be calling the A P I every time someone types in you, uh, a new character into the into the box. But if we wanted to, we could call a function here instead of the state that would actually call the A p I. But we're going to actually be running this separately via a button. Essentially. So what? We also want to do is set a value prop. So this is also gonna be such input. This is this dot state and such input. So I was gonna ask him basic styling for a text input just so that the component stands out a little bit more. So we give it a width of around 80%. A little bit of padding, margin as well on and a background color that would just make sure we change the text color as well. This should help, uh, text input. Actually. Stand out one screen and then don't forget to actually close off the component exists itself contain component, unlike these ones here that you have to open and close separately. And then finally, we actually want Teoh create some sort of button or touchable component we can have on the screen. So, as in previous videos, we're gonna use touch more. Highlight. This is really gonna going to have the function is gonna actually perform the search. So again, as we've used in previous, um, precedents, we call a function just here, and its functions cannot be called search city. We haven't would create this next, but don't worry about that. for now on then. Just close this off here and then inside this will have another text element which will say such so, if we saved this now, well, should see us. Um, but you haven't closed off this touchable highlight. Just make sure you got the indentation ins. Correct? We like this Move to the search screen. Okay, So before we add a new styling, we can see that we have a text input here. Actual button, which, uh, is called a function doesn't exist just why this errors occurred. But all of the components we want are actually on the screen. So now let's actually go through and add a little bit more styling before we actually go to create this such city function. So we'll start with the touchable highlight here. We're going to add a background color. Let's just say a gray background for now. Putting of around 20. We just wanna have slightly rounded edges. We're gonna set of border radius off eight, and then for the actual text input, we're going to increase the front size slightly to around 14 Mary 16 14. Somebody best and will make the color white just to stand out on this great background. And then just before we save this, we're gonna have some styling up here, so probably sent to the text. It's since that moment, but we haven't actually adjusted this overall pair of component here, which will do next that we need to send her a text. Well, that's, um, line height, some padding, and increase the fun size as well. And now we just had some more styling to the actual parent components for all of these items, so will align items to the center. Andi was settled with off around 90%. Let's just save this and see how this looks now, Okay, this is what we're looking for. So we have, uh, text component of the top here, that soft like the heading for this search area. We have the actual text input which weaken type into cada cities, and then a touchable highlight component of text. Inside the axe essentially is a button that's gonna call this search city function. So now we actually going to create the function that will search four cities. This is gonna be a really simple function, So let's just scroll up to the top of our screen. And we can add this just underneath this constructor. So we're going to start by just typing such city. This is a new function. So we just open our function like this. Andi, all this is actually going to do is cool. Fetch city temperature and we're gonna pass in our search input, which again we are setting just hear from the state. So this is just gonna call this state search. So if we saved this now, we should see this were actually update what we're displaying done here. So if we type of city like the examples before we'll select London, we're gonna search. Okay? It looks that we haven't quite removed all of the are areas. Yeah, it's just here. So if we remove this, how about a PR request? Just a passing in the city name. So again. Earlier in the last video, we removed the extra promises from this function. But we have missed out the country that we had in the a p I courts another brief. Remove this which right again and you can see we have this result. But I starting isn't quite right. There's a few, um, issues just here which need to address first. But we should notice that the on press event and everything I certainly emojis and the color styling is all still working. This is good, but we just need to make a few adjustments to ensure that our actual design isn't messed up when we have our items appearing here. So to fix this problem where the actual response pushes and mrs though the styling already to do is actually change two lines off styling on our screen. So the 1st 1 is done here in the container where we are company centering the justified content option. We want changes to flex Stop, which, as we saw inthe e flex book section, actually makes the elements start from the top or the side of the screen. But in this case, it away from the top of the screen on the So if we say this now, you'll see that, um, this issue is almost fixed. But what we want to do next is actually ensure that this response here spans the entire width of the screen. Now there's a number of ways we can actually do this. So going to go to the road objects here, which, as we can see, is applied to I have you component in a result, and we just want this to goes old way across the screen. Now for this simulator. I know the actual weight from the screen, so it's 300 75 quite. Type that in and save in search for another city. We can say this is now just playing nicely on the screen. Now there's another way you can actually get the actual dimensions off the screen using a, I think what the dimensions that we have to import. But if you can find the information to do this in a advanced video A. To the end of this course. But for now, we've now looked out at a tap navigator to weather script weather app, add a text input and then search to actually look up the A P I and find the result and add it to the screen. So it's actually quite a nice, uh, feature to city weapon 33. Add improved styling for alert box.: Welcome back in this advanced bonus video, we're going to be looking at how to actually improve the styling of the alert box in the city weather app to look something like this. So as you can see, we're no longer using the standard basic alert motile window that shone instead, we have our own custom designed, um, little, uh, overlay here with a button to close, Uh, the text that we want to display and also this Grady and background color and some slight shadow effect. Um, behind the So in this video, we're going to be looking at how to actually, uh, take what we had before and move it into this new way of displaying the data. So the first changes were actually going to be looking to make is setting a actual separate view component that's gonna hold all of this overlay display that we want to add. So we do this by going down to the bottom off this main parent view component and adding some new codes. All we want to stop by doing is opening a curly bracket. Andi making an if statement. So this is gonna be as simple as checking the state for a variable. We're going to be added next called new. A lot of it is gonna check if this is set, uh, toe one. So if this is true, we want to run, um, on display, some actual code in inside these brackets just here. So now we're going to put a simple view component with some texts inside. So this is incredibly simple at the moment. And then we want to actually add something that will display if this is votes, so it is gonna have. If this is false, this is what this character does here. Then if it's small, it's just gonna show nothing, so just be empty. So what we have now is this Ah, that list component finishes, and then we just at this just before the main parent component is closed. So if we run this at the moment, nothing actually happened. So what we need to do is just make sure there won't be any errors, because we added a this thats new new alert variable from the state. So that seemed to make sure that we actually set this when we set the state for the first time. So we're just I didn't knew a lot and set this as zero. So obviously, if we have this set zero, this will be false and nothing will happen. So if we just save this now, we will see that if we tap something, nothing's gonna happen and you can't see anything here. If we just used to show you what's actually going on here. If we set this as one and say you can see it as hello, right at the bottom just here. So obviously, what we need to do is force this view component to float above every other item in this screen. So we do this by adding some natural styling, so we'll start by just adding their styling in here. So what we're gonna do is create a new in line style for him For this component, we're going to give it a flex of one. What's he gonna justify? Contents. Everything incented like Horizon's sleek Andi vertically. Andi, we're gonna actually a swell set the positions. This is what allows this component to float above everything else. So we're gonna set position Teoh, Absolute. And then we're going to position this from the top. So zero from the top and zero from the left, and we're gonna make sure it takes up the whole screen. Okay, sweetie, if you look without it so far, flecks of one so that it takes up all the space available to it. We've sent it horizontally with sensitive vertically. We've made it be positioned. Absolute. We've positioned it zero distance from the top of the screen and zero distance from the left of the screen. And the high is 100% on the way. It is 100% now. One last thing we're gonna add is a background color on. We're gonna use a Nagy. Be a value for this, that, um, syrup with five. So it should be a very, very slight, Um uh, gray background We could have had. So if we save this now, see, the actress felt position on just fix that. So now you can see we have the, um, attributes are doing exactly what I would expect. So we have the over late has taken up the entire screen. We have this light gray background on the item saying hello. So if we actually try and tap on any of the items now you can see it. There's no interaction because this component is taking up the whole of the screen. Now, this isn't actually what we want, but if you think about the effect this will cause So if we go back and set this new alert, um 20 so it doesn't show automatically and run the app. You can see that we have the up displaying like this. We can interact still, just click it. Um yeah, and we'll get people. Er so we want to do now is change the, um touchable highlight that we have on each of these rows. So instead of calling, the alert is actually going to open or not open. There's gonna change this new alor variable in estates from 0 to 1 so there will actually start making the overlay appear so again, this is quite straightforward once you see how it's done. So this is we're recording the alert function, so we'll just take this for now. Onda, come into our up here. Just remember what we've We've had what we've used. We're gonna change this now. So instead of a lot, it's gonna say this sect state. Then we went knew a lot three set has one. So if we never run this again, and then we interact with something so say this right here. We don't have that overly. So now we can see how this, um, touchable highlight can actually be used with the impress event to change the state straight away on how this could be used. Actually make a component display on the screen that previously wasn't being used. So the next we need to do is actually change this from being just aesthetic component only has one, um, Element three something that we can actually set the text. It's gonna be shown as well and have another view component inside this main component here . Don't have actual styling on to show the actual box that we're gonna show in the middle there. Okay, so what we want to do now is actually start Teoh, um, ensure that this text component is actually enclosed inside another few component. So this will be the component that we actually add. Ask dialing to that has the the color background to one on the new design of this box. That will be a around message. So without a new view component like this, and we're gonna set some styling straight away. So what we want to add for now is something that would actually last set the height and the width of this element. So let's just see what will actually work. So we want a wit? Uh, no. All the way across the screen, but perhaps maybe 75% Onda high of around on 90. So because we don't need too much here, we only had one world real line here, and we just need space to it on some sort off close button. So 90 should be enough space here. So if we say this again now, what we'll actually do is set a background color just so we can see what we have here. So if we interactive element we can see now we actually have a box that is exactly mentioned. So it's gotta whip of 75% on a high of 90. Obviously, you want to go further than just this, but this helps us see what we have right now so similar to what we did in the module building out thes Reuters. We want to add a Grady int just to give this element means that even stand out a little bit more. So also going to enclose this text element with a linear ingredient component. So we'll set this tiu have two colors as well. So again, we create the prop on inside human needs an array. And these are two colors that I've seen that work quite nice to have each other. So be 136 a eight a. And the other color is 267 871 These are going to be at a grating colors weaken. You know, choose whatever colors you want here. So don't I just use these if you don't want to? Never been used to Stark Brock creating array, Nothing to go from zero angle. And then a 2nd 1 would be zero point. Um, 65 So, again, you can changes around us. Well, if you if you want to. So we're close this here and make sure that we actually, uh, closest office Well, indented text. Actually, his props should be intensity as well. So if we save this and I said we have so far. So obviously the actual overall height off this Grady in is only going Teoh be what we're actually contained inside. So it's actually the height of this text component, which isn't quite what we want. So let's set some more styling onto this actual grating component. So again, we'll use this problem going right in line for now. So we're going to first set a flex of one. Andi, maybe let's, uh, curve thes borders a little bit because those sharp edges unquiet what we want for this. Just this example. So it's that border radius here. Call. Um, maybe 20. Yes. Again. Save this and see how it looks so far. Okay, so this is starting to look a bit smoother. Now. What you noticed straightaway is this horrible white edge. This is just because we set this background color over here so we can actually move this now because we only had that to see the size and space of his hatred box if we removed this and have a look what we have again beings here. Much smoother looking box already. So it's already starting to look much more designed. Then the default a lot box were using before. So the next thing we want to do is actually choose the techs that's gonna be shown. So here, right now we have Hello. Which is set down here, obviously, is what we want to show. You want to make this be a dynamic, very bit of content that we can change based on the ice and description of the same before . So any ideas we might use to this bearing in mind when we want to set state to change this new alert variable. We could set this right in here. So for this actual Texan, when you want to do something very, very similar So we're gonna change this to again, use a variable from the state and we're just call this a lot. Um, message. So again, if you look what we have here, it's very similar to the way we're using this new alert. Very bored inside the state. So up where we are setting the new alert. Very well. We're gonna also set me a lot message. It's item description. So if we save this and run it again now and check what we have, you can see this is actually showing the data we want for each of these roads. Notice we haven't got close button yet. So before we start to actually style this text, we're gonna look at how we can actually let the user have a button or touchable highlight or some type of interactive component. It's a close, this overly. That's what we're gonna be working on next. So if we scroll back down to where we have overlay so again, here's the text. We're gonna go underneath this text. Andi creates a touch more highlight. So we're gonna do exactly the same as we had up here. So we're gonna send underlay color. Andi, we're also gonna add another on press event and this will essentially river everything we're setting up here. So we're going to revert newer back to one and change the alert message to be empty. So I see Can imagine this will actually remove this and remove the, um, actual overlay box from displaying. So let's actually do this and show you So again, we have to actually make sure this is displaying something. Then we close off each of these elements. So if we just check that everything, uh, is correct and the safest now interactive one of thes rose, you can see we now have a actual bit of text here that looks very, very similar. That just has closed, but they actually tap on this. It closes the whole overlay, which is quite powerful. So you can see how these on press events and interacting with the state when combined with ease. If statements for these piece of code on this can actually really powerful to have all of these interactive elements within your actual screens, the next mail continue to style the rest of these elements to get a result that will look a bit more appealing than interest, these two elements told beside each other. So first, let's make sure that these elements air space right at the top and bottom of this motive unless actually sent to the text as well. So start by going back into the ingredients styling on we were sets a, um, a space between option for justify content. So if we say this right away, you'll see that this now has made sure these items are positioned right at the top and right at the bottom off the parent component that they're inside. So now we want to actually set some styling so Let's go to the alert message on the just the font size that citizen. 16 The color. Think white funding for it. It better here handsome petting, because this is quite squished up against the top. And then we'll align the text to the Centris works again. It's pushed up against the society, especially have the, um, the rounded edges. So if we saved this one and see how this looks, there goes a lot better already. Start to see how nice is could look so very, very similar. Forward. The clothes text will go in set style. This one will sets and front Wait just toe. Miss Tex, look a bit more interactive. Probably set this Texas white again also will add some padding. Andi will align it to the center. Let's just see how this looks. That's their ghost is starting to look a lot nicer already. And then just to finish this off, we want to add a slight shadow to this component and maybe a little bit more padding because he's doing quite right. So let's go back to the Grady in, and that's amore styling. So the first to settle a bit of cutting this safe five. And then we went, well, a shadow. So for this example, going to do a very, very simple shadow. So I put this on a new line, Just weaken. Sure, we're adding here. So first, without a shadow color. So here we were just at a black shadow, and then we need to set the shadow offset. This is slightly different to other styling options in the this actual property requires an object which sets a wit and the height. But then, partner, you just carry on. So this is that Whip zero, but a height of two. And then we just have to set the A pay city off this shadow. So that's a 0.3 and then a radius for this, Should I? Okay, so if we save this now, let's see how this is looking. There you go. So this is how you can actually create more, um, styled and custom interactions for your users. This instead of using the default and plain looking alert box, we've created our own motile overlay that we've customised and designed to really fit our needs for this particular 34. FlatList in reverse (Inverted prop): Welcome back. Now, in this bonus video, we're going to look at a special prop that's on the flat list component that allows you to invert a flat list. So if you look at this example, here is this is a normal flat list with the data we've set in this state up here. So 11 numbers 1 to 5. And if we refresh this, thanks place close to its freshness. We just pulled down. And you can see that this refresh function is just waiting a second before it, uh, changes the state. Now, if this was a a messaging app, for example, where you've got a conversation of users history here, you want to be able to scroll down to see the older messages and then refreshing new messages from the bottom. So this is easy to do in react. You just use a flat list on. Do you use this prop here called inverted? So if we take with this comment, naturally, switch this prop to say true, let's see what happens. So there you go. This is now showing the older items at top and the newest items at the bottom. But more importantly than that if we try and scroll down, you can see this doesn't course the flatness to refresh. But if we pull this up, we're now calling the refresh function. So this is a really easy way to actually use in things like messaging, perhaps even notifications on different sorts of needs for your maps that your building using a flat list so you have to do is use this inverted prop and set it to True. Now, if you want to, then set this back. Teoh, You know the default way You could just remove this is proper together or change it to say false. But this is a really simple way. Teoh actually invite your lists about having to actually over to the data. It'll see anything you go. That's the inverted problem. 35. How to fix errors: Welcome back. Now, in this bonus video, we're going to look into different ways. You can deep park your at now The main sort of where you would do this is by looking at the error message you get on natural screen here. So if we break one of these lines of code just to force an error, they should do it. Okay, So as you can see, we've taken this closing bracket away. So there's an error. But what this shows us is the line off file that has the error. So first it shows the file that has the air. So for this example, it's app dot Js This is the flower in and then the line. So as you can see, it's what this is saying, Line 20. But we know it's this this line just to now. This is why you want to actually look around thes lines. But most of the time this is pretty accurate and will take you straight to the line that has the issue. So if we say this again and click reloads, we'll see the actors working as normal. But we want to actually look out for is any sort off issue around this whole thing. It could even be the actual function itself. So just because it says that line doesn't necessarily mean that's where it is. But back to the simulator. There's also a way you can look a remote debugging. So, for example, if we just force this to shake here, we can actually debug app on using chrome. So if we click this debug remote Js, you'll open a browser in a new type in crime and Rachael sh actually show us what's happening. So if we open the, uh development tools down here and click on console, any change we to in the up now? So if we forces to reload now that you can see as this loads up, we can see the interactions here. So if we actually add a lot to the console in this function here, just something simple for now. And if we saved this and now we're fresh this flat list, you can see that actual debugging options of really interactive. So if we move this to get more space, we can get into one of the props the state and all of the different attributes that this, um object has been locked to the console. Seacon log any type of data you wish like this and actually interactive it, which is a lot easier than using the standard debugging that you would normally have here. As you can see, because we're debugging remotely, this won't show any any logs inside our terminal window. But even even saying that when you have logged them into the terminal window, your actual actually quite limited in terms of what you can do. So as you can see and creamy, we can look, we can open different objects, close them again and really take a closer look at what we're working with. Another really useful tool in terms of debugging is stack overflow. Now, if you haven't heard of this before, you should really check it out. So I just close this debugging tool we're using before and open up more space here. So expect Overflow is is basically a a site that has loads of questions on many different languages. But if you search by a specific type of question like this, you can start to find questions and answers on so many different uh, types of issues. You might come into. So the more specific you can be with your searches, the more likely you'll find something. But if you were to look at say, you had an issue with a flat list, for example, something like this. So if we look it this one here, so I If if you can't find anything that actually matches the problem you're having, you can ask your own question. But I would recommend looking first to see if there's any conversations that are similar to the problem you're having. So if you scroll down and after you've read the actual question on, look at the conversations, this isn't a great example. I'm free check on this one, says Persons. Ask the question here and there's an answer. And then in the answers, there's bourbon conversations now. This can be a really used away, too. See things you might have slightly misspell or issues that you might have had. So if we look for enough, for example, here, strong find one has a few more answers. This one is trying to use fire base with react native. So again, his that question. They showed an example of the code that used in they provided lots of debugging information , and then down here we can see more of the answers that they've had. So, for example, here you can see the first answer wasn't wasn't too helpful with the second answer should have Bean recommend being. They've really got into debt from what could be the problem here. And as you can see, this one has a tick next to it, which means this is the accepted answer. So you should normally look to see if there's been an accepted answer on that usually will help but trying not to copy and paste code because it is really not good habit to get into . So you'd only want to do this when you really are stuck and you've already checked the docks for certain issues. So if you are trying to find the height of whip, or if you're using a certain component and you're having a problem, always check back to the docks first on, like read through the different ways it could be used. The different props you can interact with on that can really help to find an issue that, because most of the problems will be getting into probably are related to, um, not having the correct type of data that you're sending for each individual prop, for example, this one would have to be a bull, whereas this one is normally an array or an object. So it's normally simple things like that that can cause an issue. But just make sure that you first check the docks. And then, if you still struggling and can't find anything, I'd recommend going to stack, overflow and type again. Either the error message will get in or into the search box. Or, if you can't find anything, then ask your own question and try and be as detailed as possible. So, for example, here, this person's but really detailed sentence about what's happening. An example of code, obviously not the whole project, but just a snippets around whether problem you think the problem, maybe, and then some type of debugging information, or screenshots, and then make sure you actually say it's what version you're using. This could really help people now, right down, uh, the problems you're having taken even replicated themselves. This is one way of finding solutions, and if you're still struggling after that because we're using Expo, you can actually also asked a question in the Expo forum. So you can see at the bottom of each of the docks pages. There's a question to ask on our forums. So if you click on this, it will open up a new tab. You need to first register an account, but you can actually read the questions about looking in on. This will have a lot of similar Teoh Stack overflow a lot of questions and answers, but completely based around Expo. And you can also find out what features they're bringing out next as well. So they are really good team Teoh Avery Responsive of questions. They get back quite quickly. Motor time. They'll answer a question of in 2 to 3 days, sometimes even quicker. So it's another really useful tool, and then alongside this is also get up. Um, this is slightly It's not as easy to find answers as it is on The other sites are shown. But if you find the right project, So, for example, if we look for Expo Andi, find the official environments. This is for the expo, um, sort of GeoEye interface. Before you look at the X sdk and then go to issues. It's This probably isn't the best example. We're going to the Expo team history confined there all the different projects they're working on, so it is a native component list, then issues. So if you're if you can find the correct project that you're welcome. If this could be when you're using external components as well, you can find their actual get hub project. Look for all the issue, so don't just like the open ones. And then you can find all the past issues that bean Andi. Click onto a certain conversation and see if an answer has been been mentioned in here. Sometimes you will be able to find a lot thing. So this is the official Expo project. As you can see, there's 318 open issues. So if we take away open there, we can see there's been another favor well over 1.5 1000 other issues as well, which might seem like a lot base, really quite love, actually. And if you look any of thes different issues that have been opened, let's try to find one that's got quite a lot of, uh, people using this this is for the the Lottie component, which is to do with animations, I think, made by A, B and B, you can scroll down and see all the different people that have interactive with this issue on quality. People are really helpful. So just again try and be as detailed as possible with problems similar to on Stack Overflow . But I always try and look to see if there has Bean in answer to a question first, and also you can post a question into the question and answer section of. For this course on, uh, everyone will try and help. In general, the rack native and expert communities are really, really helpful, So I'm sure you're going to find solutions to any of the problems you may find to get into a swell. 36. Using dimensions: in this video, we're going to look at how we can use the dimensions import to be able to get the height and width of the screen. Teoh actually style elements and use this for further functions and all sorts of different calculations you can do based on the height and width of the screen. So to get started risking import dimensions from react native like this and then we're actually gonna test this out up here first before we actually use anything on the screen. So the first thing you want to do is talking dimensions and then as it get function. And this is what you pass in Windows. This is the actual, um, the screen size essentially and then we just don't with don't height on. So if we alert this now, we should actually get a a pop up on act. When we load this, that will show us the actual whipped from the screen. So if we save this now, you can see here. This is the actual whipped off screen. And if we change this to height, that is the high pass screen now on its own like that, ISS is not very helpful But when you, um, start styling different elements on your screen and start getting more complicated and detailed types of styles you might want Teoh use dynamic styling on this is where the actual dimensions could be really useful. So, for example, we have this whip attribute here that we've set to 375. As we actually know, this is the width of the screen. But if we change this to actually use the dimensions and the whip variable, this can save us a lot of time on actually helped have a really dynamic app. So again, if we and I used the example we have in our city up, you can see here this is going the whole way across the screen. Whereas if we actually remove this Onda had something different say to hundreds, which we know is a lot smaller states around theater to here. You can see the difference between having to actually type in and keep changing on Justin the width versus actually using the dimensions which, as you can see it with the screen and so yet dimensions a really useful way and quite easy to actually get started with. Just have to make sure that you import dimensions from reactor native and then he can use them easily in your maps like this. 37. How to use custom fonts: Hello and welcome to this week's rusty courses. Video all about using custom fonts in rack Native. He's an expo. Let's get started. So first need to actually make sure you have the front file that you want to be using. So to give you an example, I have my phone. Just here is called Poppins Bold, and it's in the Assets folder on I can access it just here like this. So that's what you need to get started. Then we can actually move into the code. So this is just a normal reactor. Native app cell using Expo so as to create react Native APP utility. You can find more information about this on the official react docks. So what you want to do then is actually start to just open editor again. So the simulator. So if you look at this code, you can see that right now we're not using any custom fonts at all. And it's not just a simple as changing the fund family done here. Yes, it's not just a simple at in the front family down here, Andi adding your front name, which for me is Poppins. Bold as you can see from the names have fun. Just here you have to actually use a apart expo called assets and fault. So to start using this, we're gonna jump up to the top here and import these from explain. So it's the same sort of format as all of the other things you would need. Teoh import. And the names are asset. And I thought and again, just unimportant from Expo. So once you have this has just save it. Check that everything is running okay in a simulator, as you can see here, where we just tried to add form, family has gotten error because we haven't actually loaded in this fun. So I guess I'll take that way. So we have to worry about that for now. So if we just reload it, we should see the Every thin is running. Okay, so when he added to actually do next is make a check to see if this point is loaded. And if no, wait for the fund to be ready before we run the rest of the page. So what we're gonna do is add a step F statement in here to actually check if the phone has been loaded or no. So we'll stop by making a new line just here because you have to have at least one view component in your return function so we can have this in here and it'll be fine. So we start just by hiding in a simple check just here. Sweet. Check the state of something like front loaded and make sure this is true. So if this is true, we're gonna run this CO just here. And if it is false, we just had a separate view with the text component just saying loading in close. That will Exactly. Okay, So that is almost what we need Just to check this part, we also need to set the state. So this would just make sure that the fund loaded terrible is actually actually exists before we go and check this page so it sets his pulse to begin with. So if we run this now, you should see Well, firstly, nothing's happening because we haven't as early as any styling. Just hear this element is hidden off the screen, so free. Just add a little bit of styling. This copy s one. Here. We could even remove this view component, actually, because there's already nestled inside the other component. Okay, so there we go, had a couple of issues there, make sure you're using these curly brackets parentheses, so everything's okay. So now you can see that this is waiting the front loaded to be true before anything else happens in app. So this wouldn't necessarily just be a text element. This could be a stack navigator or Tab Navigator or anything else you actually want. Tohave run for your app. But for us, this is just a text element. This is great for now. So now let's move on to actually loading in this fun for us to actually start and change this one loaded variable. Let's start by creating a new function on this is gonna be a synchronous. So it has to be completed for Well, there has to be a cool back before anything will actually happen. This is gonna be component spelt that wrong component did mount so easy. Not so far. And then, once just that await indented properly, funds load a sink. So this is an expo function that would actually make sure that we're loading in this fun. So what? It actually takes in is the name of the fun. We could have any name we want here, but it's easier if you actually use the name of the fund. So for us again, this is Poppins bold. And then we literally just set the path. This is similar. If you're using external images or anything like that. So you just say require and then we want to actually find the path that are fun is located . So if we just check in this project again, it's inside assets. So this 0.4 slash gets us to the root of that folder. They want to check in assets. And then here is so Poppins, and that's not t t f just closest wagon. So we're almost there now, So we actually need Teoh on a then return so we can actually wait for this to complete before we continue on running the code. That's just make sure we so this helped greatly. Okay, so you can see we're running this function will just call back just here, and then we need to set something to actually tell the render function that this has been loaded. So we're going to do It's set the state on update Want loaded to be true. So we save this. Now my simulators needs to be, uh, working up. Okay, Now you can see a simulator is back up and running again. But obviously this fun is still the same default fun as before, but you can see the text has actually changed, So this means a fun is ready and it is all loaded. So let's go down, Teoh here and actually change the styling that we want to use here. So first, let's actually make a new style. Because if we and this fun family thing back into the paragraph is gonna be running exactly when we're running this loading text, which is before the fund has loaded, let's just change this around. Let's leave. This is paragraph one on which existed paragraph two. So if we just copy and paste this and add this as one, we can remove the front here, change this to to switch this back. And if we load this now, it should change the phone whilst it loads. There we have it. That's how easily you can actually add fonts in react. Native using Expo. It's important to make sure they actually wait for the fun to be loaded before you call in the page. Sometimes it will work without. In this check, we need to make sure they always load the front in first. And I would say it's always a good practice to add this check. Because sometimes even if you're in a really fast Internet connection, it could be a split second that that user is trying to access that fun. And if it's happening too quickly, it's gonna cause an error on the whole app could crash something of smallest that could cause that issue is always add in this check. It's best to make sure you perform in this front loader sink on the very first page of your app. So on the Apogee s is one of the best place to put this, and then you can use these fonts throughout your whole app. You can add more than one fun here as well. So if we're to change this, um, we could add Poppins medium or something like that, Nick and accesses many funds as you need. Okay, so thanks for watching. This is how easy it is to actually add custom fonts in rack Native using Expo again. Thanks for watching 38. Extra: React Native Navigation Examples (Stack Navigator): Welcome to this week's Rusty Courses Video. Today we're gonna be looking into the stack Navigator in react native on. We're gonna be using Expo snack to work on it this week. So when I'm gonna be adding things to my dependencies, just you need to make sure that you actually make these changes inside. If your terminal So we're gonna get started straightaway by adding react navigation to our list of dependencies on the version we're going to be using for this is 2.5 point one. So we'll just save this with the default project. Name is given us and then we're gonna movinto are up Js to the first we're going to do is actually import react navigation. That's why I want to actually do is define two screens that we can switch between inside our this is gonna think they're going to be a screen one and screen too. So we just write out both of these now. So start with screen to Actually, this is a smaller screen. So inside of this return function would just have a basic the component like this. But we're just sent this text on the screen a little bit nicer like this. Just make sure to close. Now, how much is safe again, and then in screen one, we're gonna have the same display just with just make sure we render this correctly. Okay, so these are exactly the same now, but we're going to add a button down here that will went tapped. It will move us from screen one to screen too. So for this to work, we had an impressive in like this. So we'll explain what this does in a moment when we have the rest of the code. But for now, we're just tidy off this button, and we're actually import button up here from react negative and save again the case. And now I'm actually running this on my phone. And I had a display of this in a moment on the side of the screen. You can see, uh, what is actually happening just here. So we have the basic view component on the text inside on a button. And then down here, we have a second screen that just has this text. So we're going to create down here is a stack that we're going to replace this default view that showed up for it when I act runs. So we're gonna replace this with that stack. So first, let's just right out Main Stack. So to do this for saying main stack equals create Stack Navigator, which we are importing from here at the top. So inside here, we're going to create inside these curly brackets are screens. So that screen one on exactly the same thing ball screen to accept change one instead to Okay, so here is a main stack. So all we're going to change next is down here. Inside this render function will replace this view with Main stack. I didn't safe. Just be sure. A swell to make sure that you have this inside brackets at the top here. So they were correctly importing this. So now we run this up, you can see that the default screen has shown like this. So we have a title bar along the top because we haven't actually set any navigation settings inside this object just here after this comma. This is where we can save ever ahead of should be showing our not so at the moment ahead of its showing just here. But we have a text here that says Screen one on the button underneath that says screen, too. So if we tap this, it moved to screen, too, and shows the different texts as you can see here for screen, too. And there's a button at the top. We can then click to move back to this screen. So essentially this button here is acting as a link between this first screen on the second screen. So this is what this coat does appear. So accessing this, which is this parent class at the top. And then we're accessing the props than a navigation part of the props which is controlled by this stack navigator. And they were used to navigate function to move to screen, too. Now this links up with the name just done here. So if we change this to to underscore one and then saved if we then tried toe access this button, it wasn't doing anything. But if we change it back, appear to be under school one and then saved, and if we then tried to activate this, it would work. So you just need to make sure that this always matches up to the name off the file down here. This is a quick video to show how stack navigation works in react, navigation and react Native. If you want to learn more about creating gaps in react native, check out the link in the description where you can find more videos in my course, Thanks fortune.