Building mobile apps with react native - from zero to almost hero | Lefteris Psitopoulos | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Building mobile apps with react native - from zero to almost hero

teacher avatar Lefteris Psitopoulos, Doing something great everyday

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

9 Lessons (1h 6m)
    • 1. Introduction

      0:38
    • 2. Tools installation

      1:08
    • 3. Bootstrap mobile app

      2:26
    • 4. React concepts

      2:12
    • 5. The search bar

      11:16
    • 6. Search results

      9:43
    • 7. Networking

      21:23
    • 8. Weather items

      16:42
    • 9. Farewell

      0:32
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

299

Students

--

Projects

About This Class

Ever wanted to create your own mobile application but never knew how? Gone are the days when in order to build mobile apps for Android and iOS you had to learn different programming languages and tools.

Here comes React Native, a framework built by facebook, and used to create apps like Uber, instagram and shortly, you. The best part, you only need to know JavaScript to get started.

In this course, we will use React Native with Expo, a framework that simplifies building mobile apps even more.

We will go through some basic React concepts and by the end of the course, we will build a simple weather application using an open source API, ready to be built and distributed on the stores both for iOS and Android.

In order to keep this course simple to follow along, we will only cover the surface. My purpose is to help you get started and build a foundation, instead of teaching you every single bit of react native. Such course would require multiple hours.

Ideally, you should have some background in JavaScript, otherwise it will be hard to follow along.

Meet Your Teacher

Teacher Profile Image

Lefteris Psitopoulos

Doing something great everyday

