How To Fetch API In React Native And Render Using Flatlist

welcome back to my YouTube channel in this video you are going to learn how to make an API call in react native so I have already set up my project using the command and clicks create Expo app followed by my project name which is Expo projects in my case so you can definitely run the command npx create Expo app followed by whatever project name you want to give or you can definitely check out the export docs in order to find out the command or I will attach the command in the description of this video and I have also done the bare minimum setup which is I have created a folder called screens and inside this screen I have a product listing screen now let us see what do we have in this product listing screen so here I have written first steps which we will be going through in order to successfully fetch the API and display the data on the screen so here is the collection of First Steps so the first one is first the API and then we are going to check the data in the console we are not going to directly show it on the UI first we are going to check the format of the data what data structure is being used in this API and then we are going to use the data to update the state and we are going to use the flat list component of react native to render the data on the UI then we are going to handle the errors and the error State because handling errors is very very important and the final step we are going to do is we are going to add a loading indicator for a better user experience so for this as well we are going to use the react native core component which is activity indicator so this video is going to be a lot of fun so I request you to watch the video till the end now let us get started and Tackle down the step number one which is face the API so now to start working on this project let me run a command to start my simulator which is Expo start and in order to run the project on your machine you have to do the same go to your project directory and run this command export start and I'm going to use it for iOS so I'm gonna press I so it will take few seconds and over here we see we have a simulator running and uh Let me refresh the app so that we see the content over here all right we have not added anything over here so let me add hello fetch API to see if things are working fine and we have not imported text so let me input it quickly yeah so we have our app.js showing over here which is the entry point but now instead of this app.js we are going to uh add this product listing screen in a while so now let us start working on the step number one so let me create a component over here which is product listing screen we have our style sheet text and view imported from react native react from react and we have a view over here and a text inside it so we don't need a text so I am simply removing it for now or let us just keep it so that we can see if our product listing screen has been successfully imported over here so now let me import it product listing screen yeah we have successfully imported product listing screen now let's start working on the first step which is to fetch the API so to finish the API we need an API right so for that what I did is I grab API which I'm gonna show you so first let me make a URL so that I can store that foreign so this is the API that we are going to fetch so this is provided by fake store API you can definitely Google this out and you will find the first link and you can grab it from there okay also I will attach the link in the description so you do not have to worry about the API URL now let us start working so let me add my uh simulator over here and let me minimize this tab perfect so we need to fetch the API and check the data in the console so let us quickly do that for that I'm gonna make another function get products and also we are going to basically keep this let's keep this URL over here and now what we are going to do is we are going to basically use fetch which is provided to us by JavaScript and over here we are going to pass the API and we have stored our API in this URL variable so and now it is going to give us a promise which we are going to handle is using the dot then we're going to chain it over here and now we are going to get a response so we are going to convert that response into auditable format so when we are going to use response.json let me write convert it into readable format parse Okay so now what we are going to do is this thing also will return us a promise so again we are going to uh chain it with the another dot then and now over here we are going to get a data and now we're going to work with this data okay so the first thing we need to do is log the data to see what data we are dealing with so our uh get products function is ready but now we need to uh get our use effect hook in order to make the side effect which is fetching an external API so for that what we are going to do is I have imported use effect and it is going to take an arrow function and over here I'm going to I'm going to call my get products and what I need to do is I need to all this use effect I want it this use effect to run only once so I'm gonna provide an empty array all right so I hope you know this this is basically a concept that if you want the user to run only once then you need to provide an empty array so it will run only after the initial render which we want in this case so I have successfully called this inside use effect now let us see if we have something in our console and let me open the debugger press Ctrl command D if you are on Mac and I don't know about Windows it's the same I guess and open JS debugger so it will open a debugger for us and let me go to the console here we are getting some issue maybe a refresh the app again okay it is showing undefined let me check it over here the URL is correct and we are we are calling the get products we are logging the data okay we need to return we need to return it otherwise how how will it resolve into a promise so we have it successfully returned it we I forgot to add the return command now let us again see yeah we have an error of 20 products so now this is the reason why I instead of uh instead of directly updating the UI we first log into the console so that we can see what actually what actually we are getting we are getting an error of 20 items an array of objects which contain these particular Keys category description ID you can go through all these so for this tutorial I'm just gonna work with this image and a price imagine price both of these Keys we are going to use so let us go back to our code so our first first step has been successfully done we have checked the data and the console now let us start working with the second app second step which is to use the data to update the state and use flat list to render the data so for that we are going to make another state so it would be products and a set a function foreign as soon as we are going to get the data we are going to populate it with the data so product is empty and now over here what we are going to do is when we are going to update the products with the data that we got right but now still this is not showing the list why because we are not rendering it over here inside this written statement so for that what we are going to use is flat list not float it's flat list from react native and it gets a data probe so to this data probe I want to pass the products array which is this one because I want to render it it has now the data right we updated it data so this product will contain the data now and in order to render it I'm gonna call this render item and we are going to basically display a view not this one yeah this and inside this view what we are going to do is first let us destructure the item yeah we want the item and now inside this view what I want is I want an image from react native okay and I want a text fine for the price image for the image and next component for the price to render the price and now I have some Styles which I have already added so let me paste it over here so I have added some styles do not worry about uh all this these are some basic styling and the first one is for car container which we'll be applying later now for as of now let's work with this image so for that what we are going to do is we're going to first pass the source probe and it will take a URI which will contain the item dot image because this is the key name right and we need to wrap it inside another object okay still it won't show because we have not added the style so let me quickly add the style styles dot image yeah see here we got our images successfully rendered using flat list and now to render the text what I'm gonna do is item Dot price perfect we have our price let us just give it some styling so that it will look better font size to be 18 and text align Center yeah seems fine to me and uh now what else we have I want to add the card container I will add this to container style to this view this Dot card container and here we go so you can see we have successfully added the card container style we have some shadows and we have a background color so this seems fine to me and you can definitely go ahead and remove this vertical scroll indicator so for that you can simply add this show vertical scroll indicator to folds and it is definitely your choice if you want to then you can okay so we have successfully completed uh two steps we have successfully rendered flat uh data the data using flat list and now let us move to step number three which is handle the errors and error state so whenever you are fetching API and API so uh there are chances that you can face some errors like right so let's say you entered our wrong API or let's say uh you made some typo in this API so for that we need to handle the errors as well right so let me show you that how it is done so over here we are going to add a small check if the response dot OK is false which means that there is some issue with the network request because uh ok means the network request was very successful and if this is not successful that means there is some error so we are going to throw that error using this code so something went wrong you can add any message that you want to a suitable message and now when this is triggered we need to uh this error is thrown to the nearest cash block so for that we are going to add a catch over here and we're going to access the error okay and now over here we are going to lock the error so let's see how the error looks like let me make a mistake typo in this products and now let me open the debugger open JS debugger and in the console let us see let me again refresh so see here we got an object so this is the error object okay and here we have a message something went wrong so whatever message you write inside this one it will be accessible to us in this error object okay so we can write error Dot message over here and now see we got Sim our message simply instead of the entire object so we are going to use this error Dot message to update our state but we will do that in a while so we are going to update uh the state of the error so that the error message is visible over here but we are going to do it in a while because I want you to have I want us to add a loading indicator first so let us move to step number four so for that what we are going to do is I'm going to add another state is loading and set is loading and initially it would be true yes we want it to the Loading indicator to be shown and uh it's over here what we are going to do is we are going to add a check and if is loading is true we want to show our loading indicator sorry activity indicator which is the core react native component so here you can pass a color for the indicator I'm gonna give it a Radice of now and size this would be large you can pass small as well okay yeah because we have not uh handled the ternaries in a proper way if is loading is true we are going to show this else we are going to show the flat list yeah now here you see we have successfully added a loading indicator so this loading indicator basically gives a better user experience right so let's say if your user is using your app and he is going to fetch the data so you don't want them to see a blank screen right instead you can add a loader so that the user experiences get gets better so that the user gets to know that okay there is something that is being loaded in some time okay so instead of showing a blank screen this is way better and uh now it is loading and loading and loading and loading right so we do not want that we want that if the data comes if we have successfully fetched the data then we should uh first let me correct this one yeah so uh it is loading and we want that if the second data is successful we have successfully fetched the data we want the loader to be not shown so for that we can set it to false and there we go as soon as the data arrives the loader disappears and we see the data Let me refresh it again let me show you one more time so here you go we saw the loading indicator and uh once the data has been arrived and the loading indicator has been removed and we got this array so yeah that was it for our step number four and now let us again come back to step number three and handle the errors so for that I'm gonna use another state const error set error assuming we don't have any error as of now so let's set it to null and uh over here we are going to set the error to error Dot message earlier we were logging it in the console now we are updating the set error we are updating this error variable with the correct error message and now we need to show the error also right so we are going to handle it using the next turnaries so let's say if is loading is true we are going to show the loading indicator otherwise over here if we have error then we are going to show and our text so here it is going to get the error message with which is coming from the error state this one okay so here we will be displaying our error message and but okay so let us understand this if is loading is true we are going to show the activity indicator otherwise we are going to show the error and if the error is true we are going to show the error text otherwise everything is perfectly fine so we are going to show the our flag list so this is where the nested conditions okay and now uh let me again make a mistake inside this URL see here we go we have successfully shown our error message on the UI so you can definitely go ahead and style this let me see if I have any style for this yes error style so Styles dot error Style yeah we have something went wrong in red color so we have successfully completed all the four steps we have as the API check did it on the console we have successfully uh used the data to update the state and we use flat list to render the data which is very optimized we in the step 3 we handle the errors and error State we show the error on the screen and we successfully added a loading indicator for a better user experience so I hope you enjoyed this tutorial you learned how to handle the errors how to fetch the data how to update the error State how to update the loading indicators so if you like this tutorial smash the like button and do consider subscribing this channel

Channel: The Awesome Dev

Views: 9,108

Keywords: fetch api in react native, react native api call, react native api tutorial, how to fetch data from api in react native, best way to fetch api in react native, api fetch in react native, react native loading screen, react native flatlist, api call in flatlist in react native

Id: r88z8nrk8Ww

Length: 20min 45sec (1245 seconds)

Published: Thu Aug 03 2023