Let's build a CRYPTO Price Tracker with React Native (step by step tutorial)🔴

so i think we are live yeah yes we are what's up no just developers welcome to a new live stream today is a special live stream and um we're gonna talk about why is this live stream special in a moment but yeah in this live stream we're gonna build a crypto price tracker an application that will uh help us uh be informed about the prices of uh cryptocurrencies and never miss a dip all right so what exactly we're gonna build uh today we're gonna start with the home page of a price tracker application and it's gonna be quite similar with applications like coin market cap or coin gecko if you're using any of this so here we will display a list of uh cryptocurrencies with their details like name price uh market cap and so on and after that after we display this long list of all the cryptocurrencies then we will get into the details and specifics of one spec one cryptocurrency and on the details page we are gonna render more um information about that cryptocurrency like the again the name price thicker and also most importantly is the graph we're gonna render beautiful graphs in react native with a cool library and um yeah these are this is the plan for today advance we're gonna of course put everything together with navigation so that we can navigate from one screen to another and um yeah i'm super excited about this uh this build uh everything is gonna be done with expo and javascript uh because this is about the easiest way uh to get started with mobile development in in react native so if you're a beginner the installation of expo is very very simple you just have to install expo with npm and that's it you don't have to go through the hurdles of setting up android studio or xcode and if you're more experienced you already know the advantages of expo and yeah they're not sponsoring this video but i love working with them uh so why is this live stream that important it's important because i want you to to introduce you to someone new someone who has recently joined our team i mean he joined the team quite a while ago with helping a lot behind the scenes but today he's gonna take the stage and he's gonna do the tutorial um the crypto tracker application so i want you everyone to meet lucas hello lucas welcome hello hello hello guys uh i'm very excited to be here and to build this application uh i'll introduce myself a little bit although vadim already said that i was helping a little bit on the backstage and yeah so my name is lucas i am a software developer i usually mostly work with the react native therefore i'm creating an application in react native and i really hope you'll enjoy the stream and the build because yeah i'm really excited myself about the crypto and the programming so i'm pretty sure we will enjoy it so yeah like a little bit of background lucas was um we were colleagues at university and also we were both working as teacher assistant at university and um teaching programming to to first-year students and yeah like that's where we started enjoying teaching and sharing our experience and also lucas worked with me uh at my startup vitinum my previous startup and now uh actually lucas uh took my place there i see you no but uh yeah he's taking care of a technical side there so he knows what he's talking about all right so um back to our presentation uh what's the next step here yes i want to talk about why why we're doing this um during the month of december i'm going going to spend most of my time on uh finishing up and building the uh my course my premium course that you can join the waitlist at academy.notejs.dev this is a huge course it's a full stack mobile development with react native and aws amplify but in this course in comparison with youtube tutorials we are getting like like 10x have amount of content and the amount of features that we are implementing there so um yeah it's huge like you definitely need to check it out at academy.net.dev join the waitlist and at the beginning of the next year hopefully it's going to be ready and you'll be able to join it um again so yeah during the december i'm going to be all in on the course and lucas will help me with uh the usual friday to uh live bills at 3 pm gmt so yeah back to our build for today uh i always encourage you to follow along and don't just watch these videos so if you are following along uh you will need a couple of assets such as dummy data that you don't need to write yourself images and so on also including this pdf presentation you can get it as usual at ss.nodejs.dev crypto tracker and also uh related to the prerequisites you will need the expo environment setup and we actually have on the channel a video that will help you if you don't have it already so without further ado i think we can get started lucas would like to take the stage yeah let's go all right so um here is the first steps to start the project uh yeah so uh that's exactly what are we gonna do uh and we can initialize simply a new project with expo command expo in it and give it a name so as we said we're doing crypto price tracker and let's press enter now uh expo will ask us if we want any kind of template but as we wanted to keep this tutorial as clean as a simple as possible so that a new person with zero experience in react native could take it over so we're gonna start blank because that's the simplest choice right now it will take some time to install all dependencies and prepare the project for us but after it's done we can start start working i will quickly after it's done explain the structure of what we're gonna have uh of course right now this blank project don't really uh give us much folders or much directories to yeah it's basically blank yeah canvas okay let's go here let's start our development server with yarn start or expo start uh that's very important to uh or npm start uh as well so uh huh use port instead yeah let's use that so now i have my development server running also with expo it's very easy if you have xbox go application you can scan this qr code and simply create your application on mobile device right away that's why it's very easy to start it doesn't open up the browser window it did open but it opened in another screen i can show you that i think from here it's easier yeah to manage that yeah that's how it's gonna look it's very easy here's the qr code uh here you can click like run on ios simulator on in web browser so we're gonna come back here after i explain uh the structure a little bit for uh the project okay and uh [Music] okay yeah let me uh so first of all you can open either application from terminal or go to the file at vs code click open folder and easily find the folder mine is in desktop react native project and here is crypto price tracker so let's open it up don't open the homework folder with 45 gigabytes yeah that might take some time to load so here is the simple structure it's very uh straightforward because as we said we chose a blank project and it actually right now it has only uh package.json with your dependencies some scripts to help you out but you should like it's not very something very big right now we'll go over it later a bit uh when installing new dependencies and basically the app.js file which shows you which is the basically entry point of your application when you run your application that's the first screen that's gonna show up so uh yeah let's we have to run expo start again here hopefully it will because it disconnected when i opened my project yes let's open on this port and now we can click run ios simulator and it will open here it asked me to upgrade but i'm not gonna do that right now i think you should i'm not sure like let's see if it will work it will because that's how i was working previously i didn't wanted to like take time to just a little tip um if you need to update the expo go on an emulator the easiest way to do it i don't have to download anything you just have to remove it uninstall and then do uh run on simulator and it will automatically install the the latest version of expo goal on that client but if it works like let's let's keep going with this i'll do that yeah i'll have to do that definitely so as you see in this uh development server it says everything basically logs everything can you zoom in on this screen a bit uh yes i can let me check um here yeah this is enough yeah thank you so it's a it logs everything we can see that it started metro bundler at 17 13 uh local time and then it started opening the application on iphone 11 and it was building a bundle javascript and here it is it opened our application so in order to test if uh it's hot reloading and refreshes after any changes made we can simply do a very famous hello world click save and it refreshed here so that means we are good to go we can continue uh working so right now as vadim showed in the pdf we need uh first of all it's very important to decide where you start so the best place is to take uh the simplest uh component and start with that which in our case is yeah the list list item component here yes that's going to be our current challenge to create something similar to this and this stream we're not going to create that little graph in the middle but in future streams if you enjoy this tutorial we can expand on this application very very much and add even that one so let's uh start with that first of all uh most crypto users and programmers like dark theme so we are not going to keep our application white and we are going to use a black theme sorry so uh and also it is very important to note that the straight black is not that good because um it's it's it reflects some colors a lot worse than dark gray and i did some googling and i found a good color that that can reflect other colors very well and it is basically what google uses in their dark modes as well so it is uh one two one two one two i think if i'm not mistaken let's test yep it is kind of black but yeah you've done your research yeah yeah i actually try to look into this for the best color but right now there's a problem we don't see our status bar it's good that it's very easy to change it you just change here to light because we need it to be white and that's it we have our status bar we don't see the uh hello world anymore but it's because it is dark so we can just simply set text to it by color white and white uh of course works on dark grey very well so that's uh that was our first steps right now we can actually go into creating the the actual component uh that we were just talking about so just to remind this is how it looks so if to um to split it into smaller components like this is the smaller component that we could find on that page and this component it has like what it has a couple of columns i see here right yeah and the first column is the bitcoin image like the image of that cryptocurrency then there is a column with two rows that contains the name and then the symbol right yep some change percentage change and on the right side we have the market cap and the current price yep so uh thank you that's what we that's what we're gonna build right now the so let's start uh with an image let's import image from react native the thing is that i don't have i don't have an image i'll copy it from the assets that we provided to you uh so yeah let's delete this text we don't really need it anymore and let's first things first let's just display the image because that sometimes it's hard in itself because of the style and if you participated in vadim's squid game challenge you should definitely know this already so let's add height let's leave it at 15 right now i'm not sure which one we will choose but yeah and also for image what's the crop required is source so we will give you a ride uh so we are giving basically passing an object with uri and uh soon we'll i'll copy real quick the string um let [Music] here let me go to the assets folder and here it is okay let's paste it and um yeah so i hope this is a correct um image let's hope so now uh oh but is the screen is good should i make it closer further um it's good you can close the sidebar it's going to give you more space for the code yeah like this so right now um we don't see the coin item still and we should make make it bigger to actually see why we're not displaying it that's the first uh setback check uh if a image url is uh is correct i think it is let's yeah let's go that's at least what yeah it is it should be good so yeah where's er oh here it is it's all right it's downloading quite slow that's why yeah so but as you see it's not very good to have it like that so let's do some changes uh first of all let's make it smaller like i had 15 on yeah someone in comments is saying that you set height height instead of weave you don't have wi-fi oh that's very good uh notice i didn't actually notice this one thank you very much yeah thank you very much let's see that let's make it bigger right now and here we can see it so yeah thank you very much i would have spent a lot of time on this one and i just said that we could have learned in your squid games so but yeah that's good we can um have we can give some pad a margin right now so to the container because it's going on a status bar and later on i'll show you uh basically a view that you can use in order to make it live yeah safe area it will never go there or never go here react native has that as well it's called safe area view but even react native in their documentation is suggesting to use the one from react navigation so we'll use that one instead later on right now we'll just when we install right now let's just give some they need to add margin or padding because yeah if you add modding padding margin you will see the background behind so what we wanted to do probably is to add some padding yeah yeah true and later of course also with the nav react navigation we're able to pass some themes which we'll i'll show you later as well which helps with background colors and stuff okay so we can see the image that's uh can you increase your font size a bit uh yes let me remember which buttons are okay that's better uh yep and i carry even more of this i think it's good now okay that's very close uh so right now we have an image the other thing is we need to display some [Music] let me go here actually to make it easier for me i'll just put it in a new line that's also a good practice to have like that if it's very very long and now we can add some the name so we'll use text actually i'm going to open uh yeah the design to myself because i i am working to remind here we have two rows in that column the name and underneath the uh position which is one then the symbol yeah and i'm not sure if you plan to add the percentage change as well uh i will add it but right now uh i'm yeah quickly just going to display to see if i'm displaying all data correctly so we can create another style and call it title which will be have color of white and also it should be a little bit bigger size so let's give it [Music] 16 for now we'll see what what's better but i think 16 will work right now well uh okay and also we need to apply that style so in order to apply that style to this text i'm going to create a new prop that's called style and pass it from styles so from here and also i need to access one of these so right now as it is also suggesting i can access container or type tile i miss typed again so title and right now we can see this that's good also i see that the uh name is bold so we can give some font weight uh and make it yeah make here you can give any weight you want from numbers if you know exact but we'll just give a simple bold and it will work good so uh we have this and on the other side of this name we have the current price on this because uh how we're gonna have it right now so uh have two rows uh one will be the name and the price and the below row will have uh the ticker percentage and market cap so let's don't think it's better to do it the other way around not to have uh two rows with two columns but to have two columns with two rows because for example um if you add here the graph in the middle uh the graph doesn't actually maybe here it's in the same row with a name but what if you want to add it actually in the middle of these two rows yeah right now it's in the same way yeah yeah we can do that as well um so let's just then give it uh a ticker so it's called btc but it's then not title uh okay and also uh before this uh we need to give another uh create another text like this and it's uh one the position yeah the position of the cryptocurrency on its uh market cap right now we're gonna that's how we're gonna list them and also after the percentage change which right now as i see bitcoin is 0.63 down uh so that's what we're gonna take okay we have all that so we can just create another another one yes called text and make it color white so so for now we're just the style is going to give just that and actually uh may let's make it like this like this so you can create some advanced things but yeah so i'm not sure on windows but on i think on macbook you press option and select what you where you want to write so then we can just tab and it will write on every row on windows it's alt and you can yeah so put the course cursor in multiple places to write at the same time which is very useful uh starting out because of yeah things like these okay so we have uh one of the columns that we needed and because that's one column let's wrap it in a view put it like that and uh yeah so actually we need in this column to bitcoin will be the name will be on its own but all of these three things will be in a row which means that we need to create uh put them in their own view in order to apply a style called the flex direction which changes the direction of your basically uh yeah the items are spread yeah yeah so you can follow it in a row yeah exactly but right now it's in column and that's the default and let's change it into s here into a row and voila we have them all of them like that so as far as we can see that all of them kind of require some spacing so we can give some margin right let's say five and here we have some spacing between them so but there is one more thing uh so bitcoin uh logo has to be in front of uh this text so what are we gonna do is also so we have this whole view and for now what are we going to do give flex direction here to row i think yeah and now we have everything nicely uh there's one more thing that i would like to add because as you see it's very close and it's not that good we need some space uh especially in corona pandemic so we give some margin right and let's give 10. i think that looks good but we also can see that bitcoin logo is not really aligned in the middle it's aligned at the top so what are we going to do to solve this is press align self because we are aligning the the the image itself that's why it's called the line self and just give it center oh but it's gonna align it because that's the whole um right now this one is uh so what are we gonna do here i think you you're gonna just add the number you're gonna leave the container to be as the page container and you're gonna wrap the image in the next view in another view that is very specific to um to to the row of a coin so you you just leave out the status bar from this container because it doesn't make sense to be inside them yeah it's like this yeah exactly and also a quick tip to fix identitation problems uh you can press again probably alt shift uh i'm not sure on the windows actually but whoever uses mac it's option shift and f and it fixes uh the identitation problems itself and cleans up the code which looks a lot my system i have pre-tier set up and whenever i save it automatically applies prettier so that's also another option yeah that's a very good option to be honest and so what are we gonna do then instead of passing flex direction here okay right now this is wrapped in here so we need to apply some styles um i think you can apply apply a style because it might need some some margins potting and so on so yeah i would extract it in um you're thinking like completely new that's a i think that's a good idea so we can say um coin container yes usually for me you can continue coding usually for me uh just by having the style a name style it uh is easier for you to understand what is that view like what does it represent because you you look there are like 10 views and you don't understand what's going on but if you see like styles coin container oh it's the view of a coin container since i think it's even easier to understand the code exactly yeah and actually we can give some styles right away we need to give a bottom uh border basically a line under to represent to separate each coin so what are we going to do is border bottom width and we are going to give it 0.3 because we need to very very thin and that's the thinnest you can go you can also go i think hairline thin from style sheets export style sheet dot hairline thin and it's gonna be 0.3 so yeah hairline width not oh that's going to be basically the same that's nice i didn't know about this one so yeah this is actually very that's the smallest one that you can get with uh yeah uh border bottom with also we need to set a border bottom color and i have written down which color to use because i was looking for a good color very long i think a very light gray is called is called gainsboro yeah yeah but here we have it even lighter so it's so light that it's barely visible but when you have multiple of them then it's pretty uh good and maybe actually we can uh have it a little bit bigger and to just let's see what feels better uh now i like the that way a lot better get a ruler yeah let's leave it like that and what so as you i'm not sure if you can see this line can you uh on the live stream i cannot see it but people will follow and they will see it on their device definitely so the the problem uh let's add it great to at least showcase so you see the line now now we can see it very very close to basically it's stick together stuck together so what are we going to give some padding everything and let's give 15. so if you just say padding without like horizontal vertical or right left up bottom top then it will give padding to everything uh which is what i need i need 15 uh in the whole coin item list and that's that's it right now we have we're shaping something beautiful yeah it looks already something good yeah even have a um i see another spelling mistake it's bitcoin uh now is bitcoin i was looking what is the issue like something is off yeah it's weird so um if we look at this design the last step is to add another column that is going to be aligned to the right and it has uh as a title um the price the current price and down below is the market cap right yes yes exactly so that's what what are we gonna do okay let's create another view and a few one text with title as vadim said um and some imagination here so right now as i see bitcoin is fifty six thousand two hundred sixty five point zero nine and that's what we're gonna leave uh yep and market cap of bitcoin right now here shouldn't be the title but we need a simple text and current market cap is so oh we also need to say that it's market cap and then uh let's say 1.076 feet that's uh this is a market cup of bitcoin right one trillion yeah that's only i remember you can continue working but i remember when um apple or amazon was the first company that passed one trillion market cap but here is a cryptocurrency hello i'm here yep exactly and so we need to owe okay so that presents a problem but we need to somehow separate these two columns nicely uh in in order to do that there are multiple ways which way do you think it's gonna work um to be honest i let's see if we have this here view but it's not that great too automatic margins it works really nicely so on the last column you can say margin left should be auto and if you do it will it will take the whole available space as margin and it will move it to valver's side okay yeah yeah i guess this is my thing easiest yeah i agree that's probably that because before that i was rapping again some other parts in an overview and then spreading them apart but you can that's what i've done actually right now but that's a good very good tip uh actually so it's a lot easier to do it and a lot cleaner uh we probably have i got it from from the live stream so we all learn here as we go exactly that's true that's true uh okay so we have actually pretty nice application already but application is a coin item but we need a little icon here to represent if this percentage is is it minus that or is it plus that of course we can add a minus but let's implement some icons and the good thing with expo xbox comes with already icons pre-installed so the only thing you need to do is go to expo vector icons is it pre-installed in the blank template yes oh my god really it's very it's so good and then let's just yeah let's select the card down copy this actually if i'm being very honest i thought it's not pre-installed but yesterday i tried and it was so let's be honest here i actually didn't know that it's pre-installed as well but that's a very good thing and let's copy the component itself so where do we need it we need it right after bitcoin and let's add right now we don't see it because as you see the color is black by tim are you still here uh yes you didn't say anything i thought maybe the live stream i'm chatting with uh with a live audience here gotcha they all love you oh thank you so much i'm thank you very much uh because i'm very nervous okay and let's um right now let's set a simple white color uh because later on as i said we're gonna have to decide okay are we showing it down are we showing up and also a lot of a lot of multiple uh different scenarios and colors and different icons but right now let's leave it as white and also i think this is uh very big so let's make it a bit smaller but now we're going to play around with i actually had noted myself the correct size that i enjoyed so let me find it because you can try something like i know 12 14 doesn't have to be perfect but i like it i would like it to be 12 well maybe okay let's go with 12. uh and then we need some styles here um so let's apply styles and line and also let's give it a line self and center and now as you see it's aligned in the center the only thing about the text and the same line right horizontally uh yeah with the text do you need also some spacing around that around the icon yeah yes i need some space on the right exactly and let's give it five now it looks a lot better let's as we talked put it like this to make it you can use your trick i can use more quick actually yeah i just want it to be like show everything but yeah that works as well and yeah i think we are shaping up pretty good the only thing that i don't like here is that these are very close to each other so i would like to have some margin on the bottom of title which i'm gonna do margin bottom and five and now i like yeah i like it a lot more that's how it looks on coin market cap actually it's a little less i like to be oh no not this one i like to be perfectionist so this one is a lot better okay and do we need anything else to be oh we can we need some styles around this one because yeah some some people were saying something about you forgot about one and i'm looking like one which one yeah oh yeah yeah it's like uh some to add some background to this one some corners yeah okay so that's exactly what are we gonna do and um um let's go and change first of all is it just one or is it hashtag one um i can check it's uh it's just one yeah okay it's just one so that that means that we need to uh i think it's bold also right now i opened my design and i think yeah so let's create a new rank and uh as i said we needed font weight to be bold and yeah yeah you can continue working i'm just gonna answer this question why you didn't use real data for this application so stay tuned and we are gonna get there so we are taking it slowly like step by step not to get everyone confused right from the beginning so we're gonna get to the real data in a way real but yeah it's it's gonna be provided by an api what is the api used for this project it's called coin geeko that's where we are going to get the data from okay we have some styles on the number itself which already looks good but we need to wrap it in a view in order to put some styles uh i think you can work around without the view as well like if you add the background color to them to the text and add some padding well yeah so i'll do it like this and um i remember it was five eight five eight five eight and uh then give some padding um i'm not sure let's say five i think no definitely not five but let's give also border radius because like yeah in the design corners around yeah and for that we will use the border radius um so that's the thing i cannot put you can like for the radius [Music] yeah you know what i'm talking about to the text so i have to wrap it in view let's add view like that and voila so let's call this let's create another style and right now we don't have it but let's call it let's say um bro container that's easier and container so okay we have this one rank container and let's copy paste this one here also give some padding five i remember is too big but we'll change it later and also we need border radius let first look d5 we'll see how it looks later so yeah this is definitely too big as padding five so and also i see that we don't need that much padding on the top and the bottom we actually don't need almost any padding so what are we going to do instead is just give horizontal padding and that one that looks a little bit better right away so uh also the other thing with that we don't need margin right here because as you see it makes this part uh bigger so let's delete margin right bless you from there thank you and let's edit here uh okay it's already shaping up i think that's that looks similar enough no yeah yeah i think that we can move on uh yeah let's see how it looks with the six no oh no no here yeah yeah i meant here but now five very good so right now maybe 5.5 right now i think we have everything for one item except the colors uh for the percentage and in order to display and change colors on the icon and change the icon and change the color of here we need to do some checks do you want to do it now or when you actually implement data it actually doesn't matter for me i was thinking like to completely finish but we can do after yeah i think you you can do when you will integrate data to to do that checks yep that for me it fits as well uh so then that means we're with this part we are done uh what is the next thing uh to go to do so basically okay we have one item here right but what if we need multiple items yes we could possibly go and copy this a whole chunk of code and paste it to have two of them and maybe even three but you see the code is getting very long very fast and it's very yeah as probably you already understand that it's very bad to do like that uh which means we need to put them in a separate uh basic container component component yeah let's call it like that and in order to do that we will create a new folder called source src for short uh and this will contain all of our directors code and everything that we create and let's create another folder inside called component and usually you put in this component folder you put items and components that you reuse throughout your whole application that it should be easily accessible that's why react native is nice because you can build everything like lego and reuse the same bricks so it's nice yeah actually when i was learning i remember one the video tutorial that i was watching said this and it stuck in my head throughout the whole uh my career but i don't know uh so yeah let's uh create another folder in components called coin um coin item that's that's gonna be a good name and in this coin item compo uh folder directory let's create an index.jsx all right here it's getting a bit more exciting first of all i don't have a fancy yeah snippets uh so i'll need to rewatch my dms uh video about cool vs code extensions and stuff like that to install it but i'm gonna do it with my bare hands right now and people already take it uh way ahead and suggesting to introduce flat list yeah we are getting there we're getting there yeah that's good uh so okay we created a function called coin item let's export it export default coin item and yeah let's return here something but now go here so this is the minimum bare minimum of a new component you just import react which uh later we will not have to do it because it's gonna be automatically when you define your function your component as a simple function that will return some jsx and after that you export this function to be able to import it somewhere else and lucas will show what jsx we're going to put in that return statement and a good question where we'll still hear why jsx instead of gs jsx means that your file contains gsx code and the gss code is um lucas can you you can start copying it and like this thing that we see here inside the return statement which looks quite similar to html or xml this is our gsx and it helps us write render components in a user-friendly way because without jsx it would be a mess i don't even want to to show you how to do it without jsx i don't know if you look as uh remember like how how it is done without just x but it's bad so that's why you need the jsx on the file extension actually it will work as well with gs uh but it's the norm to to call your files that contain jsx with dodge sx yeah and usually if you have eslint set up then it will complain about the name if it has jsx elements and it's j called gs and that is so the thing that you did here is you copied the view what the view coin container right yep i just i didn't finish yet i need to still put hairstyles but i just look here thank you very much for your super sticker that's going straight to uh lithuania you're helping lithuania that's where his lucas is from thank you very much for the donation thank you very much guys um yeah so as i was explaining uh i didn't copy everything but yeah i just removed all of the code that we had here and as far as you see we don't have anything left here so but we still need to export the styles so i'm not sure vadim which how are you doing this usually are you creating the styles in the same folder or file or you create another file called styles uh i create another file you can start creating another file but i'm going to explain the way i think about this if it's a super super small component like i don't know a simple button that fits on the same screen and it doesn't have a lot of styles i usually declare styles in the same file but if the code gets bigger and the component contains a lot of code there then i like to separate them just because they don't like scrolling up and down a lot so you just if you work with styles you move to the styles file if you work with the gsx and with the structure of your application you will go to the index.jsx and now you just have to import it there yep i will clean up here because here we don't need any this is in our app.js you removed everything except the container right yeah because i moved the everything that we used in this styles folder which we will import and that's why we create these different directories yeah folders directories because it's easy okay you see coin item open it you see that coin item has an index file which will display everything and it has its own styles which we will right now import easily by just saying import styles from and select from styles the same directory and then yep we can reuse all the styles here hopefully i changed everything correctly if no this is a good convention as well always leave spaces uh before and after bracket one space i think that in the industry this is debatable but i would agree with it yeah that's true but it looks a lot nicer doesn't it it looks very squished here in my opinion but yeah exactly so okay we have everything separated here but now we don't see anything here what should we do and very easy solution would be to import the whole coin item component here from and oh sorry we'll go here and go source because that's where our code is stored then in components and coin item we don't have to specify go to index.jsx just because uh it knows that okay if it has index file inside i will go there if it doesn't have index then it will crash because you need to then specify to go to another style another file but if it has index then you don't need to that's fine you can leave it like that and um okay requiring a known module oh let's try to import the coin item here simply like that and reload and here we go we have our coin item back that's right that's good there we have it yes how can you render more coin items do you still have to copy that 30 lines of code that's a good question you would think that i could just copy and paste multiple of these and that's not the best way as well i mean you theoretically could do that but it would take imagine listing 100 different cryptocurrencies and that's only one page and passing that would be just insane so what are we gonna do first of all we're gonna show you you see that the data inside is the same and we need what if i want to see information about ethereum exactly so we're gonna teach you just that right now okay thank you very much lucas good thing er not good thing but a very very common thing that you will use during your react native development is called props which we're gonna showcase just now so how props work okay right now i can i important coin item and i can say i want to pass to this uh index file i want to pass some data so it could have but i want to pass it from this screen so okay that's possible let's call the data okay let's say name and we call it name and we will give name lucas and but for the other coin we will game give name vadim so as you see we keep the same key but give different values and how to retrieve that value here uh well it's quite quite simple every time you pass something there you can receive in here uh in this file folder props and let's right now just console log props okay we saved it and let's go here and let's i'm not sure i should open uh debugger or it's good enough here no here here i'm i'm mostly debugging here expo projects it looks much better yeah the only thing you can explain is uh if you don't see these logs here you need to select your device from the from here because it can go to metrolog yeah exactly that's a very good point because usually by default a metric bundler is selected so just select the device you're running on so device iphone 11 in this case and as as you can see we have two objects uh let me go back um we have we are importing two objects here that's good we have two objects here one of their names is lucas and the other name is vadim just like we're sending here and i imported lucasfirst vadim second we are easily getting all that data here that's cool that's how what we're gonna use in order to display different kind of data here another cool feature that you can do because even if i have props here i would have to say dot and also name because that's how we called it here even if i called it here let's say total then i would have to access it with total here but then it's also i would have to change here to total unless i want to pass another so for example i'm passing name and total and then something sad i'm not sad but uh i hope you get the point and then so let's say i'm going here and probs that name which is kinda long and you can you have to it's also a yes lin norm to destructure it so one way to destructure it would be having cons here and structure it from props and pass different names that you're destructing here right but that's usually it's actually as well your own preference but what i do is usually i use this for when i have a lot of props so i have more more and more but if i have a few props as we have right now we can simply do here the same thing and type in name you write away the structure in the function declaration yep exactly yeah and then let's just go here and as far as you can see it says lucas here because i'm passing yeah and here lucas and vadim because i'm destruction right away so i can access it right away but um yeah so i showed you how to receive them and now i don't want to actually go and say okay this one name is bitcoin this is ethereum and add more more so i think i will show you uh the assets that we provided to you and um so i will actually need to find it myself where i have them yeah i have them here so usually that's going to be dummy data and later on if you like this tutorial yeah this dummy data you took it from directly from yeah it's real data from yesterday's uh market uh crypto market but if you if you like this tutorial we'll implement it with real data from today later on so in assets folder i'll create another folder called data and in here i'll just paste my data so i have and you should have two full json files uh called crypto and cryptocurrencies right now we're gonna use only cryptocurrencies and as you can see it's a long long list of uh cryptocurrencies 50 of them actually and they're yesterday's data so there's a lot of them and this is exactly the structure that you would receive if you query the coingico api right yeah exactly so this is the great part is that now we are working with dummy data but after that we just replace where we receive the data and because we have the same structure basically the same response we're not going to have to change anything in our code right exactly yeah so right now uh we have that and hopefully you have that as well but as someone probably mentioned before already how do we display multiple files multiple items and won't i i could just go here and like pass the data from there but somebody already gave a hint and we are going to use flat list so let's import flat list here uh let's say flat lit and flat list is basically a list but this is optimized list and uh i think react native has just the list or something like that yeah it has a it has a scroll view which the flat list is based on the scroll view yeah but the flat list helps you render if you have a bunch of data and you know how to render each individual piece in our case we have a bunch of coin data and we know how to render each individual coin then you put them together and you will render a list of them but you can scroll and you have a good thing about flat list is that it is uh optimized so if you just do it yourself we with um coins.map uh then it's gonna work it's gonna look good but once you get to hundreds of coins to be rendered then yours your do-it-yourself solution will um will be very sloppy and slow but the flat list is very smart on what to render when to render and how to render yeah yeah exactly and if you keep it according to the best standards it's very performant as well that's a very good introduction to the flat list thank you william and yeah that's actually what you usually use in most of the applications that you build to be honest and you receive two required fields one of them is data which is what are we gonna pass uh the whole cryptocurrencies but we need to import them but i will okay let's call it the full name crypto uh friends hopefully i didn't mess up the name and let's import it from source uh no it's not in source it's in assets yeah in assets data and cryptocurrencies uh and let's pass pass it the cryptocurrency is json list and there's one more field because okay it's received uh the data flat list but how he doesn't know how to render it so we need to give some kind of uh instructions how to render each item so we pass render item we simply so from here we have to the structure the item itself just like that uh have what curly braces around it and then we can have an arrow function and pass coin item just like that and also as you remember we said let's give it uh any kind of name let's so let's say let's call it market coin has to have it did a bit differently and let's pass that item as market coin that's actually it so the render function as i understand is a function which is that is going to be called for every individual uh item in your huge array of cryptocurrencies and the item will be the data about that specific item for example the data about bitcoin only that object right exactly yes okay yes also there is sometimes there is one more field that is required which is key extractor but uh it's not as vadim said yesterday it's not required as usually because it tries to take the id which we have here yeah all of the have different ids and if the uh if it has id then it will not require a key yeah it automatically tries to get the id as a key because whenever you render a huge list in react native you need to provide a key to the to each individual items and the flat list will automatically set the id or the key if you also have key field in your object it will also automatically take it if you don't like you need to provide how do you want to calculate the key for every item exactly that's a very good explanation and yes so as you see we have for each for each uh cryptocurrency we have something displayed but as you can see that's all the same so that's what we're gonna do here right now and so as we see we pass market coin from here right uh we go to coin item that we created here so index don't don't freak out i'm gonna leave you for one minute okay that's good and let's just pass market coin and um yeah and now we we had the structured it so let's say just console login let's go to log market coin and let's go here you see we are getting that market coin that's good that's very good here's the idea here's the image and a bunch of other data that we're gonna use right now so but as i uh explained before if it's a a lot of data it will be first of all you would have to destructure this market coin in here so the better way to do this would be to have a new const say the structure from market coin let's have some yep space and in here we can get every data that we need so first of all uh we can see okay what does it have uh a lot a lot of data but what we need from here also probably uh an easier way would be just to go to your data that you have and see what it has here because here everything is structured a lot better so for example i see i have name and i need name which is what i'm gonna take what else uh we also need a current price here let's see okay it has current price let's copy this we will need this what else what else we need a market oh we need market rating let's see if we have something like that here we have market cap rank that's very good also what else what else uh we need uh change uh in the percentage and usually you show in this screen in price trackers 24 hour change so let's see if here we go price change 24 hour but that's price itself so we have percentage here let's take a percentage because we need to display percentage uh what else what else do we need we need thicker let's see if they have a ticker it may be simple yeah it's called symbol but they do have it that's good and what else what else uh market cap i have no i need market cap value so let's see here it is market cap and as you can see this list got really really long one way would be to press option shift f and it will fix it or just put it everything like that so i could easily just scroll up i can see everything here i don't need to scroll to the side i can see easily everything here and now we can start passing the data oh also i forgot one more thing we need an image let's see how to get an image or just simple image and the data is coming with a url to an image right uh yes yes it's coming here convenient very very good and let's start from the image i mean that's the first one let's do it um okay you can close the sidebar to have more space that would be easier to see for everybody okay so we pass image and voila we have different images for cryptocurrencies that's one step closer uh what else oh it's already looking so dope yeah it already looks like images all right the only thing you need uh else okay what else we need to pass name and we have here called name so we are just putting curly braces and call name save it here we have different names very good very good let's follow okay we have a rank let's see how it's called market cap rank we copy it delete this one and just paste market cap rank and one two three four five perfect till 50 should be yep till 50. very good what else symbol so symbol er let's do symbol but you see the symbol here is lowercase and we needed upper key so very easy is to write two up per case and that's it and you could do the same to lower case if you need if it was uppercase but you need lowercase i wish javascript had that to capitalize method because you don't you'd have to implement it yourself to have only the first letter capital okay okay uh what else um so now percentage let's see how it's called because i remember price change percentage 24. that's a long name uh let's give it oh sorry and we have price change percentage but it's too big we don't need it to be so long we need first of all at the end we need percentage sign so we just go out of the braces and put percentage so first the first step done do we need a space there to be honest i'm not sure i don't think uh that will change later if we need but this is too too long we don't need to see that many yeah there are a lot of digits right yeah so the easy one solution would be to write two fixed and it will fix so you can pass whatever number you want here three then it will have three decimals after if you have four it will have four decimals but you need only two so that's what we're going to do perfect shaping up that's easy yeah uh what else so the most important pro one of the most important things is current price uh so we just current price as it's named here current price save it and yep that's good ethereum yesterday it was 4 500. everything is perfect but also what usually uh cryptocurrency trackers do is also have two decimals after oh no sorry not here two decimals after current price always so but actually we need it only here so let's leave it like that it's got a good good for now but because if we put two decimals then it will for example this one will show 97. but uh how does i think we need to see here more it's because it's a small cryptocurrency sometimes it's going to be even smaller look at it yeah yeah yeah you know and stuff like that let's leave it like that yeah let's leave it like that for now and last thing is market cap and we need those m cap coal and the space market cap and the market cap here is just huge but and it is possible to probably fix it somehow easy but that's the problem uh coin gecko gives you the data market cap data just a raw number now it doesn't like beautify it so i'm not even sure what should be our approach here because it messes up everything because of the auto margin you you can implement a simple function here like mark to beautify it and you just check if it's more than trillions then you just display with t if it's more than billions you display with yeah but here oh yeah it's the market cap we were talking about yeah it is possible yeah we should we right now spend some time doing this or you can implement a very basic version of this function yeah just so first of all uh can't let's say you i don't know how beautiful beautify probably would be good market cap or normalized right cap i have a arrow function uh or we can right away calculate it here if you want it depends yeah yeah continue so we need a market cap as a variable also let's call it here my cap and normalize market gap and pass market cap and for now let's just return and to see okay we can see that here um okay what's next so first of all we'll let's just do a very simple if market cap no not this we could do that but if market cap equals how many zeros does a trillion have one um what do you mean how many zeros uh one four for what one trillion has one trillion uh one million is six then nine then um twelve but you do you know okay can you can you write some numbers there i'm gonna show you a cool trick here yes uh can you write one with 12 zeros okay the trick is you can format your numbers with underscore so you can write one underscore zero zero zero underscore zero zero zero and this will be yes like this yeah and in javascript this will and you can put after every three zeros one underscore and it's going to be easier for you to see if it's a million a billion that's uh i didn't know this that's very so it's one file one million one billion one trillion yeah that's really nice okay if it's uh market cap is bigger than that then let's return for now one okay it does work so we can just return one um i think you can return market cap divided by this number yeah um because this will be you divide by this number directly market cap divided by this number and everything will be in the math.floor because dividing 1.4 trillions by 1 trillion will be 1.4 so that's why we need only the one or something like this and uh you want the plus t or something like this wrap it in uh these little thingies are under the escape then say that yeah then say that this is um javascript operation javascript yeah and this is just a simple uh um string under i can put whatever here i want and it will be displayed if it's yeah more so that's uh that's good uh what we could also [Music] yeah we can leave it like that should we but we need to implement more of them so add for billions as well else but before returning it's better to do just if okay and let's delete a few zeros then let's copy oh sorry and then again if you can copy paste the whole thing because it's going to be easier for you yeah like this what about login authentication part 3 do you finish it no i do not have time at the moment to work on it but i planned uh the next video what's going to be there i want to teach you how to work with react form hook and this will allow you to manage validation of forms so i think our authentication series is a perfect playground to teach react form hook because i was teaching this in the course and i thought that um i can do a video on youtube as well regarding this it's a really nice library but it's a bit different than react.js so that's why it needs a separate tutorial so um it's coming like i know that a lot of people are waiting for the authentication guide but these these weeks i'm super busy with a course i'm working day and night on um on recording and preparing the course yeah so actually that's one of the problem that we come come up with by having like two columns and without a margin again because the margins will be very different everywhere oh but uh on the last column you can align everything to the right and you see they just align content align items i think all right and yeah might be and flex end flex and yeah yep let's see uh does it look better right now yeah i think it looks like it should like it yeah yeah it's a bit strange here the the do i have some oh yeah because it's a simple text and a text i think has some uh margin on the right yes it does which means we will change it here and as we only need it to be white so we're gonna pass in line uh just like that and you can pass styles like that in line as well but imagine adding that many styles it will start looking pretty bad so it's usually when it's something very simple and this is a perfect case for that okay so we kind of roughed around these uh market cap numbers uh there definitely is a better solution to do it and this function can be fixed tweaked but and if we are gonna do more uh video series on this i will make sure to tweet this function to showcase the actual real numbers uh with uh some after co comma and stuff like that but for now that's i think that's everything that we need and uh is there anything else that we need for the items i don't think i think we have um i think the color of um percentage change exactly so that's uh uh first of all let's take care of the name of the percentage change so you mean um the icon should be different if the percentage change is positive it should look yes like a triangle with pointing up and otherwise pointing down right exactly that's okay that's exactly what i need and in order to achieve that uh we are actually what i'm thinking to do is to create uh instead of actually checking because i would need to check here i would need to check here and i would also need to check here so that's very repetitive and we need to check for the same thing every time so what we could do is something like cons create a new variable say uh per sen edge um what called percentage color let's say like that and do a simple if price change for 24 hours percentage is uh lower than zero that means it's a minus because this one will return us uh minus two minus some that means it's red and it's no no not good and i have my colors uh here the ones that look good that because simple red is too red for me and yeah and else if also it's complaining about brackets so let's use these and right now also this so also one thing uh if we oh wait i then edit this question mark here so this question mark means so basically if percentage is lower than zero then display this else display this and else will be green uh here and let's put it here um okay we have percentage color that's good we can go sorry sorry i will need to get this and yeah we can do that very easily so let's go here and say um just press percentage color and voila we see that hey we have it uh there's one more thing that we need here and we need to show the percentage in that color as well the text itself right yeah the text itself and actually we don't need this text style because the only thing it contains is the color that you need to override right yeah so i think i'm gonna be lazy and why don't you pause here percentage color uh exactly i just passed percentage color i know as a wire why i thought about uh that i need what yeah and also it should be no no i think you need yeah color yeah yeah okay like that uh and here it is it's in color everything is in color that's that's good you all want to see the only green exactly uh that's very very true and also it's very good because we're gonna use the icon from the same and design we can just change the name and we can have a similar approach to this but because we're changing the name only one place so we can just do it in line here so as well if price uh change percentage per 24 hours is lower than zero we display this color not the color he's the name of this name sorry and else we display other name so if i'm correct this one was let's see here arid down everyone i can guess it's carrot hub exactly okay i'm good at this and getting there yes and now the green items have the carrot up pointing and the red one have down okay exactly it looks amazing yeah it's already shaping up pretty well so now we have uh different data everywhere and now for your perfectionist eye if you change the color of the border bottom there uh to the one that you initially wanted to do exactly i think it's below totally forgot about it and where it i need to find the color that i think gainsborough uh is a very very light color um let's go to that i can search it for you but border bottom two eight to eight to eight if you want exactly your color okay so then uh we are gonna put it in coin container and [Music] yeah it should be somewhere great and okay i had to wait wait wait two late wait wait yeah it's probably hard to see on the stream but in real life it looks really good so i'm not sure what to leave uh so leave it like this because in and then we can even give people ability to scan the qr code and look at the application on their smartphone okay yeah so then uh i'll leave this one and that's actually it for displaying the item one item that's awesome so here we rendered one item we worked on that after that we introduced um state and props i mean props with our state uh to send the data about the coin that we want to render and after that we put everything into a flat list to render all of them from our dummy data and now what's the next step lucas so there is one thing that i would like to do before taking a short break okay is uh actually we need to kind of clean clean up because it's good to keep app.js file pretty clean all the time and we have here flat list so what we could do we could create a in source we could create another folder called screens which will contain every screen in our application uh press enter and also let's create another folder that for this flat list and we're gonna call it home screen because that's the screen that you're gonna see when open when you open the application at least for now and also as i said like basically always and create index jsx and this is not going to be very hard let's import real quick everything that we need [Music] and then const home screen function then export default home screen perfect and also let's return something from here will you implement the graph for every coin in the flat list and let's everyone ask lucas lucas please will he implement a graph for every coin in the flat list i really want to i'm very excited for uh expanding on this application and there's a lot of ideas that i have that we could implement i'm not sure if i should spoil them right away but yeah like today we are going to get there so yeah we're going to get after lucas does the refactoring that he's doing right now we will move to the details page and there we will implement the details about a coin that will include uh a chart library uh displaying the graph of the coin price exactly which is awesome because um lucas used another library that i use to work with charts and i think the library that lucas uses it looks much better and it has so many possibilities to to adjust that it's really really dope yeah and i also i'm interested in how to work with that i liked it as well a lot so easy step just take this flat list cut it from here go to home screen paste it here maybe clean up with that little handy shortcut and also kind of need to import everything that we need here of course import paths will change so we're gonna fix that there we also need their uh react native flat list but we don't need these two so let's delete it quickly save what else um actually that's it right now let's quickly so coin item is not coming from here uh let's adjust it a little bit uh here we need to do another one go to component slash on item and as you remember we don't need to do slash index because we created index uh and cryptocurrencies will go like that one more and one more then we can access assets data and cryptocurrencies i think that's that and also uh here we need to import home screen so import home screen and from this no no no this this uh source slash screen slash home screen and just add it here simply home screen close everything should work and it's back to where it was right yep exactly yeah but the good thing right now is it lives in a separate screen in a separate component that we can easily move around where we need it and it's going to be very handy when we introduce navigation later in this video exactly so while uh lucas is going to get back very soon for everyone who is just joining let me introduce you what we are building today so if i can go to the first slide yeah if you're just joining hi welcome uh today we are building a crypto price tracker with react native and this is a step-by-step uh tutorial where we show you how you can do it as well with um with react native to build this crypto price tracker which is very similar to applications that you probably already know like coin market cap or coin gecko or any other application that uh renders and displays uh data about cryptocurrencies including price and so on so um in this tutorial we are going to focus on two main screens of this application and this is the home screen that will display a long list of uh cryptocurrencies with with a little details about each of them like name the ticker the current price and also the total market cap this is already done we already implemented this um in the beginning of this live stream and sorry and the next uh step is going to be rendering uh the details page of one specific coin and here we're going to get into more details about uh what we are showing to uh to the to the user uh we're gonna display more information that we can get uh we're also going to include the graph um the graph that you can see here on the screen uh and yeah like this is the part that i'm mostly excited about is this graph and how we will be able to interact with it so um yeah if you are just joining uh sit back you can watch and um the live stream is going to be published on the channel so you will be able to go through it and implement it yourself during this weekend because what else you could do during the weekend uh right so what's the next step lucas so the next step is i'm not sure if you said but details page for every cryptocurrency in the list and as it's going to be another screen because if we click we will navigate to it and we have a conveniently screens folder we can create another folder called how to call it let's say coin details screen or or coil coin detailed spring we'll be using any api to get cryptocurrencies uh we got the dummy data from the coin gecko api which is a free api and by the way you can integrate with it uh easily and yeah we're gonna use the data from the api but we are not going to query directly i don't know maybe we will manage until then if we have time at the end we will just swap where we are getting the data because the structure of the data is from the api so yes or if you enjoy the stream in the next episode as you can see lucas is very excited to continue this build so uh now is the time to write in the comments down below like come on lucas we need part two and part three and so on as you were doing with the signal is i think i think i did already seven or eight episodes and at all like within next episode look come on let's do it everyone is hungry for learning more nice that's very nice it's good so yeah everyone go in the comments and write lucas we need the next episode then yeah we'll have more already require part five that's nice okay so to continue we clean up a little bit the tabs um also in order for me not to because actually i didn't implemented the navigation yet i'll just display this uh coin detail screen here and on detail screen but i'm not gonna import it because i'll get an error because i don't have anything here uh yet constructed uh the bare minimum things that vadim was talking about and let's export it coin detail screen okay at export uh default coin detail screen and let's return for now also let's import react native because we'll need it and let's say view and text a rom react native okay some spaces to look nice and um yeah and let's return uh view a simple view with a simple text saying detail screen to see if it's loading and here we can easily replace that one with this one voila okay we don't see that text because it's uh dark but let's do this color white and here we have it that's very good let's go lucas let's continue uh so right now the detail page let's turn on design for the detail page real quick [Music] first things first is we need to display at the top uh the basically navigation bar kind of with the possibility to go back with the symbol of the cryptocurrency it's rank and later if you like it uh profile screen that you can go to your profile so what we are gonna do um first things first we can instead of um we can find an icon that's important we can need an icon to go back but that bar isn't it part of a navigation um it's the the navigation i like to do it here okay i don't i don't know like it's not in a lot of places because in the whole application we will need a head bar and only one place so but it's gonna be very easy to create it like that and just access it okay and it's very custom you see also because i need a different data in the header that you can probably pass yeah i know later we can refactor this i think yeah yeah i think you can do it now here and and which one i like this one i'm not sure what's the difference between this and this and this but designers know it says sharp that means it's sharp it's the angle okay the angle that um it makes when it makes a shadow you know the sun so we needed white uh probably we needed a little bit bigger that would be nice and the size as you know i have it written down because i know what uh yeah so this is going to be the size um 30 and uh so far it's good now we need to display also the image of bitcoin so let's not bitcoin but the actual data so image uh also the two important image parts are let's start like normal person from source uh let's find uh where will you get the data from you mean here yep now i'm i'm going to just the random data display just random or you can import it from because you prepare well uh exactly it's going to be easier because we already know how to work with data i can just do that so let's uh import where is it here cryptocurrency that's very good notice i uh can just simply import it call it um i don't know crypto detail or crypt no i don't know coin that's the hardest part thinking of a name uh oh yeah especially in a live stream when everyone is watching and you cannot come up with a normal yeah everything in your head is like yeah that's true that's true um assets data and crypto okay i have it here uh right now so as i i will do and bitcoin can you show us a bit how how it looks like the data is it similar to how it knows no it's actually it's very different to be honest it has a lot more data uh it has like also the id symbol name it has description even about as i see here it doesn't have one image it has three images right it has three images it has a small icon that we will use it has a large one and i even nailed something yeah and and also it has a object called market data which has a lot of market data so i can get current price and also in gecko you can select and get price and different what currency you want yeah you can get in all of them but then this file is just enormous so all-time high all-time high change percentage all-time high date all-time low all-time low like there's a lot of data and there's even more here i'm not sure how much of it we're gonna able to use it here but i thought this is fun data that you can even play around yeah yeah play around with and there's prices here so you can also select uh what prices you want so i selected here 24 hours prices each hour hourly 24 it's basically the standard in every coin tracker okay yeah also later if you like this tutorial we can implement multiple different uh and then the graph looks really good how many likes should this video get uh i just need one person to say one person lucas please can you do the second yeah exactly so um and yeah and some tickers so we yeah that's perfect taking bitcoin target usd last price and coin id but um enough about that so let's create const and the structure from coin not quite coin not okay coin perfect and as i remember we need image but if you see image has multiple different um it's an object with free keys yeah exactly so we have to destructure it even more what we can do is to type double dots another curly braces and then say whatever one of these we need but we need small and we'll take it so like that just like that and we can pass it here small but let's not forget we need some styles uh and let's give um width of right now 15 and height let's not forget as well 15. we definitely need it bigger maybe 30. all right i think this this for now will be good we can change it later uh according to how i think on the design as i look here it it's a bit smaller so let's make it 25. it's 25 i was looking in uh in vicodia it's 25 25 yeah that's perfect uh and now we need text of course because we need to display the name but simply also we need to take the name from here let's see because i don't remember it's oh it's just simple uh name let's pass it here name and for now let's give it a simple style of color white okay bitcoin we do see that what else what else we have um market cap so let me open here and the market cap is named market data not market cap but i mean uh the rank of market cap so it's a market data right yeah market data market cap rank let's simply say market data double dot and then market app rank and display it here okay perfect we also need to display a hashtag there uh that's good but uh this one is getting kind of out of hand already so i'm gonna do the trick and that's gonna be easier for me what else do we need we need that's it we need actually one more icon and we can look for that item here i'll prepare it for like for the future not sure if we're gonna use it but we'll see which one of this one yeah i think it was this one uh but we don't need to import it again we can just say we need those evil icons and then something very similar to this let's say evil icons and then what was the name name was user so the size should be i think i think it's about that about right yeah and color white yes uh that's good but as you see all of the data is in the same column in the same column which means we need to separate it all and uh one one solution would be to first of all let's say here style and then uh and then flex direction row and we have them all in a row the thick we don't need the name here actually as as i can see we need a symbol here we will need a name as well so we can just keep it and symbol also to a per case yes this one yeah so we have um this everything in our flex direction which makes them in a row and we can continue further uh the first icon the first icon i think we can give some already padding some here on [Music] yeah i think 10 should be enough in my opinion uh also we yes and you want to to spread them apart because they're also very cluttered yeah they're clutter but also they are not aligned correctly so i will just do align items and center and as you can see this is getting out of hand really fast so let's create a styles folder styles file [Music] and import style cheat from react native and then const styles equals lg dot create and like that and call it the header container perfect let's put all this in there let's import here import styles import styles from styles and then just pass here styles dot header container [Music] and let's go here let's clean up a little bit and um did i made some oh i didn't export it that's that's what i export default styles that was uh another bug that i could introduce in the squid game challenge exactly that's true uh um so yeah right now we have them align everything looks pretty nice but they're cluttered like big time so oh but the thing is that we need these three to be in the middle but only these two to be like set apart so we will wrap it in a view uh and we will wrap these these three values um in a simple view which which still has to be flex direction row because we don't need them to be in column and because they are in a new view they are displayed here in a column because what this flex direction from here does it just takes this one uh the whole view and this one and displays them like they are displayed but this new view overrides and it cannot be in a row here so i'm not sure if it's very uh if i explained it well but that's why we need to actually have all of these items inside this view in a row as well but which means that we need to align them again uh in center you see i'm not sure if it was very uh i think it's clear like you needed to group them because in the next step you want to spread apart but to keep three items in the same group yes and whenever you add a new view that view by default doesn't have any styles and by default the flex direction is column so every time you add a new view you if you need to render it in a row you add a flex direction there exactly so as well uh i'll create a style for this one and con name it picker container okay and go here create here as well thicker container and paste everything here well not everything everything but hey and also okay so we have them here but nothing changed from the previous uh like we had previously so we can we just do justify content which will we can select how do we want them to justify should they all be in the center should they be at the end should they be flex start at the start should they they have some space around so there would be like one here one here when something like that but actually we need space between all of them and if we save we do have space between all of them each each container in here has its own space and okay this is shaping up pretty uh pretty nicely right now and uh but we need kind of to add some styles to these three because they are first of all cluttered second of all don't have any styles whatsoever uh so uh for the bitcoin ticker let's say [Music] um font weight and make it bold that's already nice and add some horizontal margin because we need to add space on both sides of the bitcoin so that's horizontal and if i would say vertical it would add space here and here um okay that's uh that's looking better i think i would like this bitcoin to have a little bit uh bigger font size because yeah it's now oh yeah it's just a small thing but it looks better yeah exactly and because it's getting very big let's just create another style and call styles pick your title and have it here ticker title okay perfect now i think change everything is the same um and on this little button um i mean uh hashtag we need some stage changes as well first of all we also if i see correctly here we kind of need to make it bold to font weight and ball yes and also increase its size but a little bit less than uh the bitcoin thicker so let's say 15. that increased it actually by one because i think the default is 14. so yeah i think it's 14. it didn't increase too much and right now we need to wrap it around the view again in order to add some styles there you may never the position the rank you want to wrap it in a view yes to add some styles like a background i don't know exactly yes actually i don't know how do you as we saw here box so much my throat is already getting i hope i hope it's not that visible on the stream that my voice is drink water stay hydrated exactly okay let's continue um yeah so we need some styles and first things first we have to give background color which in my notes is five eight five eight five eight the same as we had there we need to give some actually i see that we already can create a styles object in our style file because it's gonna get out of hand very fast and call it [Music] rank container yeah rank container perfect and styles probably easier will be just to copy the styles from your coin component yeah but that's not going to be a lot a lot of them i think yeah so i just quickly okay uh padding so in here i see that we do need some uh padding horizontal uh as well but it's sure it should be five but also i mean we need padding uh vertical because it's a little bit different this one and i don't want to add it too much so i'll add two uh that's good but we need to add also border radius let's set it five okay it's shaping up a lot a lot everything it looks better with a border radius exactly and i think uh is it yeah it's aligned in the center i think yeah yeah it is that's it we have our header that's good nice um so uh right now let's continue and so first of all because this is a header i'm not sure should i show and export it to a different component or leave it like that you can leave it like this okay or you can export it because you don't want to to have a lot of code here usually when i have like different parts in the same page i don't export it to the components but export it to a separate file in the folder of my screen so in the coin details folder i can have a file name header yeah that's only used here yeah exactly that's what i would do but as well i would create like uh simple so compo nen compo nens folder in here so i could know that okay these are the components that i'm gonna use in coin details uh page i it's it looks i don't know easier you can right away go with a file here yeah yeah that's true okay let's do just that actually yeah yeah for for hours you can still keep going with the structure where every component has a folder and inside that you can add the index file but i think for for lucas not to go um crazy with the folders there it's going to be easier if he just declares the component as a file in that components folder yes coin detail header oh sorry header okay just like that [Music] export default point detail header that's perfect let's return uh some data and we need to take this chunk and crop it put it in here fix it a little bit also import all of this in here that's how you like the same analogy of building up with legos uh it it first of all the code will look a lot cleaner which is a big plus and second of all it will be yeah it will yeah it can be reusable yeah for example right now you can add here but if you want like later want to add another screen with the same header then you can easily import the same header twice and don't have to copy paste code uh from here and there exactly so we have our header uh almost good we just need to import the styles yeah that i actually i just move uh my styles uh from there to uh this folder so i had styles in this coin detailed screen yes but i just moved it to components uh okay because that's how what actually i would do i would create another folder and have in that folder are these two yeah yeah yeah but i'll keep for this one probably or should i do it like okay go with a folder yes that's perfect and then we can rename this to a simple index once you learn and get obsessed with writing clean code you just cannot go back exactly it's very hard to yeah and now it looks amazing it's in components we see that we have coin detail header and it has its own styles and its own index file which is yes it doesn't mess up the other code that you have yes exactly so now the only thing that we need to do is import well not exactly the only but coin detailed header from components slash coin detail header added here coin detail header like that and also uh if you remember we learned about uh props so we do need to send some props there oh we do yes we do and the props yeah because in the coin details header right now you do not have a data you don't know what to render right exactly so you need to send uh this data from the place where you know it and in our case is the queen detail screen because here we have our coin and we were just gonna pass down to the children component component coin detail header um yeah yeah exactly we will pass multiple uh um props so you can see how that works and usually it's very uh often that the name uh the key and the name is the same i only like change here so you could see yeah i can do it like that and it makes more sense to pass their image than just small small anything can be small yeah okay anything can be small that should be written on t-shirts okay and um yeah actually i don't have the merch so i could uh i know advertise or anything can be small okay image um image yeah but now we call uh here it's called small but we need to call it image okay what's next we also passed name the name is same so we are not doing anything we also press symbol so let's take symbol here and last but not least we passed market cap rank which it has a bit different value so we're gonna have to change it here as well and um why name is not used um probably you don't need it yeah you you said that you're gonna need a name later exactly sorry and i think these are yeah that's the only thing that we need so let's clean this up a little bit and with it as you see it here everything is completely the same nothing changed but this folder looks so much cleaner and it's gonna be a lot easier for your eyes to work because i don't have to like scroll through the whole page to get somewhere and it's gonna be a lot easier for me to work as well because because yeah it's for the same reason for the same reason yeah wanted to think about it and you don't have to pass the name there because you don't need the name i mean it's not wrong if you pass it but just to clip it keep it clean like yeah extra data exactly that's very true so now we look at the designers yeah that's right now that's what i'm doing actually i'm looking at the designs and what else do we need so we need a price big price tag and a little small uh that's why we use name so above we will need small name and actually that's it we can also display on the side the percentage of the day uh oh that's yeah that looks yeah that would make it look better a lot okay so let's uh start first of all let's add simple text and see where it it is displayed and we can already pass the name i think uh yeah but it needs to be a white color why okay it is displayed here so we need as we see some padding here let's give but i mean we will need it here because we will need for the whole component paddings um [Music] a padding of 50 oh no no i can't give it to the whole component because this header is in that component i think it's good to give to the page and then remove it from the coin details header if you have it there because it's going to be easy for you if you just add this padding to the page and you forget about this because if you keep adding multiple components down below you should always remember to add this padding or margin but if you add it to the page you do it once and that's it you forget about it that's actually very good point let's just do exactly that padding horizontal and then well voila it's perfect um okay what else do we need we need this bitcoin probably we will have to kind of wrap it in one as well uh view because we will need to add some margins and stuff so let's do that and also here we can [Music] so we need current price how do let's see how do we get current price and i forget to close this don't worry so current price it's market data current price usb dot usd yeah that's a long way to go so and we also need to always destructure it but we have market data already structured so we need uh we need current price and just like that i think i think i wouldn't personally destructure far far like for usd yeah current price yeah it will look better but uh worse but um because you would just put usd and that doesn't make any sense what usd it is so you would have to name it rename it and yeah but the thing is that yes lint will complain if you do that if you don't destructure all the way till the uh yeah yeah that's interesting i don't remember having this issue maybe but yeah like let's keep it like this like current price and okay so then current price and just with a simple dot we can access uh the price and it's there that's perfect but we one second lucas one second i want to answer a question uh havon what are you making today so yeah for everyone who is just joining hi welcome uh today we are doing let me see here a crypto price tracker application uh oh my god it's so many things here yeah crypto price tracking application very similar to um coin market cap and coin geek application or any other application that displays data about cryptocurrencies so we already have finished the home page with a list of cryptocurrencies and uh now we are working on the details page that will display more information about one specific uh coin and it will also include this cool graph that we can interact with so yeah that's what we're building today if that's what we are continuing to do and let's get back to to work yes so yeah uh what uh okay so we display the price but we don't know what numbers are this so first of all let's add uh usd because right now we are doing only for with the usd uh currency and also it's uh it's common to display two numbers after the price all the time um but i'm thinking now let's leave it just like that i mean it will have two numbers from coin geeko if it's not zeros after so it doesn't make sense for me to add it there i think so i think this one uh looks really uh not really good but good we'll make it look really good um so now what do we need we need to make maybe change some font size to 15 a little bit bigger i think yes and also um and i think that's it that's [Music] looks pretty good but we'll add some styles to the view for the current price though we need to increase the font size very much i think 30 and also we need to make it bold [Music] and i think the numbers are so close to each other so i want to add letter spacing of one which will make them oh that's nice a little bit nicer for this is just to increase the space between letters right yeah between each letter and i think the bold is a bit too much maybe let's give it 600 so yeah i think this one looks the best for me i know for you but it looks pretty good but um we also need some styles here and we as we move the styles folder let's just add a new one styles file i mean not folder styles.js and m for let's just it will be a lot easier to copy a lot faster and delete everything that we don't need but uh we can close this one actually we can close for now this one as well and let's import those styles that we just created styles from okay styles perfect now let's create because these are getting very long let's create some styles for them so um current price and let's just take this out and say styles dot current price uh paste it here fix it up with that shortcut that we told at the start about um and it looks the same the way let's do the same for this one although it's not a lot but to keep it clean yeah and consistent um and let's call it name because we don't use it anywhere else uh name like that like that and voila okay everything is good but these are very close to this part yeah very very close so let's give some padding on the top and some so let's try to give adding just for everything around it and maybe that's a bit too much hmm i maybe too much i'd say actually i i think this one should be good why do you think um yeah i think it's nice or should it be close the same amount of here and only give it to vertical no i'll give it everywhere okay let's see no i'm too close 15 15 it is okay now we kind of need to want to display here uh current price like uh of the per 24 hours did it increase did it decrease uh so in order to do that we need to actually wrap let me think let me think uh in here we should create a view wrap these two in this view and uh here we will create for now let's create a text just to see uh simple data oh it should be white again um color white everyone is waiting to uh until we get to the graphs i'm also excited about that so i can skip this actually a little on the side uh that one also looks good like yeah okay it's it's very close like the graphs are yeah yeah like this little spinal weight and next one is the graphs yes exactly and let's give some justify content to center oh oh no no no space between or and let's see what's happening here to be honest i would say that it's much uh easier to with the margin auto no no it's much easier to do the live streams to code them than to um to stay on the side you know it's very complicated very tiring oh you just look through everything yeah yeah yeah yeah i can't imagine actually for me when i called and i do the live stream uh i i just get into this flow state that i don't feel that the time is passing i'm just going all in and then like i look at the time and oh again i plan the two hours live stream and it's five hours yeah yeah actually that's true i don't i have no clue how much time passed right now the only thing is that it's hard to talk for because i probably am not used to talking that much and my daily routine is just waking up in the morning cup of coffee going to my room nobody talks with me and just coding so for me talking a lot maybe some meetings from time to time but the meeting is rarely more than one hour so for you it's already accustomed to talk so much but yeah for me you have to get through a lot of water yeah uh price container okay let's have it the names are getting increasingly worse actually that's another reason that the why it's useful you you can continue going to code why it's useful to split into smaller components because if you split into smaller components it's much easier to find names for things because for example if you have everything in the same folder if you declare a variable name or a style name then probably it's going to be hard to differentiate which name so you're going to have coin name title when coin name subtitle or something like this but when you split out into smaller components when you look at one very small component like header and you see their name it's very obvious what that name refers to yeah i know if that makes sense but that does make sense yeah i agree with you for sure so right now we need price change percentage per 24 hours again but in order to get it here we need to get to market data and then just simply price it price change the percentage for 24 hours so we can do simply this and let's make it like that because it's getting pretty ugly as well there and here price change percentage uh perfect but we need to make it too fixed and how only two yeah that was a big slip no i'm laughing about daniel's comments uh lucas thank you a lot for your instagram post your breakfast recipes are amazing my mom loves them a lot that's super random yeah okay follow uh lucas on instagram i think what's the tag lucas uh i have the green averages i think it's gonna be too hard to something like that yeah he's posting uh breakfast recipes daily uh yeah every day so font weight i do want it a little bit uh bolder and i think by a little bit i don't mean that much again i think 400 is the north default one is 400 yeah yeah so we needed a little bit bigger 500 now uh again we need to export this to another component it's just tonight styles object yeah styles uh price change yeah chest price change so that's gonna be good enough price change like that i added a bit extra brackets here but we can easily fix it like that and we do have it here but we also need to add some styles around it so let's wrap it in a view okay like that just voila and let's add style equals and first of all we need a background color and for now as it's minus let's let's give red easiest to start with background color because after that you will see like how your container looks like if you need more space if you need more potting if you need to round the corners um yeah yeah i definitely agree and we do see that we definitely need to round the corners here okay and oh also we need an icon and we used that icon in coin item and it is here and actually we will get everything right away very nicely uh uh uh-huh here and i need to it already has the checks for the color right exactly yeah just need to import it out here right here and like that okay what's price change um can't find percentage container you didn't just no no i have it here but i need actually the same check here as well so let's just grab it a little easily like that and put it at the top as we're going to use it in a few places that's good not sure about oh that's the icon so it always has to be white apparently even if it's red or uh yeah minus or plus doesn't matter and not here name we have to change here okay now it's finally but we need to make it uh change the flex direction to row from column okay okay that's getting better um ours look very maybe there's too much it's very stretched and my for my taste maybe the um actually the the font is too big let's go with no no the font is good we'll see we'll work work it out there so it looks good this red is just no bueno so let's take uh red from i think it doesn't have perce no it does have percentages okay but you see that it looks a lot more attacked um maybe oh it has more space uh vertical space vertical yeah i think maybe that just by adding it it will uh make it look not that stretched yeah i i think you are right but we oh is it it's nothing coin item yeah it's uh in new york controllers here so yeah yeah yeah yeah the issue with the calories is that um you've got it oh wow now it looks you see how a little bit of a different red maybe yeah um okay now let's add some extra padding maybe two to two vertical padding maybe that's too much that's not enough maybe uh the font is probably the font there is different and that's why it's um but now it looks it looks great so don't worry it looks yeah it looks better but i will do horizontal and do a little like that maybe three yeah okay uh i think i think this one is done maybe 10 here is a bit too much of an overkill let's give eight um yeah that's more or less good uh so now let's get into also if you would want to you could put this into another component but because this file is going to be pretty big it's going to be actually very big if we continue because it has a lot of data and if we do continue i will you probably put this into another component another lego brick but for now i think i think we're good to go so let's see uh to the chart so first of all let me show you probably the um the chart itself and it is uh called something like rainbow rain yeah rainbow react native animated chart oh so we are starting with a chart yes bro you need to announce it like let's go we are following the charts everyone is waiting for that okay so uh i'm sorry i should have probably uh put more into the announcement uh so yeah there right now i don't have um that much experience drum rolls i don't know some yeah i'm sorry but yeah we're gonna do the chart there are a lot of different charts that i was thinking to do and i was even like talking with vadim which one should i do which one should i showcase and we decided on this one but as well later if you're interested i can showcase another library and showcase a different uh chart but yeah but now it's going to be something very similar to this one uh what i like about this chart is that it's really minimalistic and also it's animated so you can you see how when you change uh time frames it out very nicely animates to uh to the values that it needs and also you can point on a specific point on that graph and you can see the the details on that specific uh moment so yeah it's it's really nice um exactly yes i i agree i think this one is probably a little bit more minimalistic that one is probably a little more detailed but the the animations and the scrolling um i think that's what brought us so and also it's a little bit more of setting up here so i don't think it's too hard but we do need to set up react natively animated and in order to do that we go to their uh website and in here uh they always zoom in a bit on the page yes uh let me just do that is it okay actually we're gonna leave this page very soon so don't get attached to it because it says animated to an expo so follow their instructions we should go here and that's what's good nice about xbox that's the only almost the only thing we need to do is run expo install react native reanimated let's open the terminal let's create another uh but we will have to actually rebuild everything so we can stop the server to be honest and let's paste react expo install react native reanimated um okay let's wait a little bit until it resolves everything and here here it is uh it's done the only other change that we have to do in order this for for it to work is to add this little line uh wait a second wait a second uh lucas is showing right now can you zoom in a bit uh yes our camera was on top so i wanted to okay you can continue okay yeah so this was uh how we install it and the only other thing for expo that we need to do is add this plugin to um two to two uh dot config yes yes and it's very easy to find it it's here just in your project directory and it also keep in mind that if you have more presets and plugins here react native reanimated has to be the last one to import so you could have more here but the react native reanimated has to be the last one in order for it to work so that's it uh we did this and also like they say here you have to restart development server and clear the bundler cache and run expo start clear in order for it to rebuild rebuild everything and yeah that's that's the that for expo settings setting up we can just close these for now uh yeah we can close this one because we're gonna rebuild and this one because we don't need it and just uh do expo um actually we do have to install the library itself so let's edit yarn you could uh use npm install i just use yarn add i'm not sure it's probably based on preference i'm not exactly sure what they're the big mostly yes before um npm had some issues with security and that's why yarn appeared as far as i remember but now with the new npm like i would say mostly preference that's uh that's interesting to actually know and as it say as it said we need to do expo start dash dash clear if i remember correctly so let's just do that and let's say yes i think it will open yeah here development server [Music] and what we need to do is uh to run our application so just click here and go here so we might be asked to upgrade we're not gonna upgrade right now but i'll i'll promise i'll do it after this and yeah let's wait a bit sometimes i usually need to press it sec for the second time if i don't press update maybe there there's some kind of bug in there place where if you press no it doesn't do anything i'm not exactly sure this is the solution for a lot of problems like if it doesn't work from the first time try second and maybe a third time here okay i hope third one is going to be a charm how do you know that it it's not uh updated uh what it's how do you know that it's not running the application uh actually i don't know maybe it does you you can change something because i thought because it was said it said opening but actually that's a very good point let's add more percentages here no it's not running just close it and try it again okay close i mean a close application on the phone yeah yeah maybe i can just do simply go to expo go and that's also possible if i open it like this new update okay bundle is it yep it's bun perfect perfect perfect maybe we can find some interesting questions here um let's drink some water to stay hydrated yeah definitely and let's see let's see let's see a lot of people are asking about the authentication uh yes guys i know a lot of people are waiting for that but as i said because i'm focusing full time now all of my energy on the course uh it's a bit difficult to to create uh videos for youtube so but yeah like i'm planning i already have um the plan for the next authentication video which will cover uh validation and form control using use react form uh reform hook so yeah it's coming it's coming yep i'm excited for it too so uh right now let's uh let's go through our animated was installed right yes yeah we did install it and let's hope everything works because usually reanimated um it has some issues with running for example you wouldn't be able to run gs debugger in chrome if you use reactor animated too so they are still working on it that's but it it's it's already actually pretty good to be honest so first things first what we need to do is to create uh a simple like copy from their basic example a simple chart how it should look like that's great like every time you work with some libraries they usually provide some examples so go ahead and just play around with the examples that they give and it's going to save you some time of going for documentation exactly and it's usually it's good like first of all you import everything you uh not this when you set up everything and then you see okay this is how it looks right now and you can this is what i need and this is what i don't yeah exactly so we are not going to use mono tone cubic interpolation if we don't need that whatever that is [Music] so chart provider we need to wrap everything inside a chart provider the whole uh basically almost the whole view uh and i'll show you later uh why it is like that but just for now just trust me that we do need to do that okay and um then a chart path is um here we they kind of do this like just create some dimensions and get the full width of your uh screen so in order to do that i'll just create cons name it screen with i think like that and okay i need to import dimensions from react native uh okay and i think you can use a hook use dimension no or like this as well i mean maybe yeah yeah go go ahead and do it like this yeah i'm kind of used to this i'm not sure maybe the other way around probably it is possible to be honest and why i was changing in this place i have no clue let's go back and yeah let's add it here dimensions get window width and in here instead of saying size let's change it to screen width and here as well screen width so you're sending the weave to our graph yeah it needs to be the full screen full screen size yeah and height half of the screen size yes exactly for like uh that's what they do and that's what fits us probably as well actually i'm doing it right now to check it out uh yeah because i need definitely the full width of the screen and the height can be adjusted so i'm doing this to check it out also let's leave it yellow probably i'm not sure but it's hopefully it's going to be okay uh to showcase and uh okay so now it says that it needs points also this chart provider that we wrapped everything in uh can take some data so first of all we are definitely passing smoothing strategy to strategy to be bezier in order to make uh the corners a bit around it so um it looks i'll show you without it but it looks a lot better with it in my opinion and also we need to pass the points and the points are actually the prices there so in order to get uh prices as you remember in our coin crypto json file we have here prices and in the query i selected that i need prices hourly prices for 24 hours so that's what are we go we are gonna do uh uh prices uh i think it's just coming from [Music] yeah it's simple if uh or or is it from what what does two prices represent how is this data structure like prices is an array of multiple arrays yeah prices is an array of multiple arrays where one array contains the date uh on which this price basically was logged so probably it's going to be if it's hourly so this can be 11 o'clock at night so this is a time stamp right yes this is a unique size timestamp in milliseconds as and well second one and the second one is just the price that was uh the bitcoin price yeah okay so uh now we can take this here prices and it's an array and the thing with our chart provider is that they require you to have uh data with x and y values so it's a different structure for the data that they expect right yes exactly and in order to for us to change our data accordingly we can do prices and map through our prices uh take uh let's say uh price object and uh return uh uh return a very important an object yes x is uh price at position zero x is our horizontal line and that should be time so as you explained us time is our first value which is that timestamp in the array of two values and y is our vertical axis and the vertical axis should represent the price itself and that's why you're taking at position y one am i right yes exactly and as far as you can see we have some sort of a graph already oh that's that looks nice something yeah uh oh but there is a nicer way to do this because look how long is this one and because of some es6 features we can do it a lot nicer so instead of the heading here price have an array with x and y so that's basically destructuring and this now represents x and this now represents y and uh just you can simply and because you have the same names it's going to be even easier yeah i thought i'm gonna not cough but i don't know it doesn't matter yeah but because they have the same name i can just simply say x and y and as you see it works just as well but here it's a bit of magic e6 magic yeah and for new people i guess it might look confusing uh but a direction for you to learn more about this is have a look at features like destructuring spreading uh rest operator and all of this will help improve like can you do a control z and just look at how what the difference because the code is the same it does the same with v structure and with v structure so it's up to you to decide like which one looks cleaner yeah this one is probably more readable for new people i think but when you work like a little bit more this one becomes like a second nature i think yeah i am you need to know like how it works in order for it to be readable to you yeah exactly and so we see this bezier does like we can we have this nice uh how it will look without it uh i ca we have to send it but we can there are different strategies right yeah so let's see uh smoothing uh strategy let's find and here they have complex let's see actually i didn't try complex what does it do and the thing is that with this one is um we kind of need to reload it every time okay go back and forth so we're just rr to pres double press on r yeah yeah this is complex now i understand why buzzer is better yeah there's one simple let's see what simple does that simply doesn't do anything exactly simply nothing so this one by far looks the best in my opinion now uh we have this chart and we can also right away because of this uh chart path and chart dot we can slide it and kind of you see that little uh blue bubble the blue dot yeah yeah but you see the problem it's it is right now like doing whatever he it wants so yeah what we need to do is uh wrap it in a chart path and char dot uh wrap it in a view actually i spent so much time on this that you can't i can't even tell you and now it goes oh yeah really yeah and so right now we are only going through data and can see like um if you click you can see specific like on this chart i'm not sure how to call it but right now it's actually not doing anything you're just like scrolling a bubble yeah it's a simple dot yeah so first of all uh what we could do is uh implement a thing called chart y label and that's why we needed to uh wrap it in chart path provider because everything that you use from this library has to be inside this provider and i think we want if we scroll through this we want this price to change accordingly to what it was at this position that's exactly what i want to see exactly so uh we are gonna change uh this uh current price usd to a chart oh it's that easy i i was thinking in my head because i didn't work with this library lucas was preparing and i was thinking in my head like you probably have to keep in state uh with data about the current price and then register a callback function that will update every time you move that dot around and then you take the state variable and display it but as i see right now from lucas it's as simple as rendering a chart y label component right exactly that's it and uh this library has a very nice trick that i'm gonna go get to a bit later very very soon why it's very performant library so first of all let's format our data let's call it format currency hopefully that's a good name let's create a const format currency is it is this required uh this is uh how we are going to uh update this value and also that little trick okay so uh and also let's pass in some styles so we already have styles and we're gonna pass current price styles here like we have it here and uh yeah because we don't have style we have styles but right now it's of course uh like getting throwing an error because this format doesn't format anything so one very cool thing that this library has is um so basically if i put this little work let uh enclose this little string it already knows that this function should be uh ran and changed on ui thread instead of javascript thread which makes uh so that i don't need to update this value with state and that's why it's so performant because you're only updating it on ui level and also when you release it it snaps back to the value the original basically value that was that is our bitcoin price so this is really good and uh they have a lot of written about it and you can read in their library they also have something if you want to run specifically on javascript thread as well but we don't really need it it seems like an advanced topic but you you sum it up very well like it's it's improving the performance of application by running this code on a different thread than your usual react native code on the ui for advert uh runs much faster in terms of uh specifically ui interactions yes uh yeah uh so what right now we need to do is always pass to this uh format currency value and you see we didn't pass here anything so that's a little bit more magic but you could write this like value than uh this and then say here as value but it's kind of repetitive and kind of a lot so you can easily delete this delete this and it knows like that's right because you don't need an internet intermediary function that does nothing then take some data from here and pass it there so you don't need it you can connect everything together exactly so first of all to format currency you see actually we can simply uh right now where is that here we can comment this out we don't see anything here even though we have styles and it's white but it's not returning anything that's why so we have to at first check so if value is equal like to nothing that's what it's returning at the start and that's basically our current should be current price then we return uh this again little under escape i'm not sure how uh tactics yeah then we say that okay it's going to be a dollar then we with a dollar it's going to be a dollar exactly then we open uh this little thing the javascript portal yeah uh then say car ran rice i think uh yeah i think his current price yeah and also we probably uh two fixed two gonna do and also this um i think it will right now yeah fail because we need to pass it as a string and the current price to fix not function where why is this i think it's all ready to to string i mean we'll put it inside a string what's the issue it says current price to fake it to fixed is not a oh um because maybe what's the um let's see uh market oh because it's not mark it should be current price current price dot usd that's yeah yeah so that's what uh tripped me off a little bit but uh usd and uh voila we see see that's where is the graph so right now uh let's uh wait a little bit but right now also uh if we need to so that's if just if the value is empty but if the value that's here is not empty then we need to return another little magic to and i yeah right now i think we need to do parts load because it's going to return a number and it would suspect yeah so parts flow just parses your number to a string to a yeah simple string so that's how we are gonna that's what we're gonna do and also to uh we should fix it to fixed uh two and right now it's good but for some reason our graph decided to change its color and uh we need to figure out why is that because i do see this little bubble uh chart y label okay let's delete this one we will not need to send um yeah that's why because uh we needed to reload so right now uh if we see we move this dot it shows different price at different state a different stage different price let's say all right so format currency will receive the the price data yes where the bubble is at the moment right exactly so if i turn it as a string so that's why you need to first parse it and then to fix to to render a fixed amount of decimal places yes yeah all right that's interesting uh and now well the color doesn't really fit our applications uh vibe so let's let's improve that a little bit and i think we can make it a little bit uh i know more interesting just by checking okay if the current price of uh the uh coin cryptocurrency is lower than it was when it opened the market today not today but basically at the top because we're taking 24 hour uh range period so at the yeah 24 hour range start because crypto doesn't close the market at open uh we're gonna take the first value and compare it with that so basically the first tick okay so basically you're saying like if today the coin is dropping then we want to render it with red because it's dropping and if it's a very good explanation so and in order to do that we need to go to take all prices and we need to take the first one in an array of prices we see that the price at hour let's say zero zero like in the midnight yeah so it's basically this one okay first one so that's when this 24-hour period started okay and here and but we also need to uh slow i mean this one but we also need to take only uh the actual price yeah the actual price we don't really need the whole object or this so let's do another and let's say at position one okay so zero is taking the first price in our data array and one is take the actual price not the timestamp yes exactly okay and we also need to compare like uh uh how we said currentprice.usd if uh if it is i mean uh bigger then uh that one that means we are doing do you want to tell the colors um i i have them in my notes okay but i if i don't need to open then if you tell me uh for the red is e a three nine four wait wait wait 16 c 7 8 4 7 8 4. i did everything backwards uh okay now we need to reload it again and oh we are only doing this for the dot so we also need to do basically completely same thing for the stroke and that's what we can put it into a variable if you do it twice that's very smart and uh we but that's a different that's a different color yeah that's a different yeah that's a different condition yeah so how do we but it's actually isn't it the same price change we're looking price change percentage um if it's just below zero we need to compare it with the current value at the opening value and now we're just saying oh current value is when you also like this one okay maybe yeah well let's just say call it uh uh gra chart color oh that's uh you see that uh i i saw you're struggling to find a name yeah so let's uh chart color and easily ctrl c close it here ctrl c and here simple we'll see now let's save it i mean we didn't need it to update it and now why is green because first price is uh on the left yes okay yes we're gonna yeah that's actually a good very good point so maybe i put differently those so i'm just want to do one little thing is because this line is so so small and i really need to make it a little bit bigger for my uh and we're gonna get to that problem of yours because i believe you're right and let's reload it now it's bigger now it's a lot nicer and with the green dot we're changing the price when we snap it so now let's figure out what's the problem okay if the current price in usd is more than price bigger than then i think you're open yeah you messed up the colors because 16 is green oh my god but it should be yeah because uh okay so let's check with dummy data yeah that's interesting the price here is five seven one two four which is lower and that makes sense that this one but where is it lower because on the graph it's not lower that's interesting so it's lower here price change no no where is it price change percentage 24 hours so in 24 hours it's minus maybe that also has to do with when is this price change 24 hours registered because i think that even a couple of minutes can be substantial yeah for for a coin as well very much but then but then it's it doesn't make sense that this one is green this one should be red then but according to there to this data up there it should be because uh okay so we opened here with 57 and we closed with 56. why the current price is 15. oh i know why because i actually when i was testing i changed current price nikki ricky so i needed to test it so i'm very sorry it should be uh 5566 23 okay now it makes more sense exactly yes i'm very sorry guys so voila i just want it i remember i showed you that's the color yeah and right now i have um you see a green as well so everything looking really bad here so but it looked much better i would say the green it looks better it always looks better when it's green but so right now uh how are we doing with time uh we are three hours in three hours so we have two choices either to develop this whole like more things in this uh detail page or hook up some navigation i think that probably we're gonna manage both of them uh so let's add some simple uh data about that coin on this page i don't have a designs here what i have uh actually designs on my phone here that i wanted to do so let me open it real quick and i think that now it doesn't have to be pixel perfect so we it can be like label and value i don't know market cap and displaying the market cap and what i really really want to do is actually which i think was uh oh we forgot one thing actually the converter price converter oh that's what you wanted to do so yeah one i really want to showcase this one because this one also shows how you can work with state in react native which is a very big thing in react native and also with inputs so shall we do that i just yes started drinking straight away from that bottle okay so i think we will have time for converter maybe even some more simple data and let's go to converter and then navigation okay so first convert them below the chart below right yeah that's what i was thinking as well um so in order to for converter to first of all we kind of need to uh have text input because that's where what what lucas is trying to do is um you can you can continue coding is to add a simple uh converter which will contain two uh text inputs on one side you're gonna input the amount of the cryptocurrency that you are currently watching for example bitcoin and where on the outer side it will automatically calculate how many usd is that amount of bitcoins and it's very useful for example when you [Music] when you're working for example even with bitcoin like nobody's gonna work with one bitcoin but you have like 0.005 and so on and it's very hard to do all them this math in your head so that's why you just simply pop it in a converter like this and you see how how many bitcoins are that or what's the value of it exactly and it was a good way to like showcase this state which is a very very important part okay so we have a view in which we will con which will contain basically uh two um uh how to say like two more views so let's create them right away let's close it and in that view we will have text and text input this one we need this one as well uh in a row [Music] now text input right now we're not going to give any values to text input i just want to do this and maybe separate them in order to know that what the difference okay now text input will require quite some uh style properties yeah like and properties and also styling is pretty text input is probably not the best thing would you use if you're like react native react native elements has very good input which is so much better but i'm not sure if it works on it for the text input uh when i start developing it i just add there a placeholder to see them on the screen that's uh that that will be a good uh place to start but right now so okay first column is going to be a symbol so that's what we're going to do we're just going to take symbol and we also as remember need to make symbol uppercase so also add some styles because it's not very beautiful um white uh okay we can already see that's very good and also okay let's leave it for a little bit later and for this one so for this one we don't need really anything as right now we are working only with usd we can just simply say usb here but also like if we would work with different cryptocurrencies which could make so so that you can change the uh val the usd for example to euros and yep yeah and vice versa and to more currencies okay so we have our uh basically two bitcoin and usd values right now let's start with text input let's start styling it and i can already say that we will definitely need that we can say just simple input and the same should go here let's go do we have yeah here yes input and let's start let's try to focus mostly um on the functionality here so yes yes i'd add styles to to look pretty but don't over i'll just add them so that we can easily like see them see something where i am i because actually i have some files here we prepared for this because i was really annoyed styling this one and it was kind of difficult as well so border uh bought um a width we need one then border bottom color we need it as white okay what else um we need some adding we need some um probably font size inside as well i think should be better bigger uh i think it already looks good yeah it's at least readable and also oh it's a very important thing we need to display color and white inside another thing that i would suggest here that we can focus is if you provide with 130 pixels uh it looks good on this screen but on a smaller device screen it will not fit both of them so i would rather do a flex one instead of wet weave which means that the input will take the all available space after it gives the space to the to that stuff input flex 1 doesn't work um uh i think we'll go back i think it has container styles what if we put it uh you will you will also need to oh you will also need to add flex one you know and what on the columns you see you have two columns yeah yeah uh yeah that's that's why because we can try this out i'm interested flex one here will give uh equal space to both these two columns and the flex one on the input will yeah and now it will grow and shrink with a screen size here you go that's it that's actually a lot better yeah solution and let's get yeah so also we kind of need to align this one um in the center so align self center and now it looks a lot better and let's do the same here and that's actually it i'm not going to do on styles anymore i think it already looks perfect bro yeah yeah so that's that's uh does that we can now continue to the actual functionality so uh text input also i can probably already do this one or maybe just like we'll see text input also needs a value so value for um for for the crypto for usd it's always going to be the current coin value so it's currentprice.usd yeah because [Music] okay and also the um that the bitcoin will be one initially one yeah yeah initially it's gonna be one okay uh that's good we uh are we displaying color what yes um okay what else so that why don't we see it let's try to really when you type you see i think if you let's uh try to reload it tax input value [Music] it's weird um input value oh value probably with a string you need to spring yes yes exactly so that's um one thing it only takes string values yeah yeah you were right so here i would do just like that example like that okay that's a good catch um we're going forward and now we also kind of we need a keyboard only numeric so we can say keyboard type and change it to uh maybe we don't need even an object change it to numeric and this will automatically open the only the digits on the keyboard when uh on the device when you press on this so it's not going to show you the letters on the keyboard but only the numbers it's pretty handy exactly and let's add the same thing to uh someone already is seeing but that's not the smartest way to do that use a state and set the state by default to the current price because you need to update it uh you know we're gonna get there yeah i know actually right now and that's uh that's where we are getting thank you very much for reminding us exactly so that's the last step what we have to do so basically what are we going to do is say on change text and when we change text we need it somehow to update and as someone already said we will use state and we can't really keep this value uh like this the whole time because even if we type here whatever we want it will always be this price so in order for it to change we will have to create uh first of all close this and create a state yeah state is uh the data that uh the components keeps inside um its body that uh he can update and the component will automatically re-render whenever we update this state variable exactly a good analogy is props is the data that is coming from outside which the component is not responsible for he just receives it but the state is the data that is kept inside the component and the component is responsible for keeping track of it updating it and so on exactly so and to create a state first of all we destructure it from react like just like that that's uh we're taking a hook where i think if you're using uh these uh functional yeah functional components it it's the best thing to use uh hooks with basically yeah like in functional components this is actually the only way to to use state with uh yeah and i already forgot the old ways of doing a class component i wouldn't be able to do it from my head right now as well and as a coin value basically right now we have to set a default value for it so let's say default value as currentprice dot usd so and right now as someone already suggested we instead that's another one as well while we're still there okay let's let's do the same so we need that's uh going to be uh oh no so i made a mistake so this is gonna be one yes that's what i was thinking coin value and this is um money value usd usd value yeah as the do you plan to keep track of them to to keep them as a string in state because i think that you're going to need to do some mathematical calculations yeah and it's better to keep it as a integer or a float and you will make it as a string only when rendering it i i agree definitely true so and that's what we are what i said that but now i'm thinking that unchanged text or gives you a text it depends like as you want i think it's better for for me like that because uh if i work if i need somewhere in the other function yeah to work with this i will have to parse it and i think i'll do it doesn't probably matter but let's keep it like i liked your first idea and so let's do here usd value just like someone suggested and in here where is it here and in here do point value dot to string okay we are going somewhere so right now we we still cannot update this value like no way so in order to do that we you see if we delete try to delete it always goes back so in order to do that we need uh some kind of on change text which we are gonna do so uh i think i will create two more components uh oh two more functions oh yeah uh one called um change uh coin value and the other one [Music] the other one called so let's just copy paste it the other one called change usd value and what we're going to receive from there is value a string value and then we need to update the state which is numeric value right uh yes uh so right now we are going to pass here so this is uh uh on change on usd how did i name it already forgotten change usd change usd value and up top change coin value okay so um i think i i always like at first to console.log what um am i actually receiving what i like to do is console worn because you don't have to go in them that's but i actually almost never use causal worm but that's true i think it makes i agree that it makes more sense to use it like that and um okay so five six two that's good that's what i should receive because i'm trying to delete this last number and here i should receive nothing that's true and here yeah okay perfect so now uh what we can also do is uh say value off to check what actually are we getting value of i think it's like that or maybe value then value of i don't really remember value of value or what type of oh type of yes that you wanted to see the type of a value and yes uh what are we getting so you are thinking like is it a string or is it a number exactly and no it's not this one it's this one and it is a string so that means uh hmm that means that before setting to state we need to parse float right yeah yeah we need to parse it so now that i'm thinking actually which way it was better but let's keep it like that i think so first things things when you change the cone value you need to set coin value itself uh to the one that you just changed so let's do value i mean bars float value and also after you change so right now if we le the try to change something here we still cannot do that because set coin value okay oh because uh we are setting uh the coin value and we are giving there uh-huh okay that's that's um try to do for the usd as well that's actually interesting set usd value and then parse float the value actually i think it made sense to have uh them but no it does it doesn't really matter so let me not parse it and just what will sad coin sent usd yeah right now it does work hmm but it changes them why didn't work can you just console worm pars float uh but no it's it it lo it shows it shows a number yeah but when we are trying to set it as a parse float okay can you try once again i don't know just for parse float value [Music] now it works can you restart and try again because i think maybe because initially it's an integer right now yeah it's not working yes maybe because initially it's integer but then we set it to float but i don't think it should be the case so the thing is that you cannot uh update it right so if i parse it then it's not a number but if i keep it oh you know what we can do is to set to parse a value or zero because in case it's an empty string parsefloat will return not a number but and then n a n means not a number yeah right now if you delete everything it should leave zero yes and you can then yes yes yeah but the issue was if you delete everything and do parse float of an empty string yeah it's not a number so that's why yes yes yes exactly and do the same thing for power one for the usd value the thing is that um what's the issue i'm not able to do dot yeah yes i think you are right i think it's better to keep them as string for the reason of not being able to write dot there yeah that's true so let's uh let's move to keeping the state as a string just like that and this one in situations like this i really miss type script yep that's a good point because in one place you can have it a string in one place you can have it as a number and when you try to call like dot uh to string or dot to fixed and uh in one case you test it it works in our case it doesn't so yeah exactly and here we also were able to delete to string because this will always be a string right now so right now it does work i can write 0.98 and here yeah as well everything so now the only thing that we need to do is here if we change this one that we need to say change usd value and we need to take this value and multiply it by the current price so how did we name it current price dot usd and this will give us a usd value so let's reload at first these two values so if you change right now the coin value it automatically changes the usd value as well ah it should have but but when when you multiply you will now are working with strings but multiplication should uh be done on a on a float basis so you probably have to parse the values individually multiply them and then to string right so here well but that's look if i have it uh change and then okay yeah i will definitely have to yeah like right now you are doing math operation with strings so it's a bit tricky like you have to parse first of all value to float then current price to float multiply them and after that transform it back to string right yeah but actually we don't need to parse this one yeah that one okay yeah yeah because but now how do we avoid not a number when parsing when deleting everything so let's do some checks here yeah you you do the same like with or so you add it to another variable like const i know float value and we would do bars or zero yes or zero and uh i think that word zero is after parse float because parse float is the one but actually both i think you're right because then it might have worked but i think this one is the right way to do because this will catch a lot more uh issues yes and then uh load value but and make sure to transform it back to string after you multiply it right yes so should i do in here or equal you can do it in here so let's have it like that and then two string yeah but that's why this these text inputs are so annoying but because it's it has to like parse it and do this and that react native elements i think it worked differently but yeah now it works it works okay uh let's do the same one with our one so one will be 56 two yeah yeah that's uh good and that's basically what we need on the other one which is part float and then set not usd value but set coin value with this one and instead of duplication you divide yeah divide that's exactly yeah okay let's see uh so i have uh five thousand six well five thousand six hundred ninety two no five fifty six thousand nine hundred two twenty three a lot of numbers yeah which is one and that's already good i can do one hundred thousand how many bitcoins do you have just write it there and you'll see how many 10 or how many yeah exactly i have 100 100 yeah okay no but yeah that's how it works so uh this uh needed a little bit of uh both of our work so we came up where are we still here i think we um where we are still here i want to um i don't know challenge you to do the same thing but with user facts because right now um as i see that these two values of the coin value and the usd volume are whenever you change one of them the fact that we are changing the other one is a side effect it's not an actual action i don't know like the action is that you are writing there one bitcoin but the side effect of our action is that usd as well changes so the way i would do it yeah i would uh add the effect that will uh be registered on our bitcoin value uh yeah let's put it uh coin value you mean like we will have two effects one effect on the coin value one effect on the uh usd value coin value and what does that mean is that this use effect will be called every time queen value changes updates and we can register these side effects that we have in our application um so almost everything but except said coin value there yes yes uh that's a good one let me clean it up here like that yes but i think your function functions on change text of the text input right now you can simply pass where the setter of our uh state set point value i think this one is going right yeah and this one i think this way it's it's better because you look at the text input what should we do on change text on change text we should update our state value what's happening as side effects it's not a matter of the text input it's not them um yeah and another thing that i'm i'm just thinking right now is uh will it go into an infinite loop because we change usd then we change the coin when we change the usd yeah uh if it will we're we are gonna just simply do an if statement if the the value actually changes so what's the issue that it cannot get this value uh yes because there is coin value right uh yeah we have to change here yeah to the coin value and i think yes yes and here too because it's a dependency of a coin value and here is the dependency of the usd yes okay the graph is also need to reload yep and can you change something i want to see if uh i think it doesn't go into this it's do you think it's slower it's a lot slower and also um yeah i see and it's well now they change at two different um [Music] frames the first frame it will update the state value and the next frame it will update the it will call the use effect and we'll update the second one but from code perspective i think this is uh better in my opinion oh but it's like almost unusable slow i think that it's uh it's the infinite loop can you do a check before setting usd value check if um you will have to yeah calculate it first of all let's try simple hello okay and i have to change uh does it also show how many times it was called nope but it's crazy slow i think yeah because it's a as i'm saying like the issue is with the infinite loop so to fix this infinite loop uh take out the calculation of uh that let me real quick um but i mean it changes it only calls it as many times let's say okay one two and it should have called yeah actually it's not um it's not an infinite loop it's actually really hard to see why it is um you know what's what time is it let's try to let people open application on their expo go because we're not gonna get into the navigation today so let me try to scan this but you have to switch to um to another type of link not local but on tunnel do you have it set up if you don't like it's going to take up some time so i don't think i have it set up i've never done it before so let me try to do on to do myself in this one [Music] uh well i'm thinking that it shouldn't be the issue with um infinite loop is because use effect will detect this the part that is not changing we are just setting to the same value and it just compares previous values with current value it says that it's the same value and it's not triggering by use effect go go go go go go oh so let's scan the qr code on our devices come on uh why my phone oh now it opens let's see oh no i'm gonna leave that one here okay okay it's on phone no that's super fast it's it still performs like for example what why it's like that whoa whoa whoa yes it's infinite look but i something is not working a type 8 in usd in usd eight it just automatic it put everything correctly for me for me is like bugging and it's putting oh if you put eight it adds seven point nine nine nine nine nine and it puts seven point nine nine nine at night four times or five oh that's uh that's actually you know what that's how javascript knows math like when you try to i don't know divide a big number by i don't know a thousand by ten yeah it actually there is a chance that it's not going to be uh 100 but it's going to be 999.99 and a 97. but it also it reminded me of um but it also puts it a few times i think it's i don't think it puts a few times i'm pretty sure click on a uh okay no but if i okay it doesn't but then if i delete decimals are not working sometimes it does sometimes doesn't something is not correct with this this approach the decimals actually that's a good question uh someone is saying that the decimals are not working and i'm checking right now and that's this is because in my case the decimal is not a dot but it's a comma so a string 0 comma 5 must probably will not parse to float so if you do on that string just replace comma with a dot will it work but they cannot do that because we have a numeric uh keyboard with which only let's no no i mean when you calculate when you parse to float that coin when you pass parts to float that coin value do a dot replace a comma with a dot and even though we will see a comma your math operation will be on a dot do you get it i was trying to for me not sure but this one is not really working it always like puts uh yeah but that's probably because of what you say maybe hopefully but it prints hello quite a lot let's try to delete and let's say i think we would have managed to do navigation but i think it's uh it's already free in 40 minutes and okay so let's try to fix this with decimal points at least um when you parse for example float usd values do a replace yeah usd value dot replace because usd value is a string and the math will be comma with a dot okay it's uh that's the structure right yes yes and let's do the same for so let me try to reload oh yeah so does it work if you do zero on the bitcoin zero comma yeah it just like goes crazy nuts what if i like okay let me just try to go to the i'll save here what we did just copy them yeah and i'll go to what it was like before what well if it's still that cool but i think that issue with eight is uh related to how um but i can press 8 here yes it's working now and also i get a big number like what lucas is saying it's working with the decimals uh correctly 0.5 for me probably i missed the update but yeah now it's like faster a lot faster and if i let's say do four but what if you do that eight hey just wait simple 18 it works yeah um let me try to reload it on my app maybe on applications are different nope it works so something was wrong with that i know for me the decimals are not working but i think i just have to refresh it no the decimals are not working that's uh you are right so which is what we need to do oh right now is uh the same fix for the decimals yeah so not here what's inside value boy yeah i'm sorry so that was a good catch uh let's do this instead of and hopefully it will work this one should have been like okay so another thing that you can do uh to fix the issue of whenever the math returns 99999 every time i say this i remember about uh how's his name borat yeah maybe yeah now it works like uh there is borat i don't know but yeah there is borat um yeah um so i was saying that to do too fixed on the displayed value i'm not sure if it it's like now everything works just first yeah yeah actually it does i mean sometimes there are like in my case right now i have 500.7.0 5000.7004 when you put what i don't know if i put five no if i put oh so if you put yeah yeah if you put 0.15 for example it will have a lot of values after but usually those values are usually kind of important yeah yeah it can be a difference of i don't know 50 or something okay so let's leave it like this um can you do that so much more that i want to actually manage to build so far put them [Music] phone full screen or maybe a bit bigger uh yes we can actually try to i've never all that this is also the first time i see it so let's go from the home screen yeah so let's do and show a little bit of demo yes uh where app and we're gonna have to import home screen as well boom so there's a lot left to do here actually a lot well you what navigation and i wanted to display more data i want to do so more interesting things but yeah it is what it is so here we have our list of uh different cryptocurrencies they're nicely um [Music] displayed and if you press let's say on uh some some the crypto it should have been but it it's not i wanted to say if you press on uh crypto currency you should go to this detail page but yeah but uh everything is ready just in the next video we're going to integrate navigation and it's going to be when you press but i i think that it's good that we left it for the next time because in the next time you will also integrate querying the data and it will make much more sense when you press on bitcoin you see the values uh the details of bitcoin yeah and it will make much more sense to to have them together during the next live stream i agree definitely so and we have a detailed page with some pro with the price with current percentage with the graph that changes color according to how the bitcoin is doing with uh whoa with a nice graph with uh uh okay when the phone is in this mode it's not doing very well so let's try to make it uh yeah like this that's what they meant probably so uh and if you like uh scroll through it it will show a different time different price on a different um period of time and also we have this converter that took a lot of time for us it does work so if i put 0.10 uh bitcoin it's ninety two 5692 and if for test let's put like uh 5692 i think it was and it's almost 10 because it was point something so that means the converter is working as well awesome that's that's a really great great job i'm i'm so happy with how this application turned out what i like it's is the design uh it really looks like top level like minimalist and with with this graph like i i think but i'm going to introduce this graph in my day-to-day job when whenever i need to render some data because it was quite easy for you to integrate it it took you even less time than with that price calculation but i think that if you spend even more time you can adjust probably everything about it right yeah yeah you there's so many changes you can add like different lines and different it's a very flexible uh library which is very nice uh someone was asking if i can find that uh oh here it is uh is this library um i mean someone was asking about candlestick libraries do you think that this library can handle this uh this library cannot but there is a library for react native uh called victory charts i think and you can render a lot of different uh charts even more and actually that's uh what i wanted to also showcase if we do like even deeper uh application like style side of this application so that i could show candlesticks as well basically open detailed chart and there you can see candle charts but yeah you can do that with victory charts or something like that it's called that's nice so guys thank you very much for joining today's live stream i hope you enjoyed it and let's all cheer up lucas in the comments below and ask him to do the second part next week so um yeah anything else lucas no thank you for having me i really appreciate it i really enjoyed uh actually this pair programming that's a really nice thing for people as well to see how pair programming works and also how you can implement different ideas and take from each other like for example i took margin auto from you and you didn't know about thin hairlines and stuff like that so it's really good to learn from each other and work together i really enjoyed it and thank you for your community for having me i hope they won't mind if that you're you're not you're doing it's not oh my god i'm so tired we all understood it yeah thank you very much and we are waiting you next week uh friday 3 p.m uh both lucas and everyone who is watching uh the video join next week and we are going to continue this build uh i think it's decided right uh next next week we are going to integrate um api calls and also navigation which is some of ideas that we have uh yeah write down below what else whatever features you would like to see there i'm thinking maybe some watch list or something like that i think it's gonna be quite interesting to to see how to integrate right so alright guys thank you very much take care stay hydrated and bye bye thank you

Channel: notJust․dev

Views: 110,662

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: K6i02mJc8Zc

Length: 233min 0sec (13980 seconds)

Published: Fri Dec 03 2021