Teacher

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: Hey there, I'm left Federalists and the front-end developer. And together we'll build our first mobile application using React Native. React Native is created by Facebook, and it allows you to create mobile applications using JavaScript. So, yeah, in order to follow along, you have to at least understand how JavaScript works. It is important to note that on this course, we will not dive very deep into React native. I will show you the basics and give you a foundation in order to build something upon it. Along the course, we will create the symbol whether application using a freely available API without further ado. Let's go on. 2. Tools installation: Before we can start building our obligation, we first needed to install some tools. First, we need to install NodeJS for its package manager and p-n. So go to NodeJS.org and click this big green button. It will download the installer, which we will need to click and follow the steps in order to install Node.js on your computer. Now that we have NodeJS, we can go ahead and install export CLI. In order to do this, we need to open the terminal and type npm i minus g, which means globally install that package, I'm gonna tell you, and the package is Expo CLI. Hit enter and wait for it installed. Of course, we'll also need an editor to write R code. My personal preference is Visual Studio Code, which you can download at code dot Visual Studio.com. If you want to use an Android emulator or an iOS simulator, you need to install Android Studio over Xcode. That's it. We now have all the tools we need in order to start building our application. On the next video, we're gonna do just that. 3. Bootstrap mobile app: Are you ready for me to open the terminal and navigate to the directory you have your coding projects. For me, it is cold. So cd code. Now let's create our project. We have to run exploit Selye, innate. And let's name it. Awesome, whether it will show a list of options to choose from. And for right now, we will go with blank. It will take a couple of minutes to install, so wait for it. And when it's finished, go ahead and open the new folder that was created in your code editor. Now in that folder, you can see a bunch of files. There are assets and then the rest assured the node_modules, that classic node modules. And then there is app.js. In fact, an actual mobile application was created here. So let's open the simulator and see what it looks like. Go ahead and open the terminal inside your editor. And type expo starts. Oops, I'll start, Start. Now when we run this, it will open a dashboard from where we can choose many options. There is even a QR code if you want to run the application on your mobile phone, if you have export client installed, I will choose iOS simulator here. What this will do is open the simulator if it's not already open. Second, it will check if I already have the client installed. And third, it will bundle their obligation and push it to the simulator in order toward minute. Now as you can see, it asks me if I want to open it in x will hit open. And then the extra client is running. And we can see that this bundling down here, the obligation is already running and we can see some text year. Now let's go back to the code and play with it. A low. Let's hit Save. And thus you can see it refreshes the application on the spot. So whatever I type, load there, save and then boom, that x's here. Pretty simple, right? This was the easy part though, and it will get harder from the next video. So get ready. 4. React concepts: Before we start writing any code, I would like to talk about some react concepts. The first one I want to talk about is the state. The state is a planar objects that we know will change in time. For example, let's say we have a counter, and every time we click a button, this counter increases by one. This behavior should lie in the state. The second concept I want to talk about is the probes. The probes like the state is again an object, plane object, but this time we cannot change it. The probes object is usually passed from embarked component to a child component in order to determine the behavior or Howard components should look like, let's say for example, that we want to show a person card component. On the left side, we want to show an avatar, and on the right side we want to show some personal information. For example, the name, the age, and so on. Now, as you may have guessed, this person guard component will have two children, they Avatar and the personal info. Also, it will hold the whole person object inside its state and passed down to the Avatar and the personal info components only what is needed. For example, for the avatar component, we know that we only want to show the Burson image. There is no need to push down the whole person object inside the Avalon component. But yeah, what are components? Components are blocks of code that can live independently. For example, we talked about the avatar component. We can have this other component that takes care of, let's say, showing that person imaged as a circle and maybe on hover or on click the directors to the personal profile. What we need to do is create a new component named avatar, write the code that will take care of the behavior and then go ahead and use it wherever we wanted. For example, we mentioned the person card. Maybe we have, let's say comments, functionality. And we want to show the avatar data. We can just import the other component that show and throat there. So simple as that, we only write once, but what we want to use many times, that's all. Without further ado. Let's go write some code. 5. The search bar: Now that we learned about some basic react concepts, we're going to start writing some code. The first thing we're gonna do is to create the search bar for our cities. So let's go do that, just that. Let me get rid of the text here. And also the input. And chance it with the text input. React Native provides us many components we can use. One of them is a text input that Dixon would component takes many probes. One of them is the placeholder. Let's change the place holder to search for something. You'll see it's changed over here. Let's also change the text, the placeholder color, to make it more visible. Let's make it a black. Yeah, much better. Since this is an input, we can write whatever we want in it. But this value that for road goes nowhere because we'd not handle it. In order to handle the value of the text input, we have to create an on change text probe. That will be a function that will give us the text that was changed. And then let's console.log this value. The output will be shown here. So let's try something. See down here in the console, we can see what we are writing. Now we can take this and put it in a state value. Let's go do just that. So in order to create some state here, we will use the US State HUC const. Let's say city. Set city equals to use state. And the initial value will be an empty string. And now let's go back to the text input and make use of the Sydney value that we created. So value, it is a probe that texting but takes is equal to this city state value. Nice. Whenever we change the text, we want to make use of this head city settled function in order to update the value. So let Jane's console log to set city. Now let's go back here. And the console log this city. To see what happens. So let me save again. Nice. You see down here that the city is basically an empty string first. But let's go here and change it to, let's say San Francisco. You see down here it's updating correctly. All right, we now have the text in bold ready. What we should do is extract this functionality and put it in a separate component in order to make proper use of it. We do not want to clutter the ArcJS file with all the code in there. We want to break it into smaller components. So let's get rid of this console log and cut this code here. Nice. The next step is to create a new folder that wouldn't be named SRC. And when food all our code in there as committing a folder inside there and name it components. And inside this component, I will create a new file and I will name it search bar. This surge metafile will be a React component that will have the code we wrote before. Let's make a new component. So in order to create a new component, we need to import React from React, as you can see here. And then we export in new function. This new function will be named search bar for this component. And we have to make sure that we use a capital letter. Because for React to know that this is a component, it has to start with a capital letter. Get rid of this div here because dV is not valid in React Native. And let's paste the code we wrote before. In order to make it work, we have to make sure that we import their text input from React Native as we did before. And let's save it. Of course, you will notice that the value here, the city value endless set, city. A setter method is not something that we have in here. And actually we did not want to have it in here. We want to make use of probes. So in order to use probes, we have to make sure that we pass the probes inside our component. Let's leave it like this and go back to app.js. Inside of gs, we will import the new such bulk component that we created. Nice like this. As you can see, it's not working because they are such where component cannot find the viable city. We have to pass it down as a probe. Let's go back to the code and say city equals to a city like this. Now going back to ourselves bar component, we have to stay here inside the value ropes dot City, and there we have it. Now let's go and write something here. So San Fransisco, I would write, but as you can see, it's not working because it can also not find the sets A1 method. Let's go back to app.js and also passive the set city setter method as a probe sets the t equals two. Said City. Nice, like this. Same thing as with city. We have to go back here and change this to props, dot set city. Now going back to the app, we can start writing as we expect. So yeah, that's basically how probes work. We inside the app.js file, we have the variable that we want, but we pass it down as a probe to our sorrows. Multi-component search by component is a child of our app.js component, which makes use of these probes. We do not need this text input importing anymore. So let's get rid of it. Nice. Let's keep our files clean. Let me also get rid of the console because we don't need it anymore. I'm pretty sure you noticed that, uh, text input appears right in the middle of the screen. Would not want to have it here because we won't have it up the top. In order to do this, we have to get rid of those two lines in the stylesheet. Now we have another problem. The content of our component appears right at the top left corner. We did not want this either in order to make sure that everything appears when it should be, and this is not behind the status bar. We have to use the safe area, safe air via view component, R command area, the hue component that React Native provides. Let's put everything in here. Let me do this right now. And save. Now what happened? Where is our content? In order to fix this, we have to pass style in the safe area of u because right now it takes no space at all. Let's get use of the style we already have. Which will be styles. Come on, styles dot container. And get rid of the styles. Here from the view. As you can see, the content of our component is right, but it should be. Now the next thing I want to do is give some padding to our search bar and may be add some borders here down here to separate it from the rest of the screen. So let's go back to the search bar and give some style to the things the input. Style equals two styles, dot, oops, come on, styles dot search bar, let's say. Nice. In order to use styles, we have to create, of course, the style object, which will make use of the stylesheets. React Native provides us. So stylesheet dot create will be an object which will have a search bar object, which will in turn have some. Actually, this is CSS like so padding. Let's make it ten. C. There is some padding here and some padding here. And let's give it some background color to make it more visible. Background color. Let's make it red. You can see that there is some padding at the bottom, top left, and actually there is also padding at the right corner here. Let me show you. You see there is some space here that x does not go over the edge. Nice. Let me get rid of the background-color now. The next thing I want to add is some border bottom, as I said. So border bottom width equals to one. And then border bottom Kohler will be say, black. Goo ourselves bar is now separated from the rest of the screen. Pretty simple, right? On this video, you learned how to use a text input component that React Native provides. You learn how to create state, how to update it, and also how to pass down probes the child components. On the next video, we will go ahead and create the search list. So stay tuned. 6. Search results: In this video, we will make use of the flat list React native component in order to show the list of CPS that we're setting for, let's create a new component inside our components folder and name it search results. Let's make it a React component. Gets rid of the deal here. Nights. In order to create the list and React Native, we can use the flood list components that is provided to us when React Native. Let's close it. Next. Let's go back to app.js import Results component. Let's create the Fourier synthesis is enough. That's wasted as a probe. Here. It is good practice to make proper names are genetic as possible. This allows us to reuse the components in many places. Let's say that we had a second list of countries. If we made the proper name cities on this occasion, we would have to create another one for the countries. But ligand like this, naming the probe as a result, we can reuse it wherever we want. Back to the search results component. Let's make use of the props. Next, let's show the results into the flood list. In order to do this, we will use the data problem that the flood list thinks like this. But that's not the only thing we need. We also need to somehow show the results. In order to do this, we need to use the render item prop. Right now, for each city, we only have the name, which is a text. For this reason, we will make use of the text component of React Native text and make sure to also import it. Let's go back to the Rindler item prop and get the value of an item. Item dot name. Let's run the loop and we see nothing. Why? Let's find out. We will make use of console log here to see what the value of the item is. And also we need to return the text here. So let's open the console and see what's going on. As you can see here, the item is nested inside the item value that we passed here. We can make use of the structuring in order to get access to it. Otherwise, we would have to say item dot item, which makes no sense, right? So let's use this link. It's nice, as you can see here, the names of the CD's or are already showing, but it can meet. All right. Now let's put some separator between them. Let's make this more beautiful. First. And then I don't want to just show a dx here. I have wanted to create a separate unborn end. Like this. Naming items. As you can see here, I'm already using the structuring because I will only be using the item prop. I will not use any other approach. Though. This will be if you input it, also nice, which will in turn have text inside it. Where is it? Nowhere. And inside here we will show that item.name like this. Now, let's replace this text here with the item component. Nice. You can see the same thing shows. But this time I want to add some styling to the view. Another way towards tiles in the components is by putting them object inline, which we'll do right here. So a border bottom corner will be black and the border bottom width will be one. We also need some padding. Now that we showed the list of items, we need to also are the way to know something. Well, if we click on inside them, yeah, let's do this in a nice way to take care of starches in React Native is the use of a touchable without feedback component, not react made it provides. So let's go here outside the view and, um, close the view with attachable, without feedback component. Loops. Like this. All Database components take an on-premise prop. So let's use this. This probe takes a callback function that is called whenever we press the component. So let's use it. We want a console log. The item name. Will whenever I click the item. So let's clean the console and see if it works. I clicked on San Francisco. And here in the console you can see San Francisco, San Antonio, Athens. Here it seems to be working right. Now. The next logical thing to do is to save the selected item somewhere with this sample will be the state as low blog.js and create a new state variable, which we will name, result or selected wetter. And the center will be set selected. This one will initially be null. Let's now add the text here and there, the results, which will show selected value. Oops, select id, dot name or nothing selected. Whoops, what's wrong? Selected the name. Alright. Now this error happened because selected is null and we tried to access the name property, often node, which is not something that actually works. A new and cool way to fix this is my yard in a question mark right here. Let's save and see its working, and see nothing selected. Now let's go and take this edge selected setter and food. It doesn't probe inside the search result. Let's give it a name, said result. Actually, no, this is not a good name. And let's make it such selected into its actually live with the group name here. Equals two sets elected. Nice. Let's go inside that is old and put it right here inside the item. But this time, let's make it select equals two probes, dots at selected. And we will call it every time we press the touchable. So let's say it's Console logo to select. And actually let's change this to item. And let's save and see what happens when we click this and failed. And the reason it failed, because we used the destruction links here for the props object. The way to fix this wouldn't be the chains is to probes like down here or kidney structuring the probes items. Let's do this. Now if we save and click again, it will work. Unless you can see that the value is probably changing here every time I click something. Pretty awesome, right? We already have the basic parts of our application already. On the next video, we will create the networking salaries in order to get actual results from our API. See you there. 7. Networking : In order to give this course simple, I will not dive very deep into networking. This means that I will not make a whole network service in order to catch for errors. And let's say, for example, or handled different responses. I want to keep things simple and just give you a basic understanding. So yeah, let's do this. Now inside the SRC folder, let's create a new one. Name it service, a new file inside here and name it api dot js. Now inside this file, let's create a new variable and name it API. This will be an object that will have a get function. Normally, I would go ahead and create one for post and 14 and so on and so forth. But for the purpose of this course, when we don't need to do this, let's keep it simple. Now, get, we'll call fetch, which takes two parameters. The first one is the URL will recalling. This is the API endpoint, and the second one will be an object of parameters. Now since the Base URL of the APIs starting, let's create a new variable and name it base URL, which will hold the Base URL of the APA as you guessed it. So in here to a template literal and use the base URL like this. Now, the API we will be using is this one here, metal weather.com slash API. So let's copy it and go back to the code. Based it here. And now every time we call this getMethod, it will call the fetch method of JavaScript, which we'll use this base URL as the URL it will call. The second part of the URL should be the end point. Or maybe puff. I put it here. Path. Nice. And let's put some options inside the options object. First, we'll make use of the method, which will be get it simple as that. The next thing we'll do is to create a new function that will call the search end point of our API. And we'll also export this rancher in order to use it in other components. Const search city, let's call it, will be a function that will call the api dot get. Let's go to the API documentation. And if you notice here, there is this location shouts. So in order to search for location, we need to go to a caisson slash slash Curie. And the current will be, as you may have guessed it, whatever we put inside that text input that we created. So let's copy this and paste it in here. Nice. Actually, let's change it to template literal and paste again. And after the cubic, we need to have the value, of course, in order to be able to search. This will be a new variable named Curie. And I have a mistake here. Let's fix it. And also pass the Curie inside the cell say d method. Now in order to be able to use it, we have to export it. Let's save and we'll go back to app.js. In order to use it. We also have to import it. So I'll just do that. Serves city from SSD Services API. Now that we have it in here, let's call it a day with the sun. And then we get the response, partners it to JSON, our JSON. And then console log, they value the response. Nice. As you can see here, we've got an RA with many objects. So this is basically a list. And as you can see, the title for the first one is San Francisco, for the second one is San Diego. So basically the API responded with all the items that contain the value sum inside their name. For example, we also have Wu Sun here. It doesn't have to start with a value that we wrote. So let's close this. And we'll actually keep this, but we will keep this inside a US effect. Ok. Let me clean this up a little bit. I'll put this in here, remove this, remove this, and I will tell you how this works. When I'm finished. City. I also have to remove the old cities list we created to showcase. The less it is least. Ooh, it's gone. And what's the problem here? Cannot find valuable use effect. Yes, because I did not import it. Makes little sense. Cannot find valuable cities. Where, where, where, where are you? Who they are? I will name this results. And I will create another state value with results. Like these. Set results. Nice, and it will be an empty array. Now let's go back to use affect US. Effect is a React hook that takes two parameters. The first one is a callback function, and the second one is a dependency array. So yeah, what does this mean? Actually, it means that the callback function will be called the first time the component renders. And also every time the values inside the dependency alle chains. If we pass an empty dependency RA, the hook will only done the first time the components ons. So back to our code and basically say that hey, I want you to run this function every time the CT value chains s. Now we don't want to run this function always. And we don't want it to always be called with the value x1. So let's get rid of it and change it with the value of the City. Valuable. Also would not want to run this function if the value of the city is empty. So if it's not empty, this is why at, this means basically if it's true, if they value evaluates to true. So if city then do this, and then I do not want to console log it. Of course, I want to set it inside the results. Chains. It nice. Let's save and see what happened. Doesn't work. Let's find out. Nope. Something went completely wrong. Let's find out what actually it's not completely wrong. What happens is that if you remember, let me show you, let me show you console log R. Now, here, if you'll remember, every object, every, every item in the response has a title instead of name that I put inside here. So let's go back and change it. Itemname will have to be item title. So if and as you can see, we have all the values here. If I keep writing, not in here, but in here, let's say San Francisco, we have it here. But I want to more things. I wanted to show that there are no results when I type something that doesn't exist like this, for example. And they also want to know. Show the results list if have never searched for something. So let's get rid of this. And I'm down here. And let's create a React fragments. You can read more about React fragments on the recommendation of React. And what they want is the shore, the flood list, of course. But only show it if the items, the probes, results is true. Oops, not like this. Let me enclose this inside curly braces, like this. Cool. So when the probes dot results is true, then I want to show and the flood list. Otherwise, I want to show a text that we'll say no results. But I want this text to only be shown if there are actually no results, which means that they have started and not have found something meaningful. For example, I do not want to show it the first time. We will go back to app.js and make the results instead of an empty array b. No. So I don't want to show who's not here this while. So yeah, I don't want to show it always. I want to show it only if I have searched for something. In order to do this, I have to move the text inside here because I want to show it only if the prompts dot results is ooh. And MDR also evaluates the true. And I wanted to show it if they probes dot results has length. Now you might be wondering why there is an error here. There is narrow here, because every time we want to render something, we have to put it inside a parent component. For example, here, we returned two things, flat list and the text here. In order to probably do this, we have to enclose it inside the reactor fragment like this. Also, let us get rid of this and this. And then we go, since we have not searched for something, then no results, dex is not shown. But if let's say I go back again and type son, it will show the results. And if I say FF, for example, get will not be shown because I have a mistake here. Let's remove this because I, I was actually saying here, if there are results. So if I remove the second F, i believe that yeah, that bacteria is shown. This is my bad. So rewarded. Now if fixed did, and as you can see, it's not shown anymore. Also, if I let's say misspelled San Francisco, not here, but the, but in here and has put a K, It will show no results. Simple as that. And let's get rid of the text. And no result is still showing. In order to fix it, we have to go back to update yes. And also pass inside the search results. If we have searched for something. So if CT has actually value, let's name meet, searched. Just to say t. Actually CT length. No city. Just sit there and go back here. So basically we want to show it wherever there are, no sensor is out and they search, query is not empty. So let's use it. And probes dot searched. Like this. Let's see if not shown here. And then some, Let's not put a space and just type F. No results. Delete, delete, delete, delete. And we still have the results. We should. Now, as it was deleting the value, you might have noticed that it actually shows everything here that contains an s. And this is because it also searches when they just diabolic corrected here, let's say for example, E would not want to search for results for every character. But let's say we want to search only when the length of the search query is at least three characters. So let's go back to the US effect in here and say, when the CT is true and the CT dot length, oops, City dot length is more. Thumb, three characters or three characters. So let's try again. S. Nothing happens. Nothing happens. Son. And then put a space. And it freaked out. Why? Let's find out. Let's go in here and then console log acetyl nth. Wu, Wait, wait, wait, I know what happened. You have to get rid of this here. Here. So let us go back to the code and sun and it's searched the late. But if I keep deleting, it will not research. So if I could diameter say for example, I want to search for Athens. If I have a nothing t. Now think H and it searched. All right, we now have the results. How do we actually show the weather? Let us go back to the documentation. 8. Weather items: Now as we are able to select the weather, let's go ahead and show the weather for the next five days. Let's get rid of this text here. We will not need it anymore and we will replace it with a new component. You file week whether Node.js. We will need the props and less return a view. Once again, we will use the flightless component, the shoulder, whether items actually reload this and self close it. Let's fake this on for now and go back to app.js. Let's import week whether something happened, I did not involve the video component in the week, whether component from React Native and nights working. Actually to make sure that it's working. Let's put some text here, imported this time. And you can see the text here. This means that this component is actually shown on our page. Now let's open the terminal and cleans little bit and start looking for SAT. Let's click it and see the response that we have here. Now that all of this green, I want to show the name of the city, which in our response is called title. So first, let's bust the weather info inside the week whether component. And let's go back here. Actually, I will just talk through it in order to avoid using prompts. And let's put a text. Whether title, nice, San Francisco, let's click something else, San Antonio and then San Jose. Nice. Before we continue, let's make it a little bit bigger. We'll use inline styles again. Same style, font size. Let's make it 16. Over 18. Yeah, better. And let's make it bold. Let's give it some budding. And let's say ten. Now we have the name of the city. And what I want to happen is to actually hide the results whenever I have a city selected. Let's find out how to do this easily. So what I want is when I have whether info, this should not be shown to listen to this first and fix the rest later. So whether it's got a Fnet is whether not, so essentially when we have no whether info yet, we will show the list of cities. But when we click, which means when we actually set the selected city, whether inside the state, we will hide them and show this instead. So let's also show this when we have whether now there's also something missing that because if I go back here and start writing, let's say Athens, nothing will happen. So whenever I write something, I've opened the weather to be unset. What we will do is create a new method that we'll call this set city state method. And also make this whether valuable new whenever we type something. So cons set CT and delete selected when x2 and y2 function that, we'll set this ITI, the value here, and copy this, paste it here. And also, let's set weather, but we don't want to make, we don't want to call this set whether if it's already known. So if two weather then set whether null. Nice. Let's see if it actually works. So F, Yeah, as you can see, it shows the results and when I click it, nothing happens. Oh, yeah, it's worked. Let's finally fix this warning here. Now, if you click it, you will see that the wording says that that are missing keys for the items. Make sure to specify a key or ID property on each item or provide a customer key extractor. First, let's go with a key. If it does not work, we will use the extractor. Let's go to search results. What we'll try to do is inside the item, create a key prop. And they keep probe will be item dot id because we know that they navigate O E ID of the item is unique and it's actually restart. And some Francisco. So since this did not work, we will delete it and go back to the flat list. The flat list gives us this probe named key extractor. The key extractor is a function that takes the item and it needs to return a string. So we'll go with template literal and something unique from the item. So item, WE OID something. Let's see if it fixed it. Oops, not here. Leslie here? Yes, him to fix it. And if you notice, it's actually also foster none of them fix that. Let's go back to showing the weather, as you can see here. And that is why there is this constantly dated whether property and that is an array of objects. Each object contains information for the weather of the next five days. Since we are dealing with an array, we will use the flightless component. We already saw it in action. So let's go ahead and use it again. Let's change this empty array to whether dot, oops, come consolidated. Whether Let us just render concrete under item. If you remember, we have to restructure it in order to make our lives easier. And then let's just use a text to show they applicable date. Once we save the file, we can see the dates here. So once again, let's go ahead and create an item component comes item equals to function that takes the probes. Actually let's make it item and it will return a view. Let's import the view points already here. Nice. Let's also add a border style border bottom color as making a black, again, using n imagination at all. Border bottom width, one pixel, K. Let's call stock that text, but we have to hear the seed, so working. And also in the Styles, Let me also add some padding. Sen, excellence again. Nice. Now let's change this text here to the item. And the item. Awesome. Actually I want to give some more space between the title and they the items. So let me do that. Let's also min and max temperature. And let's go back to the item. Mux means. I don't like the way they, whether it's formatted temperatures. So let's just use integers. It's routing function, virus aids. Way better. Oops. Disclaimer for my American friends. Temperatures are actually in Celsius. It's not in Fahrenheit, so it's not the vat called in Santiago. Let's also put some hoarding Hoefler weather here. Along with the Nikon item. Like this person, I like it. Now, in order to add the Nikon, I want to add it on the left. So I'll wrap everything, all the text in 7w and an image here on the left. That's also import it like this. And in order to add the path to the image, we have to use the source prop. If we go back to the API, we can see that the weather states have a name, an abbreviation, and the Nikon, In order to use the correct icon, we have to follow this path and changed x to the appropriate state of the weather. So let's copy this and paste it here, actually inside a template literal, which will mean curly braces. Bias it here for now. And also, let's copy the URL. All of it, come on based here. And then all the x, we have to create a new variable. And we can see in the response here, it's cold weather, the state abbreviation. So let's comment out and change it with item.name. All of this. Let's bring back the application. There's actually an error here. So let's see what went wrong. My back. You are like this. I think. Now the reason the icons are not showing is because when we are dealing with network him and says, we have to specify the width and height of the icons. So let's create some style width, let's say 50 pixels, and then hide 50 pixels. We can now see the icons. But I want to show the icon on the left side and the rest of the information on the right side. And also, let's show the weather information rights under the icon. So let me remove it from here. Actually, let's just copy this whole text and delete this part. And also, let's put this under the image, actually under the image, a leg, this. Delete this. And also put everything inside of you. Style text, content, center line items. Much better. And then let's actually, let's first change the direction. So flex direction, column, sorry, row. Yeah, like this. And let's give some spacing here. Bordeaux margin, right? Then. Nice. And then, let's go back to this v here, then style. And let's put the content in the middle. So justify content Center, which is like this. And we're done. What I don't like it though is that they are not aligned and this happens because of the wording here. So let's actually put in macro. Eric was calm. So with this. And here, also let us make it much better much. And let's say you now have your own mobile application on your mobile phone. 9. Farewell: I want to thank you for coming to this far, and I really hope you enjoyed the course. If you have any questions regarding React Native or anything about the course, please feel free to ask me. We did not dive deep into React Native, and that was on purpose. I wanted to show you the basics and then let you find your own way. React Native is really huge and it would be tiring to make a single cause for it. So I only showed you the basics in order to make you confident to go on Iran. Thank you so much again, and I hope you create many, many applications.