Let's build a CRYPTO Price Tracker with React Native (p.2)🔴

hello guys and not just developers uh it's me again uh lucas i hope you enjoyed previous stream uh which we will build up on today and [Music] i appreciate some of the comments that asked to do it actually one comment so i really appreciate it and right now i'm gonna quickly go through everything that we're gonna build today so let's start uh first things first as i already mentioned we are going to build a crypto price tracker and actually continue building from previous week we already had some progress but there is a lot more that we can add and a lot more different technologies that we can explore which we will definitely do today so wait a bit and you'll you'll see which ones uh so okay uh what are we going to do during this stream so we are going to touch more uh different technologies let's say uh that you kind of use in react native and quite often so first things first we are going to implement navigation because we then managed to do that in the preview stream uh second of all we will actually implement it with with axios and we'll be able to fetch the data from cone gecko api and we'll get the real data on our application which is really exciting to be able to build your own crypto price tracker however you want uh so after that we are going to introduce a bottom navigation menu which is actually kind of probably most of the applications these days have that and i think it's pretty important to show how it's done how it's implemented and yeah especially when it changed from version five to version six some things so we're gonna use the newest version of course and i hope you'll enjoy it uh next we're going to build our own watch list so we would never miss uh our cryptocurrency price changes and yeah that because you can probably it's pretty hard to track all of the pr cryptocurrency prices in one list so and you probably don't have all of them bought or you are not interested in all of them so this watch list will help us save the ones that you're interested in which is really nice and to do that we are going to use context api uh which is uh something new that we will touch and it's pretty important context api is basically how you can share the data uh in all of your application globally that's um more or less share and also change it so that's a simple explanation of it and the last but not least we will touch async storage which is uh storage uh on your phone let's say local so you'll be able to store data on your phone and you can close the app do whatever you want you'll go back the data will be there the only thing is you will lose the data after you uninstall the app but i will go over it a bit later more so uh okay next slide in this build we're going to use expo and simple javascript because these are probably this is the easiest way to get started with the react native and that's what i'm trying to showcase how easy it is to start doing something building small labs building small components even with react native and this is probably the best way to showcase and not confuse everybody with the different technologies and yeah so uh i just want to quickly mention why vadim is not here and i hope you miss him but i think you're going to have to stay with me for a little bit longer because currently vadim is working and spending most of his time on building his premium course and he is really investing a lot of time in it and he wanted to invest even more so you could get it faster therefore why i'm here and this course is a really huge course that will cover everything that's important and therefore i definitely recommend joining the waitlist and yeah become a better you because this will cover a lot of important things in react native amplify and um a lot dif a lot of more different technologies so if you want to get your knowledge to the next level i think you have to join the waitlist and yeah because this will help you to become a full stack developer and [Music] may i add a proper full stack developer that's i think the best way to start so join the waitlist on the link below academy.not just.dev yeah uh i think we can slowly start going into building the application so these are the things that you will probably need to build this application the the first link will be asset bundle where you will get dummy data images icons presentation this one and other important things second one is expo environment setup where vadim covers every step on setting up expo environment on your windows machine and actually currently he this week he released a new video that covers expo setup on mac os so you can definitely go to his channel and set it up very easily and last one will be git repository which will hold all the code that we built previous stream and on which we will build on today okay [Music] what's next uh yeah i think let's roll the intro and start building [Music] so uh hello guys and uh welcome from lithuania uh it's quite actually it's not very late in my country right now but it's quite dark and let's see what you're talking uh huh so not a lot of hellos yet but i think we'll uh come there and i hope you are having a great day a great friday let let's let let me add and i hope you'll enjoy this stream and learn something new at least one of the things so yeah i think we can go and start building and working on the application itself hello vadim hello nash i'm happy you're joining and watching and being active in the chat okay so let's start oh from kenya wow that's far really nice nice um here we let me do this so uh actually let me add real quick still the presentation and show me show you what we we're gonna do first so first step is to implement navigation and we can start doing that okay so first thing actually let me i'll show you how i do things like that and probably that's a good practice just to go and go to react navigation open react navigation go to their documentation and we can easily see all of the documentation that we need and start implementing or not implementing but installing the packages and everything that we need so uh first of all you will see you'll have to install this react native the react navigation native and you can install it either with mpm or yarn i use yarn but it's actually not that much of a difference anymore so you can use whichever you want uh let me go back actually let me put this let me go back here open the terminal and add react navigation native uh yeah i will after installing this i will quickly go through uh what we already have in the application and but if you want to see everything from step by step uh you can go to not just the top of themes not just the youtube channel and just watch the first part uh to catch up which we did both with the vadim actually and talked a lot actually we learned each other we taught each other new things which yeah i recommend watching that video and second thing that we need to do is either to if we're using expo install these dependencies with expo or install installing dependencies into a bare react native project like this if you're using variac native project but in this case we need expo because we are using expo let's copy everything go back paste everything and let's install it oh i'm happy [Music] i'm not sure if i'm pronouncing it correctly that you upload your first video that's really nice good job uh we are not going to use avs in this stream it's still covering a little bit more advanced topics like context api a sync storage and how to manage everything uh like global data in the application but we're not touching avs yet hopefully so uh yeah we just installed this and um i think we are ready to launch our application right so let's do yarn start to start our development server okay it opened it here but i would prefer to have it on this screen that you see so let me quickly do this here we are yeah we started our development server and now we can click simply click run ios simulator and it should open our application uh okay this yeah oh as you see it says opening expo on this url on iphone 11 and we can also see the same things here console logged so yeah you can see that right now it's building javascript bundle so it might it might take a little bit of time and during that time let me drink some water oh and as you can see from if you remember on the last screen i had to update my expo go application on iphone and i promised that i will and as you can see i did yeah okay let's wait till it builds not that much left okay and here it is so uh if you remember we what we did during i'll cover real quick what we did during previous stream uh we implemented uh a little bit of details on on coin which you can drag the price and the price will change accordingly um also we we implemented a coin converter which will convert bitcoin to usd and usd to bitcoin uh also let me quickly add this home screen uh also we implemented a list of cryptocurrencies uh which will display probably everything that's important to know from the first glance and but all of this is dummy data that you get in with the assets but only for now we'll definitely change that later but for now let we need to implement some sort of navigation in our application because well i'm not sure if there's a an application probably you could create a simple application without using navigation but you will most likely use it in every application that you work on and we as you remember we already uh hello ahmed and i i'm really glad that you like it uh like my streams and yeah i really really appreciate it and uh agnil vadim right now as i mentioned uh previously is working on a course for full stack react native developer which you can join his wait list and i really really suggest you do that to do that and he wasn't able to join the stream because he wants to release that course as fast as possible to you guys so i think we should say thank you to vadim for that thank you zach thank you thank you very much uh okay so uh we can probably continue so first thing after installing react navigation uh what we can do is create a navigation folder where where we will keep all of our navigation related things in the application so let me quickly just do that navigation and in here let's create a index.jsx and in this file we need to import some of the things so let's start with importing react because that's needed in most of the files then let's import from [Music] react navigation native i think it should be native stack i'm not sure let me quickly check react navigation yeah that's uh that's what i'm telling you like i'm showing probably most of the time you will do this you will go and check okay so how to do it let's you can simply go like hello react navigation and see what are they doing so yes they are creating uh create stack navigator importing from as i said react navigation native stack so let's do just that let's import it what else do we need probably for now uh we don't really need much else to import so let's just create a cons stack sorry create stack navigator and from this we can create cons navigation let's not forget to export it export default navi okay third time is the charm navigation perfect and now in here we can return our navigation which will be we will call this stack and on this we will say stack dot navigator and let's close it for now but so yeah let's right now don't give any uh props there so also okay so we have a stack navigator what but this is uh to explain it better this is basically uh what will hold uh what screens it will hold it's really probably not that easy to explain but a stack navigator will hold all of the screens in your application so let's say i can easily add stack dot screen and with this i actually don't need uh don't need it like this i can simply close it like that and this stack screen uh has some required props that we need to pass so first of all a name how will we call this screen and how will we later on get to it let's say so we will call this screen home because that's our home screen the first screen that we will go to when you open the application but okay so it has a name but how does it know that this home needs to go here because i can give here whatever name i want i can say whatever whatever and okay that means they are not connected so how do i connect these so there is a second argument or parameter that we need to pass there and it's called component and this component will uh in this component we will specify okay so when i call home i'm i need to access this component so that means i need to import it here right so let's do just that import let's call it home screen and let's uh forgot the end and let's import it from um yeah from this com screens slash home screen and yeah and pass it here so now we connected all of the dots so right now the when we act say later i'll show you how we do that but when we will say navigate to home it will check in the stack okay yeah we have home and then it will check okay but how which component represents home and we say okay so this component represents home that means we need to render this yeah and we also have coin detail screen so we can just copy and coin detailed screen and now we will import point details screen here from coin detail screen which is here and we will say that okay we pass it here and we if we call uh oh no no not header uh we need this here and now it knows okay if you call coin detail screen that means i need to re i need to render this component uh let's see um okay nothing everything probably let's see if oh why don't you use react snippets to simplify my work actually that's a good point i need to set it up my cell phone my uh i don't really know why i just got used to that at first when i was starting programming in my university i didn't use them on purpose because i wanted to build built into my brain okay that's how we do it without snippets you need to import this you need to do that you need to do that and as you know repetition is the best is the best way to learn something so i was repeating that action so many times that i can write it with my hand on a paper and if i would have used snippets i'm not sure if i would have learned it that well so that's why i didn't use snippets before right now i don't have them set up yet either way because i'm not probably it's i'm so used to it that i like writing it and i also it's better to show for new people uh how to do it as well without writing three letters enter bom everything is ready because if they don't have that set it up on their ps code that it will not work for them and they might be confused so that's actually why i don't use snippets yet i probably should do it because that will increase my productivity a little bit more so yeah let's save it uh okay so we have two screens and now okay but what can we do with these screens uh we do have them right but how do i navigate from each other so first of all there is one more thing that i would need to do and we can go here and we need to wrap our whole application or our stack navigator it depends how we want to do it but i usually just wrap my whole application in this navigation container in order yeah because we have to do it it says here navigation container is a component which manages our navigation tree and contains the navigation state this component must wrap all navigator structures structure usually would render this component at the root of our app which is usually the component exported from your app.js and yeah that's what i'm gonna do actually uh so let's take this the navigation container let's go to our app.js right now we can delete these because we will not use them anymore and import navigation container from react navigation dot slash native and in here as they said we need to wrap our whole application uh with this navigation container so okay let's close [Music] paste it in um yeah now we wrapped our whole application in this container let's save it and um let me go okay let's close so as you can see can't find variable home screen and it's because i'm not importing it here so i can just simply remove it and but i do need to do one more thing because now okay it renders the application uh and it will render only this view with a status bar there's nothing else that we import it or that we give it to render which is why we will import react navigation from source from this navigation that we just created so we are importing this uh into here and also let's render it notification let's close it let's save it and um mm-hmm direct navigation could not be found within the project or magic let me oh let's close this one i don't need this on this one or this one yet and also uh there is did i i think i did install everything no no no so i need to actually install the native stack uh navigator library and i think i didn't do that let me quickly check in my package that jason yeah i didn't do that yet so let's open our terminal and install it let me drink some water because that's what deem says we need to stay hydrated uh thank you very much i'm not sure if i'm pronouncing your uh name right but my last name is hard to pronounce as well for most of the people and yeah so sorry but thank you very much for good kind words um yes so what's happening try to register views with the same name let's reload and we will check what's happening okay so but as as you can see this navigation container really messed up everything for us it actually messed up our background background color it has unnecessary home and we don't like that at all right so what we can do first things first we need to hide this because we will not need header almost anywhere in our application there is only one place where we use header and we also already implemented that so in order to hide it there is actually a very simple prop that we can pass in our navigation stack navigator and which which says we first of all we need to say screen options equals open and pass an object you can pass actually a lot of different options here and we will not cover a lot of them but most important ones we will so let's say screen options and header shown false okay let's oh as you see it disappeared that's good also i thought i don't think it's necessary anymore but um we can we also can say initial route name which is going to be okay so what we will pass here that means this is the route that we will render at the start of the application by default it will take the first one in the stack but we can say okay we we want to render this one on the start of the application and now let's reload the application and as you can see it actually did just that uh and if we change it this to let's say home let's save let's reload and it renders home so this is a handy tool if you don't want to put if you want to have nice structure here and you don't want to put this the first one or you have some other use case where you need to specify the initial route name of the stack navigator okay but as you can see as i said this is really messed up our styles quite a bit and in order to solve that let's go back to our app uh js and in navigator navigation container let's pass a theme and a theme will be an object uh which will let's say which contains as well a lot of different stylings or yeah that you can add to your navigation container but we need to add simple fold uh only change the color of the background so let's say colors and here let's say around and we will give the color that we use for our background uh let me add this right save and voila we have our color that we had before so okay that's that's nice we are we are done with our setup right now um oh nice durgesh very that's actually a really good way to learn to work uh alongside me so yeah that's that's really nice that you are starting it right now and i think i already i showed how to change the the color back to our normal color that we used before so uh let's continue we are done with our setup right uh so what we need to do actually can somebody say if you see the code uh well or should i zoom in a bit because um yeah i'm not sure maybe i'll maybe i should zoom in at least a little bit [Music] let me know if you s if it was okay before as well um let's go back to our code okay so what do we need to do here is to start actually navigating right and and the first navigation that we need to do is go from here to the detailed page that we created previously right because that's actually the only navigation that we have right now and um we can't just adding add change route names initial route names here in order to render what we need we need to somehow connect everything so in the coin item which is this item we need to wrap this whole thing uh in something pressable that for example i can click on and it will perform something if i click right uh so react native has a lot of different uh ways to do that they have touchable opacity touchable highlight touch touchable without feedback but i think the most the easiest one is pressable so actually that's what we're gonna do and instead of wrapping our whole container and everything that we have in coin item in view let's wrap it in pressable let's close it with pressable and it can uh it can contain styles right but also it has one more thing uh that performs an action after you click on what's inside what's wrapped in this pressable and we can call on press and here pass a simple function that will do something when we press on it so for now let's go to log it and let's say pressed right let's format it a bit so right now if we click on anything in this coin item because i wrapped everything impressible it should say a console log pressed let's go to our console click on this iphone 11 and let's click on let's say bitcoin right i pressed two times and it says press let me press one more time it says pressed you see it's working that means it's working okay but when we press we don't need to console log it we need to actually go to the detailed page but in order to do that we need to use a use navigation hook from react navigation and you can only use this hook and functional components so like this but you cannot in class components is a bit different but i don't think there's a lot of people who work with class components anymore maybe i'm wrong but it's just from what i see around me so correct me if i'm wrong but yeah let's import that use navigation hook and we need to import it from react navigation native and right now when we have imported this navigate use navigation hook let's do const and call our hook let's say navigation and use navigation so right now in order to access this use navigation hook we can just say navigation and in here let's go on in our on press method we say navigation dot navigate because we need to navigate to somewhere and we can navigate anywhere in our in this stack right so you remember i said why we need the names let's copy this name that we said for a coin detail screen and let's pass it here in parentheses let's save it and right now what happen if i click on this i will go to the screen that's really nice right uh okay but right now first of all i can't go back so i need to reload the screen uh but so actually in order to make our flow better let's make it so that you can go back as well uh in order to do that we need to go to coin detail screen in index and we also need to import again use navigation hook use navigation from react navigation slash native in here let's do the same cons navigation equals use navigation and right now we have this little icon and if someone presses on it we need to like go back so there's a very simple way to go back it wouldn't it would be really hard to say okay now navigate to navigation navigate to home because imagine if i have something somehow nested and went really deep and then i say okay i need to go back and check what's the name then do uh paste the name there and there's a really easy solution to just go back so here's that icon that we created right uh yes it can also have on press method let's pass a function which say which says navigation dot and simply go back that's it we don't need to do anything it will know that okay the previous screen was that one that means i need to go back there and if i click on this icon right now let me check let me reload maybe did i edit it in the right place navigation navigation yeah i think it i did for some reason oh it's the wrong icon okay i added it to this icon so i can click and go back but i we actually if you remember uh in a previous time a preview stream we said it's better to build your application and screens like lego blocks right to separate them in order to manage your application easier and to build it to reuse some blocks that you used previously and when we mentioned that we actually uh our header separated into a different lego block or a different component like we call and in here we simply have to do the same uh that we did there so let's import um use navigation hook from react native uh navigation react navigation native and on this back sharp icon let's add on press also i forgot const navigation equals use navigation right and in here we simply pass a let me close this one passive function that will navigation dot go back and now it will work but let we don't need to navigate back when someone presses on this right so let's just clean up and delete uh them yeah this this and also this let's save right now and if i click here i go back if i click here i go here and then i can simply go back let me read real quick hello guys hello love from lithuania as well to you all thank you very much for watching um yeah uh so we have some navigation uh vadim i'm not sure maybe he's in the chat but he is not right now streaming with me because he is working on the course that he is preparing for you so stay tuned and definitely join the waitlist of his premium full stack developer course it will definitely help to get your career of software developer to the next level so uh we i showed you how to navigate between different screens but now now we need to okay we can go to here but we still see bitcoin every time it doesn't matter what i click we go to bitcoin every time and we don't really want that right we need to make it somehow yeah somehow work it like it's supposed to because i don't want to go here if i i wouldn't want to go to bitcoin details if i press on avalanche right so in order to do that you can very easily pass uh props or parameters like uh like to to different components right like i showed you in the previous stream you can easily do that with navigation.navigate the only thing you need to do is comma and pass an object this we will call it coin id and simply pass the id from market coin id right and that's it that's that's how you need to pass it but in order to receive it there's a little bit uh it's a bit different it's not uh difficult or anything but yeah it's a little bit different so let me quickly go here and in order to do that we need to use another hook called i'll show you in a second coin detail screen called use route so let's just import that import use route from as well react navigation native and from this use route we can easily get all the parameters that we pass in our navigation uh we but we also have to do the same with like cons route equals use route right and right now uh i'll show you how it works in order to get the coin id that we just passed but for for now let's just count to log what is route right let's save it and when we navigate to here we are counter logging this round and it's an object it has uh different things it has a key the name of the screen that we are we are in right now and also the path but it's undefined right now and also the parameters which is an object of the things that we pass like uh i showed you with navigation that navigate and you can see in that object we do have our coin id that we just passed so let's just get it and in order to get it let's destructure this route let's go and say route and inside you remember it was still inside a trans object so we also needed to structure it from that uh object as well and let's to test that actually it actually works let's um also log the coin id okay let's go back here and we see usd coin it we are getting there right so but let's test for example i go to polka dot right and i have polka dot id perfect it works uh yes um let's continue so now we get the id right that's a good first step but we still don't get the any kind of data and uh anything we just get the id and some of you might say okay so why we don't just pass the whole market coin object there and that's it and we can display that data and i would say yes that's possible to do but that's not the best practice because usually it's not that good to send big chunks of objects or a big chance of data with params and um yeah so and also it might be a little bit outdated information that that might lead to other bugs so we need to fetch everything to get the real-time data and in order to do that we will have to use axios um well let's just do that so let's go to actually react native axios or um to expo axios because we're using expo expo snack no not here [Music] i have actually a note added i think it's simple axios to be honest yeah so let's just go to our application and do yarn or mpm install or yarn add and say axios let's install it okay we just installed it and right now let's close this we don't need it anymore and let's create another folder that will contain all of our api calls right let's call this folder services we'll probably have a lot of services so we can call services and a new file let's say um [Music] it's really hard to think of a name right let's do requests let's say dot j yes and we will not use any jsx element here that's why we can call it js and jsx elements if you remember are these view chart provide a view text and all of these we have these this uh request file and okay but what now so in order to actually be able to access this we need to first of all import axios that's very important because we will use it and we need to create different functions for different requests so right now we need cons and let's uh also it's very important to export it because we will be importing it everywhere and we don't need a default export so let's export uh const and call it get detailed coin data and for now it will also it's important to make it a synchronous because the calls to coin geeko api will be asynchronous right now let's not pass any parameters uh let's do it oh sorry let's do this and in here uh all axios requests will be done in try catch in order to catch all the errors also here let's do but even if we catch our error right now we're not gonna handle it or anything let's just console log it right and and try we need to make the actual request so okay but where do we know where are we doing this request right and to what url to we need more information to know that and in order to do that let's go to coin geeko and use their api that they provide let's go to conveco and they have a web application that's very similar to what we are trying to build and they are very kind to provide a good cryptocurrency api with very good plans for practicing and building so let's click explore docs and here you see all the api calls that they actually provide to you so it's really generous of them and yeah so okay we need to get the data about uh the coin right and it says here okay if we do coins.list it says list all supported coins id name and symbol but we don't need a list of all here's again list of all and here oh that's something a little bit more interesting it says get current data name price market including exchange stickers for a coin okay that's something we do need right and if you click on it you will expand it and you will have some more information and you can even try it out so let's click try out let's pass bitcoin as an id we don't really need localized languages so let's say false include tickers data okay let's include it uh include market data we do need that but it's already defaulted true but just for purpose uh showcasing purposes let's add it again include community data we will not need this and developer data as well we don't need it because it's a lot of information for one api call either way so we don't need that much and seven days data we also don't need it right now but if we later try to expand on this application we can definitely make a good use of this really nice let's review okay bitcoin we don't need localized languages include tickers data true include market data true and others false and you can click execute here and also let's choose response content type to application.json because that's what we need and you can actually see the data that they give you right so it's id bitcoin symbol a name bitcoin that's actually what we need right so it's really nice and here you can see the uh request url so let's copy it go to our application back and do const response equals i'll wait because we need to wait till the retail request finishes right and do take good use of axios say get because here we are getting information so get and simply paste the url here that's yeah let me close this one that's how you do the request but it will return a a lot of data right so we don't need all data so let's do return response and we need only the data about bitcoin but now okay so it will we think it will still always give our data about bitcoin right well we can improve it so when you're calling this function let's always pass coin id there also to in order for it to know which on which id i need to do a query let's change these quotes to the ones below the escape button and also let's read okay api icon gecko api coins and here bitcoin that's the id we don't need to always make it uh on bitcoin therefore let's do dollar sign brackets and we can insert here whatever we want and it will make it as a string so let's install insert here coin id and now uh when we call this function we will pass coin id on whichever if you remember what we did previously whichever we clicked and it will do a request and get the data for that specific coin let's stay hydrated uh okay that's that and uh okay i think we can try to test it out uh and in order to do that let's open our coin details screen go to index and here let's import that request so let's do import from [Music] so services slash requests and in here we can just say get and it will already say okay maybe there's only one uh function that you exported so actually that's what we needed so that's good and we import here get detailed coin data the same as we called it here so if we change name here to get detailed coin now this one won't work so we need to say here as well then get detailed coin but let's take the detailed coin data as i know i like it more um okay so now what we have this function that we can call to right but how can we make good use of that and let's actually it's already important we will use uh use effect hook there's a lot already a lot of data here so let's clean up a little bit and some of the data that are similar okay we don't need to uh-huh okay it's a little bit better right now it's easier to read and uh okay so we need to call use effect here right uh-huh use effect will be called every time we render uh the screen you can pass here different parameter yeah probably parameters and it will then be called only after it changes so let's say here we will create a function that will fetch coin data for us okay but right now we need to create this patch function and let's do it outside use effect we can do it inside but then also uh maybe we will need it to use somewhere else right so let's do it const h data now fetch coin data and like that and also it has to be asynchronous as well so okay what now let's do let's create another variable and call it fetch coin data equals and now we do await and call this function that we imported and let's say get detailed coin data but if you remember we need to pass the id because it doesn't know just like that okay so which i which coin do you need what data do you need and here's our from route parameter the id that we are passing and let's there coin id okay right now we're doing the request but we are not using this data anywhere right so in order to use it we need to create another state uh which will be called const let's call it coin simply and set coin equals use state and we talk a bit more about state in the previous tutorial so if you want to learn more about it you can watch that video it's pretty helpful and i see one more question where is vadim and he's working on the course the his premium course and he asked me to help him out to do streams because he had one like he needed to work more and he wanted to release his course as soon as possible to you guys so he decided that he needs to invest even more time in order to make it really good and that's what he's doing so you should join the waitlist of that course but then he had a choice like not to stream at all or ask for somebody so and i was really glad that he suggested because i enjoy working with you guys so thank you very much for kind words and let's continue oh aaron thank you very much for the donation whoa uh let's continue uh yeah so we created the state right um and let's set after we fetch this data we need to do something with it so we can simply say set coin and pass this fetched coin data and now it will set but we also need to make it uh need to make our somehow to show that okay it's still loading so while this await because the data is really big it will probably uh go to render everything too quickly and we will not have the data needed to show everything and that's why it will crash so we will need something that will check if it's loading so let's create another state called loading say set loading and and now we will with this little state we will always know whether it's loading or not and also i forgot in this use date let's make a default null and for loading let's actually make default false uh because when you we don't need it as far as to be loading right we will set it when it's loading and when it's not and then if we go where is fetchcoin data here right so in here we can say that before everything we set loading to true because we are starting our fetch and after everything finishes we can set or not set loading to false because uh okay i'm not adding these because it ended everything right but we still need to imp uh to have one more thing and have a check so uh let's go maybe a bit lower uh somewhere here and say if it's loading or i don't have coin and no not this and if i don't have this coin data right that means it is still loading so but in order okay then how can we show that it's loading well react native has a really nice thing called activity indicator which is a little loading icon that will is easy that will help you to easily indicate that okay it's still loading wait a little bit and it has a prop one that we will use size and we will make it large all right let me close it yeah so right now if it's loading or if coin data is still not there that means we are going going to return this activity indicator otherwise we will return that everything that's below and um so there is one more thing for our chart we need to fetch data separately and i think i think it makes a lot of sense from coin geeko perspective because what if we will want to make charts with for example that you can fetch data on different time frames for one day for one hour for seven days that wouldn't make sense to re-fetch the whole data about the currency every time so they created a another request which only fetches data about that and but should i show you that what if everything works or did i made a mistake with you state uh you stay uh so this i'm not sure uh sauhar what do you mean uh do you want me to expand on you state or did i make made a mistake somewhere so for now i'll continue but later uh yeah so let's do another uh so now let's do another query uh so another function export const get uh how will we call it calling things is not my favorite thing if you remember from the last live stream get coin market chart i think that's gonna be good we will also make it asynchronous and um in uh in here we also need coin id to for it to know okay so which market data do you want for which coin right and it's very similar also in try catch let's console.log e but in order to do that we have to add here and in here let's do another request so let's rest pause response here it is i'll wait axios dot get because again it's a get and let's go to their api to check okay so what do we need and get coin tickers no historical data maybe but it is for a given date so it's as well 50 50. and here get historical market data include price market cap and volume granny granularity automatic which is what we need right so let's try it out let's say bitcoin uh bitcoin we here you can select in which currency you want to see it so uh what whichever you like or whichever you use you can use here but i'll use usd and here you select data uh how may so for example if i say one it will get me the data from the previous day if i say two from the day before right so we will say one and interval let's say hourly we need data of uh like in for every hour how bitcoin price change let's do execute and here we are we see all of the data that we need here and we even see more we see market caps we see also total volumes but we will not use those uh we will only use prices okay let's copy this request again let's go here paste it in and let's find again okay so here's the id let's do the same change like that like that and coin id here we have another request but okay let's delete this no but we also need to return it so return response data return the data that we just stretched right and right now we will do almost the same flow as we did before first of all let's create another state for oil market um chart now coin market data maybe this one set coin mark data now it will be no but later on we will check now let's go into our fetchcoin data and actually every time we fetch coin data we do need to fetch the market as well data so fetched coin market data equals uh weight and if you remember we forgot to import that function so get coin market chart and let's go back to our fetch coin data and let's say a weight get coin market chart and we also need to pass coin id let's drink some water and but we also need to don't forget to set it so set coin market data to our state and fetch the coin data uh nope i made a mistake so fetch coin fetched coin market data i think this is correct um and did i forget something like oh also here we need to check or we if we don't have any coin market data so if it either if it's loading or we don't have coin or we don't have con market data then we will display loading icon but in immediately after we get uh a coin and coin market data it will set loading to false and then we will be able to uh return our normal data so let's try let's save and try probably something will not work but we'll see so let's click first of all on bitcoin okay we do get bitcoin but we were getting that before right let's go back let's go to cardano we are still getting bitcoin and uh let oh okay so i know why because we have this uh so we don't really need to use it anymore from coin dummy data that we had right so let's delete it and right now after fetching everything and getting everything we can set everything from instead of from that coin that we had previously er from dummy data set it from a normal data but let's just check if all data okay coin id which is here that's good uh we need image we need name we need um so prices will not be here anymore right so we need to do const prices and as you remember we did a separate uh call for for coin market data so now this will return us prices every time we need symbol i think we need market cap rank we current price and okay let's test right now ethereum mm-hmm uh undefined is not an object evaluating currentprice.usd so current price let me see what uh what's the problem with current price let's console.log oh it's because we have this one here we need to have it above because it doesn't know about that this percentage color right let's try again uh and undefined is not an object evaluating mm-hmm probably i am making calling something differently so console.log [Music] actually the easiest way would be to go to here and check the naming i think it's this one right why it's not opening no not this one this one why it's not opening let's reload it okay and it opened then coins id okay let's try it out so bitco a bit coin and we can add all the data we just need to see how everything is called all right localization description oh wow that's a lot no we should set this one to false okay true true this one falls this one falls and this one falls and let's execute it again uh market okay so we have this and then market data current price so what's the problem let's see where we use current price right is it maybe i should have that check um [Music] okay we use current price in a lot of places to be honest but why let's say just console log point maybe we don't even have the data that we need let's go to our console let's delete it go back press on ethereum and see what does it say and the file is not an object object current price and find okay that means oh okay we have this one here this might be the problem as well so let's take this and put it up top okay let's see right now okay now it's better now we're getting somewhere it says that coin image and uh we actually don't have coin image why we have image somewhere um okay let's see here coin image small that's that should be right and that's how debugging works we check okay so we uh use here first of all we should return that one and let me check okay so let's put this one okay let's rearrange some things a little bit and uh have this check a little bit higher but then we need to make uh to put loading at these three as well higher and let's check if it will change anything no coin image is still undefined what if i say loading to true set it at first where do we use that current image it's actually it should be here oh now i get that so we are you we're trying to use it before uh it doesn't know what is this coin so that's that coin so that means we need to put these two up top here and this one well later we can hit somehow okay the application let's reload it um for some reason i'm not able to press on anything oh that's strange let's put it back here let's close the application and open it from scratch cry okay okay now it works so ethereum coin image is still okay let's see what you need to move con's current price to above you just need image dot small that's how i'm destructing it it should this one wouldn't matter that much yeah let me quickly check again so what if i [Music] okay what if i put this one everything after this one because then i will only fetch okay yes yes now let's put that one as well and i think this one should fix it current price usd what's the problem now now the problem is that we have this current price usd here which we need to have below so let's delete this const and let's add them below let's save it test again current price to sd it's still it's here again so we need to move these two probably as well low below oh okay let's save it let's go render more hooks than touring it okay so now we are getting somewhere for sure uh let me see why we're rendering more hooks okay you you state we need that we need this one for sure we need these two we need loading fetch coin data uh set coin data here set coin market cap data here as well um set loading okay we can have it as false [Music] so we're setting to true then to false set coincide coin fetch coin data um use effect i am importing it um [Music] it's interesting point value is not okay so what if i do here 1 and here let's say 2 or as well 1 and it's not working again rendered more hooks than the previous state that's and it's because of um what's interesting use state coin set coin value coin val okay so it's happening because i don't return this one uh so because the in during the first render when it goes checks here okay if it's loading i don't render these two hooks you state right but during the next one when i actually pass this i render two more extra hooks and you cannot do that you need to uh you cannot render more or less hooks during the previous uh during your current uh render compared to the previous so let's think how can we fix it how can we move this without using this current price that's interesting so what we can do so we can definitely move this one above easily uh coin value okay and [Music] that's good now this one because we need this current price usd right and we can only get it from this coin so but we have to move it up no matter let's just try if that's the case actually let's say yes that's the case finally we solved it i will go through everything and explain everything why it was happening and how to fix it but yeah during the programming uh that always happens sometimes you don't know like at first okay while it's crashing and sometimes it takes less time sometimes it takes more time to solve it but it's usually possible like thinking okay why let's think about the flow what happens right now why it's not happening so but this is really important to solve because usd value has to be the current price and how do we get the only way i can like right now quickly think of is in this fetch coin data after setting all of these we can set also this one so at first have it as empty string right and after we fetch this we say set usd value and then say [Music] fetched point data dot current price that i think it should be market right yeah first of all market data let's just test if it would work then uh current price and not like that look just like that and then dot usd let's see promise and handle through okay let's reload the application i'm not sure if this is let me read what it says here okay so this is not an object layer let's console.log what actually it returns [Music] matched coin data let's go here and it returns a lot of things so here we have [Music] where is market data it doesn't display everything right yeah truncated to the first 1000 but we can check it here market data current price usd well it should work okay if i say the market data it would show me more yes it does show me more and let's uh all-time high all-time high percentage all-time high date is uh current price yeah it should be in market data quite straight away but let's see all term high percentage all-time high date all-time high and as well truncated so let's say current price hey it still shows it and do i have usd yes it's here did i typed it incorrectly nope i didn't um oh yeah yeah i had a typo as someone says so yeah thank you and let's do set um usb value or con yes set you as the value okay let's re-render everything and so on failed invalid we already had oh because i need to make it also to string wow that's a lot yeah now it does work so let's make a short break i will come back after a break and then i will show you an expl first of all explain why it wasn't working and then show you how we changed it but as you can see it does work right now so if we press on let's say dodge coin we can see dodge coin information dodge coin chart that we can traverse to we can go let's say to binance coin we as well see binance co information and we can see how the ch price changed wow that was a dump at the end so it it's working this part is very correct right wow a lot of dumps at the end of the day so yeah let's take a short break and we'll come back with a explanation hello guys i'm back so let's continue and yeah first of all let's explain why it wasn't working so it wasn't working because we were trying to get all the data and the structure all the data before we actually had it right so that's why we needed to have this if statement before uh this can before this uh whole destruction right because it was getting here and said at first i wasn't uh like there wasn't no data fetched yet and it was thinking okay i this coin is empty i don't have any the data in there so how can i take current price for you and unfortunately he cannot so that's why you have to have this check before right and uh later on we had problems okay we had that check but now uh this uh usd value right it wasn't working because i was setting uh the the default value was set to to something that's still not there because my check is actually only after it so there's no way to do it right and now that i think what if i would uh try and do like not instead of having it here right um what if i would have it under this uh not set but um this one right initialize them after we have all the data so paste it this one was one and this one was um something very long uh current price dot so why this typo is always here currentprice.usd.2 string right so let me test uh let's go touchpoint and render oh yeah so that was the other problem so if we use these after right we were getting uh render more hooks than the on the previous one and you cannot do that you have to on each re-render and render use the same amount of hooks that you used before so uh there are some exceptions but they're very rarely used and so for this let's not do that and have it just like that so right now we i i'm not sure if you uh get what was the problem but if not let me know and i will try to explain it a little bit more but you know to put it in short we were trying to get data a lot sooner than we had it that's way because these requests take some time it's not happening instantly so yeah that's why we were checking for all of this but we were checking too late we were checking actually here which is not good right but now that everything is working uh and if we don't have any questions we can move on forward with within because yeah as we can see everything here is working perfectly we can implement bottom tab navigator and to be honest you use bottom tab navigators very very often almost all of the applications use it or well yeah i think almost all of them and also it's really really good to know about it so let's just showcase you how to do that and yep let's go to navigation and first of all as always go react navigation bottom tab navigator go to their documentation that's the best way to do anything uh when you use uh something new and first of all we need to add another library so let's just do that yarn add yeah and that's the thing like when you live stream you will get these kind of problems where you have to debug on the spot and um yeah you see how the debugging works which is also like probably good and uh to to see how it works and to know okay what should i do how should i test and things like that okay we installed it and right now what we need to do is yeah here's a simple example of how it's it's used so we need to import this create bottom tab navigator from yak navigation bottom tabs very similarly like we did here right very similar but let's do it a little bit cleaner so let's create another file called a bot com should it be uh now that i'm thinking should it be uppercase or lowercase but i think let's make it uppercase bottom let's rename it bottom tab dot j6 okay so first of all let's as always import react from react right and let's see okay we need to import this let's copy paste now let's do can't initialize our functional class the functional component bottom tab navigator uh let's do this close it export default bottom tab navigator and in here let's return for now maybe nothing let's go to the their documentation and see okay we need to create this very similar to the stack let's just do that uh let's do it outside like that okay and it's wow it's almost the same just do uh just copy everything and you see okay it's wrapped it's wrapped in a tab navigator so it has its own stack and tab will have mo as many screens as you would like right but um yeah so let's delete these because they are definitely not the same as ours and now let's add our screens so first of all first screen of ours on the bottom tab navigator will be home screen you need to access home screen easily right and now i'm thinking should i spoil you the second one right away or actually i think you already know it i already told you so but let's do let's deal with home screen at first and component equals let's import um home screen from screens um let's pass component as a home screen so we could know what to render when we call this and the second one actually we don't have it yet so let's leave it like that uh okay we have this but we don't see any changes here right and yes you are right and in order to see those changes we need to go back to our stack navigator so uh to the navigator of our screens right and let's because we are already importing home here we don't need to really duplicate ourselves so we can easily instead of rendering home we can uh import our bottom tab navigator from here so we are importing this whole function and instead of passing uh a screen like we used to do for a component right let's pass that bottom tap navigator so it will stack so right now when you import this you it will render everything that's in here like all the screens that you will add later okay but let's not call it home because we already call it home here and that's not good let's call our root folder that's i think that's pretty common to call it root and our initial route name will be root as well um okay so now we rendered our and i don't probably you can't really see here but it appeared here a little icon and here header and we as we said we don't want headers and previously on react version 5 if i remember correctly you weren't by default getting these uh headers for tab navigators so you had to do some kind of work around [Music] wrapping in its stack and yeah which was very annoying right now it's helping but we don't really need it so in order to uh actually hide it let's actu also do screen options equals open the uh object and say first things first header shown all save it and uh i think i made a mistake oh yeah why i'm pressing false as a string false and voila it disappeared let's see a very good explanation looking forward to the course for the course thank you manuel and um i hope you are enjoying it thank you for kind words uh yes so right now the the header disappeared but we don't really see our icons on the bottom right so we need to set our tab bar ack i'm probably gonna mess up the name tint color to a white a yes i did colla collot not color color yes that's good we already see our active screen but we also need to change the color for our tab bar in active tint color and let's make it gray maybe for now because we don't really see how it looks so later we will be able to change and let's make the background a little bit different because we don't really see that our bottom um navigator at all so let's do tab bar uh style and open pla it can take multiple styles but the only one that we need to pass is background color and i have a notes my background color which is 181818 let's save it and it changed a little bit you can play around with the color uh whatever you want by changing here i can press blue and yeah it will show you here but we only need we will for now keep this one i think this one will be uh okay all right okay now we have uh we don't really have an icon here and we need to add an icon here so let's go to expo vector icons let's open oh no no not this one let's open their icons and find something for home okay now which one do i like here uh i think this one should work quite well hopefully yeah let's do let's copy the first one let's import that and you see how easy it is to use icons and expo and let's copy the render method okay but now how do we render it so every screen can also take in another parameter called options which we can open and also has multiple things but what we need is to render tab bar icon and this is a this um is waiting for a function so let's uh let's uh yeah create a function and let's return simply this one and as far as as you can see our icon there is black but let's change the color to [Music] i will blue for now yeah i don't care white blue but yeah as you can see an icon is there first of all let's definitely make it bigger so let's make it 30 yep i like it a bit more and when you call this you can also uh take the first of all focus so it will know if this screen is focused right now focus means open so if you open if you have more uh bottom tabs and you click on another then this home will become unfocused and the other one focused so we'll take we'll check for focus and let's make size based on focus so if it's focused that means if it's open it should be 30 besides otherwise let's make it 25. okay that's good and now now now also you can take from here color right so this color will take active uh let's quickly pass this here in in color let's just pass color right and this will simply take the active or inactive color that you set here right so it knows which color it is right now is set uh okay i think uh we are building something better but right now oh sorry in order to test if it actually works oh but this screen will be focused all the time so you see how this one is implemented and it's easy to like make some changes uh to however you want following their documentation and for now let's oh also first of all let's clean it up buy uh on macbooks by pressing option shift and f and then let's uh go here and oh not here here and uh say initial route name which should be um not an object but string home yep we don't really need to pass this uh because it knows that this one is first but i'm used to passing it and pro uh yeah that's why i'm doing it probably it's not very important but i can't tell there it might lead to some bugs later on so yeah okay so our uh bottom navigation is set uh but we still need like another screen to that we can go to right and in order to do that uh we will uh implement another stream that i talked at the start uh called wishlist so basically you will be able a watch list i mean you will be able to add any cryptocurrency to your watch list because you see how big this whole list is right and it would be impossible if you want to go let's say to the last one not to the lesson but somewhere in the middle it would be hard every time to go and scroll to go and scroll so you'll be able to add certain uh cryptocurrencies to your watch list and just go there and see how they they are performing and in order to do that first of all let's open screens let's create another folder called um called code called uh what list screen and in here let's have an index.jsx and here simply as always initialize everything importing react from react and then the test let's support view and text from react native and then let's watch list green equals like that like that export default what less screen and in here let's return for now in order to test that we're rendering what we need let's just return simple view with text saying hello watch list and also make it white because we won't be able to see it otherwise just like that okay so we have the screen but we also need to add it in our bottom tab navigator because that's how we we are going to navigate there right so let's import a watch list screen from screens slash watch list screen okay and now we need to add another tab screen simply by doing tab dot screen and closing it and also we need to also pass some data there right if you remember correctly oh sorry which is name and the name will be a watch list then we need to pass the component right so we that we just imported here so like we can just copy it and say paste it okay and also we need to add some options so we can copy almost everything here but let's find another icon for called something with a star not start first start um which one i think i like this one let's import fun awesome and because we already imported one icon we don't need to import everything we can just import the name here oh no no no no and uh let's yeah let's import all of this uh huh let's paste it under our watch list name star the size will be the same so we can just copy paste here how size is determined and color will also be determined exactly the same so let's save it and voila we have two watch lists uh two tab menu screens and one as you can see this one is rendered as bright white because it's active right now and it's bigger because it's active if you click on this watch list now this one becomes bigger and white and this one right now it's not active because this one and as far as we can see it says hello watch list that's good but actually i've noticed one thing that we missed because right now we have our whole home as dummy data and we forgot uh well i forgot to make it uh to fetch that data right so we need to do that right now and also during this part you will learn something new probably not maybe not new maybe new but something called pagination because it's really bad practice to just fetch all the data uh imagine fetching 100 more than 100 000 different coins and having them like that uh i i don't i'm not sure even how long will you have to wait or even if that's uh first of all on coin gecko that's not possible second of all it's a really bad practice because it will slow down your application performance and we don't really need to show because we are showing here how i am not sure like 10 different coins so we don't need to render 100 000 of them right if we're not scrolling down and how what we will do so if you scroll down it will fetch more and add a second batch of the coins to the back of the list and when you scroll down more and you can scroll your whole 100 000 coins but you won't be uh like rendering everything at one uh yes i can let's go here here is my app gs yeah so let's uh continue um okay um now so bottom tab navigator is done that's it let's close it and watch list we will get back here and let's go and start working with our is everything good in index right i'm importing i think uh i think it's yeah everything is ready here uh for the further development okay so now let's close it and also quick thing i'm not sure why i'm doing this with object here you can simply pass a simple string and it will work just as well so yeah i can go to detail screen everything is working so probably we can do that to make it look a little bit cleaner yes voila before it's better and this one is working as well so uh let's close this one as well and uh open our home screen where we have the list of coins this file will expand a little bit and let's also open our services and requests okay so we need to create another request and let's call it first of all export cons and call it get market data let's do it oh i forgot a sync it should be okay and then like that and also let's do try and catch and like that okay and here as well let's just come to log right now let's not handle any errors because i know that that's not gonna happen right now but yeah you should probably handle your errors if you're making an application to production well not necessary to be honest but yeah uh so uh okay what what's now we have our get market data but we need to create as you remember const response equals a weight and it's again going to be get and let's see uh coin decode documentation uh what how can we get the list of coins so it i would think that this is what we need list all supporting coins id made symbol no pagination required so this will require everything this will return everything but it will return a lot less data than we need this one list all supported coins price coins price market cap volume and market related data well that's something that we need let's click try out let's uh also do a for usd we don't need to pass any ids here no filters market cap descending let's select instead of 100 because that's quite a lot of um items and we don't need to render that much let's select 50 and page through result one we don't need sparkline data and [Music] let's have priced one hour uh no not one hour 24 hour uh price change percentage and let's execute it here we have uh all of our data that we need and let's copy this uh request url let's paste it in our url and also you can see maybe we'll get back there later first of all uh let's do return data dot oh no response.data let's save it okay now let's go to our home home screen and let's see uh yeah i'm using version six of react navigator and i'm not exactly sure what do you mean it is the best in this case to use the react query yeah i'm i'm not exactly sure maybe because uh yeah axios if you're talking about this works like perfectly okay also the application will be on github after the stream so if you'll have some problems you can just check everything out there easily what else what else so okay let's go to our home screen now right and first of all we will definitely going to use uh use effect because we will want to fetch our data like on the previous ones when we load the screen yep and also use state because that's how we are gonna manipulate our data maybe let's call it like that and okay so let's initialize our states so first of all uh coins set coins equals use state and uh by default it will be just an empty array oh sorry okay then the second we also if you remember we need to determine if it's fetching data or no or finished so that's why we have loading and have you stayed and it initially will be false let's have these at the end okay uh that's a that's already good uh so let's create our use if effect right to fetch the data at start and let's do it with empty dependencies um yeah and let's call let's call it fetch coins it's called a function i mean and but now we don't have that function so we need to create that function right const fetch points so just like that and also this needs to be a synchronous as well um i think uh that's good so now what we are going to do before set the loading to true right then and actually we can already set loading to false after we do everything right so okay what are the steps for fetching all the data so if you remember we need to import everything from uh like that uh where services all right flash requests and we need to get [Music] i can data i think it's called market right yeah get marketed okay let's save it and in here let's do const points data equals a await get market data and simply after we get it we can set points points data right okay so now we will be able to fetch our coins and to set it but right now we are not really using it at all right so first thing to do would be to change here instead of dummy data to pass actual coins that we just fetched from the geco api right and for now we can also yeah now for now let's uh save it and you can see it changed right it changed the data and we're getting 50 original uh data 50 coins that with the prices that they have right now and yeah so that's already good right but we can we still okay how do we refresh the list right we can usually when you drag on the list it should refresh itself but right now we cannot yet are not doing that right so also by default the refresh icon is black which means we will not be able to see uh in order to go around it let's import the refresh control here in from react native go to our flat list and refresh control equals and let's pass this refresh control uh component which will which needs some data so it expects data like refreshing and it means like when is it refreshing so when loading is true that means it's refreshing okay what else we need to change our thin color and we need to change it to simple plain white okay so let's save it and right now as you saw we have this we had that one and still have it but it doesn't do anything it's just simple animation right uh okay what but when we actually drag it down it should refresh the refresh the data so let's create another function called con uh re fetch points and for now they will those these two functions will be actually completely the same but uh later on i'll show you why we're uh separating them and just say on refresh equals and on refresh let's call refetch coins function simple as that and why and oh because we are not this function is not sync right so right now if we drag down it will fetch our coins and update the values but it will update only as often as coin coingico is updating because we're using their api right so yeah that's that okay we know how to re-fetch coins but why are at least so similar right and you remember i told you if i scroll right now to the bottom i'm getting only 50 first 50 uh coins but what if i want to see the last coin well i'm probably not gonna scroll during the stream to the last coin but i um let me check the coins i see a lot of uh comments super 8 bp thank you for fire emojis uh pavilion thank you very much for kind words why 720p actually it shouldn't be 720p it should be 1080 i think i i should check it out after the stream or buddy maybe we'll probably we'll have to check it out that's very strange uh sharayas hey there um they're coming back to this channel after a while who is lucas so i am a basically helping vadim vadim's friend vadim's previous colleague and we worked as teachers in our university we were teaching programming to students and also we yeah we're still uh still good friends so he asked me to do basically he only suggested and if i wanted to do live streams because while he's working on the paid course that he's creating for full stack developers react native which again i'll repeat myself i would highly suggest to join the waitlist while he's working and he wanted to take more days to work on it in order to release faster for you guys so definitely join the waitlist and get your react native skills to the next level so yeah and he had to make a decision either to uh suggest someone to stream during fridays or not to stream at all so i'm not sure if it's better for you to have a stream but not from vadim or not to have at all but yeah for now this is what's happening we'll see how you guys react and then on based on that we'll decide if i should be creating tutorials or not um do you have any paid course can you give me a link of course actually you can go uh to uh here let me quickly show you uh yeah here academy.not jeff.notjust.dev and you will be able to join the weightlift waitlist of the course that i am talking about right now that my team is working on really hard so yeah i think this will cover everything that's important for being a good react native developer so give it a shot and um [Music] great job awesome awesome project guys thank you cactus sports park very much for your kind words and for the support it definitely means a lot to me and us uh yeah so let's go back to the application and where we left off okay yeah so we can get only 50 items right but we need to fetch more so in order to do that we need to implement here uh something like page number because as far as you can see in here if we pass here two it will get me the second batch of uh cryptocurrencies 50 yeah i hope you understand like the 50 cryptocurrencies on the second page uh yeah so we have page number and by default let's make it one so this way if we don't provide anything for page number that means it's one and it should be one and in here uh where yeah here page right we see page equals one let's first of all uh oh yeah let's delete it and have it here page number voila that's already good it doesn't change much because we just changed the request but now we need to adjust our functions right so first of all what's important is to do and actually this tip came from vadim i wasn't used to doing that before but uh yeah it makes sense and we're checking if it's loading in order to ensure that uh we are not sending multiple requests multiple times and basically vadim said it really nicely and i really liked it we're saying to the application be patient wait till it returns the data right and let's do the same for uh refresh coins uh okay that's that so let's uh continue okay but these still are not changing too much so the only actually change that we will do here is with this when we go to the last part we need to first of all uh in here in flight list call a function on on and reached so when we reach the end we need to say something so in order to test if it works let's console log and let's say end right let's save it and let's go like uh scroll from top to the end and let's see if it actually yeah you see it says and that's good that means it works so when we reach the end we will call this function fetch coins but we will also call it with so let's do that fetch coins and instead of console.logging we will call fetchcoins but we need to pass the number of page that we want to do with like that we want to fetch right so how to do it nicely and one way would be to divide coins uh our coins length so it will be for now it will be 50 right so divided uh by the number of uh coins that we fetch per page which is 50 and we can add one so if it will be 100 100 divided by 50 will be 2 plus 1 will be 3 that means we need a third batch if it's 50 50 divided by 50 is 1 plus 1 that means we need a second batch okay so that means fetch coins have to take a page number uh take page number and also somehow and also pass it to our get market data here because uh as you remember oh no i shouldn't have saved yet because as you remember in our services we said here page number and we set it here and also we don't need to do here anything we don't need to pass page number because by default if we don't provide anything it will be one the first one right and that's what we want when we refresh the coins we want to only get the first 50 batch uh and all later we you can scroll and then fetch on and reach okay we will fetch right now coins but we will still see those 50 once all the time and like adding them at the bottom all the time we will not get the new ones because oh because the uh it will override every time you get what i mean so right now you see the bitcoin is not the first first one is clayton which is 51 but because we fetched new data and set it as our coins it override it overrides everything we don't need that we need to add them at the bottom of the list right so in order to do that we can uh create a function here let's say say existing points and actually i wasn't doing this one either too often but uh this will ensure that we don't get any butts and that our data is up to date every time by having this function here okay and we will return from here uh an array uh i have no an array right but in that array we need to spread uh our existing coins that we are taking here and this exists these existing coins are basically the same as this these coins right but in uh doing like so uh prevents some of the uh problems that might appear later on okay so i hope you understand it so if you are spreading and want to have data up to date it's better to do that okay what does what does what does these three uh dots mean it means that we don't want to add to this array another if we do this that means that we are adding to one array we are adding another array so it would be the same if i would say uh if i would have like this then another one and another array right we don't want that we want to add the values from that array to our the values from coin existing coins array so from this to the new to spread them in order not to add the separate array and also we want to add and spread as well coins data that we fetch and we want to spread them at the bottom also not added as a separate array add it as a only the items from that array and this hell it this would be the same probably if i would do something like um [Music] let's say existing coins dot concat and just do coins data that would be the same but um i'm not sure me and radim prefers this way because this is some es6 and it's really really nice uh okay now we're adding those coins at the bottom so it should work right let's test it out so let's uh uh let's wait let's save the application let's reload it and test it right okay so at the start we're getting uh 50 coins right i'm gonna do it fast so you would know like okay so we are getting these 54 coins but you see at the end we are adding another coins and if we scroll faster we add another batch of coins if we scroll faster we add another patch and that way you can go very very long way without actually uh hindering your application performance and uh making it performant and well done this is how you always load a lot of [Music] big chunks of lists and stuff like that that's the best practice okay but now if we go so why do we have this one separately this one is done separately because if we refresh the data right we want to have only first 50 batch refreshed so if we go fast fast no i didn't manage to do it as fast so let's uh let's refresh it and let's go fast and you see it's loaded it loads quickly but you see that it's reloading the data again okay so i think i showed you everything here and let me real quick check the uh chat what's the price of the course so yeah vadim just posted a link and you can join the waitlist i think it's not out yet because that's what i'm saying like that's why i'm doing the streams and vadim is hardly working on that um course because he wanted to invest full time on that to make it really good and yeah uh what else what else uh yeah if you want to build the application for iphone you need to have a macbook i think even with expo actually i don't use windows so vadim is using windows and if he's here he can uh probably uh let you know how we know when the list is finished so the list will that it was it has i think 100 000 coins and if you go to the last one it will just return nothing it will return a empty array so you will not add anything at the bottom and you could probably i'm not sure i didn't test it but you could probably add a check saying like if coins data is um empty don't add anything because that probably means we reached the end of our list okay let's continue and um uh what else what else yeah this is done so now we can start working on [Music] a wishlist or watchlist why do i call it wishlist every time it's watchlist and uh uh during this part we will introduce new two new things to be honest so let's really quickly go back through this and navigation done fetching data with axios done bottom tab navigation menu done and now watch list so but in order we already created a screen for watch list right and we wanted something very similar to this maybe add a few changes but very similar to this one but in order to do that we need to create a thing called uh context api basically use and what context api does you might ask so context api as i explained explained at the start is basically something that helps you to manage data throughout your whole application so you can have and manage your data in one file but access it from anywhere in the app and change it from anywhere in the app this is pro you could use redux as well but i think context api readex has a lot of boilerplate that is in my opinion is too big of a stretch and a bit of an overkill so context api uh readex has its own advantages for sure uh but uh yeah in our case we will use context api so let's continue the stream okay so what do we need uh for context uh first of all we will make it clean so let's create another folder called contexts right and in this context folder let's create a file called the watch list uh watchlist on text dot jsx okay um so what this should contain and first of all easily import react from react easy as this and um for now we will also have to import use context because we're using context right uh okay this is good so let's create constant y ch list provider right let's quickly do this then we x 4 default let me check if you guys don't have questions about uh no you don't okay so we have this and we in here we need to return something so this is going to be a little bit more advanced than everything probably we did before so bear with me i'll try to explain as much as i can and also if you will have any questions you can easily ask anything so one more thing that we need to import from react is create context because we will have to create it right and let's do const which list on text equals create context okay we have the context name right but we need to return something here so we need to return uh wishlist context so basically from this context that we created dot provider because this will provide us everything right so let's close it open and in here let's should i pass the values right now let's not pass it and in this provider we will just render here so basically we want to render our children uh what i mean with our children is everything that's rendered in this provider right away then import chill trend and we will make that this wishlist context wishlist provider is parent of every other component that we use and that way it will render all the children components which is going to be basically our whole application it's gonna be its children component and it's gonna render it inside of it so we could use the provided data so you might ask how do we provide the data well with simple value and we can pass whatever we want we can say [Music] value and call it yay you can add functions here you can add objects arrays basically everything and it will be and everything in your application will be able to access it without passing as props from the top parent component to the whole bottom this helps very much and you'll see our case why it helps right okay we have it here but right now it's not really [Music] wrapping anything so what we need to do is go to our app.js right again and import here our provider import watch list provider from what context watchlist context okay we import it and the only thing i'm gonna leave uh above so let me first of all import and i will explain you probably that way it will be easier so as you remember i was telling you about parent and children uh so this as you can see watch this provider has everything in our application as its children's so that's what this means it will render everything that's in here if i put here only text then it will render that text component as its children and it's going to be a parent of every component in here the only uh it has only one parent component itself which is navigation container so our navigation container has everything as its children even watchless provider you see the here here i hope you do understand it here um what about recoil is it better than redux i i never used recoil i know vadim did a tutorial on it and i remember him saying that uh it's better he liked it better there is even a blog on his website about how to use recoil and i think it even mentions why he liked it so you can give it a look the website is not just dot dev and yeah uh okay so let's continue um but this uh let's go back here and yeah so it will pass this yay value to everything in there now i'm thinking should i show you uh how to get that value or just work on uh the [Music] okay let's show how to get this value somewhere okay so for example i need this value in our watch list screen right and the only way i would be able to have it here is for example uh if i would pass the same prop from app.js to every so from here to navigation from navigation to a detail screen and then from detail screen i i would be able to take that's a lot of steps and data might yeah it might lead to a lot of books bugs so this watch context api will help us to prevent that right uh you might ask okay so but then how do i get all the data that i need here and that's a good question so uh first very easy thing uh what are we what we can do is import um let me say from oh sorry how this uh and we need to import uh let me show you we need to import first of all export this because we will have to import this wishlist context everywhere actually we won't need it because i'll show you a better way of doing it but just yeah stay with me for now okay what's the pathway that's uh but i think it's this and then contexts why i'm not seeing them then what list context that i don't need that i think it's that it's correct and from here we need to take this okay so let's save it and now uh how can we get the data there so one thing would be to to to to go back here and actually well let me remember how to do it [Music] i don't want to say bad way but the way that i don't like um i think it's here uh yeah it's like that so we also in order to do that we need to import from here again use i'm just showing like um how it works but not the best way and that's why it's for me a little bit harder because i know how to use it the easier way um i'm not sure if it's the easier but the right way let's say like that so we import this use context we import this wishlist context so now what we can do is const and say something like wishlist and then do use fun text because we are using that context and has the context that we are using that's so many steps okay but let's try to go on and also as we are having here values passed right we can simply actually straight away the structure like we learned the value so let's console that log why i'm not getting predictions anymore i don't know but it's a little bit annoying let's go here let's go here and as you can see it says yay so we were able to get that data from here to such a deep deeply nested uh screen so easily and this is usually uh used a lot this is usually used in a lot bigger applications where you need that same data in multiple places and to access it easily but now i will show you how to actually make it even easier and more readable so you see that we have to import everywhere use context also wishlist context that's a lot of things that we have to import and then also do a whole this whole thing so an easy way would be to instead of exporting this wishlist context let's create our own hook let's do export const let's call because all hooks are made well to you so use uh watch list i will probably some somewhere right wishlist yes i did i called it here wishlist ah let's should i change it or leave it how did i call it in my app list at least that that's good so let's do some changes why do i call it sometimes a wishlist it's so watch watch list context yes and now change here to watch the content yes and now it won't work because i have here which lays it should be okay uh so yeah we create this right um as a function which will simply return use context like we did there and we pass the watchlist contacts that we created that we already have right so instead of doing so many things what we could do is actually remove this at all we don't need it at all instead of this import you know this one import this use watch list here our hook that we created and instead of like creating the new used context and passing the watch list we can simply do use what use watch list and the structure the value from there and let me delete it to show you that it works just as well let's reload but you'll as you can see there's no data here let's go to watch list and yay is printed and you see how much easier and cleaner it is we only need one import and one line everything is taken care of here it looks a lot better i think it's a better um practice to do it this way okay uh what do what is full stack the course of what that vadim is doing it is full full stack developer um okay so now we have this context that's good already but we don't really have any kind of data right for now so we need to make our data easier to handle and actually to be able to handle it at all so first things first what we're gonna need is also state because that's where we going to store all of our watch list coins let's initialize the state uh construct watch list coin ids we are only going to store coin ids uh first of all because we always want to get the most up-to-date data and if we store them as an object it will have outdated data very quickly right because it will not update it every time so we will set the ids and now we will set watchlist uh coin ids right use state and by default it will be an empty array okay we have this one uh what else so right now uh we can just simply instead of returning nonsense return our watchlist coin id so basically this one return this here okay uh that's that's good but we also need to be able to store our id's and you remember i told you uh that we are going to use something called a sync storage so a sync storage is let's call it a simply very very simplified database on your phone that's like an easy explanation but it will store the data on your phone and keep it as long as you don't uh delete the cache or delete the application from your phone so it will always have it there uh this is also uh i wanted to showcase the sustain storage because it's kind of important to for example when you manage um authentication you can use it or when you need something uh like that you can access anywhere uh in the application but it it only it can be only stored on the phone the uh cache so you don't need to actually do all kind of queries to your back end and uh yeah this simplifies some of the things uh where you don't need to where you actually don't need to use um um [Music] back-end and real database so okay uh we have this these coins here now we need to install a sync storage so let's do expo uh sync storage go to here and easily install this into our application expo install react media by saying storage slash sync storage let's do that okay okay it installed so now let's go back and see full documentation at sync storage and here i can see the whole documentation and everything that i actually will need to use how to import it so import uh you import it from react native missing storage slashes thing storage let's copy it go back import it in here and you can see what i'm going where i'm going with this i'm going to handle all the logic everything in this one little file and we will be able to manipulate that data and access the data from anywhere in the application this is really powerful okay we have this async storage here uh what do we need now so first of all we probably need to be able to read the data from using storage first thing we are going to use use effect hook to read the data when this is basically opened or yeah so let's do that use not state use effect uh just like that i like that and let's pass empty dependencies okay and in this use effect i'm just gonna like always get watch list data not wishlist watch list and now i need to create this function get const get what list data okay uh we have this function so we will also need to make this a synchronous function and these whole requests to the async storage will be also wrapped in a try catch block just like they show in their documentation so reading data and try catch block let's do that try and also catch and let's just console log that okay and now and try a block what we will do is so the thing is that it you can only store uh maybe i'll talk about it when we get to the story so first of all let's just call json value equals await and we will make a request let's say to a sync storage to get an item with uh with the key so we here we provide the key uh on which it will know okay which data do you want from using storage because you can store a lot of data there but we let's say watch list coins and later when we will be adding coins i'll show you where we set this key name okay we get them from there but what now what can we do with it right so we can simply uh set watchlist coin ids here and uh we kind of probably it's good to have a check so if json value is no is not null i mean uh then we can parse json dot parse uh json value otherwise return empty array so what this parse does is what i wanted to mention is that you can only store strings in a sync storage right so this parse will parse the string to one to json basically object value that we need uh if the json value is there is not null otherwise it will just add a empty array to set watch list coins and also as you can see they are showing you the same exact thing like check json value if it's not null you can parse it otherwise set it as null but we don't need a null we need to set it as um empty array okay and that's it for getting coins but right now we are actually we have no coins to be honest so we will just get undefined because there first of all it's not the value anymore but it's a watchlist coin ids called so let's import that but it will still show the same it's an empty array we don't have any values there okay now we need to be able to store those values there right so we need to create another uh function called um let's make it here called const uh store watch list data it will also be asynchronous and [Music] yeah so it will also be in a try catch for a little blocks okay okay and in here we will need to do something a little bit different right because okay how do we know which coin to store so in order to know that we will accept uh an id parameter uh of uh coins so just like that just with this structure from props that we receive here id uh or we can probably pass a simple coin i d to make it easier to understand okay so in order to add the data to our sync storage first of all we need to initialize new watch list and new watch list will be everything that we have here already and you remember already taught you about spread operator here we spread every value in here instead of being a an array itself we just need to take the values from here and also add the coin id that we get from here we add it at the end of the watch list okay so we now have a good data but now how do i uh store that data right so we do cons json based on value and we also do equals json and now as you remember again i told you that we only can store string strings to using story so we need to stringify our data and uh first of all give it a key how you will name it so you remember here we will call it watchlist coins um so that's going to be their key and the second parameter is uh the value that you want to store so well no not this one we will be storing our new watch list okay uh so we are starting it we're not starting yet we're stringifying um and i am doing i'm getting ahead of myself looking into that documentation that i could just show it to you but uh yeah while i'm doing i'm looking at my documentation here so this basically page and to store data first of all we stringify then we start so first of all i do perform at my new watch list how i need it then i stringify this watch list to json value and then as you can see here i can do this to set it there in a sync storage so i'm saying storage set item instead of get item we should pass the key so watch list coin key and we pass the json value that we just tranquified to here and the last step that we need to do is just set we'll watch list coin ids to our new watch list that we created here simple as that okay so we can store we can also already pass our function store watchlist data and maybe we should call it store watchlist coin that will make more sense no no i think it will uh and maybe even coin id will make even more sense because we're storing only the id and we should make our function names as as easy to understand as possible right okay so we can store we can get what is the last thing we need to do we need to remove our we need to be able to remove the coins from our watch list okay let's do that const remove uh remove uh store watch list coin id why do i have store remove nice because i was reading here a remote store yep okay my tiredness is kicking in uh let's simply do this remove watch list coin id right and it needs to be a synchronous as always uh it needs to receive the coin id that it needs to remove right okay thank you uh yeah it needs to receive that so but what do we we also need to uh create a new watch list but we don't need to add it we don't we don't need to how to remove it right that's the question and the easiest way to remove it is take this watch list coins ids right and here uh filter filter them and uh first argument is the coin id from the watchlist coin ids and let's just simply do a simple if statement so if uh coin id now these values were coin id value let's say so if coin id value that we get from here is not equal to coin id value that we get here then it's all good it passes our filter condition and it will be kept inside if it does match then it will not pass our filter condition and it will not be added to our new watch list right so now we the same we need to create our another coins json value equals json [Music] and we need to stringify our new watchlist to make it a string right okay and now after we make it we can check how to remove data so uh in order to see more usage we can go to api because they're showing only the simple usage and we kind of want to see a bit more so here's everything that you need you can merge items you can but yeah here's what we need we need to remove uh actually we don't need to remove it now i'm thinking you could remove but you would be you would be removing only the the whole key so we would remove the whole uh array that we stored watchless coins but we need to just update it so it's actually completely the same as here so we do this and we then set it like just like that and um i think i messed up the name yes and what new yeah what list and here okay and now press remove uh watchless quantity so we have everything that we need in order to manipulate and get our data everywhere we can get it we can remove we can edit everything is there right so let's drink some water okay and now we need to make use of this data and the the first thing uh is where we will implement some changes is our watchlist screen so right now it only renders a simple text and we needed to render the whole flat list it's going to be actually very similar to home screen that we have so we can even copy some data but maybe i'll show you without copying how to do it maybe that would be better so let's do flat list okay and now instead of returning view let's return a f list okay that's good now uh what the flat list needs so first required is data and we will use this watchlist coin ids from that we can get from our watch list hook use watchlisthook okay and the second thing is as you see here is and actually that one i'm gonna copy because we will be it's going to be completely the same we need to render item and we need to run that coin item and again lego analogy here so we are using this coin item from components that we created and we created it on purpose in order to be able to use it easily access throughout the whole application uh so let's import it at first let's import point item from okay and i hope it will show suggestions yet it's showing components coin item uh perfect and uh yeah now it's raining but because this is empty it doesn't have water render there right uh and this is good for now because we need to implement a way to add uh the coins to our watch list so let's go to detailed page and you remember we on the preview stream we created in components our header coin detailed header that has let me show you that has back some values and this little icon so this icon should actually be a start and we will uh go again to expo icons vector should have been before but okay let's have a star and we uh uh i think we used font font awesome so let's do the same here and we already are importing some so fon [Music] ah some is it five or simple one simple font awesome and copy this one and where is it uh so here user so first of all let's paste it let's say white let's make it 30 like there or not 60 30 like here and let's okay maybe 30 is a little bit too big so let's make it 25 25 yes i think that's okay but we also um now that i'm thinking we need to have it so let's have this yellow yellow should be when it's in uh your in your wish list already but we need an empty one actually and font awesome has star oh that's perfect let's have it for now star oh white so we will make change changes later on this uh but for now we can easily um [Music] okay now i'm thinking which maybe i should take a short break before continuing because after starting uh i won't be able to like i would have to work quite uh quite a bit because there's gonna be like adding deleting and then changing the icon and stuff so i'm gonna take a short break again and i'll see you in a few minutes thank you for watching and zohar thank you very much for good words i really appreciate that you enjoying it and you're still here i think you you were here at the start of the stream oh maybe even the first one to wow wow really appreciate it you really want to i don't know learn or but yeah good job really really much okay see you later guys i'm coming back don't go anywhere two one minute and i'm back okay so mr nine hearts for you two and let's continue where we left off okay so we need to be able to add uh those um if everything is okay i'm live yes we need to be able to add uh cryptocurrencies to our watch list because right now we can't do everything but there's no functionality for that yet so in order to do that we will have to implement some functions so first of all let's we're gonna have to open as well so watch the screen we don't really need it cut right now uh watchlist context um as well not really right now so let's open uh coin details header component and coin details itself and here in coin details header we are passing all the image symbol and market cap rank we also need to pass a coin id which is uh do i destruction no which is we need to take it from just simple id where is it okay and pass it as id uh what what else do we need actually that's it we only need coin id if i think correctly but we'll see okay so that means we can take a coin id here and now we can create a function that checks how the star should be displayed so let's do that const um if point is watch listed okay let's uh check it out let's check it out let's check if it is watchless already and in order to do we are going to do a simple uh simple very simple um function uh but for that function we need to import here our context as well and if you remember how to do it it's very simple we import because we made it with the hook we import use watch list from and we do it from uh where is it uh context flash watchlist country that's it and we can use this list just by simply uh what we need to get actually i needed to leave this watchless context open and yeah we only need to get this all the ids that we are already stored so simply like that equals use watch list and what we will do is simply return watchlist coin ids dot sum sum uh checks if the condition matches some uh so basically what i'm gonna do i'm going to take coin id value from watch list coin ids and then i'm going to check if that coin id value is equal to the point i press coin id uh so that means to this coin that i'm open here right and we can simplify a little bit this function just by simply we don't need to have brackets return and the closing brackets we can simply do uh like that which uh looks a lot like nicer and cleaner probably okay we can check so right now what we will do we will uh in order to determine the name of the icon we will call this function and say if check if watch if coin is watch listed if it's true then we will display i don't remember the name but it's just star because it's watch listed uh so return start else it will be star oh oh not start star okay so here you go that's that's already good but we also need to do the same for the color so let's clean up a little bit everything in here by clicking on macbook option shift f and it really fixes everything and makes it nicer so here's our icon that we're working on we need to actually do the same thing on [Music] on the color so let's check oh sorry let's check and if it is watch listed then it will be yellow but i will try to find maybe a gold one otherwise it's a simple white color right now let's watch this but i don't like this yellow so what i'm going to do is go to yellow hex colors and shade of yellow agree maybe something like this amber will work nicer i think so let's see i think it's definitely a lot nicer let's leave it as amber and if it is um okay what if it is check so bitcoin no it should be the other way around so why is it returning to uh watch list quantity sum if coin id value equals to coin id and if it's true then it should be a star wait for it yay lucas is back thank you vadim heart to you too um love from india a lot from lithuania guys how are you able to work so hard i am ultra lazy please give me some tips actually it's sometimes really hard to make yourself work but i always try to think about bigger goal what will i achieve by doing this so i'm not sure what's your end goal for example with your work but of course if i don't enjoy the work i probably it's going to be really hard to make myself do it but that's just probably it's hard to give a tip how to fix that but if you're working on something that you're really enjoying doing it and for example you want to make a career out of uh programming in this case um that's what i think i think about a bigger goal and that's how i try to push myself myself saying okay if i don't work then i'm not going to reach anything and then i'm just going to be a lazy let's i don't sure if i can swear so i'm just going to be say i'm just going to be very lazy and probably play games every day and i don't want that to be my end goal you know i want to achieve something a little bit more so thinking and i'm dedicated to do it i'm dedicated to prove that i can achieve it so that's why i'm probably finding uh motivation to work and yeah this is think about your end goal and think if you can reach it without working yeah i think uh i think that's something oh no i thought i know but now i don't really know why is coin id let me console log everything that's how we debug here right coin id let's console log uh coin id let's go here bitcoin yes so let's encounter log watch list coin ids empty so some coin uh id value if this okay so if check watch listed if it is watch listed right then it's amber if it's not watch listed then it should be why okay let me then console.log with this return content log check if watch listed oh it should be oh gary it should be a function now it works okay so i'm getting a little bit tired and but yeah let's er not a lot left let's take our last energy and make it work before a nice friday afternoon uh okay so yeah we are doing simple checks if we are uh if this coin id is watch listed that means we are displaying amber otherwise we are displaying white and the same for the icon okay that's good but now we need to also be able to store this uh right to store this id of the bitcoin in this case so let's copy this uh let's import it from our hook and let's create a function that will be called on uh this icon press so icons can take in as well uh on press parameter so let's pass it a function and let's call we will call the function something like handle uh watch uh list coin is it okay i i think it's gonna be good hopefully um but yeah so as you remember we can if we don't pass any parameters nothing we can simply call it like that and now we need to create this function so in order to create it let's do cons let's do it like this and uh in here we will also have to check so if uh check if icon is it's a function if it is watch listed that means we need to remove it but so also let's import remove watch list coin id right uh here so that means we need to remove it uh which we will return remove watchlist coin remove watchlist coin id and we will simply pass the coin id here but if it's not watch listed that then we need to add it right so store watch list coin id and let's do coin coin id yes that's already shaping up a little bit so in order to test it i we are gonna get an error because we're trying to render this let's not try to render we'll see what will it throw but right now let's console log uh console.log watchlist coin ids and it should be empty it is empty now let's go to ethereum let's say add ethereum uh missing keys for okay so it's but you see the icon changed so that means it's already good and let's go back and now let's go to our watch list and it should be ethereum is there you see everything is working perfectly and if we go back to ethereum because it's stored locally it is uh still here even if i let's say quit the app and go back to the app [Music] and go to my ethereum it's still watch listed but now if i re click on it again nothing happens because let's see why uh promise and handle the rejection remove watch list coin id uh okay uh what's wrong with the remove filter oh because here okay so i made a mistake here with naming it wasn't matching so now it should work let's click it again and it removed so if i go back here i have an empty array no longer ethereum is there so everything is working here uh that's already oh yeah you're even saying if function [Music] it's best practice to use function inside of okay uh yeah so we already are able to store delete and um change our manipulate our context and you see how powerful it is i can easily access in a lot of different places the same data that i need so that's why it's so powerful and but right now okay we are not really displaying anything here so we need to be able to display the data here as well and in order to and the problem is that we are only storing the ids so we could easily just display ids here right but we need to display the actual normalized data so in order to do that we have to go to our watchlist so this one we don't need this one we won't need as well and yeah so we can actually go back here and return the render item but not safe because it will crash right now and here we will implement some more things so first of all what we need is um maybe i'll explain you how we'll do how we'll approach this so coin geeko has a possibility to query the same data only on ids that you have so i can pass here let's say bitcoin solana and let's say bitcoin and salon and i can execute it and it won't return me everything but it will only return me uh everything about bitcoin and about solana the the ids that i provided so that's what we're gonna do we will read take the data from our sync storage and read what kind of ids have and make another request to uh get the current data about these uh cryptocurrencies and why are we doing like that and not storing simple objects to using storage i already explained but i'll repeat myself if there are new people it's because the data will get outdated really fast because let's say we will store bitcoin when its price is 47 000 but the next day it will be um let's say 56 000 dollars but we will still show in our uh watch list forty seven dollar a thousand dollars because that's uh the value what we stored we could probably update it on every open of the application but in order to have the most consistent data every time that's why we're doing here every time to you enter this watch list you will see current data okay let's get to work so first of all we will need use state let's initialize the state so let's call coins set coins uh use state and it will be an empty array by default here okay and as always we will need some kind of indicator whether it's still loading the data or it already finished loading it right okay and by default it will be false that's good good start now we also will use use effect again in order to get the data uh when you open this screen so let's do use effect and just like that close the bracket okay and in here simple uh we are following uh pretty much what we did quite a few times already fetch coins and fetch coins we will create a function for that const fetch coins maybe let's make it fetch uh watch listed coins that will make more sense and as i remember i thought we should be as clear as possible with our naming uh okay so now we have which uh fetch or what i always make this mistake why watch list okay so we are but we also need to implement the actual uh request so we need another function that's going to be called get what listed uh coins it is going to be a synchronous as always we will need some data here but let's wait a little bit and also in a also need page number because if we want to include the pagination later we'll see uh if i'm not sure if i'll make it in time so maybe i'll leave a pagination out but it's basically the same process as we did for home and pagination is if you remember is basically not loading everything on one batch but loading on end reach new coins okay um so you will need page numbers if you do that and then also the coin ids okay uh now let's first of all let's go on to log if is some kind of error and here let's simply repeat cons response equals axios.get and in here we will uh go and take our uh you request a url but right now let's return response dot data oh response that data and let's go and find um yes here oh actually i think we can simply uh let me check where is it so get market data get i think it should be this one but maybe i won't be able to use it [Music] yep uh we can then simply uh go to marketsv simply go here and set everything that we need okay so usd bitcoin solana category none actually everything is set already so let's just copy this request url let's paste this request url here and like we uh like you remember here are the ids so ids equals bitcoin and solana so instead of this we will have it like that and pass coin ids in here uh yes i think that's it for our request and now we can import this request here so let's do import from and from our services where is ours here they are service requests and we need get watch list watch listed coins okay so um that's good in this fetch coins or what we need to do is first of all like redeem like i showed you before and vadim said like if loading then return because we need to tell our application to be patient while it's loading then here set loading to true because here we start our patch and at the end let's set it to false and in between those we need to actually make the uh fetch so const uh let's say what listed coins data equals to await and await get watch listed coins for now we were not gonna i'm not gonna pass any ids because if you see we need to kind of transform them uh i'm not let me try to yeah zoom in here and they have after each um id they have this uh percentage to c basically that's like their comma that's how they're separating everything so i'll show you how to in our list add an array after each value and a simple instead of a comma this percentages to c symbol or whatever it's called okay that's good let's go back and let's um okay so after we get this watch list the data simply we set uh our coins and if you remember from before we do exist coins i'm thinking should we because i'm not sure i'm now thinking like should i do like that because i'm not sure if we will be able to manage in time the pagination but let's do it in case we do manage and uh just like this open it you spread our existing coins with uh wish watch not wish watch no this one okay and then set loading to false that's good and also we need to make our function asynchronous that's as well very important uh right now it will uh again we will get an error because we are not passing any kind of uh ids there so in order to pass those ids we before that we need to transform them so let's create a function const transform um point ids and uh we with this function we simply take our watch listed coin ids which are here and we do dot join which will take the array that we have take its first value and join it by uh adding another value after whatever you put here you can put it like comma and it will and it will make it as a simple string from array but as you remember for we need to join it by percentage two and c uh yes so and in here uh let's right now pass the page number as one and transform transformed coin ids so because we don't really have anything yet so it will still not work um but um oh but it's not working because we're passing these coins so we need to pass uh coins from the state there because here are only ids and we're trying from these ids to render this coin item which is really impossible and i'm still getting this one undefined it's not an object let me drink and see what's happening nice presentation thanks uh thank you very much let's go yes let's go uh okay let's uh see what's not right well where did this was introduced uh set coins that's all good i think data coins which is yes um maybe here something is not correct oh also we need to import page number but that's not the problem but let's just do that while i see it okay [Music] what might be the problem here undefined is not oh let's check our um and the vine is not an object evaluating a either symbol iterator to two okay let's start the debugging process why it's not working so we are importing these ids yes we have coins we have loading which is correct we are joining our uh transform watch listed ids everything is correct here for sure uh what else get watch listed coins and maybe i'm missing something from flatless okay it's a it's interesting it's interesting where did i introduce this error i'm wondering it's it's probably not this one watch list get watch listed coins do i return the data correctly response data yes i am fetch watch listed coins which is set coins hmm that's a really interesting to be honest maybe it's oh no this one may let maybe there's something in the watch list here so let me check um sync start at it's here it's empty if get watchlist data set watchlist yes just like that okay okay okay uh oh here set existing coins set coins undefined is not an object let me try to add it simply but let's open home and let's copy it oh okay maybe it's because i'm not returning it like this let's see not exactly but what happens if i just do simple like that existing coins right what are but now i don't have existing so it's simple coins and watch listed coins data okay yes it's because of that and it's a little bit strange to be honest [Music] but but it works like that so setcoin maybe it's because it's empty i'm not exactly sure on the date but vadim is trying his best and i think it's somewhere at the start of the next year but i don't quote me on that i'm not exactly sure and good evening paramount uh good evening have a how are you doing yes so let's leave set coins like that um as it's working but i really really don't understand why it's not working uh let me try okay set uh set coins right so i am taking from here er existing coins right then in here i'm going out like uh doing a function which i spread existing in coins and also watch listed coin data actually i didn't check what this returns okay and it's working right now so most likely i had some no it's not working and actually we don't need it to work right uh let me try to console.log this in order to check maybe this is not returning anything but we don't really need it to work uh as okay here so it's not even undefined that's why but watch listed coins data to [Music] okay so that's why it's uh throwing us an error because this one is uh this one is undefined so what if i do this and it's i'm wondering why it's working okay this little button is really annoying okay here okay yeah like that it is working but then i'm wondering um we are not sending any coin ids that's why the problem so yeah this is probably the way to go around it to have it uh so basically we're saying we're either returning this but if this is [Music] undefined then it will be just an empty array and then we will be able to spread it uh yes i think that's uh a good way to go around it uh because yeah i'm thinking like okay if we don't uh send any uh if we don't have a if our watch list is empty what's then so then it should be empty it cannot really spread on an empty array on an empty undefined object or anything okay let's leave it like this let's reload to make sure that it's working and drink some water to stay hydrated yes it is working so that's uh what are we going to do yeah so as i explained this one it says either get this one or if it's undefined or null give me just simple plain empty array and actually let's do a console log here to check it out yet it's yes it's a simple empty array that's good okay uh so now what we need to do is try and i think only what's left is to try and add some coins so let's go for example finance coin let's add it let's go back let's uh open watch list and it's not the rendering because because i'm touching coins uh fetching it definitely let's let's check it to where to check fetch watch listed coins oh well maybe yes i would also need one more thing actually that i forgot we need another use effect uh basically and we will run this uh use effect uh let's do it just like this we will run this use effect when we change our watch when our watch listed coin ids change so that's why we passed this one and when they change we need to re-fetch our coins and um to re-fetch them let's create another function re-fetch points uh maybe it would be better to say watch listed coins so let's copy yeah not noticing any more like simple bugs uh so the problem right now is that uh we are not seeing there's no problem actually we're just solving uh trying to build on top but we don't see any uh coins here but we should be able to see so um we are trying to make it that uh yeah we're trying to make it so that it would update every time watchlist coin ids from uh our context changes so every time it changes it has to update it here automatically and in order to do that we would actually uh just should do a simple now i'm thinking okay there's definitely no time for uh there's definitely no time for doing the pagination here so what we could do here is we don't then need to spread the coins if we're not doing pagination we can just simply set it to watch listed coin ids data and here also say fetch so now let's see um and also we kind of need to add the same things here from the home so let's add we rash control and here also refresh control which will um we should [Music] pass our refresh control and we are doing this because we need to change it uh change for example first actually we only need to change the color and we cannot do that without this refresh control and also when it's refreshing just do simple loading and when it's um and print color should be simple white okay so let me actually check what are we getting in our watch listed coin ids console log dot log and watch list coin ids there is binance coin inside right okay so uh maybe i messed up the request ids 50 page number okay but what if i add another one maybe i think i might know the problem but let's just check and binance coin is still yeah it's still like that okay let's refresh it okay probably i should messed up uh this one and also we don't need this here so let's console log it console.log this one it's not much okay refetch oh and also on refresh we when we drag it down we need to fetch watch listed coins again okay so now i should be able to see what it returns and i don't need where is it this one no i need this one i don't need this one anymore yeah it's undefined probably i messed up the url so let's go back and check it again or maybe first of all before doing that let me check one more thing and it's um transform coin ids let's see what it does uh what it transforms to violence coin and 2c i think that's that's how it should be yeah ripple uh okay so maybe i messed up the url let's check it out uh how it should be close this one and um yeah let's see where is their api request url um here's the corner ids and hmm okay that's really let me try here for example adding this one and coin ids and let's see okay yeah so i definitely messed up the url but i'm not exactly sure where did i do it so let's go back here and there and just copy everything again because what i did let's here paste it in and here where we see ids deleted add this one finite coin ids and also a page number whoo and it's still not right what am i doing incorrectly maybe i'm copying as i already saw it usd ids bitcoin so on and here it's definitely this one we can say this for sure but where oh maybe let me reload okay um there's currency usd and then ids coin ids and then order market cap which is correct descending per page 50 and page sparkline falls why is it wait let oh my god i need a weight here okay so this little await function uh wait thing uh yes oh wait axios you forgot the way cerek thank you very much i'm not sure why i didn't read the chat but you're right um can you share the state between different screens what do you mean by that can you share the screen between different states and sarik thank you again i forgot oh wait yes yeah yeah okay now we are getting uh basically multiple of them which is not correct so like which shouldn't happen let's say uh we should only fetch them once and uh yeah so what we are gonna do first of all reload go to the watch list and here we see our so let's go here let's and um yeah we don't need this one this one was as someone called the redundant but i i wanted to do it because uh i wanted to implement also pagination for this one but it's pretty late already um yeah these tiny things are really annoying so uh yeah as i as you will as well said like i didn't need a two of these but i wanted to do it at first because i was thinking i will i might do the pagination but i won't have time as it's pretty late and uh let me check if i actually showed but it's pretty like it's pretty similar to implement like in home you would have something a function on and reach where you would call it when you reached the end in order to get more data you would actually check uh probably do some sort of check on and reach if it's because uh you might have not a lot of items and it will always be the end so you would check something like if watchlist coin ids that length is isn't equal to this that means we need to fetch more uh also um i think i showed yeah most of the things i'm not um yeah someone is saying ada wait i don't wait at a weight you mean a weight uh where i think it's uh it's done already no 47 um yeah i think it's done but uh thank you guys as well i'm very tired and it's hard to notice these two tiny things already so i'm sorry and yeah let's really quickly recap what we did so um let me should do it like this and put this in on in the middle so yeah as you can see uh we actually did quite a bit during the second part there's still a lot to be done but uh we're already getting there i'm not sure like maybe we will even do a third part because i still have quite a bit of ideas here and i want to like smooth out some of the things but what we did is we are able to fetch everything from the [Music] con geeko api we implemented pagination here which is really nice it's a very good practice to use we also as i said made it with real data we also implemented a watchlist where we can add different uh uh different uh cryptocurrencies that we want to watch so let's say i added that one let's add usd coin as well let's add uh bitcoin because everybody probably has it on their watch list and let's add avalanche so now you see i'm updating everything and if i go to the watch list it didn't update it but that's what i was trying to get to and if we will do another stream i will definitely implement it but right now you have to drag in order to update the values here so if i go here i can delete for example avalanche go back refresh and it's not in my watch list anymore so yeah we did we covered a lot we covered the context api uh sync storage uh we axios bottom navigation and um yeah there's a lot more that i would like to show and showcase and if this stream uh gets a lot of i'm not sure not a lot but if people like it we may uh do a second part where we actually fix this issue where you have to reload every time you add new uh add new coins or delete so that when you go here it's always up to date um yeah uh i think i think i showcased most of the things and let me really quick try actually one thing before finishing it so let me try what is here let's say watch list coin ids let's save it let's reload the whole oh no this one again here stuff well it doesn't matter but let's say i right now go here it updates tara let's delete let's go back okay so that's your uh here's your fix right now if i add let's say [Music] phantom to my watch list i go back i go to my watch list and phantom is already here and if i go bitcoin i delete it for my watch list i go back and it's not here anymore so here i fixed this one real quick as well while we had a little bit of time and i wasn't able to test it there are no bugs or anything uh so uh we had yes exactly the reaction that's your that's exactly what you said yes yes uh so i appreciate your support guys uh though there are people who stayed throughout the whole stream i'm really impressed guys wow and uh yeah thank you and you were really active as well maybe there were more people who were uh during the whole stream but some of you were really active in the chat and were helping me when i was stuck or uh didn't manage to see like things so i really appreciate that as well i i hope you enjoyed my uh my stream yeah and i hope you miss my team but as well i'm not that of a bad replacement so again thank you very very much guys i appreciate you staying here throughout the whole time i appreciate all the good words uh and all the help from you i hope you like the application i hope you are excited for more streams from me because there will be a few more and i highly encourage you to go and check out vadim's vadim's new course that he is working join the waitlist because he's really trying uh to do it very very good for you so you wouldn't have to buy multiple different courses so you could have everything in one course and that's why but it has to come with the cost he cannot really be in the streams anymore because he has to work so i hope you'll understand him as well and see you guys later thank you again for all the nice words that i'm seeing here uh love you bye and stay however tim says drink water stay hydrated and keep coding something similar to this bye guys

Channel: notJust․dev

Views: 5,843

Keywords: vadim savin, not just development, notjust.dev, react-native tutorial, react native ui design, react expo, react native live coding, live coding, react native aws amplify auth, react native auth, javascript, react tutorial, react native, react native tutorial, programming, crypto price tracker, react native crypto price tracker, react native crypto app, how to build a crypto app with react native, crypto react native, price tracker app, learn react native, react native ui

Id: xuBB-k6jAqo

Length: 234min 42sec (14082 seconds)

Published: Fri Dec 10 2021