LCRN EP10 - Cryptocurrency App - React Native UI

hey what's up everyone i hope you're doing well this is jack from bikeprogrammers.com and welcome back to a brand new episode of let's code react native in this episode we are going to build a clean looking cryptocurrency app based on the design created by david morgan on dribble.com now if you haven't already be sure to subscribe to our channel and turn on the notification for more videos like this alright now with that being said let's get started [Music] starting from this episode instead of just setting up the project from scratch we are going to prepare a star template so that it will be a lot easier for you guys to follow along so head over to the episode 10 cryptocurrency app store template i have included the link in the description below and from here you can actually download the source code either by using the clone function or the clone method or you can download the zip file directly all right so once you've done that this is what you're going to get don't worry we're going to go through the files that i've added in for this data template all right so the first file or the fizz folder that we have here is the assets folder so as usual we have the fun style that we'll be using in this project which is roboto we have added in the icons all the icons that we'll be using and also the images and within the images folder we have a new folder called splash this is actually for the first screen which is actually the splash screen over here right let me just open this up so it's easier to see there you go it's actually for this screen the first screen also known as the splash screen right so here we have two folders one for android and the other one for ios these are actually the same images just that it has a different resolution right same thing goes for the android it's actually the same splash screen just that the resolution is different don't worry about this phone i'm going to show you guys how we can actually generate all these files with different resolutions easily via a website alright so don't worry about this for now let me just hide that and next we have the constants folder within the constants folder we have icons.js which is basically all the icons that we have added in so that it's easier for us to you know use it later on in the project same thing goes for images.js and then we have also included the themes or the team that we'll be using later on this project which includes the colors the sizes all sorts of different sizes and also the font style right and this time we have also added in a new file called dummy.js these are basically all the dummy data that we will be using in the project later on i'm going to go through this one by one so for the portfolio the first dummy data that we have over here is for this section your portfolio balance section so next we have trending currencies so within this object within this array we have a list of objects which has the property of currency the cryptocurrency code the image or the icon the amount changes the type whether it's increase or decrease the description the chart data this this is actually for the chart itself of course wallet transaction history is actually for the um last screen over here all right so pretty much that that's about it we're gonna see how we can use it later on so don't worry for now and next we have general transaction history this is actually for the home screen over here transaction history and also you have the chart options this is for this part over here all right and pretty much that's about it right so that's all for dummy.js we are going to see how we can use it later on and of course we need to include the index.js file to export all the files that we have created within the constants folder right next we have also added in a very very basic bottom tab navigator and we are going to see how we can customize it so that it looks like this all right so don't worry we've also added in the screens that we have so we have home screen we have crypto detail screen which is this screen over here with the chart and and the description and all that and also we have the transaction screen right which is the last screen over here last but not least we have also added in the styles folder which includes all the style properties that we need to customize the appearance of the line graph or line chart right so don't worry about this i'm going to show you where i i got this you know style properties right so don't worry about this oh and one more thing and that is the app.js file where we have also set up the stack navigator for us to you know navigate between the home screen the crypto detail screen and also the transaction screen all right so i think that's all we need to know about this you know star template now the next thing we're going to do is try to run the star template so open up your terminal and run um npm install then we need to run react native link all right so head back to your root folder and now you should be able to run your project by typing react native run ios alright so what we have here in the starter template is a very basic bottom type navigator all right it's a very basic bottom time navigator and also the screen name as well as a button to navigate to the subsequent screen like for example i can navigate to crypto detail and from crypto detail screen i can navigate to the transaction screen that's all we got in the starter template all right so the first thing we're going to do here is the splash screen now if you are using react native expo changing the splash screen is pretty straightforward all you need to do is to replace this flash screen image right but since we are using react native cli there are some additional steps that we need to take in order to change the splash screen so to make things easier we're going to use a library called react native splash screen but before we install and configure the library i'm going to show you an easy way to generate these different types of resolutions for both android and ios the first thing you need to do is to prepare a high resolution of your splash screen the one that i have here is two thousand pixel width times three thousand pixel height so once you got that ready you can then head over to a website called app icon dot co this is an awesome site and i use it all the time now head over to image sets and drag the largest image to this area then after that click on the generate button and you will get all this different resolutions all right so now back to the react native splash screen library scroll down to the installation section copy this npm install and paste it in your terminal next we'll need to run react native link and also we need to see the new ios and run pod install all right let me close the app as well okay so for this library there are two different parts um one is android and the other one is ios we are going to work on ios first then after that we will work on android as well so don't worry so the next thing we need to do is to configure the plugin scroll down until you find the ios section so here we need to update the applicate.m file right so go back to your source code and open up the ios folder open up your project file and open up the app.delegate.m file right so here we need to copy a couple of things into a source code we need to copy this and place it underneath the root view which is over here and next we need to copy this and paste it in d did finish launching with options function so it will be over here right did finish launching with options function and i'm going to place it darkly above the return statement oops all right save it that's it for the ios configuration next thing we need to do here is do um yep we need to customize the splash screen via launch screen.storyboard right so to do this we need to open up the xcode so head over to your project file ios folder and open up the workspace all right so in your xcode open up the project file cryptocurrency app so here the first thing we need to do is to import these splash screens so open up the images.assets and here we need to create a new image set all right let me just rename it to launch screen so from here i can actually drag and drop the launch screen for ios directly into xcode right so i'm gonna highlight these three launch screen and drag and drop into xcode just like that okay once you've done that next thing we need to do is to head over to your launch screen.storyboard and remove these labels right so i'm going to remove the cryptocurrency app label i'm going to remove the powered by native label i'm going to remove this empty label as well and i'm going to select the super view over here and click on the ruler icon and here i'm going to uncheck the save area layout guide okay cool next we need to um click on the plus icon over here search for image and drag this image view into the view just like that and next we need to um set the constraints of this image view so click on this button underneath the screen over here add new constraints and set all the constraints to zero i'm gonna uncheck this as well and click add constraints alright so now we got the image view in place next we need to head over to the imageview property by clicking on this button and change the image to launch screen and of course we need to change the content mod to aspect field just like that now you can go ahead and build the xcode project okay so once the build is succeeded head back to your source code in your terminal and you can then um run react native run and sorry react native run ios right all right cool the splash screen is now showing on ios devices all we need to do now is to hide the splash screen in the app.js file like this all right so i'm gonna head over to the app.js file and here i'm going to import from react native splash screen i'm going to import a splash screen from react native splash screen right so within the app functional component we need to add a use effect hook so react.use effect like that and here we will need to hide the splash screen so splash screen dot height what it means is that as soon as the app is um fully loaded the splash screen will be heated so save it and i'm going to restart this app well i think i need to restart the app entirely to see the splash screen in action so i'm react native run ios so the splash screen is showing and after a few seconds it will navigate to the hum component great alright next we'll work on the android version so let me just close this simulator i'm going to close this x code as well one as well okay now we need to refer back to the github repo and look for the third step plugin configuration android version so what we need to do here is that we need to update the man activity.java file and include a certain things over here so let's navigate to the main activity java file i'm gonna hide the ios and open up android folder it's in the app folder source main java man activity.java file over here so i'm going to copy and paste a couple of things we need this all right this one because we're using um a later version so we will copy this one instead of this one all right so i'm gonna paste it over here and lastly i am going to copy the uncreate function and paste it over here alright save it and next we need to um over here we need to create a file called launch underscorescreen.xml in the layout folder so go back to your source code in the rest folder we need to create a layout folder so create a folder called layout and within this layout folder we are going to create a new file called launch screen dot xml and for this i'm i'm just going to copy and paste everything from here all right and what we need to do next is that we need to copy all our assets into the ras folder over here so simply look for the assets it's in the assets folder images splash screen android and i'm just gonna copy everything and drag and drop into the rest folder [Music] just like that copy folders all right and lastly we need to create colors.xml file in the values folder so head over to your values folder which is this one and here we need to create a new file called colors.xml and same thing i'm just gonna copy everything from here and paste it inside the colors.xml file all right so the next thing we need to do is to open up your android folder by using android studio so open up your android studio and then click on the open an existing android studio project button and lastly open up the android folder the reason why we are doing this by using android studio is because i want android studio to you know build the project properly so that we wouldn't face any issues later on when we run in android version right all right so after you see configure successful what i would normally do is that i will head over to build and rebuild the project just to be safe all right so once you see build successful next open up the avd manager and you can then open up um a simulator of your choice i'm gonna go with pixel 3a all right so up to this point we have successfully implemented the splash screen for both ios and android next we are going to work on the bottom tab navigator but before that let me just you know quickly switch it back to ios i'm going to close this all right so we have successfully loaded the ios simulator next we'll be working on the bottom tab navigator now if you pay attention to the middle button over here it has a bit of a gradient color so in order to achieve this effect we need to install library called react native linear gradient so scroll down and copy the npm install you can use yarn if you want to and paste it in your terminal now every time after you install a library it's always a good practice to you know restart your app so close the app and run react native link and fold by pod installed in the ios folder alright now we can navigate back to the root folder and run react native run ios alright now we'll then head over to the navigation folder and open up tabs.js file and here i am going to import the linear gradient from the native linear gradient library all right so import linear gradient from react native linear gradient alright next we will be adding the tab bar options prop for the type dot navigator so tab bar options i would like to hide the label so show label equals to false and i'm gonna give it some customized style so position absolute bottom zero left zero right zero elevation zero background color equals to white border top color equals to transparent and height equals to 100 all right next we'll need to customize the tap dot screen component so for oops let me just head back to the mock-up so for these four tabs hom portfolio prices settings you will need to have an icon of the tab and followed by the label all right so let's work on that we are going to start up with the home tab so we need to add the options prop type bar icon focus and i'm going to return a view a content review with an image and also a text company right so the style for the container view is going to be align item center and justify content center and for the image the source is going to be icons.home resize mode equals to contain style is going to be with 30 height 30 tint color if it's being focused if it's currently being focused then i will use the primary color if it's not then i will stick to black color right and for the label it's going to be home i'm going to give it some styling as well so color if it's currently being focused we'll be using the primary color if it's not then we'll stick to black color and of course the phones is going to be body five all right cool next i am going to copy this prop this options prop and paste it in the portfolio tab over here and we are going to change the icons to icons dot pie chart and the label is going to be portfolio and same thing i'm going to paste it in the prices tab and i'm going to change the icons to line graph and the label it's going to be prices we will come back to the transaction tab later on because the the transaction type is slightly different so we'll work on that don't worry and lastly we will copy and paste it in the settings tab and same thing we need to change the icons to dot settings and the label it's going to be settings save it perfect all right next we'll work on the transaction tab same thing we need to add the options prop so come over here under the transaction tab we need to add the options prop as well same thing we need type bar icon just at this time we only need the image component so image the source is going to be icon start transaction resize mode is going to be contain and style is going to be with 30 height 30 and 10 color equals to white you won't be able to see it now because the pink color is white but that's okay so we will add another property over here tap bar button this is so that we can customize the tab button right so here i'm going to return a customized component which we are going to create shortly so it's called tab bar custom button sorry button and i'm going to pass in the props so now i am going to create this tab bar custom button functional component right on top of this tabs component right so cons type bar custom button we need children and arm press and here i'm going to return a touch opacity and for this touchable opacity we need to give it some styling so style equals to top negative 30 justify content center align item center and of course we need to give it some shadow as well so for the arm press equals to the unpressed method over here and within this touchable opacity we need to use the linear gradient all right so do this is to achieve the gradient effect over here so linear gradient and within this linear gradient we will render the children and for the style it's going to be with 70. height 70 and the border radius is going to be 35 and for the colors prop it will be colors.primary and also colors.secondary save it perfect alright now that the bottom tab navigator is completed next we'll be working on the home screen so head back to your source code and open up the home.js file and here i'm going to import some components which we'll be using later on so i need stylesheet view text scroll view flat list touch both opacity i need image i need image background and that's that's all for now and i also need to import from constance as well so i need the dummy data i need colors i need sizes i need fonts i need icons and also images so for the home i am going to return a scroll view and within the scroll view i am going to create a container view with some styling so style equals to flex 1 and padding bottom equals to 130. the reason why we need to add a padding bottom is so that the scroll view content will not be blocked by the um tab bar button this plotting button over here later on all right okay so the first thing we will be working on is the header section this whole section over here so go back to your source code and within this view we are going to render a function it's called render header and we are going to create this function over here so function render header and i'm going to return something and here we are going to create a container view so view give it some styling with equals to 100 height equals to 290 and we need to give it some shadow as well and now within this view we will add a component called image background so the source is going to be images dot banner resize mode is going to be cover and style is going to be flex 1 and align item center and now within this image background we will have the header bar over here the balance section and also the trending section right so we are going to have the header bar section the balance section and also the trending section so for the header bar we will be creating a view with some installing margin top equals the sizes dot padding times two with equals to one hundred percent align item equals to flex n and padding horizontal equals to sizes dot padding and now within this view we will be creating a touchable opacity give it some styling so style equals to with 35 height 35 align item center justify content center and whenever i click on this button i am going to console log um some messages on the terminal right so i'm gonna console up notification on press okay now within this button we need to add an image component so image source is going to be icons.notification white resize mode is going to be content and style is going to be flex one all right cool next we'll be working on the um portfolio balance section so over here we need to create a view give it some styling align item center justify content center and within this view we have text component we need three text components actually so just copy and paste like that and for the first component it's going to be a label that says your portfolio balance and the style for this component is going to be color equals to white and the font is going to be h3 like that and now for the second text component we will give it a dollar sign and then we will get the data from our dummy data right dummydata.portfolio dot balance we are actually retrieving the data from the constants dummy file which is this part over here so what this does is that we are basically getting the data the balance data from dummydata.portfolio.balance which is this figure over here so go back and press save and there you go the figures is being reflected properly so now we just need to add some styling so style is cool equals to margin top sizes dot base color equals to white and the font is going to be h1 perfect and for the third and the last text component we are going to get from the dummy data as well so dummy data dot portfolio dot changes space lasts 24 hours and now we need to give it some styling so style equals to color dot white sorry colors dot white and the fonts it's going to be body five all right cool all right so the third and last component or the last section for the header is the trending section so over here we are going to create a view give it some styling position equals to absolute and bottom equals to negative 30 percent and within this view we will have a text component that renders trending alright so give it some styling as well so margin left it goes to sizes.padding color equals to white and fun equals to h2 all right and underneath this text component we'll be creating a flat list and the content container style is going to be margin top sizes that base data is going to be trending this is actually the react state hook which we are going to set it shortly so um render item is going to be render item which we will create shortly as well the key extractor is going to be item item dot id i want the flat list to be horizontal and i do not want the horizontal scroll indicator so scroll i'm sorry shows horizontal scroll indicator equals to false so now we need to create the trending react state hook so scroll up scroll to the top right on top of the render header function i am going to create these you know um react state hook so constant trending set trending equals to react react.ustate and here we are going to pull the data from dummy data dot trending currency there you go which is actually these data's over here trending currencies all right all right next we will need to set up the um render item function for this flat list so scroll to the top right above the return statement we are going to create the render item functional component so constant render item equals to item index and i am going to return a touchable opacity with some styling with equals to 180 padding vertical equals to sizes.padding padding horizontal equals to sizes.padding as well now for the margin left if it's the first element so if index equals to zero the margin left is going to be sizes.padding but if it's not then it's going to be zero so for margin right it's going to be sizes that radius border radius equals to 10 and background color equals to colors.white and within the trending element or trending item we will have two main components which are the currency and also the value alright so go back here within this touchpopacity we will have two main components or two main sections which are the currency and also value so for the currency section we will first create a view give it some styling likes direction equals to row and within this view i am going to create two more views one is for the image so over here i'm going to create an image component source is going to be item that image resize mode is going to be cover and style is going to be margin top 5 with 25 and height 25 as well all right and for the second view i'll give it some styling so style equals to margin left equals to sizes dot base and within this view we will have two text components the first text component is going to be the currency and the second text component is going to be the code all right so item dot code all right cool now we just need to give it some styling so the first text component is going to be style fonts equals to h2 and the second text component the style is going to be color dot color equals to colors dot gray and fonts will be body tree perfect now for the value section same thing we will create a view as well give it some styling so margin top equals to sizes dot radius and within this view we will have two text components the first text component is going to be the item amount and the second text component is going to be item.changes all right cool now all we need to do is to give it some styling so the first text component the style is going to be font h2 and for the second text component if this item has a type of i which means increase i am going to set the color to green however if it's not i then i will set the color to red and the fonts is going to be h3 perfect all right now that the header area or header section is completed next we'll be working on the alert section right now if you pay attention to the mark we also have another alert section over here in the crypto detail screen right now because a part of this component is hidden i am going to assume that these two components these two alert components are having the same layout for the sake of this tutorial and whenever we have the same layout same ui layout being rendered on multiple different screens what we can do is that we can create a standalone component for this alert section so that it can be reused over and over again right so go back to your source code and same thing i am going to create a function called render alert right and i am going to create this function over here so function render alert and i'm going to return something but instead of returning vu and all that i am going to return a custom component called price alert so now what we need to do next is that we need to create a folder called um components right so over here i'm going to create a folder called components and within this folder we are going to have a file called price alert all right same thing it's going to be a normal functional component so i'm going to import from react i'm going to import a couple of components from big native as well so i need stylesheet i need view i need text i need touchable opacity and also i need the image component right next we need to import from the consonants as well so import from constants and we need the colors sizes fonts and also icons so here we can actually create the price alert functional component so constant price alert we will be taking in one prop called custom container style and i am going to return something right so make sure to export the price alert as well and here right before the export statement i need sorry i need a style for the shadow right so styles equals to stylesheet not create and here i need shadow shadow color equals to black shadow offset equals to width 0 height 4 shadow opacity equals to 0.3 shadow radius equals to 4.65 and lastly the elevation is going to be eight all right now for the price alert i need to return a touch opacity give it some styling flex direction equals to row align item equals to center margin top equals to sizes dot padding times 4.5 margin horizontal equals to sizes that padding padding vertical equals two sizes dot padding padding horizontal equation sizes dot radius background color equals to white border radius equals to sizes dot radius and here we will be taking in the custom container style if any right so custom container style and also we need to include the shadows as well so styles.shadow and now within this touchable opacity we need an image view so image because if you look at the um price alerts section we have an image enveloped by the text components right so we need an image the source is going to be icon start notification color the style is going to be width 30 and height 30. so after the image we will be creating a view component and within this view we have two text components which are actually these twos right so the first text component is set price alert and the second text component is basically some description right okay now we need to give it some styling so for the view we have flex equals to one margin left equals to sizes.radius and for the first text component the style is going to be fonts h3 and for the second text component the style is going to be fontsbody4 and lastly we need to have one more image component to render this right arrow right so over here underneath this view we will have another image component source will be icons.right arrow and the style is going to be width 25 and height 25 and also the tint color is going to be colors.great now save it and before we can use this component we need to create an index file within the components folder so create a new file called index.js and within this file we need to import price alert from price alert and here we need to export the price alert this is so that it's easier for us to use these components throughout these screens over here right so export price alert just like that save it and now you can go back to your home screen scroll to the top and here we need to import from our components right so import from components and we need to import the price alert component and now we can actually use this component over here just like that so save it and there you go the price of the component is being rendered properly right underneath the header section as expected right cool all right so after the price alert section next we'll be working on the notice section okay so just head over to the um container view and render notice so i'm going to create this new function over here so function render notice and here i am going to return the view with some styling margin top equals to sizes.padding margin horizontal equals to sizes dot padding as well padding equals to 20 border radius equals to sizes dot radius background color equals to colors dot secondary and of course we need to add the shadows as well so styles dot shadow so now within this view for the notice section we have two text components followed by one touch opacity or one button over here right so we'll be creating two text components the first one is going to be investing safety and for the second text component is the um notice right all right cool now we'll give it some styling so for the first text component style it goes to color colors dot white and the font is going to be h3 for the second component the style is going to be margin top equals to sizes.base and color equals to white the font is going to be body 4 and i would like to override the line height to 18 perfect and lastly we will render the learn more button so over here we'll create a touchable opacity give it some styling so style equals to margin top sizes base and whenever i click on this i will console.log learn more so within this touchable opacity we will render a text view with the label of learn more and the style is going to be text decoration sorry text decoration line it goes to underline because this button actually has an underline underneath the text right so underline and the color is going to be green and the font is going to be h3 oops a bit of typo over here perfect all right that's all for the notice section now for the last component in the home screen is actually the transaction history again this component over here has the exact same layout as the transaction history in the transaction screen over here which means we can create a standalone component for this transaction history and reuse it in these two screens so go back to your source code first thing first let me set up the react state hook for the transaction history data so constant transaction history set transaction history equals to react.ustate and we are getting this data from dummy data dot transaction history which is which is let me see [Music] yep this data over here this one transaction transaction history okay so go back to your home.js and same thing i am going to create a new function call render transaction history and i'm going to create this function over here and now we are going to return a custom component called transaction history and this component should takes up two props the first one is called custom container style which i am going to pass in the shadow right and the second prop is going to be the history and i'm going to pass in the transaction history react state hook which is basically the data to be rendered in the um flat list right okay so the next thing we need to do is to create the transaction history component so create a new file called transaction history dot js same thing i'm going to import from react i'm going to import a couple of components from react native as well so i need view i need text i need flat list i need touchable opacity and also i need image component after that we need to import from uh constant so import from constants here it's going to be colors sizes fonts and also icons next we can then create the functional component for transaction history so constant transaction history that takes up two props the first one is called custom container style and the second one is the history so here i'm going to return something and also don't forget to export default the transaction history now we are going to return a view a container view with some styling so margin top equals two sizes dot padding margin horizontal equals two sizes that padding as well padding equals to 20 border radius equals to sizes dot radius background color equals to colors.white and now we will need to include the custom container style as well if any right so within this view the first thing we need is actually the um transaction history label so we need a text component over here transaction history give it some styling so style equals to fonts dot h2 now let me first try to export this component over here in the index.js file so that you can see in action so over here we need to import from transaction history we need to import the transaction history and we need to export it from here so in your home we can actually import the transaction history from component and now if you save it you should be able to see the label oh my mistake i forgot to save the index.js file over here there you go now head back to the transaction history component after the text component we need to render a flat list right which is basically the transaction history data so within this flat list [Music] we need to set the content container style equals to margin top equals to sizes dot radius scroll enable equals to false data equals to history which is this prop over here key extractor equals to item item dot id render item equals to render item which we are going to work on it shortly shows vertical scroll indicator equals to false and for the um separator line in between the items we are going to use um a prop called item separator component to render the line right so over here we just need to return a view with some styling so style equals to with 100 height equals to 1 and background color equals to colors.light gray so next we need to work on the render item function so over here constant render item equals to item and here i'm going to return a touchable opacity with some styling flex direction equals to row align item equals to center padding vertical equals to sizes.base and whenever i click on this button i would just console log the item itself just like that and now within this touchable opacity we need to render an image followed by two text components and followed by another text component and lastly is the image component right so here we need to first render the image component so image source equals to icons.transaction style is going to be width 30 height 30 thin color equals to colors dot primary now after this image we need to render a view give it some styling so flux equals to 1 margin left equals to sizes dot radius and within this view we will have two text component so the first one is going to be item dot description and the second one is going to be item.date so now we just need to give it some styling so this one is going to be fonts.h3 and the second text component is going to be color equals to colors.gray and the font will be h outside body four save it and let's see what do we have on the screen alright cool now the reason why we are getting this virtualized list warning is because we are rendering a flat list within a scroll view i did mention in the previous episode if you would like to get rid of this warning the virtualized list warning you will need to render the other components by using the flat list least header component props right however we can't use that approach in this project or else we wouldn't be able to achieve this layout or design right so in this case it's completely safe to ignore this warning and we can actually hide this warning in the home.js file so head over to your home.js file scroll to the top and we need to import lock box from react native and here we are going to use the use effect hook so react dot use effect now within this use effect which means whenever the home screen is loaded i am going to ignore the lock all right so lockbox.ignore locks and i would like to ignore virtualize this should never be nested that's it there you go the warning is gone now let's continue with um our transaction history component so head back to your transaction history after this view we will need to render another view that has a text component and also an image company so within this view we have a text component and also an image component so this for this view we need to add some styling so flex direction equals to rho the height is going to be 100 and align item center so for the tax component we are going to render the item amount and followed by the item c and for the image the source is going to be icons.right arrow and the style is going to be width 20 height 20 and tint color colors dot gray all right we are almost there we just need to add a little bit of styling for the text component so for this sorry for the text component style i would like to set the color of this text component and if the item type equals to b which stands for by or bought then the color is going to be green or else it's going to be black and the font is going to be h3 save it perfect all right that's it for the home screen next we'll need to add the um on press pro for this trending item so that we can navigate to the crypto detail screen all right so go back to the home.js file and in the render header function we need to add the on press props over here so on press equals to navigation dot navigate i would like to navigate to crypto detail screen crypto detail screen and i would like to pass in the item as the param all right so over here i'm gonna pass the item as the param okay now save it all right so if i click on this um trending item i should be able to navigate to the crypto details screen all right so let's head over to the crypto detail screen and here i need to import a couple more components alright so i need save area view i need view i need text i need touchable opacity i need image i need scroll view and also i need the animated um component as well all right so over here i need to import from uh the constants as well so import from constants and i need the dummy data i need the colors i need sizes i need fonts icons and yep i think that's all and now for the crypto detail screen we are going to wrap everything within a safe area view so save a review i'm going to give it some styling flux equals to one and background color equals to colors.light gray one now if we refer back to the mark the first component that we are going to render is actually this header bar over here and again we also have a very similar layout of this header bar in the transaction screen which means we can again create a standalone component for this header bar just that we need to add some additional handling for this star button over here because the star button is not visible in the transaction screen alright so go back to your source code let's create a new file within the components folder called header bar so same thing i need to import from react i need to import a couple components from react native so i need view i need text i need touchable opacity and also i need the image component after that we also need to import from react navigation native we need to import use navigation and also we need to import from the constants constants we need colors sizes fonts and also icons next we can then create the header bar functional component so constant header bar this component is going to take um one prop called right and this prop is actually for us to customize the visibility of the star button okay so go back here arrow function and here i'm going to return something and don't forget to export the header bar as well now here i am going to return a view with some styling padding horizontal equals to sizes dot padding and also the flex direction should be row now within this view we are going to have two more views one is for the back button over here and the other one is for the star button okay so for the first view we need to give it some styling so style equals to flex 1 and align item equals to flex start and within this view we need to add the touchable opacity give it some styling flex direction equals to row and align items equals to center and now since this is a back button so whenever i click on this button i should be able to navigate back to the previous screen so on press i should be able to navigate i mean navigation go back and we need to create the um navigation over here so constant navigation equals to use navigation like that and now within this touchable opacity we need an image source is going to be icons.back arrow resize mode is going to be content and style is going to be with 25 height 25 and also 10 color equals to colors dot grade alright so after the image component we need the text component so here it's going to be back and the style is going to be margin left it goes to sizes.base and the font style is going to be h2 all right that's it for the back button next we need to work on the um star button right so we need to give it some styling style equals to flags um equals to one and a line item equals to flags n and within this view we have the um touchable opacity and the image is going to be source icons dot star resize mode equals to content and style is going to be with 30 and height 30. and lastly we will only render this star button if the write props equals to true so we do it this way perfect now save it and head over to the index.js file and over here we need to export export the header bar like that to export it over here as well save it and in the crypto detail screen we will need to import the header bar from components so here we need to import header bar like that alright and next we are going to render this header bar over here within this save area view the first component is going to be header bar and in the crypto detail screen we are going to show the star button so the right props we have to set it to true like that save it oops i mean true like that all right so navigate to the crypto details screen and there you go the header bar has been rendered successfully and if i click on the back button i should be able to navigate back to the previous screen perfect all right now before we proceed to the next section let me just try to you know restart the app for a bit oops it seems like i have a typo somewhere it's some tint color let me see yep there's a typo over here it's in the transaction history component so i'm going to fix this like that all right now we can head back to the crypto detail screen and next we will be working on the charge section all right so over here underneath the header bar i am going to create a scroll view and within the scroll view i am going to create a view with some styling so flex equals to 1 and padding bottom equals to sizes.padding and within this view i am going to create a function called render chart and i am going to place the function over here function render chart and i'm going to return something so now let us first work on the container view alright so over here we will return a view and give it some styling margin top equals the sizes dot padding margin horizontal equals to sizes dot radius align items equals to center border radius equals to sizes dot radius background color equals to colors dot white and lastly we will include these shadows as well so styles dot shadow now if you take a look at the chart section it can be divided into four different sections the first one is actually the header all right the second one is the chart section the third one is the option section and lastly the fourth section is the dots section all right and the ui layout for this section over here the currency label is actually identical this one over here and also this one over here in the transaction screen in other words we can actually create a standalone component for this currency label and use it in multiple different places all right so let's work on that now so in the components folder i am going to create a new file called currency label and here i am going to import from react i am going to import a couple of components from react native so i need view any image and also i need text i need image and also i need text right so over here after this we need to import from constants as well here we need the colors sizes and also fonts all right so after this we will create the currency label functional component so constant currency label equals to we will be taking in um three props over here so icon currency and also code here we will return it don't forget we need to export this um component so export default currency label and over here we will return a view with some stalling flex direction equals to row and within this view we will have an image component source equals to icon which is this one over here and resize mode equals to cover style equals to width 25 height 25 and also margin top five after the image component we will have another view give it some styling margin life equals to sizes.base and here we will have two two text components actually yeah two text components so so two text components all right so this one is going to be currency and this one is going to be code and lastly we will give the text component a bit of styling so style equals to fonts hatch tree and this one style equals to color equals to colors.gray and the font is body four save it and we will need to export the currency label over here as well the index file so i'm going to import the currency label over here so currency label and export it over here oops i think a bit of typo it's label let me just double confirm yep it's label and now we can head back to the crypto details screen and from here we can import the currency label component all right next we can then work on the chart section so don't forget in the chart section we have four different sections right so we have the header which is this one over here we have the chart we have the options and also dots right so we have options and also dots all right so for the header we will create a view give it some installing flex direction equals to row margin top equals to sizes dot padding padding horizontal equals to sizes.padding as well and within this container view we will have two more views one is actually for the currency label and the other one is for the amount all right so over here we'll give it some styling the style is going to be flex one so flex one and within this view we will create the currency label component we'll pass in the icon so the icon is going to be selected oh it seems like i forgot to initialize the selected currency so in the previous screen in the home screen whenever we navigate to the crypto detail screen we have actually passed in the selected currency as the param right so head back to the crypto details screen scroll to the top and here we need to first create the selected currency react state hook so selected currency set selected currency and here react.ustate and the initial value is going to be now and in order to retrieve the params from the navigation we need something what we call route right so over here we need to use the use effect hoop so react.use effect like that arrow function okay and here we will get the selected currency from the route parounds this one is actually from here all right so we'll get the selected currency and of course we need to set the selected currency just like that all right so now we can then pass in the icon so selected currency dot image currency equals to selected currency dot currency and code equals to selected currency dot quote like that there you go and for the second view we will need to render two text components so over here we will render two text components and the first one is going to be the dollar sign and selected currency dot amount and the second one is going to be selected currency dot and now we just need to give it some styling so this one style equals to fonts h3 and this one style equals to i am going to set the color to um green all right so colors.green if the selected currency dot type equals to i which stands for increase all right so if it's i then i will render it as green color if it's not then oops then i will render it as red and of course the text sorry the font style is going to be body tree perfect all right so we have completed the header section over here next we'll move on to the chart section so in order to you know implement a chart like this we will need to use a library called victory native so scroll down and copy this npm install and paste it in your terminal and hit enter alright so next we need to install the dependency as well which is react native svg so copy and paste in your terminal now every time we install a new library it's always a good practice to restart your app so now we need to run react native link and also we need to cd into ios and run pod install alright so after this we can then navigate back to the root folder and run the ios right so react native run ios all right now let me first hide the terminal and next we need to import a couple of things from victory native library so over here we need to import from victory native and here we need victory scatter we need victory line we need victory chart and also we need victory axis all right and after this we need to import from style all right so we need to import from styles and we need to import the victory custom theme from styles all right so for the victory custom team we have actually included in the starter template and we actually got all this um style properties from the victory native documentation so over here you can head over to the victory native documentation under the themes section click on the victory team documentation and over here you can see all victory teams so what i did was i actually copied everything from the material js you see it's small as the same thing just that i changed some of the figures so that it looks like our mark over here so if you want you can play around with these figures you know change things around and see what happened if not you can just stick to the starter template that's totally fine alright so now we can then navigate back to the crypto detail screen and now underneath the header section over here we can then create a view all right and give it some styling so margin top equals to negative 25. so within this view we will have the victory chart okay so victory chart and we need to set some of the props so over here we need to give it the team the team that we have um already set up over here so team is equals to victory custom team and we need to set the height to 220 and with will be equals to sizes that with minus 40. all right so as you can see the chart is actually showing so now within this victory chart component we need to include the victory line component we need to give it some styling so data secondary and for the parent it's going to be bother one pixel solid and gray color all right so next we'll include the data prop so data equals to selected currency dot chart data and lastly we will need to add the categories prop so categories which is basically the x and y axis so x equals to an array of 15 minutes 30 minutes 45 minute and 60 minute and for the y it's going to be 15 30 and 45 oops i need a coma over here all right so the line has been plotted properly based on the data and chart data and also the x and y axis have been reflected properly as well now in order to keep things simple in this tutorial i am just going to hard code the values for the x and y axis however if you want you can use the react state hook and change the x and y axis depending on the selected options over here alright so next we need to add the victory scatter component so data is going to be selected currency dot chart data the size is going to be 7 style is going to be data fill color start secondary [Music] so once you save it you should be able to see the dots are being rendered over here all right next we'll need to work on the horizontal lines behind the chart okay so over here we need the victory axis component give it some styling so re stroke this transparent and we need another victory axis component over here dependent axis style is going to be axis stroke transparent and greed is going to be stroke great all right save it and there you go the chart is now completed now if you refer back to the mark we have three dots here underneath the chart section which basically means that these chart should be horizontally scrollable so in order not to complicate things i am going to render the same um chart for three times all right so let's see how we can do that okay so first thing first we need to create two variables over here so we need something what we call scroll x equals to new animated dot value zero the initial value is zero we need this variable the scroll x variable to control the dots later on all right so next we need a dummy array called number of charts since we are going to render the same chart for three times so i am going to create an array with three integers so one two and three okay and now we can head back to the chart section over here and now we will need to wrap the whole thing with animated animated.scrollview okay i'm gonna paste it over here so that everything is being wrapped inside the animated scroll view and now we need to set some of the props so it has to be horizontal all right so patching enable scroll event throttle equals to snap to alignment equals to center snap to interval equals to sizes that width minus 40 shows horizontal scrolling together equals to false deceleration rate equals to zero and lastly on scroll equals to animated.even okay now native event content offset x scroll x all right and over here we will need to um specify the use native driver equals to false so basically what these means is that we will get the scroll position of the animated scroll view and assign it into the scroll x variable right all right so now over here we will need to render the same chart for three times so to do that we will set the number of charts dot map i mean we will use the map method okay so item index and we are going to return something and i'm gonna paste everything into the map method oops like that and now we need to give it a container view so over here we create a view we need to set the key prop so key equals to chart dash index all right and the style is going to be margin left if the index is zero then the margin left is going to be sizes that base if it's not then it's going to be zero all right so cut it and paste it over here so that everything is wrapped nicely now if you save it you should be able to scroll the chart view sorry i'm in the chart perfect all right so after the chart next we'll be working on the options so to do this we need to first create two react state hook all right so over here constant chart options such chart options equals to react you state and the initial data is going to be from dummy data dot chart options and we need another react state hook to store the selected options all right so over here selected option set selected option it goes to react.ustate and the initial value is going to be the first object from chart options array so over here i'm gonna just put like this okay all right so now if we take a look at the mark we can actually create a standalone component called text button for all these options over here and we can also reuse it for the buy button and also the trade button over here the reason being is because all these buttons they actually share the same characteristic which is a button with a text in the middle so what i'm going to do is that i'm going to create a text button component based on this design over here and then we will include a prop so that it can be customized i mean the ui layout can be customized to look like this as well right so let's see how we can do that so under the components folder we can create a new file called text button same thing we need to import from react we need to import a couple of components from reac native as well so we need text and also we need touchable opacity like that next we need to import from constants as well and here we need the colors the sizes and also fonts all right and lastly we can create the text button functional component all right so equals to we need to type in four props so here we have label we have custom container style we have custom label style and also we have the unpress method for the touchable opacity all right so we can then return something don't forget we need to export the text button component as well so export default text button and here we are going to return touchable opacity we need to give it some styling so the height equals to 45 align item center justify content center border radius equals the sizes dot radius background color equals to colors.green and lastly we will include the custom container style as well so the arm press equals to on press and within this touch opacity we are going to have a text component just like this all right so we have a text component that renders the label now we need to give it some styling so style equals to color equals to colors.white and the font is going to be h3 and we will also include the custom label style over here save it don't forget we need to include it in the index file as well if not we wouldn't be able to use it so i am going to import from text button and i am going to export it from here so text button like that all right so now we can then head back to the crypto details screen and work on the options button right so scroll down to the options section over here i'm going to create a view give it some styling so the width is going to be 100 padding horizontal equals to sizes that padding flex direction equals to row and justify content equals to space between now within this view we are going to render all the chart options by using the map method so over here chart options dot map we have option and over here we'll use the arrow function and return oops oh and we will need to include the i mean import the um text button over here so import text button so that we can use it in the options section okay so return text button the key is going to be option dash option dot id now whenever you are using a loop to render a view for multiple times you will need to supply the key prop or else react native will throw you a warning right so next we have the label it goes to option dot label and we have the custom container style it's going to be height 30 with 60. border radius 15 and the background color is going to be colors.primary if the selected option dot id equals to option dot id if it's not then the color will be colors.light great so what this means is that if a particle option is being selected then the color is going to be colors.primary if it's not then it's going to be colors.light gray just like this all right so next we'll need to set the custom label style as well so color same thing if selected option id equals to option.id then the label style sorry the label color is going to be colors.white if it's not that's going to be colors.great and the font style is going to be fonts.body5 oh and i need to close the bracket over here save it all right now that the chart options have been rendered properly next we'll need to include the on press prop this is so that whenever a particular chart option is being clicked or press we can set the selected option react state hook okay so on press equals to option on click handler and we are going to pass in the option so i am going to create this function at the top so over here underneath the use effect um hook i am going to create the function so function option on click handler and the parameter is going to be option and over here i am going to set selected option equals to option all right now whenever i click on this option it should be selected perfect all right so that's it for the options section next we'll be working on the dots section right so over here in the render chart function um after the options section over here i am going to create a new function called render dots and i'm going to create this function over here right above the render chart function so like that all right so the first thing we need to know within this function is the dots position so over here constant dot position equals to animated dot divide scroll x and sizes that width all right and then we are going to return a view give it some styling so style equals to height 30 and margin top margin top 15 and within this view we will have another view and i'm going to give it some styling as well so style equals to flex direction equals to row align item equals to center and justify content equals to center as well and within this view i am going to render three dots all right like this so to do that we will be using the map method okay so over here number of charts dot map item index arrow function like that and since i would like to add in some animation effect for this dots over here we will need to use interpolate so over here constant opacity it goes to dot position dot interpolate okay input range index minus one index and index plus one output range will be zero point three one zero point three and extrapolate goes to claim so here we animate the opacity next will be dot size equals to dot position dot interpolate input range index minus one index index plus one output range [Music] sizes that base times 0.8 10 and sizes dot base times 0.8 and extrapolate equals to click and lastly we will need to animate the color as well so constant.color equals to dot position interpolate input range index minus one index index plus one output range equals to colors.gray colors.primary and colors.grey and lastly the extrapolate is going to be claim as well all right so once we have set up the configuration next we can then return animated.view and same thing we need to supply the key prop so over here dot dash index opacity equals to opacity and style equals to border radius equals to sizes.radius margin horizontal equals to six with equals to dot size which is the one we have set over here and height equals to dot size and lastly the background color equals to dot color alright so save it okay so the dot section is being rendered properly and whenever i scroll the chart you will notice that the dot will animate gradually as well cool alright so that's all for the chart section next we'll be working on the buy section okay so to do this scroll to the bottom and over here right underneath the render chart method we are going to create a new method called render by and i am going to create this function over here so we are going to return a view a container view with some styling style equals to margin top sizes dot padding margin horizontal equals to sizes dot radius padding it goes to sizes that um radius sorry sizes.radius border radius equals to sizes.radius as well background color equals to white and of course we need to include the shadow as well so styles dot shadow alright so we have the container view in place next we'll be working on the label this is what we call the currency label we have already created the component for this and also the values as well so we need another view all right so we need another view within this um container view all right so view with some styling whereby the flex direction should be roll align item center and margin bottom equals to sizes dot radius so within this view we will have two sections the first one is what we call the currency which is this section over here and the second section is what we call the amount section which is this section over here so for the currency section we need a view with a bit of styling so style equals to flex 1 and within this view we will be using the custom component that we have created called currency label all right so we will pass in a couple of props so icon equals to selected currency dot image currency equals to selected currency dot currency space wallet and lastly the code equals to selected currency without quote all right save it and see what we got over here alright cool so we have rendered the currency label next we'll be working on the amount section amount view sorry so we'll be creating a view over here with a bit of styling so flex direction equals to row align item center and within this view excuse me we will have one view for the um text component and followed by an image component over here so over here we will have a view with a bit of styling so style equals to margin right dot i'm sorry margin right equals to sizes.base and within this view we will have two text component so the first text component will be dollar sign selected currency dot wallet dot value and the second text component will be selected currency dot wallet.crypto and space selected currency dot code all right just like that save it okay cool now we just need to add a bit of styling for these two text components all right so for the first text component we will have style equals to marg up sorry font should be h3 and for the second text component style equals to text align should be right color should be colors dot gray and the font should be body four save it perfect now we just need to add an image component right underneath this view all right so image source equals to i can't start right arrow resize mode equals to cover and style equals to width 20 oops with 20 and height 20 then color equals to colors.great all right cool now we have completed the first part of this buy section next we'll be working on the text button over here so scroll down after the second last view we are going to use the customize component that we have created called text button and we're gonna give it some props so label equals to buy and whenever i click on this button i would like to navigate to the um third and last screen which is the transaction screen okay so over here we will supply the unpressed props as well so on press equals to navigation dot navigate to transaction and of course i will pass in the selected um sorry selected currency as well so currency selected currency [Music] let me see if i have included the navigation over here alright cool okay so save it now whenever i click on this button i should navigate to the transaction screen perfect okay so after the buy section next we'll be working on the about section this is actually quite straightforward it's just a container view with two text components alright so scroll down over here i am going to create a new function called render about and i am going to create this function over here so function render about and over here we will return a container view with a bit of styling so style equals to margin top sizes dot padding margin horizontal equal to sizes.radius padding equals to sizes.radius as well bother radius equals to sizes.radius backgroundcolor should be colors.white and of course we need to include the shadow as well styles.shadow all right so within this view we will have two text components so for the first um text component we will render about selected currency dot currency and for the second tax component it will be selected currency dot description save it perfect now we just need to add a bit of styling for these two text components so for the first text component we will have style equals to fonts dot hatch tree and for the second text component we will have style equals to margin top sizes that base and the font is going to be bodytree sweet all right so the last component that we'll be working on for this screen which is the crypto detail screen is the price alert component and since we have already created a component for price alert all we need to do is to import price alert over here right so price alert then we are going to render this component over here right underneath the render about a function so price alert we are going to give it a custom container style where the margin top equals to sizes.padding and margin horizontal equals to sizes.radius perfect as simple as that alright so that's all for the crypto detail screen next we'll be working on the transaction screen so for the transaction screen we have the header and then followed by the amount or value section and lastly will be the transaction history section so go back to the source code and head over to transaction.js file so over here i'm going to import a couple more components so i need save area view i need view any text and also i need scroll view and now that i'm here i'm going to import from the components as well so import from components so here i will need the header bar i'll need currency label i'll need text button and lastly i'll need transaction history after this we need to import the constants as well so import from constants we need dummy data we need colors sizes and also fonts alright so the first component that we'll be working on is the header bar component so over here i will get rid of this and i will use save area view instead so save a review i am going to give it a bit of styling so flex equals to one and within this save area view i am going to render the header bar and i'm going to set the right equals to false because i do not want the star button in the transaction screen so save it alright so we have the header button please now before we can work on the next two sections we need to first retrieve the param pass over from the crypto details screen in the render buy function over here right we have passed in the selected currency so go back to your transaction.js file and over here we need route to access the param and we are going to do it in the use effect hook so react.use effect i am going to retrieve the currency from route.params and i'm going to set the selected currency don't worry i will create this react state hook shortly so set selected currency equals to currency it's over here we'll create selected currency set selected currency equals to react.ustate initial value is going to be now all right now since these two sections is going to be in a scroll view i am going to create a scroll view underneath the header bar component so scroll view and within this scroll view i will create a view with a bit of styling so flags equals to 1 padding bottom equals to sizes.padding and within this view i am going to create a new function called render to render this section over here so i'm going to create this function over here so function render trade and i'm going to return the container view so view give it a bit of styling so style equals to margin top sizes dot padding margin horizontal equals to sizes.padding as well padding equals to sizes dot padding border radius equals to sizes dot radius background color should be white and of course we need to give it a bit of shadow as well all right so the first thing we're going to render within this container view is the currency label so over here currency label we need to supply the prop so icon equals to selected currency dot image currency equals to selected currency not currency and the code equals to selected currency code all right so after the currency label component next we'll render these two text components so to do that we need to create another container view so over here view give it a bit of styling so style it goes to margin top sizes dot padding margin bottom equals to sizes that padding times 1.5 align item equals to center justify content center as well now within this view we are going to have two text components all right so text for the first text component it's going to be selected currency dot wallet dot crypto space selected currency dot code and fought by the second text component so dollar sign selected currency dot wallet dot value save it cool now we just need to give it a bit of styling so the first text component style the font should be h2 and for the second text component we will have color equals to colors.gray and the font is going to be body for all right and lastly we need to render the text button over here so underneath this view we will create the text button component we need to supply the prop as well so label equals to trade and whenever i click on this button i would just simply console.log the word trade so console.log trade cool all right now that the trade section is completed the last component that we'll be working on for this screen or more specifically for this project is the transaction history and this is going to be super easy because we have already set up and create the component over here so all we need to do is to create a new function right underneath the render trade function so i'm going to call this render transaction history and i'm going to create a function over here and all we need to do is to return the transaction history component with with a bit of prop so custom container style equals to we need to supply the shadow so styles.shadow and also we need to supply the um history prop right so history equals to selected currency dot transaction history [Music] perfect all right guys we have just coded this clean looking cryptocurrency app based on the design created by david morgan on drupal.com now if you would like to support our work the full source code for this project is available for just a few dollars on buyprogrammers.com and i have included the link in the description below if not that's totally fine as you can still achieve the same result by getting the starter template for this project and follow along the video so if you like the video if you think you have learned something new from this video we'll be more than happy if you can just give it a thumbs up comment share to your friends and also don't forget to subscribe to our channel for more videos like this i will see you guys in the next video happy coding peace

Channel: ByProgrammers

Views: 57,105

Keywords: React, ReactJs, React Native, Mobile, Development, UI, ecommerce, learning, mobile frontend, mobile ui, react native ecommerce, react native project, react native ui, react native app, react native tutorial, react native ui design, speed code, let's code react native, app development, crypto app, line chart, cryptocurrency app

Id: xBmx2eaozck

Length: 123min 50sec (7430 seconds)

Published: Sun Feb 14 2021