React Native | Crash Course | How to fetch data using Axios with React Native Hooks.

[Music] Rhys welcome back to you a studios my name is Arthur and I'm your instructor for this tutorial in this tutorial I will show you guys how you can parse B Jason from the news API using the exists library then we will render this jason of the news into our flat list using react native hooks that are you state and use effect before we start I want you guys do I hope you guys have subscribed to my channel you a studios but if you haven't please subscribe by clicking at the bottom right corner of your screens let's begin by creating a new react native project so go to terminal move into project directory and start typing Expo in it select minimal app give it a name I will give networking it is stalling all the dependencies required for this project so let's move wait for a few minutes I will come back when it had stalled the react native project setup successfully now into terminal type CD networking and then start a project Expo start and then run on scene iOS simulator we have to wait for few minutes until it's get it's getting running open this project into into the visual studio code open networking networking open when you create a new project this is how it looks this is all the project directories if you're if you're on the project it will look like this wherever you create a new project now let's install all the dependencies required for this project I will be using react navigation for the for the navigation purpose so first install this react navigation library go to terminal let's stop this server type NPM install react navigation then I have written all the libraries to stalls so I will copy this MPM install paste I will share all these libraries in the description so you can copy from there it will take few minutes I will come back when it can stall now we have to run this command so copy this and paste it if we didn't run this command the react native project will give us give us some error so we have to install this thing then we have this then last for a navigation you don't have to worry about these I will share all these commands in the description we have installed all the dependency is react needed for this project so let's setup react navigation and go to F dot J's here remove all of these but first this project is is a news app will be a news app so we have to create a news home screen so create a new folder here type screen and then we would have something went wrong remove this then create a new file call it home dot GS oh it's a game creating folder create a new file call it new start Jess here start typing the boiler code so import react from react import view stylesheet text and let's say button from react native then constant news equals navigation equals return let's say text [Music] and type new screen then export default news save this file and now go to app dot J's here start typing import react from react then import create app container from react navigation import create stack navigator from react navigation stack then import news from screens news then we will type check navigator equals create stack navigator News News save this file again constant app equals create app container here it here pass rate this stack navigator then export default app save this file and then run this so you know in order to run this we have to start the server so navigate into the project directory and type Expo start it will run the server run on iOS simulator refresh this app as you can see we have this navigation bar with new screen make network calls we will be using react x0 so let's stall the X use first and M stall Axios so it get installed we have this complete documentation here we have we can call get methods we can request post methods it's complete documentation I recommend you all guys to read this documentation for networking call create a new folder API is API is here called create a new file News now type import X 0 from X 0 then export default X 0 dot create here we will return base URL and our base URL will be we will fetch the news from News API so go to this document here we have new API we have to create a new cell registration women when we will get registered in this new zapier dot o-r-g we will get this api key so we have to add this F API key into this end point so when when you will done with creating and sign up so go to this documentation here go to top headlines then we will use we'll be using this API so copy this and paste it for example here what we will be using base URL our base URL will be from will be here will be this to paste it then save this file now our next task would be by would be creating a new skirt so in order to create a new skirt we have to first look what components I will display into this new skirt so go to this API go to this documentation copy this and let's say paste in a browser this API will return all the news of the US so copy this copy all this station and now go to jason validator this in formatter go to this paste it here as you can see this is a valid jason here we have in the articles we have author title description and URL to image so we will use all these points so we we need to create a card with title description then we will show image and add d and after after the image we will show the author name so we need to create a card with these components now in the visual studio code create a component folder components here create a new file new card dot J's here right all the boiler code we used to write whenever create whenever we create a new file let's type import react from react import view stylesheet text image from react native then constant news card equals return em you hear return text with title news card then at the bottom export default news card then if I save this and in my new new screen I will import news card from components use card here add this news card we need to add view now let's save this file and run this we need to start a server okay we forget to add inverted commas with react native safe run it again as you can see our news card component added here let's start designing our news card you Scott what we will gonna show go to Jason we have the title and description so let's create this will going to be at our title so title let's give this text copy it paste it then we will show them author so text again here let's copy this title then I want to show the image so image then we will have this description text again with this description then what we have prescription you are I think that that's it or we don't have anything more good then save this file as you can see this is title then we have author name then the image is hidden because we haven't set any source yet then we have this description okay now let's style these things now let's add a constant for style constant styles equals style sheet dot create create what we have we have titles so title then we would have this description title then description then we have image then we have author author now let's add dimensions from react native common dimensions so that I can get screen width and height constant with comma height equals by mentions do it no window cat window save this file okay now let's tile for first title with into with let's add some margin left and right margin left give it 10 I what I want I want I don't want to give constant and I won't give a ratio so what I will do I will do with into 0.1 I want a 10% of the width okay then margin right equals with into 0.1 okay we have left we margin right then margin top 5 into 4 margin top I want the same as this so with into no it should be less I think we should give margin margin with Indu 0.10 okay should give color to be black okay font size 320 now for description I want to give with with then margin same as this copy this paste it here then we have color for color I would like to give a gray color or description then for font size won't give 18 font right now for image not image or image with equals with hide in to hide GST divided by three things should be three point five or maybe four and four margin let's say four margin left for margin left with into zero point one sorry imagine right with into zero point one four margin talk let's give it margin vertical so it will give for the top and the bottom I want height zero point five five percent of the height okay now what left you have this author okay now far off her I won't give margin let's say margin vertical with no height zero point three now margin horizontal width into zero point one zero and font sighs I want the 15 foreign color color to be light gray okay save this file and for the title I want give some font fade now font-weight:bold now save this file and add these styling into our components so style equals style start title okay this is author so style equals style start author okay then we have this image so style equals what is it a styles image then for this description we have style equals star is not description save this file and run it it says okay library is not valid I think gray would be sorry we have live with these things so we have okay for title I have set 0.10 this margin margin so what I want 1:05 if I save this ok this looks fine now we have to set for this author okay where is author here it is we have margin vertical this should be 0.03 margin horizontal should be 0.01 or maybe five okay then okay it look fine now but thing for vertical I think I should give vertical I should give margin bottom to be let's give it same as this one safe still okay and zero if what if fat this looks better or should I should give some more okay margin horizontal okay then margin vertical with into 0.0 to save it 0.03 let's look fine okay now for image what I want image to be give six comma to 0.05 0.5 for margin verticalized thing I should give it point two now save it okay that's the area for the image now let's do it for description description sorry okay now for the description let's give it zero point zero five let's give it a article first tickle okay now give margin horizontal width into 0.02 now I think it looks fine way much better now what I will do I will create a car to it okay in order to do this right thing we need to add style for this view so card view okay then add style was Styles dot card view okay here background color should be white then I need to add margin give it five save it as you can see we have this card now okay now I want let's give it some more margin I guess yeah that's better give some border and shadow to this card view so border-radius I want this to be with into 0.02 or maybe 5:05 then I want I want to add some shadow so shadow color to 0 0 0 then shadow offset - with zero omma height 1 then shadow offset sorry opacity city I want 0.8 then shadow radius to be one okay save this file and if I run it as you can see I have added the rounded color with the border and the shadow as play with some of this 0.5 if I were k5 okay I think this should be three now we have height and width let's say if I do this what would happen two point five I think I think it's fine now we can play with it let's give the ratio to this one as well okay this looks fine nothing now I think everything looks fine hmm what should we do now yeah I think all this all things looks fine enough to me okay now what I will do now let's start implementing the network API using excuse before that I will be using react native hooks so what is hooks hooks I use too many state in the functional classes near functional components so I will be using two types of hooks you straight and use effect so let's use this boat react then use state and use effect from react then import API what was the name of that API News API News API from API is news okay then what we'll gonna what we will do we will create a function let's say constant news response equals async then constant response equals oh wait then news API dot get here we need to pass the URL so go to news document from here let's copy from top till the API key we have added this base URL into our hip News API so let's copy this and paste it in here right okay then let's console the response response dot data dot articles color sprin this response dot data now what we have to do we have to call this news response okay so you will use use effect hook from react native so we'll use effect into news response then the second parameter would be empty why we are calling this news response and to use effect because when whenever we update the state it will update D response so we have to call it in a function that this in a hook that is use effects so it will be called only once okay then save this file if I run this okay sorry just then save this file run it okay then go to con terminal you can see I have fetch D News epi now next we have to use a you state so that this this was a async await constant now let's say you want to make a function without a sink of it so let's create new function function and get news news from API then what we'll do use new API not yet now pass this URL then use then let's say function with response here just console.log the spawn store data then let's say we were unable to face the news let's say it curves it gives us some error so we want to show this error so catch function error then console.log error okay and comment out and this call it here so get news from ebay okay save this thing and run it again you can see the news AP good stretch okay so now what we have to do we will use we have to get this response news array and use it with the you state then let's create it now let's add a new array with the you state so constant news set news then use it use state with an empty air initial here we pass it what will be the initializing value so we want to use with empty array okay then here set news pass it with response plot data dot articles we let's check what was then key for this articles we have this articles key copy it paste it now let's say we want to console the articles so what we'll do we will simply log the news save this file and run it something didn't went well okay what's happening here we are getting an empty array because because we have initialized with an ampere so what we have to do we have to check if it's empty array then we have to return null as update the state so let's do it if you return okay then remove this then import the flat list from react native then data equals we have news you state and then articles in it so news dot articles then key extractor we have to pass it a unique key so we will make it item index okay that will make key let's say key attend X so it will create a unique key every time okay then under item equals item Krypton in his cart what we are doing wrong okay okay or test sound we have this opened then we have this okay that's the extra okay okay now if I save this file and run it here as you can see we have successfully rendered our flat list now what next is we have to pass these item into this card component so let's do it now go to apt or Jess you know go to News card here type item item then we will have item dot title now item dot author and here item dot description description save this file and now a news what we will do we have to pass on this item card before that we have to use I forgot to add this now item equals item save this file if I run okay something we did wrong let me check and then use card okay we forget to add braces save this file as you can see the title description why the author is income go to news okay news card okay author now everything is coming now we have to set the image we have this flop an image source so source then you are I into item dot what is the name for the image URL to image URL to image save this file and run it okay the image is coming now this image is getting out of the view so there is image remove this thing save it and run it again not perfect as you can see we are getting all images with title or Theran description perfect what we learned today we learn how to how to call Network api's using the X Leo's library then we render into our flat list using react native hooks thank you for watching us studios stay focused keep learning [Music]

Channel: UA Studios

Views: 12,381

Keywords: react native, react native tutorial, react native crash course, react native crash course 2020, json, fetch, axios, expo, hooks, react native hooks, react, react native tutorial for beginners, react native in hindi, valentines day, react native vs flutter, react native navigation, ios, android, news, ReactNative, react native app, corona virus, cross platform app development, cross platform app, flutter, mobile, app, app development, programming, software, coding, swift, kotlin, javascript

Id: UInF0gJeQGU

Length: 55min 24sec (3324 seconds)

Published: Fri Feb 07 2020