Build and Deploy Your First Modern React Native App | NFT Marketplace Course - Extremely Easy!

react native a framework used to build amazing android and ios native mobile applications using the library you already know all about react js i'm incredibly excited to welcome you to the first ever react native video on the javascript mastery youtube channel after many requests i finally done it for you guys in this video you'll build and deploy your own ultimate react native application from scratch with slick responsive ui this nft marketplace app is the most modern cross-platform app you can currently find on youtube the nft marketplace application has two main screens the home page where you can see all listed nfts and search through them and a beautiful nft details page where you can get more information about a specific nft and see all of its active bits but that's not all here on javascript mastery i always want to take you a step further alongside building this react native application we'll also build a special landing page dedicated to our mobile application on this smooth single page website you'll be able to share all the details about the app the link to download it as well as all of the app's features exactly as the real application based companies do this will allow you to add both the mobile app and the landing page to your portfolio stand out from the crowd and get a high paying job on top of that since the app we're building is about nfts and web 3.0 we're going to do something revolutionary i'm going to teach you how to set up a completely decentralized domain name like dot crypto dot nft or my favorite simply dot x which are 100 percent owned by you we're also going to host our landing page on something called ipfs a completely decentralized peer-to-peer protocol alongside this video i've also prepared a complete react native and web 3.0 roadmaps and cheat sheets that cover everything you need to become a fantastic react native developer the react native guide includes an entire step-by-step react native roadmap prerequisites and even react native project ideas that you can build deploy and put on your portfolio to get a job you can download the ultimate guide and use it as a reference on your development journey whenever you're unsure what to learn next the link to the comprehensive guide is in the description i strongly recommend downloading it and then referring to it while watching the video although the theme of this application is an nft marketplace will mostly be handling the ui and ux and the layout of the application so if you want to learn everything there is to know about web 3.0 nfts and blockchain development i suggest you downloading the free ultimate web 3.0 roadmap the link is also in the description with that said you might be wondering what are the prerequisites to build such an amazing application i'm happy to say that you have to know just a bit of javascript and react to get started no previous react native knowledge is required one really important thing i'd like to point out is that if you'd like to see more react native videos on this channel like the video subscribe and most importantly leave a comment saying that if we get 20 000 likes and if i see a lot of interest in the comments we'll start doing more react native videos in the future and the design for our beautiful nft marketplace mobile application was created by alvian design so a huge shout out to him the link to his profile will be linked below let's get ready to build this awesome application [Music] before we dive into the code i want to share with you a revolutionary tool that i recently discovered and immediately started using it's called unstoppable domains unstoppable domains allows you to buy domains but not your or dot typical.com.net domains instead you can buy completely decentralized internet domains like dot crypto dot nft or again my favorite dot x which are 100 owned and controlled by you we're gonna buy a domain name together right now so that we can use it later on when deploying the landing page for our react native application there's a few things that i love about nft domains unfortunately with the regular.com domains most of the good ones are already taken so i usually start adding some random characters or even words to the end to get something that doesn't even feel close to what i've initially wanted if you're watching this video now you're early and you still have the chance to get that perfect nfd domain name exactly the one you're looking for short sweet and meaningful so whether you're just diving into blockchain or you're preparing for the next big thing now is the time to buy and secure your own unique domain name today before somebody else reserves it having a custom domain name will definitely make your website stand out from the crowd one thing that i love about unstoppable domains is that there are absolutely no renewable fees you can buy the domain name once and it's minted as an nft and it's yours forever other domain name providers charge you for your domains each year and as cryptocurrencies get more and more popular you'll need a human readable domain name for your wallet opposed to that extremely long hexadecimal string imagine that you'll be able to accept payments straight through the nft domain since i've partnered with unstoppable domains they decided to offer a special limited deal only for people watching this video the deal lasts 72 hours and if you get 40 bucks worth of the mains you get 40 extra in unstoppable domain promo credit the link is in the description finally let's get our domain name you can choose your name and then one of the popular domain endings or you can just go with something popular you think that could be worth a lot of money in the future i'll go with js mastery and click search i like the dot crypto and x domains the most and as you can see they are the ones that i've already purchased you can choose your own domain name ending and click continue to cart finally you can click checkout and enter your details i'll see you straight inside of the dashboard once you're done with the purchase you can head to domains and then go under my domains you should be able to see the domain name that you've purchased once we develop our landing page we'll mint one of these pages and i'll show you how to attach them to your website with that said let's dive straight into the development of our great react native application to start creating our react native application we're going to start from bare beginnings you can go ahead and create a new empty folder on our desktop let's name it something like react underscore native underscore app of course feel free to use any name that you prefer then let's simply drag and drop the folder into an empty visual studio code window in this tutorial i'll be using visual studio code as it is the most popular code editor out there but if you have another preference feel free to use any other code editor with that said we can open up a terminal window by going to view and then terminal or just open it up by pressing ctrl and then backtick once we have our terminal open we need to initialize our react native application and there are a few approaches we can take here if you open up the official react native documentation by going to reactnative.dev you'll be able to read everything there is to know about react native how to use it what is it for and what are its advantages as you can see just by quickly taking a look at this code it is looking almost exactly the same as basic react the only difference here is that instead of divs or spans or paragraphs we have elements such as view header and text which are native mobile elements with that said we can scroll up and click the get started button if you have some free time feel free to pause this video and go over the basics that you can read right here but since you're watching this video you're gonna be learning everything with me so don't stress about it we're going to go through everything together therefore we can skip the basics and go straight to the environment setup and setting up the development environment in here we are presented with two different approaches to initialize our react native applications if you are new to mobile development the easiest way to get started is the expo cli expo is a set of tools built around react native and while it has many features the most relevant feature for us right now is that it can get you riding a react native app within minutes the only thing you need will be a recent version of node.js and a phone or emulator so as you can read right here expo is going to make everything so much easier for us on the other hand if you're already familiar with mobile development you may want to use react native cli but in that case you need to have the xcode on your apple devices or android studio on windows and linux devices to get started and trust me when i tell you these tools are heavy they can take dozens of gigabytes of space they take crazy amounts of time to download install and then the setup is just crazy so since it's highly probable that you don't have these tools yet and you definitely don't want to install them now we'll be using xposed cli for this video and expo cli is something that i use with all of my react native applications so if we scroll just a bit down you can see that we have two different tabs here expo cli quick start and react native cli quick start we'll be using the expo cli so to start off first of all you have to have node installed on your device you can head to nodejs.org and then simply download the recommended for most user's version you most likely already have node but if you don't this process is going to take just about a minute download install and you're ready to go then we're going to install xposed cli by copying this command right here going back to our editor and simply pasting it and pressing enter with this command we're going to install the xposed cli tools globally on our device so every other time that you develop a react native applications you already have all of these tools available to use this process is going to take just about a minute so i'm going to pause this video and i'll be right back there we go our xbox cli has been installed you can see that npm is going to give us a message that there are a few vulnerabilities if you want you can go ahead and fix them by copying the command mpm audit fix and then simply pressing enter and there we go expo cli has been installed globally npm just gave us a warning that there are some vulnerabilities but that is completely fine for us at this point we can proceed to the second step which is initializing our new project so the command is going to be expo init and then the name of the project or the path to the directory so what we can do is clear the terminal by running clear and then finally running expo init and then dot slash this is going to initialize a react native application right inside of our current directory expo even allows us to choose a template we have blank blank with typescript and we even have tabs that include several example screens and tabs using react navigation and typescript and finally there is the bare minimum as you already know here in javascript mastery i try to teach you to do everything completely on your own from scratch so of course we're going to choose a completely blank minimal app as clean as an empty canvas let's press enter it's going to download the template it's installing javascript dependencies as we speak and this process should be done in no time and there we go your project is ready to start you can simply run yarn start or npm start so in this case i'm going to go with mpm and that's going to initialize the expo start command right here you're going to get a qr code but what you can do is hold ctrl and then click on this link right here that's going to open up our let's call it a dashboard and on the bottom left we have our qr code which you can scan with your mobile device be that iphone or an android device to explain every step of the way i also want to show you what's happening on the mobile device that's next to me so i've shared my mobile screen right here on the side of our metro dashboard you'll have to have to your play store if you're on android or to your app store on ios and then you have to install the application called expo or expogo simply search for it and then click install this application is incredibly lightweight so it should be installed in no time there we go i'm going to open it up right here and you should see a screen that looks like this what we can do now is click the scan qr code button it's going to ask you to open up your camera and then as you can see i'm right here hi there the video is currently recording the only thing you have to do is scan the qr code in just a few seconds the application will start building and you'll be able to see the developing version of our react native application right on our phone that's next to you and there we go hello dear friend we got it we can close this and you can see open app.js to start working on your app so if you think about it this is incredibly crazy if we go back to our code go to our app.js and edit this to say something like my first react native application and if we now save this you should be able to see the change live on your phone i'll be showing my phone right here next to my screen just for reference but i also have it right now in my hand next to me and that should be the same situation for you this is incredibly crazy so far we've been always developing everything on our desktop device the website is right there in our browser but now we can actually see it and feel it in our hand with our react native mobile application with that said the setup is done that's about it the only thing you have to do is run npm start scan the qr code with your phone and we're good to go now i'll stop it from running for just a bit and then we're gonna install all of the necessary dependencies for our application then we're going to quickly relaunch it just below this video in the description there's going to be a package.json file so simply copy it and paste it over your existing one once you do that we can be sure you're going to have the exact same versions of specific dependencies so that the code that we wrote together has the same output for both of us with that said we can open up our terminal and simply run npm install dash dash legacy dash peer dash depths as in dependencies and simply press enter this is now going to install all the necessary dependencies and then we'll be able to rerun our application and start with the development there we go the dependencies have been installed and we can simply run npm start that's going to run our expo and if we again control click this we're gonna have our metro bundler one more time but you can see that even under recently opened we already have our react native application we can again open up the scan qr code and then simply scan it right here there we go my first react native application we can go back to the code remove this status bar right here change this to something like hello world just to see if the changes are still being made and we can remove the status bar right here back on our phone we don't even have to scan our qr code anymore because we have it here under recently opened so if you click that scroll down and click this reload icon right here it's going to bundle it again and you should be able to see hello world great we can finally start with the development we will no longer need our metro open so we can close it up and we can close up the documentation the only thing we need is going to be the editor and on the side of the editor we're going to have our mobile screen at least on my end you can place your phone somewhere near you and then look at it every time we make a specific change great to start with the development we're of course going to start from our app.js file inside of here we're going to import a few things we can delete this import right here and import in curly braces create stack navigator and that's coming from add react dash navigation forward slash stack we're going to also import in curly braces navigation container and also default theme which is coming from add react dash navigation forward slash native there we go let's simply fix this typo right here and finally we're going to import in curly braces use fonts coming from dot slash screen you can notice that we have an error on the right side and that's because we removed our style sheets so we can no longer use these demo styles we can delete them and we can remove our style right here just so we have a clean working environment it's actually a great thing that we got this error because it shows you that whenever you press ctrl s or save the file the changes will be visible right away on your mobile phone in this case i have a typo the use fonts will not be coming from forward slash screen they will be coming from expo dash font there we go so as soon as we fix that we should have one less error to worry about you can also notice that we don't have access to view by default every native mobile component has to be imported at the top think about it initially at our demo project we had let me just go back a bit we had all of the imports straight from react native and that's still gonna be the case whenever you want to use some views which are exactly like divs in web application or text which are exactly like paragraphs in web applications you can import them from react native but in our app we won't need any of the native components because there will be handle the navigation so what we can do right now is simply remove everything that's inside of the return and return navigation container like this inside of there we're gonna have the stack navigator like this and finally inside of there we're gonna have two different screens stack dot screen and these are going to be self closing components like so of course this stack navigator is not yet created we have to use this function create stack navigator to create it and if all of this code is looking a bit weird don't worry at all think of this as using react router in your basic react applications instead of that here we're using add react dash navigation even by simply googling it you can come to their react navigation page it is easy to use and it has components built for ios and android as simple as that think of it as a react router so to get our stack we have to say const stack is equal to create stack navigator and then we call it as a function now before we worry about these errors let's actually complete our navigation we can start by transitioning our app into a basic error function component const app is equal to an arrow function and then at the bottom we can say export default app as we usually do in our react applications then we can create the theme by declaring a new variable right here const theme is equal to an object where we're going to spread all of the elements of the default theme we're going to access the colors one more time spread the default theme dot colors and then going to change the background now background color to be set to transparent there we go so this is just a slight modification we're making to the theme of this application and then to the navigation container we can say theme is equal to theme one more typo that i have is this here stack navigator was supposed to be stack dot navigator as you can see we declared our stack here so we should be able to do stack that navigator and that's going to be it but we do have to provide some extra options to it we can say screen options is going to be equal to an object where we can set the header shown to be set to false by default and then we can provide the second prop called initial route name and that's going to be set to home the first route is going to have the name equal to home and a component equal to a home component which we haven't yet created the second one is going to have the name equal to details and then the component is also going to be details of course we are yet to create these screens so now might be a good time to do that we're going to go to our file explorer and create a new folder called screens inside of screens we can create a new file called details.js and also one more file called home.js each one of our components is going to be a basic arrow function component so we can simply type rafce and then press enter that's going to generate a basic react arrow function component if this snippet didn't work for you that must mean that you don't have the necessary extension installed the extension is going to be called es7 react redux react native snippets so you can install it type rafce and then you should be able to see something that looks like this of course since we're working with mobile we won't have access to the div element for now we can simply return a text that's going to say home we can repeat this process in our details page rafce and then details without a div that's simply going to be a string there we go now we can go back to our app and at the top we can import our screens by saying import home from dot slash screens forward slash home and we can repeat the process one more time right here this one is going to be for details there we go you can see we immediately get an error saying that text strings must be rendered within a text element so we can go to our home js and right here we can import text like this from react dash native now we can render the text tag right here and inside of there we can say home and there we go now at the top left you should be able to see a text that says home we can repeat the process for our details so simply import text and then we can render it out right here of course this is not looking good yet but it will soon trust me so we can close our details and our home for now because our stack navigator actually works we can see that our initial route name is home and we can see the home component right here which is for now simply rendering a text that says home there is just one more thing left to do before we start implementing our home component and that is initializing the fonts that we'll be using throughout our entire application we can do that right here inside of our app component by saying const in square brackets loaded is equal to use fonts we pass in an object and now inside of this object we have to pass all of the fonts we're planning to use the fonts we'll be using as well as all of the other assets like icons images demo nfts and everything else is going to be inside of the assets folder but not this assets folder this one we can delete the one you'll be able to find just below this video there's going to be a link to the complete assets folder make sure to copy it it's most likely going to be zipped unzip it and then paste it right inside of here there we go you should be able to see that now you have fonts icons and then images for all of our nfts great we'll be using a few kinds of fonts throughout our application the first one is going to be called inter bold we can say colon require and then dot slash assets forward slash fonts enter dash bold and then dot ttf we can add a comma fix the typo right here that was supposed to be required and duplicate this line four more times the second one is going to be inter semi-bold and that's going to be inter-dash semi-bold right here then we're going to have the inter medium that's going to be inter medium right here the last two are inter-regular and enter regular right here as well and the last one is enter light and right here enter light there we go now we have our fonts but they won't be loaded initially so we have this loaded variable we can say if not loaded then we can return null else we're going to load our home component and with our fonts loaded we are now done with our entire app.js it was simple but that was the part of the setup now we can go to our screens home component and we can finally start implementing that amazing look of our nft react native mobile application let's go ahead and get started inside of our home component we can first import the use state hook coming from react as you can see some things never change we're already used to doing that then from react native we're going to import the view component save area view component as well as the flat list and since we're already using text we might as well add it right here as well flat list is a component that simply renders the basic list it is similar to map in react one cool thing about flat list is that it renders items only when they are about to appear on the screen and it deletes them when they are off view that lowers the memory usage therefore it technically uses lazy loading for better optimization it's quite a cool feature and the safe area component is used to render content within the safe area boundaries of a device to make sure that everything fits on the screen and a view is just a basic div component now if you've coded react native apps before i might be going a bit too slow for you but i'm trying to really cover everything as this is the first react native application on the javascript mastery youtube channel if you'd like more of react native applications please let me know down in the comments i'm really looking forward to creating more of the similar content for you guys in the next videos we're going to start with more in-depth topics now below are react native imports we're going to have some local imports first we can import the colors in curly braces all uppercased and then also the nfd data and this is going to be coming from dot slash constants this is a folder that we don't yet have the access to so what you can do is also head down in the description make sure to copy it and then you'll be able to simply right-click right here and click paste it's going to appear right in the root of your folder below the assets our constants folder doesn't contain any programming logic so you don't have to worry about missing something out it simply contains the imports for all of our assets which we're exporting in a simple object and also the dummy data for all of our nfts finally it includes some theme colors sizes fonts and shadows with that said we can go back to our screen and we can start coding out our home component let's go ahead and start with the save area view this is going to be like the outer div in our react application we can also give it a style equal to flex 1. in react native there are two different ways to create styles inline styles which are quite popular and also styled components in this case we'll be using inline styles and then in some future videos we can use style components as well just to explore different options now right inside of our safe area view we're gonna have our status bar we can think of our status bar to be the same thing as a navigation bar in web applications so what we can do is we can create a new folder called components again same thing as in react inside of our components we can create some components that we're going to reuse across our screens the first one is going to be the focused status bar dot js inside of there i wanted to say we can run rafce but actually there is rnfe which stands for react native functional expert component so we can create that alongside our focused status bar component we'll also need two different components for our home page as well and these are going to be a new file nftcard.js and again we can run rnfe react native functional expert component and again the last one for now is going to be the home header dot js and we can again run rnfe there we go now we have to export all of these three components from the components folder by creating an index.js file inside of this file we can import our home header from dot slash home header we can also repeat the process for our focused status bar and for our nfd card as well now that we've imported them here we have to create export and then in an object we can simply export all of these components at once by saying export home header nfd card and focus status bar that's going to allow us to go back into our home component and in one line import in curly braces nft card home header as well as the focused status bar from dot slash components there we go you're gonna notice that right now we have an error and it's saying that the files inside of our constants don't exist so it's possible that it didn't properly read all the files we added inside of our constants what we can do is stop the terminal from running by pressing ctrl c and then run it one more time with npm start this sometimes happens with react applications as well now if we scroll down and reload our application you can see it's bundling right here and that's fine the previous error is gone and it's just complaining that we have an empty safe area view right now the reason for that is we didn't import it properly the safe area view is supposed to be written right here as well there we go so again as in react sometimes when you paste entire folders visual studio code or the development environment doesn't properly read all the changes but now we're good to continue we've also imported all of our components and we can start using our first one which is the focused status bar right here it's going to be a self-closing component we're going to also give it one prop called background and in here that's going to be callers dot primary now we can go into the focus status bar component and we can implement it it's going to be fairly simple we can import react from react although that's not even necessary in new versions of react native then we can import instead of view and text that's going to be status bar coming from react native and we're going to also import in curly braces use is focused that's coming from add react dash navigation forward slash core there we go and the only thing we have to do here is call it as a hook by saying const is focused and then we can call the use is focused hook this is going to give us the information on are we currently focusing the status bar based on that information we can return if is focused is true in that case we can return the status bar which is going to be a self-closing component it's going to have the animated property equal to true and we also need to pass all of the props so that's going to be props from here and we can simply say dot props and pass them through these props are going to contain the background color of our status bar and if we're not focused we simply want to hide the status bar so we can return null there we go looks like i misspelled the status bar here so i'm going to spell it properly and there we go you can see that we have this dark navigation bar now because inside of our home component we're passing in the proper background color with that said we can continue with what's underneath the status bar and that's going to be a view same as a div in a react application we can give it a style property equal to flex is one inside of this view we're gonna have one more view and this view is going to have a style equal to z index is going to be set to zero that's going to be the div that's going to contain our nft list and finally we can call our flat list component which is a self-closing component which accepts a data property for data we're simply going to provide the nft data which we are importing from constants if we go into it you can see that that is an array with about 10 different nfts each containing some information like id name creator price description an image and then some bids for that specific nfd each item in our flat list is going to be rendered like you render item like this this is going to accept a callback function where we get each individual item right here but inside of curly braces and then we want to return something for now let's simply return that item inside of a text element so we can say text and then return the item right here it looks like our item contains more information than a simple name so if we go back to our data we'll have to return the item dot name so let's simply target the name property and there we go we have access to all of our nfts in a list of course later on we'll want to render our nft card component for each one of the items in our list we'll also have to have a key extractor this is going to be something similar like passing a key to a mapped element in react we're going to accept a callback function which is going to get the item and it's going to return item dot id simply specifying that this property here called id is going to be a unique identifier for each item in our list we can also provide a few extra properties the first one is called shows vertical scroll indicator and we're going to set that to false we don't want to show that ugly scroll bar and the last prop is going to be the list header component and that's going to be set to home header component like this so now we can see our home header component appeared above our elements if you want to learn more about each element i'm using right here like a flat list i would strongly recommend you simply googling it or going to the react native documentation and then reading a bit more about that specific element for example we have all of the data about our flat list and how to use it right here as well as access to all of the props that it accepts for example we just use the list header component if you click right here you can clearly see that it is going to be a component rendered at the top of the all items and that can be a react component so again reading the docs always comes in handy below our view containing our flat list we're going to have one more view and this view is going to have a few more styles so we can open up an object and say position is going to be set to absolute this view is going to serve as a background color that's going to be displayed behind our nft list so we can say top is going to be equal to 0 bottom is going to be also equal to 0 as well as the right and left we're going to set the z index to be equal to -1 to appear behind our nfds inside of this view we're going to have two more independent views which are going to be self-closing tags the first one is going to have style equal to height is 300 and background color is going to be callers.primary now below that one we're gonna have one more which is going to have flex is going to be set to one and background is going to be colors dot white and to be able to see the changes we just have to add the color to our background because that's going to be a background color and there we go now you can see what i was talking about we're going to have that background and we're dividing our main screen into two views the main dark one and then the bottom white one of course the nfts are going to be displayed above both of these screens it's going to make much more sense once we implement the nft card component and now might actually be a good time to start implementing it so instead of rendering just the text with the item name here we can render the individual nft card as a self-closing component and we can pass in data as a prop and data is of course going to be our each individual nfd item i can barely see it here nft card and fd card and fd card is because that's the only thing we're displaying at the moment but as soon as we start implementing our nfd card this is going to look much better so let's do it right away inside of our nft card we're going to import something known as use navigation and that's going to be coming from add react dash navigation forward slash native we're going to also import a few things from react native and these are going to be view and image we don't need react we're gonna also import some of our local imports such as colors sizes shadows and assets and that's going to be coming from dot slash constants inside of our nfd card we already know that we're getting the data as the first and only prop we can declare our navigation which we're going to use soon enough so navigation is equal to use navigation and we call it as a hook and we can start by styling our first view here let's give it a style and let's spread this object out let's give it a background color equal to colors dot white we're going to get an error because i removed the import for the text element so let's get it back for the time being there we go let's also give it a border radius to be equal to sizes dot font we can also give it a margin bottom to be equal to sizes dot extra large we can also give it a margin of sizes dot base and finally we can spread all of our shadows dot dark there we go so now you can see these are starting to look more like cards and if you're wondering where are we getting all of these styles from well if we go into our constants and inside of our colors you can see that i've already prepared for you the objects containing all of these different values again this is just some css in js some values for shadows fonts sizes and colors but that's about it nothing special is happening behind the scenes inside of our view we're gonna have one more view and this view is going to have the style property right here equal to width is a string of 100 as well as the height is equal to 250. so now we have these real cards and you can already scroll through your mobile application inside of here we of course want to show our image so let's render the self closing image tag it's going to have a few properties source is going to be equal to data dot image as soon as we save that you can see something and these seem just like solid colors but if you scroll down you're going to notice that there are some images here indeed what we have to do is of course resize them so there is a handy resize mode property which we can set to cover alongside that cover we also have to provide some styles and these are going to be width which is going to be set to 100 we're gonna also have the height set to 100 percent we need the border top left radius equal to sizes dot font and finally border top right radius just to make it a bit rounded and there we go we have our nfd cards and they're looking great just with this image right here now of course we have to provide some additional information to each one of these cards things like descriptions titles as well as the buttons to go to the nft details page the first thing we can add is going to be just a little heart icon at the top right of each one of our cards that's going to be our like button so let's create it right here below our image we can call it a circle button like this it's going to be a self-closing element and we can pass a few props to it first the image url which is going to be assets dot heart we can also pass the right property which is going to be set to 10 and also the top property which is going to be set to 10 as well to divide it a bit from the top and the right side for it to appear right here of course we don't yet have access to the circle button because we haven't created it yet so what we can do is go to our components and create a new file called button.js inside of there we can run rnfe to create our basic structure we can call this button a circle button and instead of exporting it by using a default method which only allows you to export to one component from a file we're gonna export it normally simply by adding the export keyword right here that way later on we'll also be able to add one more button which can for example be rect button or a rectangular button for now we only care about our circle button so let's go into the index.js of our components and right here we can import in curly braces circle button while we're here we can also do a rect button make sure to create it there and that's going to be coming from dot slash button what we can do now is we can export both of these buttons circle button right here as well as the rect button we can go back to our nfd card and we can import it straight away the import is going to look like this import circle button as well as direct button from dot slash button there we go and now you should be able to see it here if i remove this text element you can see that we have this button appearing right here but now we have to actually style it and position it at the top right of each one of our nfts to do that we can go to our circle button component and we can start styling its jsx we can first import a few things from react native and these things are going to be something called touchable opacity then we need the text element and then we're going to need an image element you might be wondering what the heck is a touchable opacity it sounds weird well believe it or not in react natives language touchable opacity is nothing more than a simple button we're gonna have a touchable area which we can of course touch and then click something so hopefully it makes sense we're not actually clicking rather we are touching so it's not a button it's a touchable opacity a bit of a mouthful but hopefully it makes sense so let's go ahead and use that touchable opacity right here instead of the view that's going to be touchable opacity and we're going to apply some styles to it so we can say style it's going to be an object and let's give it a width of something like 40. let's also give it a height of 40. let's give it a background color equal to colors dot white you're going to notice that we haven't yet imported the colors and in react native whenever you make a mistake you immediately get that huge arrow here so i'm going to comply immediately and just import the colors sizes fonts and shadows and that is coming from dot slash constants there we go so now you can see this touchable opacity right here let's also provide a position equal to absolute now it's going to appear at the top left we can give it a border radius set to something like sizes dot extra large it's essentially a circle then we also want to give it an align items property equal to center as well as the justify content property equal to center finally we can also apply dot shadows dot light like this and we also need to pass all of the props that we're passing to our circle button so what we can do is use object destruction here get our img url as well as the handle press which we're going to be sending on later and we can spread all of the props so right here we can also simply spread all of the props now it's going to appear at the top right the reason why it's doing that is because if we go to our nfd card you can see that we're passing properties right and top 10 which are going to move the absolutely position div to the top right we can also provide the on press to this um touchable opacity which is going to be set to handle press there we go and inside of this touchable opacity we're going to provide an image that image is going to have the source equal to img url it's also going to have a resize mode set to contain and finally it's going to have a style equal to width is 24 and height is also 24 and we're gonna get this clickable heart at the top right looking great now we can go back to our nfd card we have our image and we have our circle button but now is the time that we go a bit below this image and see what other content does each nft have so let's go below this view and we're going to implement a component called sub info this is a new component that we're going to create in our components folder called sub info dot js we can again type rnfe sub info and inside of that sub info we're gonna actually have a few different components which we're gonna export so it's not going to be just a single export default we're going to have the export const that's going to be nft title we can copy the nft title here and we can copy this entire block of code collapse it below that we're going to have export const eth as an ether price and in here we can simply again for now return eph price we're gonna have a few more the next one is going to be image cmp we can again copy this and collapse it then the next one is going to simply say people these are all different info components that we're going to implement below people we're going to have our end date so we can say end date right here and finally the last one is the one we came for which is the sub info there we go now that we are exporting all of these components let's go back to our nfd card and let's import them at the top we can do that by saying import in curly braces sub info we're gonna also need the eth price and nfd title and all of these components are coming from dot slash sub info there we go so now you can see the sub info appear we have it here and now is the time that we actually style it so let's enter here and let's implement the jsx or rather react native code for our sub info component our sub info is going to be a view that's going to have a style div which is going to be equal to an object it's going to have a width of 100 then it's going to have a padding horizontal which is going to be set to sizes dot font then we're going to have a margin top which is going to be equal to minus sizes dot extra large as you can see now it's appearing right here inside of our image we can also give it a flex direction which is going to be set to a string of row and finally we can give it a justify content property equal to space between if there is a single sub info it's still going to appear at the start of each one of our nfds and it's actually looking great now inside of our sub info we want to render the people component and also the end date component it's going to look like this these two components are right here inside of the sub info as well so we might as well implement them right away so right here for people we're gonna have a view that's going to have a style div equal to flex direction and that's going to be set to row now because of the space between you can see we have people and end date right now we're styling the people inside of here we want to loop over different people so the first thing we have to do is import a few things from our constants that's going to be sizes fonts colors shadows and assets so what we can do is inside of the people we can actually map over them so we're going to open a dynamic block of code with an array we're going to have assets dot person 0 2 assets dot person03 and let's do also assets.person04 want to map over them when mapping we're going to get the individual image url and of course we always get an index and we want to instantly return yet another component that is inside of our sub info image cmp i hope that now you can see why we created all these components in the same file because we're using them amongst each other the sub info is using the people and the end date and then the people component is using the image component as well so let's now transition to the image component that's going to be just a single image with some styles and properties the source is going to be set to image url img url the resize mode is going to be set to contain the style is going to be set to width is 48 and also height is set to 48 and finally we're going to have a dynamic margin left property where we want to check if this is the first image in the row so we can check if index is equal to 0 in that case we return 0 else we return minus sizes dot font in this index and the image url are gonna be coming as props to our image component so img url as well as the index now that we know what this image takes in we can also pass that right here so that's going to be img url equal to img url we're going to also pass the index equal to index and the key is going to be set to people dash and then index just to make it unique of course we have to import the image component at the top we already have the view and the text now we need the image and react we don't need there we go so now we're gonna get these nice images of people who are interested in this nft this is looking great with that said our image component is done and our people component is done as well now we can code out our end date component that component is going to be a view and that view is going to have quite a few styles so let's put this into multiple rows and say style is equal to an object first let's provide padding horizontal which is going to be equal to sizes dot font we're going to also have padding vertical which is going to be equal to sizes dot base we're just positioning it around we're gonna also have the background color be colors dot white and it looks like we're not properly importing the colors i'm missing an l here and it looks like in the meantime our metro and the client got out of sync so let's scroll down and reload there we go so now we can see this end date with a background color let's also give it a justify content which is going to be equal to center and align items which are also going to be equal to center we can give it some shadows by simply spreading all of our shadows dot light here there we go let's give it an elevation equal to one and finally let's give it a max with equal to a string of fifty percent there we go so now we have our end date appearing on the right side our end date is going to have a few text elements inside of it the first one is going to have a style equal to font family is equal to fonts dot regular it's going to have a font size equal to sizes dot small and finally the color is going to be set to callers dot primary that text is simply going to say ending in and then we want to duplicate that text we can space this out just a bit better so each specific css property in its own line like this and this one is saying ending in and now we can duplicate it so let's hover over it and duplicate the one below is going to have a font family equal to semi-bold the font size is going to be medium and the color is going to remain primary let's simply hard code the value here something like 12 hours and 30 minutes so now you can see ending in 12 hours and 30 minutes of course these people as well as the text here is hard coded at the moment but if you like this react native video and if you'd like me to make it into a series i can make all of this data dynamic and functional just let me know down in the comments with that said that's going to be it for our end date component and with that we're also done with our sub info component finally we can return to our nfd card now below our sub info we're going to render a view and this view is going to have a style equal to width is going to be 100 and padding is going to be sizes dot font just to provide a bit of padding between our nft items inside of our view we want to render our nft title so let's simply add it here nft title as a self-closing tag and of course it is misspelled so let's properly spell it here and here nft title there we go so now we can go into this component which i think is the second to last component in our sub info we haven't yet created we have to do the nft title and then the ethereum price so our nft title is going to be a component that's going to accept a few properties let's first pass them in so we know exactly what to expect our nft title is of course going to have a title property equal to data dot name it's also going to have a subtitle property equal to data dot creator we can also pass a title size to make a dynamic that's going to be sizes dot large and finally subtitle size so right here if we spell this properly that's going to be sizes dot small now we can go into our nft title we know which props are we expecting that's going to be title subtitle title size and sub title size there we go and our nft title is going to be nothing more than a single view that's going to have a text inside of it as it already has it now but that text is not going to render just a basic nft title hard coded we're going to make a dynamic by rendering the title coming from props so you can see now the title is different for each one of our nfds let's also apply some styles style is equal to font family is equal to fonts dot semi-bold font size is equal to title size and color is going to be colors dot primary if we save that this is now going to look more like it or they starting to look like a great design below this text we're going to have just one more text property so we can duplicate it the font family is going to be fonts dot regular the font size is going to be the subtitle size so sub title size and everything else is going to remain the same but we're going to render the subtitle instead of the title so as you can see we have some subtitles appearing here as well and this is already starting to look so much better the next thing we can do is go back to our nft card and below our nft title we can render one more view that view is going to have a style and inside of that style we're going to have a margin top equal to sizes dot font we can also give it a flex direction which is going to be equal to row like this justify dash content which is going to be set to space between and finally align items which is going to be set to center let's add commas and that view is going to render our eth price component as well as that wrecked button remember that second button we created before our ethereum price is simply going to accept one parameter which is going to be price equal to data dot price so let's code it out first let's go to eth price open it up we are accepting only one prop in curly braces that's going to be price if we go to view we can give it a style equal to flex direction is going to be set to row and we can also give it align items is set to center inside of there we can render an image so let's create a self-closing image tag that's going to have a source property equal to assets dot eth for that ether logo let's set the resize mode to be set to contain and finally let's give it a style width is going to be set to 20 height is also going to be set to 20 and margin right is going to be set just to 2 there we go more like it now let's display a text element below it that text element is going to render the price let's style that price just a bit by giving it a style object let's give it a font family equal to fonts.medium let's make the font size be equal to sizes dot font and finally let's set the color to be equal to colors dot primary this is already looking so much better with that said all of the components inside of our sub info are now completed and the last thing we have to do to complete our nfd card is this simple rectangular button this button is going to accept a few properties min width which is going to be set to 120 also font size which is going to be set to sizes dot font and handle press which is going to be a callback function using that navigation object navigation dot navigate and we want to navigate to the details page like this details and then as the second parameter you can pass in an object containing all the data which are actually details of that specific clicked nft this is how you do navigation using navigator in react native it's quite similar to what we do in react using react router but in here instead of the url we have the name of our stack so if we go to our app you can see that right here we gave a name to each one of our screens details and home so in here we know to navigate to the details component with that said let's go to our wrecked button which is going to be inside of our button component and we can essentially copy the entire touchable opacity of the circle paste it right here get these few props we were talking about such as min width font size handle press and the spread of all of the props now we can of course modify this touchable opacity we will no longer have the width and the height properties the background color is going to be primary we won't have the position border radius is going to remain extra large we won't have the align items nor justify content nor shadows but we do want to add a min width property which is going to be equal to min width coming from the props and finally we want to add a padding property equal to sizes dot small our touchable opacity is not going to have an image so we can remove it rather we will have a text element that text element is simply going to say place a bid because we're working on a bidding platform for nfds and let's apply some styles the styles are going to be font family which is equal to fonts dot semi-bold we're going to also have the font size equal to font size coming from the props color is going to be set to colors dot white and finally text align is going to be set to center if we save that we have a beautiful looking rectangular button which is more like a pill and it beautifully accompanies the rest of this beautiful design looking at this entire flat list of nfts now is just beautiful it's looking great we have a great nft image people who are bidding the name the subtitle the price the button to place a bid the ending time and a button to add it to favorites what more can you ask for with that said we are completely done with our nfd card component now let's close it and let's go back a bit we can also collapse all the files and folders go to screens and go to home remember this whole time we're working on the nft card component but if you think about it that is one small component but it plays a major role on how our entire app looks like because we are scrolling through all of these great looking nfts that are inside of the flat list the next component we're going to implement is going to be our home header the header that's going to appear above our flat list you can think of it like a navigation bar and it's also going to give us some info about the currently logged in person once we're done with the home header we can go straight into the nfd details page which is going to be the second of our two screens with that said let's go straight into the home header and let's start implementing it right away inside of our home header we can first import a few things from react native these are going to be view text image and for the first time in this video text input so let's create a text input there we go we don't need this react import but we do need the import of all of our constants so that's going to be import colors fonts sizes and assets coming from dot slash constants now we have everything we need to create our home header component our home header is going to start with a view that's going to have a style equal to an object where the background color is going to be equal to colors dot primary we're going to also apply some padding equal to sizes dot font so now we can see a bit of a space at the top inside of that view we're going to create an additional view inside of it the interview is also going to have a style object and it's going to have a property of flex direction equal to row as well as justify content equal to space dash between and align items is equal to center inside of there we want to have an image this is going to be a self-closing image tag which is going to have a source equal to assets dot logo here we have our pro neff logo we can set the resize mode to be equal to contain and just modify the width and the height a bit so width can be about 90 pixels and the height can be something like 25. there we go this is more like it below that image we're going to have one more view and this view is going to have a style equal to width 45 and height 45 as well this view is going to contain one more image this image is going to be source assets.person01 this is going to be our logo we can also set the resize mode to be equal to contain now let's apply some styles to this image so that's going to be style and we can set the width to be equal to 100 percent and the height to 100 percent as well and that nicely positions it at the top right of the screen below that image we're going to have one additional image and for now i'm simply going to duplicate it the below image is going to have the source equal to assets dot badge there we go that's going to be this check mark batch but instead of with 100 and the height of 100 it's going to have a position set to absolute width set to only 15 pixels and the height set to 15 pixels as well finally we have to set the bottom to be 0 and right to be 0 as well and now it's going to be nicely positioned right here at the bottom right of our profile image it simply indicates that this profile is verified i can imagine that this is really hard to see on your screen but take your phone in your hand and look closely into it and you should be able to see it a good thing about expo is that i don't even have to use my mouse to scroll through the app i just took my phone in my hand and i can nicely scroll through the app it seems a bit laggy on the screen share that you can see but on my phone it is incredibly fluid as it should be for you as well so take your phone in your hand and see how it looks play with it a bit it's just amazing that we can open up our app on our phone while we're developing it with that said we can go below this view and below one more view to create another view this view is going to have a style equal to margin vertical is going to be sizes dot font just to provide some extra space margin inside of there we can have a text element and this text is going to have a style equal to font family fonts dot regular also font size is going to be set to sizes dot small and finally the color is going to be set to colors dot white it's simply going to say hello and then victoria of course you can put any name here we can also just go to google and search for wave emoji copy and paste go ahead and copy it and we can add that right here next to the name there we go and we can duplicate this text just below let's change the font family to fonts dot bold font size to sizes dot large the color can remain white but let's add just a bit of a margin top something like sizes dot base divided by two there we go just to make it a bit smaller so now we have hello victoria and on the bottom one let's say something like let's find a masterpiece so this is already looking great now we have a meaningful header let's just add one more view below this view with these two text elements so this view is of course going to be a view it's going to have a style equal to margin top is equal to sizes dot font and it's going to have one more view inside of it that view is going to contain an image and a text input so let's start with the image first image is going to be a self-closing tag that's going to have the source equal to assets dot search there we go we can also set the resize mode to be equal to contain and finally we can set the style to be equal to width something like 20 height let's also do 20 and margin right can be set to sizes dot base there we go so now we of course have to add the text input below and text input is just like a regular web input we can add a placeholder equal to search nfds we can also set the style to be equal to flex 1 and finally on change text for now we can leave as an empty callback function of course we have to provide some styles for this to actually look like an input so let's provide these styles to the view element wrapping both of the image and the text input let's say style is equal to an object let's give it a width of 100 let's also add a border radius of something like sizes dot font we can also add a background color to be colors dot gray now we should finally be able to see it let's style it just a bit more by giving it a flex direction to be set to row already looking better align items is going to be set to center and padding horizontal is going to be set to sizes dot font and padding vertical is going to be set to sizes dot small minus two so now we have a real input and if you click it you can see that a keyboard opens up and you can start typing in it so this is great this is how we can interact with a phone's keyboard great with that said our home header is now completely done just later on we're going to provide the on search function here which is going to allow us to actually search through these nfds so we can immediately pass it right here instead of this callback function simply on a search and that's it we are done with the home header component as you can see it makes this application just a bit more complete we have this header logo the image of the currently logged in user hello and then the name of the person let's find a masterpiece we can search through the nfds and then finally we can scroll over them and find the one we like but of course now is the time that we go inside of our screens and then details.js because once we click on a place a bit button the details page opens up and now we need to code it out we need to show all of the details for that specific nft that was clicked so let's go ahead and do that right away to start coding out our details component let's first import a few native react native elements these are going to be view text safe area view image status bar and finally flat list then we'll have to import our constants so we can say import and then in curly braces colors sizes shadows fonts and finally assets coming from dot slash constants and finally we'll also have to import all of the components that we'll be using in our details page or should i say detail screen because this is no longer a page it is one specific screen we have to import the circle button which we have already created the wrecked button as well the sub info we've already created that as well then we're going to import the focused status bar we have already created that as well but now they're going to be a few new components these are going to be details description or desc for short and finally details bid and all of this is coming from dot slash components of course we'll first have to create the boilerplate structure for our details desk and details bid we can do that by going to our components and creating two new files details desk dot js desc that's going to be rnfe and we can repeat the process for details bid dot js rnfe there we go and finally we have to export them in the index.js of our components that's going to be import details desc from dot slash details description and repeat the process for our details bid and finally export all of them right here there we go so with that done we should be able to normally import them inside of our details component of course now we are yet to use them so inside of our details as parameters we'll be getting two different things the route which we're on and the navigation component we get that by default because we are using the details as a component inside of our stack screen so all of that information is getting passed through so let's go ahead and console.log our route to see what is inside of it we can simply write a console log right here and pass in the route what do you think is this actually going to work think about it we are not in a browser anymore we are in a native mobile application so will this console.log work well let's open up the console and would you look at that we have our entire console log containing the data about everything we asked for so this is our route you can see that our route has some parameters and that is exactly what we are interested in so let's say const in curly braces data is equal to route dot params and now let's simply console.log that piece of data we can also make it into a template string like this spread it through multiple rows or lines like this make this into a real variable and then we can add lines like this just so we can see where this data starts and ends and there we go now we unfortunately get object object because it cannot cause a log it inside of a template string but if we instead do something like this where we're simply going to have one console log in one line then we're going to console log the actual data like this and then we can again console log the lines in that case we can see we start here and then we have the object containing everything we need about our nft and then it ends here i made this just a bit more complicated than it should have been but you get the point you can console lock things in react native just make sure to open up the console because that's where the console logs are going to appear great so now let's actually make use of our data we're going to delete our text and create a safe area view that safe area view is going to have a style equal to flex is one inside of there we want to call that same old focused status bar we're going to pass in the bar style equal to dark dash content also background color is going to be set to transparent this time and the property translucent is also going to be set to true this way as you can see right here the status bar becomes entirely transparent or translucent however you want to put it and it is going to fit nicely with our white nft details page but on the other hand if we reload the application you can see that in here we had a dark header so we have a dark status bar right here as well so if we go to place a bit you can see that now it becomes white now below that focus status bar let's create a view and that view is going to contain a self-closing wrecked button component wrecked button is going to have a min width equal to 170. it's going to have a font size equal to sizes dot large and we also want to spread da da da shadows dot dark there we go so now we can see this huge place a bit button of course we need to provide some space from the actual status bar so let's style this view we can say style open up an object and say width is going to be 100 the position is going to be set to absolute bottom is going to be set to zero so now we're positioning this button at the bottom padding vertical is going to be set to sizes dot font justify dash content is going to be set to center as well as align items is going to be set to center as well we can also give it a background color to something like rgba 255 255 255 and then 0.5 with the 0.5 we set the opacity to 50 and finally the z index is going to be 1 so that it appears above specific content that is below it there we go so now we have this great place a bit button at the bottom easily accessible with our thumb below this view we can create our second flat list this flat list is going to be a self-closing component and inside of it we want to provide data but this time data is going to be data dot bids so a list of all people who bid on this nft under render item we're going to again get a callback function we can immediately destructure the item inside of it and we want to return a new component and that's going to be details bid a self-closing component that's going to accept the bid which is going to be equal to item this details bit is a component which we imported right here from the dot slash components for now it is completely empty let's go back to our details and place a bit you're going to notice that right now we have an error can't find variable details bid so let's see what seems to be the issue that's going to be details bid we have it here as well and that's coming from components so this is looking good to me details bid details bid coming from details bit not really sure what's happening with this one we might want to restart our react native application to see if the changes are going to take effect but before we do that let's just give it a benefit of the doubt and let's add a few more properties to the flat list and it's possible that this issue gets resolved on its own we want to give it a key extractor right here which we said is similar to the key where we're mapping over react items so that's going to be item and item dot id we can also add the show vertical scroll indicator which is going to be set to false and we can also add content container style which is going to be equal to padding bottom is sizes dot extra large times 3 but it looks like our issue is still not resolved so let's think about it can't find variable details bits we're calling details bits right here and if we scroll up we can see that we are importing it right here but it says that it's declared but never used i might have misspelled it oh yeah i said bits right here and it was supposed to be a bit my bad you might be looking at me this whole time and thinking that this issue was really obvious but there we go we got it fixed and finally before we code out the initial details bid we can add the list header component remember this is a react component that appears on top of the flat list so let's wrap everything in a react dot fragment and there we're going to render the details header component which is a self-closing component and of course we have to import react if we want to use this so at the top we can say import react from react there we go and the details header is something that we're going to code out right away since this details header is going to be used only inside of the details we can create it just above our details component const details header is going to be equal to a react functional component with an instant return it'll be getting data and navigation as props and it's going to be a single view that's going to have styles or style equal to width 100 and for the height we can do something like 373 i found that value to work the best it's going to contain an image or image like this the source is going to be equal to data dot image so of course to be able to use this we have to pass it over so let's pass some props to our details header we're going to pass in the data equal to data as well as navigation is equal to navigation now if we go place a bit we can see this huge image appearing at the top of course we can style it by providing the resize mode to be equal to cover as well as style equal to width 100 and also height equal to 100 percent and now we can see this nfd appear right here you can also see how the navigation bar is translucent so everything can be seen right here we also want to add two circular buttons so let's create them circular button the first one is going to have image url is equal to assets dot left let's save it looks like i misspelled it here it's going to be circle button not circular button so if we go place a bit you can see this back icon right now we can also give it a handle press so it's not handle click it's handle press in react native that's going to be a callback function which is going to call navigation dot go back so we finally have the navigation between our two pages if i click here we go back if i click place a bid we go to the details page great and if we open up another nft here like this one we can see that image right here let's also add the left property equal to 15 and top property can be equal to status bar dot current height plus 10. the status bar is not always going to be the same on all devices so we're going to take its height and then we're going to add 10 to put this just below and finally we can duplicate the circle button the image url is going to be set to heart right is going to be set to 15 instead of left we don't need the handle press and the top is going to remain the same so now we have back and we also have this heart icon right here looking great that's going to be it for our details header we can head down to where we called it and below our details header we're going to call the sub info component and it just looks like our sub info is not exported from components so right here we can import sub info in curly braces which is coming from dot slash sub info and finally we can export it here sub info there we go so now if we go back we can see we have this nice end in and then the people who bid on this project now below our sub info we're going to create one more view that view is going to have the style equal to padding which is going to be sizes dot font just to apply a bit of padding inside of there we want to render our new component called details d e s c as in description and we can pass in the data and close it for now it is simply a text saying details description but we can control click it to go into it and the details description as the name says is a component that's going to allow us to read more information about the nft we're currently looking at we're talking title price as well as the description so to code it out we're going to first import a few things we're going to import use state from react we're going to also import view and text from react native then we need a few components which we have already created these are going to be eth price as well as the nft title and they are coming from dot slash sub info we also need to import the colors sizes and fonts coming from dot dot slash constants there we go and as a prop we're gonna pass the data about our nft so let's start by rendering an empty react fragment inside of there we're going to render a view and inside of that view we're gonna render the nfd title like this a self-closing component it's going to have a title equal to data dot name we can also give it a subtitle equal to data dot creator let's also give it a title size equal to sizes dot extra large and also the subtitle size to be equal to sizes dot font and i can fix this large right here there we go already looking so much better finally below the nft title we can also render the eth price which is a component we already created and we can pass in the price equal to data dot price there we go you can see how easy it is to create it once we already have the components that we are now reusing let's also apply some styles to this view style let's give it a width of 100 percent a flex direction to be set to row justify content to be set to space dash between and finally align dash items to be set to center now the price is appearing on the right side and the title and the subtitle appearing on the left now below the view containing these things we're going to create one more view that's going to contain the description this view is going to have a style equal to margin vertical is going to be set to sizes dot extra large and then that's going to be times 1.5 because we really want to apply some distance between the name and the description it's going to contain a text property and that text is for now going to simply say description we can apply a style to that text that's going to be an object containing the font size equal to sizes dot font font family is going to be set to fonts dot semi-bold and finally the caller is going to be set to callers dot primary there we go now below that text we're going to contain the view that's going to contain the actual description this view is going to have a style equal to margin top that's going to be sizes dot base finally we can copy this text right here paste it inside of our view the font size now is going to be small font family is going to be regular color is going to be secondary and line height is going to be set to sizes dot large and we should be able to see the description but not just the word description rather the actual description which we can find under data dot description if we save this you can see this whole description right here now let's go back and look at a few other nfds here for example this one has a longer description let's go through a few more this one has a shorter one but you can see that the name the image and the description everything else is fully custom for that specific nft now let's go to the one that has the long description i think it was this one no i missed it this one there we go so we want to add a button that's going to say show less or read more because we don't initially want to show this entire huge description so what we can do is instead of rendering the data.description here in here we can simply run their text which is going to be in the state so we can simply say use state and then click this use state snippet say text press tab and then initially that's going to be data description dot slice and then from 0 to 100 meaning only the first 100 characters but now how do we actually make it longer well we can create one more use state that's going to be read more and set read more which is at the start going to be set to false we can scroll down and below this text if not read more then we want to show three dots so now if we save this let's see this must be rendered within a text element so yeah let's expand this text and put the read more inside of it right above the text like this there we go so now if we save this go to that nfd you can see that we have three dots now but below that we're going to provide another text element and this text is going to have again style equal to an object we can even copy the styles from the above one paste them here font size is going to be set to small font family is going to be set to semi-bold color is going to be set to primary and we don't need the line height this text is going to look into the read more state and if that is set to true it's going to add a space and say show less otherwise we want to say read more and save that there we go so now we have this read more button but is it actually a button well it's not unless we add a property called on press so right here to this text element i'm going to add the on press property which is going to be equal to a callback function and this function is going to check the read more property and say if not read more then set text to be equal to data dot and then the entire description and also set read more to true now else if it is read more we can copy this and then we want to shorten the text so data.description dot slice from 0 to 1 shorten it to 100 characters and set this to false let's save it and now if we click this read more button you can see the text expands and this text at the bottom says show less so this is actually working perfectly and if we go back once we initially open up the nfd you can see that it's going to say read more and the text is only going to have 100 characters the only reason we've done this is because that's going to provide us more space to implement our details bit so if we go back to our details below our details description we can check if data dot bits dot length is greater than zero in that case we can render a text element this text is simply going to say current bit like this and we can also apply some styles to that text so that's going to be font size is equal to sizes dot font font family is going to be equal to fonts dot semi-bold and finally the color is going to be set to colors dot primary there we go so we have our current bit right here and finally now is the time that we implement the actual list item element which is the details bit so we can control click into it to get to the details bit component inside of here we're gonna import view text and also image from react native we're going to also import the eph price component coming from dot slash sub info and finally we're going to import colors sizes and fonts coming from dot slash constants you can see how if you follow great coding practices and create specific constants and reusable components the more you code and the more you create your project the easier it is going to be because we're following a specific structure and reusing all of the components so our details bid is going to accept the actual bid as a prop and it's going to return a view that view is going to contain an image the image is going to have the source equal to bid dot image the resize mode is going to be set to contain and also the style is going to be set to width is 48 and height is 48 as well these are just going to be the faces or the profile pictures of the people who are bidding on this nfd below the image we also want to create a view that view is going to contain the text so right here we can say text and that text is simply going to say for now bit placed by bid dot name there we go we can immediately provide some styles to that text so style is going to be equal to font family is going to be fonts dot semi-bold font size is going to be sizes dot small and color is going to be colors dot primary there we go we can duplicate this text just below and instead of the bit placed by we can render the bid dot date let's change the styles just a bit font family is going to be regular font size is going to be small minus 2 to make it just a bit smaller color is going to be secondary and margin top is going to be set to three there we go finally below the text and below the view we can render our ethereum price for ether price which is a self-closing component that simply accepts the price as the one and only prop and we can pass in the bid dot price there we go the last thing we have to do is apply some styles to our view to make all of our content align nicely in one row so that's going to be width 100 flex direction is going to be set to row there we go already looking better justify content is going to be set to space dash between align items is going to be set to center let's add a comma right here important not to forget that the margin vertical is going to be set to sizes dot base and finally the padding horizontal is going to be set to sizes dot base as well so now we can see the current bits as well it would make more sense to go into details and right here say current bids as we can see multiple one more thing that i would do is if we go to details bits i would apply just a bit more padding here so i'm gonna say sizes.base times two so everything fits into the screen nicely and would you look at that our nft detail screen is now complete and it is looking great we can scroll over everything once our button gets above a specific element you can see how we have the opacity of 0.5 here so it looks like it's coming over it that is looking great we have this image in the full glory and now we can explore all the different nfts and the read their nft details this one has four bits let's look at the black box model looking great as well with that said the nft details page is now completely done the last thing we have to do to complete the entire ux and ui of this application is implement the search functionality so for example if we type black box right here we should be able to see only the black box nft right here so that's going to be our next task let's close all of the files and folders collapse everything and just open up screens and home right at the top of our component in here we're going to implement the search functionality to start implementing the search we need to have our use state imported right here and all of the other imports we need are right here we won't be needing the text though so let's add a few empty lines right here and let's implement the search what we can do is create a new use state field we can use the used state snippet and let's call it nft data and set nfd data and then by default we're going to set that to be nft data that is coming from our constants so that's going to be that huge array of all nfts what we can do then is create a new function called handle search which is going to be an arrow function and this arrow function is going to accept value as its first and only parameter first thing that we can do is we can check if value.length is equal to 0 or we can simply say if no value.length in that case we can simply set nfd data to be equal to the original nfd data and we want to leave the handle search function so we can immediately return this but if we do have the value length meaning if the user typed something in here then we can filter through our data const filtered data is equal to nft data dot filter and a dot filter is a function like a for each or a map it is an iterator function where through each iteration we get access to the item or currently iterating over so let's say item and we can simply check if item dot name dot to lower case and then dot includes so if it includes and then we can pass in the value and then dot to lower case let me put this in a new row there we go so we are looping over all of our nfds and we're only keeping the ones that include the value of our current search term what we can do then is check if filtered data dot length that means is there at least one element that exists in that search if that is the case then we can set nft data to be equal to filtered data and i see i have a typo here that's supposed to be filtered data and if that is not the case meaning else we can again simply set nfd data to be the original unaltered array there we go now that we have this handle search function we can actually use it inside of our home header the only thing we have to do is pass the on search prop right here equal to handle search now if we go to the home header you can see that we are accepting this on search and we are actually passing it to our text input another important thing we have to do is instead of the static nfd data we can now pass the nft data which resides in our state and is going to change now as soon as we do that we can take the phone in our hand and we can start typing something let's go for the black box and it looks like it's not working so what could be the case we are filtering through our nfd data we have the handle search and this state should be changing let's check our flat list the nft data is here and the handle search is here oh would you look at that i have a typo so that is supposed to be on search there we go so now if we save that and if we try typing something there we go black box we can also search for something like nft nfd coins race nifty nft let's try to search for something else let's find some interesting ones we have art so let's search for art there we go this now works perfectly we can open it up see more information this one doesn't have any bids but if we go back search for all of them we can find the one with the bid there we go this one has three and if you have a phone that has gestures you can also go back with the gesture so as you can see i didn't click the back arrow i just used my gesture and it worked perfectly you've just developed a full-fledged react native mobile application congrats our design is completely done both the home page and the details page as well as the search nft so everything is working perfectly this was more of a ui and ux project but if you'd like me to add some extra features or create tutorials on more complex applications with more features just let me know down in the comments i am definitely excited to start posting more react native content once again great job and congratulations on coming to the end of building your react native application as you guys already know here on javascript mastery i always take you one step further so even though we've fully built out our react native application we're not stopping there i'm going to teach you how to create a beautiful looking landing page for our nft application on here you can showcase all of your apps possibilities and features and we're going to also provide a link to the published react native expo application so that everybody who visits this specific landing page can immediately download the pronef application as well as you can see we're gonna also add a lot of these great mock-ups and also the link to the source code this is a great project that perfectly goes hand in hand with the react native application we've already created once you develop it you don't just have to use it for the pro nav application you can use this exact template for every single new react native application that you create and as you can see right here there is a button that's going to lead us to our deployed react native application so everybody will be able to simply scan the qr code and immediately get the app running on their phone with that said let's develop it to start coding out the landing page for our react native application we can create a new folder right next to our initial folder let's name it something like showcase because this is going to be the showcase landing page for our react native application once you've created the folder you already know the drill you can simply drag and drop it into an empty visual studio code window once you've done that we can go to view and then terminal finally we can clear our console and we can run mpx create dash react dash app and then dot slash to initialize a new react application in our current directory this process usually takes just about a minute so i'm going to pause this video and i'll be right back and there we go our app is now initialized before we go ahead and run npm start let's install all of the necessary dependencies for our landing page in this case we'll be using tailwind css it is a css let's call it a framework packed with utility classes such as flex pt4 text center and so on essentially you have these css classes that you can immediately inject straight inside of your code to style different designs this makes it incredibly handy and quick to create a good looking custom design really easily so to set up tailwind we're just going to go to tailwind css docs more specifically the guide for the create react app i'm going to leave the link in the description as well you can come to this page and we can start we already initialized our project so we can run this command by copying it right here and simply pasting it right there this just installed the necessary tailwind dependencies and now we can run mpx tailwind css init dash p this just created a new post css config file the next step is to add the content right here to our tailwind.config.js so if we go back and go to tailwindconfig.js right here we can replace this content and just paste what we copied there we go and the next step is to add the tailwind css directives to our source index.css this is going to allow us to use all of the tailwinds classes so let's copy it go to our and we can paste it right here alongside these three lines down in the description there is going to be an index.css file which you can simply copy and paste right here this file is going to provide us with some basic generic files like different banners as you can see banner 1 2 and 3 banner 4 as well as well as some animations again nothing special no logic is moving around here while we're here we can also clean our source a bit because they're going to be a few files which we don't need for example logo svg can be deleted report web vitals can also be deleted and set up tests this is going to allow us to go to index.js and clean all of the non-used files for example report web vitals here there we go we also won't need the app.test.js so we can remove that and we are left with index.js index.css and then finally app.js which contains our basic react application app.css won't be needed so we can delete that as well we can remove it from here as well as the logo we can transition this function app into a const app to stay new with the es6 plus syntax and we can export it at the bottom inside of there we can simply say h1 that's going to say react native nft showcase there we go and we can save that if we've done everything correctly we should be able to run our application before we do that though you can see that we can start using tailwind in our project by adding these specific class names so let's copy them and just add them to rh1 right here there we go so now rh1 should be really large should have a font bold and should be underlined if tailwind is set up properly there we go so let's close all of the files just keep the app.js here and let's run our application by running npm start once localhost 3000 loads up you're gonna see a few weird errors no worries at all these errors are coming from index.css because in here we're requesting specific svg assets which we don't yet have in our file tree so what we can do is for the last time in this video you can go to the description and then find the zipped assets folder you can unzip it and then paste it straight inside of the source folder right here that's going to give us access to all of the assets such as these banners also different icons and everything else we need inside of our project great i just saved you a lot of time there because now we have all the assets already prepared the last thing we need from our description is going to be the global.js file so we can go inside of the source and create a new folder called styles inside of there you can paste that global.js file as you can see right here it doesn't have any logic it's just going to have some basic styles which we're going to reuse across our entire application for example white text black text h1 text which makes it a bit bigger gives it some fonts also p text description text we've extracted all of the classes here so that we can more easily use them straight inside of our code great with that said we should go back to our localhost 3000 and everything should be working there we go react native showcase we are ready to start with the development of course before we start coding out the layout it makes sense to divide our screen in two different sections on the left side we have our code and on the right side we can see the changes we make in our code live so to start off we can open up our file tree and create a new folder inside of the source folder called components inside of the components folder we're going to have four different components the first one is going to be just a simple button dot jsx component inside of there to really speed up our workflow we can use something known as rafc react arrow function export component once you type it out and press enter it is going to immediately generate a button component if this didn't work for you you most likely don't have the necessary extension installed so what you can do is type es7 snippets there we go and you should be able to see es7 plus react redux react native snippets feel free to install this and then you should be able to run rafce and the code is going to appear with that said we can now repeat the process for three more components the next one is going to be download.jsx again a component which we're going to reuse a lot let's simply run rafc again we're going to have a new component called features dot jsx inside of the features we're again going to run rafce and the final and most important component is going to be section wrapper dot jsx we're going to use this component to wrap each one of our sections again for now rafce section wrapper what we can do now is go inside of our app.js and we can import all of these components that's going to look like this import and that's going to be download from dot slash components forward slash download now we can repeat the process three more times or four more times for the components features and section wrapper but as you can see we already have too many lines if we had a few more imports this wouldn't be manageable so there's a quick trick i can show you to simplify the import and export process the only thing we have to do is add a new file inside of the components folder called index.js instead of that file we can import all of our components such as import features from dot slash features and we can also import of course the download component there we go and finally we can also import the section wrapper the last thing we have to do is we have to export all of them from this single file export features download and section wrapper that's it you might be wondering why are we not exporting the button well because the button is not going to be used itself inside of the app.js rather we're going to use it inside of these other components so we don't have to specifically export it but with this done if we now go to app.js instead of doing three lines we can simply write one line this doesn't have to be dot slash components in the name it just has to be components like this and in curly braces we can specify all of the components we want to import download features and section wrapper there we go just to test things out we can now call these three components let's do download there we go and we can also do features and finally section wrapper there we go we imported all these three components for now they're simply showing a piece of text specifying their name but soon enough we're going to add actual jsx there and create a great looking nfd showcase let's start with the work inside of our app.js inside of there we're first gonna use our section wrapper but we're gonna wrap it in an empty react fragment we don't need this h1 here so we can delete it and the only thing we need is going to be a self-closing section wrapper component we do want to pass some props to it so i can expand it in multiple lines and the props we are going to pass are going to be title which is going to be something like your own store of nifty nfts start selling like this and growing there we go this is looking good then we're gonna have a description a description in this case can say something like buy store collect nfts exchange and earn crypto join and let's do something crazy like 25 plus million people using pro neff marketplace and of course that is the marketplace of our mobile application so we're really going one step further and creating a special landing page for our react native application that's really going to make it stand out later on we're going to add a link to expo so that you can immediately load your application straight from the showcase landing page and one really special thing we're gonna do at the end is deploy this website to ipfs decentralized hosting isn't that crazy but one step at a time next thing we need to pass is show btn sometimes in the section wrapper we do want to show the button and sometimes we don't we're gonna also pass the mock-up image right here which is going to be assets dot home hero of course these assets right here are coming from the folder called assets so what we can do is simply say import assets from dot slash assets there we go and the last thing we're going to pass in is say banner is equal to banner later on we'll be able to pass banner 2 3 or 4. in this case this is just going to be the initial banner now that we've passed all of the necessary props we can go into the section wrapper component and actually code coded out we already know which props are we getting so let's simply do curly braces here and let's retrieve them we're getting the title description the show btn property also the mock-up image and that's going to be it for now right here what we can do now just to check things out and see if everything works is create a few h1s containing each one of the properties so one is going to be for the title one for description with show btn we cannot do anything yet and for the mock-up image what we can do is create an img tag and then pass the mockup image as the source mockup img right here and alt can be something like mockup there we go so as soon as we do this you can already see something we have our great application right here and we also have our heading and our description looking great so far to give some structure to our new section wrapper of course we have to provide some styles so this initial div is going to have a class name equal to min dash h dash screen that's simply going to give it a full height 100 vh we also want to give it some styles from the global styles which you can find right here so let's go ahead and import them right here at the top we can say import styles from dot slash styles forward slash global there we go we're gonna also need the assets for later on so let's go ahead and import the assets as well so that's going to be from dot dot slash assets there we go now we can transition this from a basic string to a template string like this there we go and that's going to allow us to pass real variables inside of there such as styles dot section there we go this is now going to apply some flex properties to it and the text is going to appear on the left side and the image on the right side essentially it turned it into a row we also want to apply one more additional styles which is going to be styles dot bg white just like that because later on we're gonna reverse it for each new section that comes and finally and most importantly we're also going to provide the banner class name which is going to be coming from our props so right here we can say banner there we go this is going to apply this nice bluish background as well as the waves on the bottom it's already looking so much better what we can do now is create a div inside of our initial root div and this div is going to have a class name equal to flex items dash center and we can also apply some styles so we're gonna make this a template string like this you have to wrap it in curly braces if you want to make it a template string there we go then we're going to say styles dot box class like this if we go into styles you'll be able to see that box class simply gives it a property of flex row and on medium devices it turns it into a column so that everything fits properly great inside of that div we're gonna have one more div right here and that div is going to have a class name we can immediately use a template string of styles dot d e s c as in description div and of course we have to wrap it in dollar sign and curly braces we're going to also provide a property called fade left mini and that's going to add a fade animation on the left side so if we reload the page we should be able to see that it's kind of going to fade left in and that's going to be it for the class names of this div inside of there we can add an h1 we can pull the h1 we already have which is going to be this one and let's give it some class names we can simply say class name again we're going to have a template string styles dollar sign curly braces styles.h1 text just like this there we go now you can see it is going right out of our screen because our image is taking too much space so it makes sense to comment out our image for now and there we go this is already looking so much better now we can see our title right here and just below our h1 we're gonna have our description description is of course going to be in a p tag p as in paragraph but it's also going to have its own class name class name is equal to again dollar sign curly braces styles dot description text there we go so now we have this great title as well as the description on the bottom finally in some sections sometimes we'll want to show the button and if we look inside of our app.js this is one of these sections so what they can do open a dynamic block of code and say if show button is true so show button and end inside of here we're going to render our button component and of course the button is coming from import button from dot slash and that's going to be no that's even just dot slash because we're already in the components folder so import button from dot slash button to that button component we can pass to props the first one is going to be the asset url and that's going to be assets dot expo and the next one is going to be the link that this button is going to lead us to in this case that's going to be the link to our deployed nft marketplace react native application so for now we're gonna leave this empty and later on we're gonna deploy our nft marketplace and attach the link right here so for now let's go to the button component and let's actually implement the jsx and the styles for it we already know that this button takes in the asset url as well as the link while we're here we can also immediately import styles from dot slash styles forward slash global there we go r button is actually going to be one div that's going to have a class name is equal to styles dot btn black and of course it's going to have an on click property so we can space this out in multiple rows and add the on click equal to a callback function that's simply going to call the window dot open and we want to open up the link from our props and pass the underscore blank to open it in a new page now that we have our button let's add the image icon inside of it a self-closing image tag that's going to have the source of asset url and it's going to have an alt tag equal to expo icon we can also add a class name which is going to be styles.btn icon and there we go this is the expo icon below that we can add a div which is going to be used for our text so that div is going to have two different paragraphs the first one is going to say view it on and we can also apply some class names to that text so class name is equal to let's make it a template string styles dot btn text like this to make it white and also let's add the font dash normal as well as text dash xs to make it just a bit smaller we can now duplicate this the next one is going to say expo store like this there we go and we can make this just a bit bolder so font dash bold and instead of xs let's make it small just sm there we go we can apply some styles or class names rather to our div and that's going to be flex flex dash column justify dash start and ml-4 which stands for margin left there we go view it on export store and with that done our button is actually fully done it is a really simple button component now we can go back into our section wrapper and below the div that wraps our entire content we can create one more the this div right here is going to contain our mockup so let's give it some class names right here that's going to be class name is equal to let's make it a template string as well flex dash 1 styles dot flex center there we go and right now we cannot see the changes so it might make more sense to add the image inside of it so that we can immediately see the changes i'm going to pull our image above right here that's going to be image source is mock-up image alt is going to be mock-up and the last thing we have to do is add a class name equal to styles dot section img there we go so again it's huge but we're going to style it now with this div let's also add a b-8 which stands for padding 8 and on small devices it's going to be px dash 0. there we go so now if we expand this a bit there we go you can see that this image is still huge it is definitely a nice high definition mockup but we don't want it to be this big so let's see what styles do we have to change to actually make it just a bit smaller to make our content fit more properly let's first remove all of these empty spaces there we go and now we can find this div where is it being open the div that contains both the description and image the div that has flex item center as well as the box class we're going to apply a few extra classes to it with dash or just w dash 11 out of 12. this is going to apply about 90 width then on small devices we want to say width dash full 100 width and on min md devices we want to set the width to be equal to three out of four there we go so now if we save that it kind of looks like even though we did apply these classes right here still our image is not scaling it's not resizing it's not getting smaller on larger devices so what we can do is we can recheck our tailwind config file right here again down in the description i've prepared for you a demo tailwind config file which you can simply copy and paste right here that file is simply going to include some colors as well as some different screen sizes so that everything is going to fit on the screen properly again this is just something to save your time i know we've been already working on this react native application for quite some time now so i want you to go through the build process of the landing page incredibly easily there we go so as soon as you paste that we have our media queries and now if you expand it it's actually looking perfect right here but your yet to experience reacts full reusability right now we have created the section wrapper component as well as the button component which we can reuse for all of our upcoming sections we can go back to our app.js now and look at this essentially we can simply duplicate the entire section wrapper just below if you save this you're now gonna notice that we have two of these sections but with just some small minimal adjustments we'll be able to make this look like the entirely new section first of all let's change the title to something like smart user interface marketplace there we go then we can change the description let's do something really salesy like experience a battery ui of pro neff nft marketplace smooth constant colors of a fluent ui design there we go a bunch of nonsense words but it's kind of better than lorem ipsum or just a basic latin text so you can see we have a new title and a new description now we won't need a button here because we already had it above so take a look at this i just removed this property and the button is gone but now we want to show something different here we want to show the home cards so instead of the home hero let's simply say home cards and we get a completely different mock-up image now for the final detail we don't need the banner here so i'm going to remove it but we do need something called reverse it is a special prop that we're going to pass to our section wrapper and now if we go back we can accept one more property called reverse based on the reverse property we're going to change some styles and make it look even more custom for every new component so let's expand this just a bit and that's going to look like this in the initial div we have styles.section and then we have styles.bg white let's expand this into multiple rows there we go so what we can say is something like if reverse is true that's going to be reverse question mark in that case we want to show styles dot bg white else we want to show styles dot bg primary there we go now if we save this you're gonna notice that this is still looking the same but now we have a white background here i think that was the case before but anyways now we can change this depending on are we on the reverse or are we not on the reverse mode let's paste this out properly there we go and now we can repeat the process with the inner div as well let's expand it into multiple rows right here and we can say if reverse in that case we can show styles dot box reverse class else styles that box class now you can see this mock image is going to move to the top finally in the description div we can also spread that in a few lines we can add a new dollar sign curly braces and check if it is reverse then add a new class called fade right mini so fade from the right side else what we can do is fade left mini there we go to fade from the left side so now if we do this and reload the page you should be able to notice how everything slides in nicely you'll be able to see it even better once we expand the screen to the full width we can add another reverse clause and check if reverse then styles dot text right usually styles dot text left there we go and save it so now the text is appearing from the right side so with just a few adjustments we made these sections look almost entirely different let's move to this h1 styles right here that's also going to have some special styling so let's expand it in multiple rows and we're going to say if reverse then styles dot black text and usually styles dot white text there we go so now in here black text is going to remain but at the top we now have white text which nicely contrasts with the background and we can essentially copy that entire line and paste it for the description as well there we go so description is also now more clearly visible the last thing is going to be our mockup and the only thing we want to change for the mockup is going to be the fade so we can also copy this fade line right here expand the class names to a template string there we go and expand it in a new line if reverse then fade left mini in this case because we want it to be opposite from the actual text and fade right mini if we're not reversing so now did you just see that nice slide from the right side and the text slides in from the left side there we go looking great with that said i think we should be good with the section wrapper so let's expand our browser and explore it in its full glory there we go in our first section we have this beautiful white text on this primary background we also have this banner which is actually floating circles or waves we have this button alongside our great mock-up now if we scroll down you can notice that we get into this nice looking white section with black text where the mock-up is appearing on the left side so it is essentially a whole new section as soon as we add a few more sections you're gonna notice the power of reusability that react gives you so let's collapse it one more time now below our second section wrapper we're gonna render a new self-closing features component we can control click to go into it or just go to your file tree and click features to start off we can first import all the necessary things we're gonna need such as import assets from dot dot slash assets we can also import these styles coming from dot slash styles forward slash global there we go our features are essentially going to be a div that div is going to have a class name equal to let's make it a template string and then styles dot section so as soon as we do this it's going to apply some padding we also want to apply another style which is going to be styles dot bg primary there we go to make it this nice shade of blue and finally banner zero three if we save this you're gonna notice that we're going to have a nice shading animation happening here it's going to be more noticeable once we add more things inside of this div so the second thing we want to add is going to be yet another inner div and this div is going to have a class name equal to let's do a template string styles dot sub section there we go and we also want to give it a flex dash call as well as text dash center inside of this div we're going to have an empty div with no class names just to contain our content and by content i mean the h1 let's say technologies technology is used to develop this great nft application and below that we're going to have a p tag and the sp tag is going to say something like pro neff which is the name of the marketplace has been developed using a cross dash platform technology react native there we go so you're really presenting yourself not only the nft marketplace you've built but yourself as a developer letting people know that you're using these phenomenal cross-platform technologies such as react native to create great mobile native applications such as this one which also has its own landing page great let's give some class names to rh1 so right here you can say class name is equal to a template string that's going to be styles.h1 text like this just to make it a bit bigger and to apply a font and we can also do styles dot white text since our background is pretty blue we can repeat the process for our p tag so i'm going to copy the entire class name and paste it on the p tag the only difference instead of text we're going to use p text right here there we go already looking so much better now that we've added these pieces of text you can also better see the waves finally below this div we're going to create one more div that's going to have a class name equal to styles dot flex wrap inside of there we're going to render a new component called feature card it is a self-closing component this component is going to be used only inside of this file so at the top let's go ahead and create it const feature card it's going to be an arrow function and it's going to have an instant return meaning we can immediately use parentheses here it's going to for now simply return a div that can say something like icon text there we go and it's going to get two props first of all the icon url as well as the icon text there we go now we can call it first time by passing the icon url equal to assets dot react and also the icon text is going to be equal to react native now if we call it you can see react native appear right here but now if we duplicate it we can pass the assets.javascript which is going to be another icon url and we can pass in the javascript as the language there we go so finally now we can go above to feature card component and we can style it out this div is going to have a class name equal to styles dot feature card this is already going to make it a lot different because the feature card styles applies a lot of different styles to create this card looking item it has a bg white a lot of margin padding rounded corners it justifies everything around positions the items in the center and applies a small shadow once we hover inside of there we don't simply want to render the icon text rather we want to render the img tag which is going to have a source equal to icon url we can also give it an alt tag equal to something like icon and a class name equal to styles dot feature img there we go we're going to get these nice react native and javascript icons appear right there the last thing we can do is position this properly and copy this icon text create a p tag that's going to contain this icon text and give one single class name to that text which is going to be class name styles dot feature text there we go just to make it a bit bolder that's going to be it for our technology section now we have great two different sections and then we have just a bit of a different section called features to kind of space it out now we can go back to app.js and we can simply duplicate the section wrapper two more times believe it or not we can essentially duplicate these two and just put them below the features of course we'll have to style them a bit differently and provide some different titles and descriptions so for the first one below the features we can say deployment there we go and for the description we can say something like pro nav is built using expo which runs natively on all users devices you can easily get your app into people's hands there we go this is great so as you can see right here we immediately get this nice title and the description this section is not going to show a button because we're just explaining the deployment and the mock-up image is now going to be feature again completely different finally we don't need a banner here rather we're going to apply reverse so now we're going to have a white section because we had white here we had this nice feature to divide it a bit and then we start with white again for our last section we can change the title to something like let's do creative way to showcase the store we can also change the description to something like the app contains two screens the first screen lists all nfts while the second one shows the details of a specific nft there we go of course you can do something shorter there but i think this just provides a bit more value now we want to differentiate this section from the section below so what we can do is first we can change the mock-up into just assets dot mock-up there we go and we can add instead of reverse we can say banner is equal to banner zero two this is going to make it completely different so as you can see we just copied the original section that we wrote and then applied a few different changes to get a completely different user interface let's scroll to the top let's reload our page and look at these nice animations text is animated from the left side the mockup is animating from the right side and if we scroll down we essentially have a complete landing page comprised of one single section there we go we have our features or technologies we have another reverse section and finally we have a new section with another banner right here just to add a bit more variety we're going to add another section which is called the download section so below our section wrapper we can add a self-closing download button to code out our download we can of course go into it and we can import everything we need for this file which is going to be styles from dot slash styles forward slash global as well as import assets from dot slash assets and with that we have everything we need and we can code out the jsx and the styles for our download the source code section to start with the download section we can first give a class name to our main div we can make it a template string and make it styles dot section this is going to give it some padding and center everything in the middle we can also give it another class which is styles dot bg white although i think it's already white but this should make the background white so when we add some inner divs we can make some difference and contrast between them inside of this div we're gonna have one more div this div is going to have a class name equal to let's spell it properly a template string that's going to say styles dot sub section it's also going to have a flex dash call and text center property inside of there we can have a div that's going to have no styles it's just going to contain an h1 and that h1 is going to say download the source code so if you want to share the source code of your great application with somebody this is going to be the section for that below our h1 we can create a p tag and that paragraph is going to say get the full source code on github there we go we're going to give it a class name to this h1 that's going to again be template string with styles.h1 text property as well as styles dot black text there we go so this is really going to make it pop and we can copy that entire class name paste it to the div as well and instead of h1 text this is now simply going to be p text there we go below that div we can add a button that button is going to have a class name equal to styles.btn primary and it can say source code there we go now we have this button of course i need to fix my spelling here so that's going to be class name and there we go if you want you can apply an on click property or an href to this button so that it points to your source code on github below this button we're going to add a final div right here and that div is going to have a class name equal to styles dot flex center inside of there we just want to show an image a self-closing img tag that's going to have the source equal to assets dot scene and if we save this you're going to notice that we have this nice overlay with five different mockups in one image we can also give it an alt tag which is going to be download underscore png and we can give it a class name right here which is going to be styles dot full img there we go and that's going to be it for our download section so now we have a few section wrappers and if we expand this take a look this is looking great on full hd devices we have our full mockup with the source code right here and finally we are going to finish it up with a nice looking really really minimal footer so let's create a div right here and that div is going to have a p tag right here and we can say something like made with love by we can apply some space right here there we go like this and we can add a span element inside of that p tag so span right here there we go we can add a class name equal to bold to that span and i'm going to type javascript mastery of course feel free to use your own name here as you can see we have the text on the bottom but this is not really looking like a footer right so what we can do is we can first apply some styles to our p tag so class name is equal to let's do a template string styles dot p text and finally styles dot white text there we go of course we have to import the styles instead of this file as well so that's going to be at the top import styles from dot slash styles forward slash global there we go the last thing we have to do is apply the class names to our div which acts as our minimal footer so let's give it a class name equal to bx-4 py-2 so p-x is for padding horizontal and p-y is for padding vertical we can also give it a justify dash center as well as the items dash center there we go if we save this we still cannot see anything because our background is white but if we make it bg primary you should be able to see our content now let's apply a flex dash column for the text to appear in the column and let's also apply the text dash center property there we go finally we can add a small banner zero four to make it really custom and to make it stand out now if we expand this you should be able to see starting from top to bottom that we have a fully fledged really optimized landing page which we've done in a completely reusable way with just a few different sections yet it looks really modern professional and it nicely showcases all the features of our nft marketplace again this was just an addition to the great nft mobile application that we've already done the first react native mobile application on the channel i hope you like this one extra step that we took because if you think about it if you're trying to position yourself as a mobile react native developer or any kind of developer you want to go that extra step and think about it how many developers do not a lot not a lot of developers create a special landing page for the react native application they've created but this just makes it so much more professional one extremely special thing we're going to do is since this is an nft crypto and the web 3 application we're going to deploy this landing page on a decentralized hosting server using ipfs decentralized storage and not only that we're going to use an nft domain from unstoppable domains and if the domain is mintable and once you buy it it is completely and entirely yours again completely decentralized as well as the hosting so if you go on an interview and you present your react native application and this landing page you can really dive into the world of web 3 and talk all about it of course the deployment process is coming right up and i'm sure you'll be amazed on how well the web 2 world is already transitioning to the new and modern web 3. to start deploying our application we first need to add the link to our published react native application we can go to section wrapper and go to line somewhere around 28. there is a button there a button where you can add a link and this is going to be the link to your published react native application in my case it's going to look like this this was the link that you got after you ran the command expo publish in your react native directory so just paste it here and that's all that we have to do so far the next thing we need to do is go to our package.json right here since we're deploying to ipfs which is a revolutionary way of doing this we have to add one more property to our package.json below private we're going to add a property called home page and we're simply going to set that to don here we go the only thing we have to do now we can deploy this to ipfs a decentralized hosting platform to host our application on ipfs we first have to upload it to github so let's go to github you can log in and then go to this plus icon and click new repository you can give it a name in this case i'm going to do something like showcase i'm going to click create repository now we can follow all of these steps inside of our application so right here i'm going to type git init then i'm going to type git add dot to add all of the files to be tracked i'm going to say git commit dash m and then that's going to be initial commit then we have to change the branch to main we have to add the git remote origin and finally we have to push to that git remote origin there we go this took just a few seconds and if you reload your page you can see your showcase right here now we are ready to host our application on ipfs decentralized hosting for that we can use the website called fleek.co you can get on the website and click get started for free it's going to ask you to log in using github so just use that to proceed because we'll need the access to our repository once you sign in you'll be greeted with a page that looks like this we can simply click add a new site let's connect with github it's going to ask you to give access to a specific repository i'm going to choose only showcase that's the only one we need once you give access we can install and authorize and there we go now we are ready to add it to continuous deployment so just choose it right here choose the hosting service ipfs and click continue in here we can choose the basic build settings so let's do create react app it's gonna automatically find out all the commands we need to build our project and let's click deploy site this process usually takes just about a minute so i'm gonna pause this video and i'll be right back and there we go our application has been deployed to a completely decentralized hosting platform the important thing here is that you got your hash back we're gonna use this later on and fleek also provided us with a custom deployed link right here so you can select it right click and click go to this is going to open your site on a decentralized network but purple salad 8288 on fleek.co really we want something more custom so we're going to hook this up with our custom minted unstoppable domain just in case let's keep this site open because we're going to need this hash back on unstoppabledomains.com we can go to domains and then my domains let's mint the domain we want to use in this case i'm going to go with jsmas3.crypto and click free mint we can mint domain on polygon let's continue once we mint the domain we also have to choose our wallet i'm gonna go with metamask as it is the most popular and in this case you'll have to have your metamask wallet installed and setup on chrome i'm going to explain how to set up metamask in just a second but let me show you how simple this is once you actually do have it set up you simply click sign right here and you have to confirm your email even though i've selected one of my wallets you can go ahead and add a new one and with all of these most popular wallets from now on unstoppable domains will also be supporting blockchain.com one of the biggest wallets in the crypto world to download metamask we can go to our chrome web store but before downloading metamask we can focus on downloading the unstoppable extension this extension is going to help us route to our decentralized domain so this is going to be like a gateway to our blockchain domain and it's going to immediately redirect us from our ipfs hash to our custom domain so make sure to install this because this enables you to route to your specific domain as you can see currently the domains are supported natively in the brave browser and opera browser but for chrome firefox and edge we do have to install this extension to make this happen to set up metamask you can go to your chrome web store or the extension store of the any other browser that you use just make sure to search for metamask although i already have it here and metamask is simply an extension for accessing ethereum enabled distributed applications so this is going to allow us to inject ethereum web 3.0 api into every website's javascript contacts essentially it's going to let us interact with the blockchain and smart contracts so let's go ahead and add it to chrome and add extension it's going to appear at the top and we can also pin it once you click it you're gonna see this nice fox and it's going to follow your cursor around and welcome you to metamask let's click get started if you're first installing metamask you most likely don't already have an account so let's click create a wallet let's click i agree and you have to choose your password in this case i'm gonna use a demo password and let's click create now when working with cryptocurrencies your password is not the main thing guarding your account your secret recovery phase is you're gonna be given a phrase of 12 words that are the master key to your wallet and your funds so if this is your first time working with cryptocurrencies or wallets make sure to watch this video first you can pause my video right here and then we can click next i'm going to pause it and click next right away and in here you can click to reveal your secret words this has to be secret and you have to save these words somewhere to be able to access your account if you uninstall metamask so i'm not going to reveal them here what you can do is open up notepad on your pc and then simply copy and paste them there then you'll have to click next and in the next step you'll have to type them out one by one okay i copied my words and you simply need to click them in the order that they were first shown to you i'm going to do that myself here without revealing the secret recovery phase and then we can click confirm after you've entered your words correctly you're gonna see a congratulations screen with the tips on storing it safely let's click all done there we go we can close this and this is our first ethereum wallet in this case i'll only keep one of my wallets and click right here we have to mint our domain to that specific wallet and one more time we'll have to verify by email the minting process started we can click track progress right here and we can see when it is actually going to be minted of course the time it is going to take to mint your domain is going to depend on how congested the network is i'm going to pause the video while the domain is being minted and i'll be right back as soon as it is and there we go while i was talking the domain got minted there we go so now if you go to my domains you can see that this domain is now set up we can go to manage and since this is more than a simple domain it's going to allow you to add your nft as the profile image avatar display name and everything else you might need to add let's check out the website part once we're here we can link our website using the ipfs hash so let's go to link website let's go back to fleeq and copy our ipfs hash we can go back and paste it right here and click launch website we'll have to choose one of our wallets i'm going to go with metamask and a new metamask notification is going to trigger and we can click sign this process is going to take just about a minute depending on how congested the ethereum network is so i'm gonna pause this video and i'll be right back once our transaction is completed we can go to js mastery dot crypto and press enter it's going to load for just a second and then you should be able to see our own showcase website straight on completely decentralized hosting as you can see the domain change automatically from js mastery dot crypto to this special ipfs decentralized url the main feature of course was that we were able to simply type js mastery.crypto or your own domain name and get straight here now you can click view it on expo and there you can just scan the qr code and every single person can see your application as i've mentioned before for chrome for this routing to work you need to have the unstoppable extension from chrome web store so make sure to download built a landing page to showcase our application and finally we've deployed it to a decentralized hosting platform and found an nfd domain to match its purpose with that said if you'd like to see more react native videos on the channel comment down below i'm looking forward to your thoughts i'll see you in the next one have a wonderful day [Music] you

Channel: JavaScript Mastery

Views: 467,298

Keywords: javascript, javascript mastery, js mastery, master javascript, react native, react native tutorial, react native app, react native tutorial for beginners, react native crash course, react native app development, react native expo, react native app tutorial, build a react native app, react native nft marketplace, react native modern ui, react native from scratch, react js, javascript tutorial, react js project

Id: _ivIUCSOZ78

Length: 188min 13sec (11293 seconds)

Published: Fri Apr 01 2022