Build an eCommerce App in React Native ( Tutorial by ex-Amazon SDE )

what's up new jazz developers welcome to a new live stream i'm so happy uh to see everyone we missed a week but today we are live with a new build and probably this is one of the most requested build on my channel because everyone was i was saying like hey when is the ecommerce website so yeah today we're gonna build a full stack e-commerce tutorial based on uh amazon uh amazon uh website or amazon application and uh yeah in this video we're gonna do everything regarding the ui the next videos we're gonna do the back end and the third video we are gonna do the payment integration so by the end of this series uh you're gonna have a ready full stack uh ecommerce uh that you can continue uh improving and later on um deploying to market war um yeah so um yeah this is this is a tutorial uh for any levels so uh you don't have to uh no react native if you are just new to rack native that's gonna be fine because we're gonna start slowly i'm gonna explain everything i'm doing we're gonna start from scratch uh and um yeah step by step we're gonna get into more advanced features uh such as back end and payment integration and so on so um let's have a look at what we're gonna build by the end of uh of today's video so yeah we're going to start with a search page with products because i think that this is the most important page on a e-commerce website and here we're going to display a vertically a vertical scrollable list of products with their images titles price reviews and so on also the in the top bar we're gonna have like a search bar where you'll be able to search different products and so on after we you press on on a product on this page we're gonna redirect the user on the details page and here we're gonna uh display more details about the product also cool feature will be this uh image carousel where we will be able to swipe for different images of the product uh yeah here we're gonna have more details about the price we're gonna be able to add the product to cart or to buy it instantly to choose different options of a product so yeah i think that we're gonna we we have like so many features planned for today i really hope that we manage uh to do them in time um yeah after the product details page when you add products to a shopping cart then you'll be able to view this shopping cart uh here you'll see uh all the items that you have added to shopping cart you'll be able to change their uh quantity you'll be able to see the total and so on after which you'll be able to uh proceed to check out which will lead you to this page where you'll enter uh your details and yeah we will build this in uh react native like all the form management using like state and so on so yeah i'm pretty excited about this build let me know in the comments right now if you are also excited so regarding front-end technologies we're gonna use react native of course um i think there is uh no react native e-commerce uh tutorial on uh on youtube i saw a lot of uh tutorials like this uh in react.js but we're gonna build it in react native because we want to build a mobile application uh we're not gonna use expo we're gonna use react native cli for people that are interested um yeah what else we're gonna write our code in typescript and if you don't know what type typescript is don't worry it's the same javascript only with uh types so yeah this this will make our code uh more secure and will take care of um some issues that might arise with javascript so it's nothing too complicated i'm gonna explain like how to define these types and so on uh from libraries we're going to use react navigation vector icons to render the icons in the application to manage the navigation and we're going to do everything in modern uh yeah technologies we're going to use react functional components hooks and so on okay so what will you learn because this is this project is with educational purposes so we don't want just to copy something we are doing this to learn so first thing you will learn how to set up a react native project um from scratch then we're gonna get into rendering building components and uh creating with them beautiful ui designs uh such we will use uh components such as text view images lists uh and so on after that uh we're gonna create our own components but we will be able to reuse throughout our application and yeah in react native it's very good to create separate components for everything to separate the code into smaller components order not to have all the code into the same file and have it unmanageable try to to keep your components small and yeah it's going to save you a lot of time in future yeah we're going to use for our components functional components yeah we're going to learn about props this is how you send data from a parent component to a child component it's very important to have these reusable components and to receive data and to have them reusable after that we're going to speak about the state we're going to implement state management inside the component what else navigation to navigate between screens we will have a stack navigator we will also have a tab navigator like in the bottom uh usually a lot of applications have this bottom tab navigation we're going to have that as well we're going to learn how to install third party libraries and also we're going to speak about react native best practices all right so if you're new on this channel hello my name is vadim and welcome here uh yeah a little introduction i'm a full stack developer for over seven years at the moment i am the cto at a small startup uh in the sports industry i also uh worked at amazon as a software developer engineer and yeah i'm passionate about coding uh building impactful startups sharing my journey and my knowledge with you here on youtube uh yeah don't forget to check out my twitter and instagram follow me there i try to i started posting there more often so let's connect there and stay in touch during the week uh big thanks to our new channel members that have been subscribing the past two weeks so i'm gonna try to read their names sorry if i um i spell it wrong so first one web goonie sebastian thank you very much ahmed thank you jay dev cast thank you very much judy and then maxime guys you mean the world to me thank you for supporting the channel and making this possible uh okay let's finish uh the introduction shortly we have two more slides and then i'm gonna be able to yeah talk with you in the live comments all right so a little disclaimer here i think that this is important uh yeah this build is for educational purposes only uh all the views opinions technology choices uh everything expressed in this video are my own uh and do not represent the views opinions technology choices of any entity whatsoever with which i have been i am now where i will be affiliated and yeah this is important because i worked at amazon however this build has nothing to do with my experience at amazon i will do this in different technologies in react native based on some screenshots that everyone can see on them on their website so amazon is just our inspiration for this project and yeah one more important thing is that i don't want you to um to get the wrong feeling or i don't want to um yeah put amazon or any amazon employees in bad shade because what i'm doing here i'm doing at just a simple mvp i'm not covering like by far uh all the features that amazon has like this build is just a drop in the ocean and uh because yeah like at amazon there are thousands of uh smart developers working at this website for decades not even years and yeah it's it's a lot of work the website is very big so yeah don't don't get the impression that you can build amazon in a weekend and uh start competing with them because that's not the case um yeah i had great teams there everyone like is amazingly smart so hello there all right with that being said uh what will you need from the prerequisites uh you'll need the dummy data i prepared uh all the dummy data that you'll need throughout the build the images icons also this pdf presentation also can be found on assets.notjust.dev amazon also you need some coffee i have it here let's go and yeah the introduction is done hello guys how are how are you doing let's see uh i see most youtube react native videos only test on ios doesn't track native work on android uh yeah let me put it straight the build that we're gonna do today will work both on android and on ios so if you're working on a windows machine or linux machine you'll not be able to test it on ios simulator go ahead and test it on android emulator everything should be working the same advent i will try to test it on android to make sure that yeah everything is working uh however i try i try to to test it on android during live streams but my pc um does not agree with that so uh it's it's very slow uh so that's why i have to test it on ios it runs much faster yeah because i do everything on my laptop like streaming i have a lot of tabs open and so on that's why but you go ahead and test it on android stay hydrated yeah hello brother great work thank you very much okay we have some donations awesome do we have them here yep so jefferson daniel thank you for that donation do you have any questions priyank thank you brother you're always here uh you're the best what is the back end uh the back end for this project will be drum rolls uh edible assemblify but we're gonna get to that later okay let's see some of our questions and then we can get started hello from south africa hello zach hello from tasania hi uh thanks for sharing my pleasure greetings from korea hello greetings from mexi mexico mexico hello please have some functionality for e-commerce up yep that's what we're gonna do today greetings from miami oh jefferson hello miami can you run the same app on android yes i said that yep uh clinton hi excited for my first life with you watched all your videos oh that's really awesome i saw uh dax as well is the first time catching me uh can you let me know down in the comments like what is your local time i'm trying to to do the live stream too so it will be easy for everyone to join but yeah the world is too big and i cannot do that okay okay let's uh yeah i saw you got some t-shirts uh i need one yeah i have them here oh come on i have an aws amplifier let me change the screen yeah we have a heaviest t-shirts uh i won them during the hackathon that we we did in a 12-hour live stream way from cash node and amplify we arrive today all right guys so yeah i'm gonna do some research based on the times that you're uh dropping right now um okay ready let's get started because we have like with every live stream uh i'm setting myself bigger goals and i'm i'm going crazy like with even more features because i need to to cut a lot of features in order to to manage them to do this in a three four hours live stream but it's always like more and more like this is also important i want to show them this as well i want that feature like for e-commerce so let's get started uh okay for uh for this build we're gonna start it from a template and that template uh needs uh the latest version of react native cli so i didn't have the latest version i have i had a very old version on my pc and i uh reinstalled it i upgraded it you can do that uh following these steps first of all you uh uninstall the world legacy version by running this command then you install it globally when you react native community cli either using yarn or or npm depends on what you have and after that you can run react native dash dash version and you should have a version uh starting with five dot something so after doing that uh yeah because of this upgrade i had an issue and i just want to let you know maybe someone will have and it will be helpful i had an error running application on ios and the reason was that they had a space inside the path name of a project the error doesn't say that it's a weird error but i i research it and if you just remove a space delete node models yarn lock the log files pod files for ios and pod file log then reinstall again the libraries [Music] after removing the space from the path name everything will work as expected so um yeah next step next step we're gonna create a new project uh and i'm gonna use a template uh because i have never used templates uh to boost up react native projects and i always found it very helpful when um expo had these templates and then i said like why can't i use the templates from react native so yeah i tried that for this build we're gonna use this react native template typescript it's a very clean uh template it only comes with typescript i am planning to prepare um a template for our builds that will include some libraries that we always use such as navigation uh vector icons i think this are very important libraries that most of the projects are using so i'm going to prepare it for our builds but in this build we're going to use this one yeah they also mention here about this issue okay so uh to do that we are gonna uh bootstrap the project with react uh init the name of the project there's their template and the name of a template in this case react native template typescript uh i already did that because uh it takes around five minutes so i didn't want you to waste the time here waiting so what i did i did react native init the same thing as here after it initialized everything successfully uh i then uh opened the folder uh yeah i went into this folder with cd amazon clone when i open the folder in my visual studio code and that's it in this terminal the rest i'm going to show you here so let's go into our visual studio code in one terminal i did yarn start you have a command there as well this will start the development server and uh you if you're using npm you can also do npm run start that's gonna work uh and in the other terminal uh you're gonna run the application on your uh device so it's either yarn ios to run it on ios device or yarn android to run it on android uh yeah if you're using npm you will do npm run android for example okay i hope that's clear and yeah that's everything that i did and here on the right we have our application uh this is where you have a getting started application it has a simple page to show you that it's working so um going back in our visual studio code let me know if you can see the font well or should i make it bigger but i think bigger i will not be able to work so yeah here in app.esx this is entry point for our application this is where everything is displayed like this page i don't know i can write here not title but what hello world if i save everything will be hello world here okay that's another point um yeah at this point we have uh we have bootstrapped our react native application it's here we see it we are able to change we see the changes right away in our application and we are ready to start working okay the next step next step one more boring step uh and then we're gonna get into the interesting part so now let's install the vector icons library this is a library that uh will help us uh render uh icons it has a directory a very huge directory with almost any icons that you'll ever need i highly recommend it using it very simple to use so let's do yarn add react native vector icons this is the first step to install the library we can open it also here let's open the package because we will need to do one more step okay here the installation guide here is awful uh it has a lot of steps and you mostly don't need to do anything so follow what i do uh let's go here where is it list of available font copies yeah we need this uh list of uh fonts uh and we need to we need them because we want to copy them in our ios uh build so let's go into our ios amazon clone and here where is info dot p l i s t list i don't know how to pronounce it and we scroll down here and before closing the dictionary uh here yeah we add our uh array that we copied make sure that is before closing the dictionary and yeah after whatever the last thing is here so let's save this uh and the next step uh yeah add ui up fonts to info and then to android is to yeah in android up build gradle we're gonna write this that's the same thing just for android android will make sure to copy all the fonts from the library to copy it uh inside the build so let's go to up build gradle android app build gradle and yeah at the end of the file we do apply here like this and i hope it will work right right yeah and yeah for um if you're doing it for ios and that's only if you're doing for ios don't try to run this command if you are on windows on mac os or linux we're going to install the pods to install the dependencies for auto install ios like this if you're testing on android you just need to rebuild or re-run the application on android just doing yarn android one more time and this will make sure that the new fonts will uh will be added to your new build and you should be able to see them there so let's grab an example here of a font i hope we have some examples just to make sure that we are able to render them yeah here i can okay uh in our update esx let's try to import the icon and let's try to render it somewhere on the screen just to make sure that it's there so here after hello world i'll put the icon let's save and yeah uh this is uh an error because i didn't rerun the application so so let's do yarn ios this will rebuild the ios build we'll run it and we should see the rocket icon okay while this is doing let's have a look at the chart here from brazil hello davey no way i am sold let's go is rack native for both ios and android yes it is this is the advantage of uh writing your application in react native because you write it once and you have you have it for both ios android and also for web if you want yeah great technology how many hours of life uh today so i can set my time um i hope it's gonna be less than four hours i wish it will be like three to four hours more than that like it's not sustainable waiting for the back-end and payment integration tutorial that's next week at the same time um what's the time because with the time change current gmt time so confused with time zones yeah at 2 pm gmt every week friday 2 pm gmt we are doing lives here so don't forget subscribe to the channel a lot of you haven't subscribed to the channel i know okay thanks for these videos we're helping a lot from suriname hello roewell thank you for joining you're doing great job man thank you very much uh okay we see here the rocket uh question why is it dsx and not gs uh because we are doing it in typescript i see some of uh yeah people are saying that um yeah it's the same thing like inside it is the same thing with just some little changes like we're gonna define some types i'm gonna show you how to do that uh for example here this is the the only difference here the section will receive a title and in javascript you don't have any type so the title can be numbers can be strings can be anything so if you have somewhere titled dot 2 upper case because you know that the title should be a string and then some other components some other developer are sending a number where are sending and define null uh boolean anything your application will crash because there is no function to uppercase on a boolean for example so that's why typescript comes in here and helps us because we can say that okay i expect a title but it should be a freaking string and now everyone which will be using this component they will not be able to pass in something else they will have a red uh arrow like this and they'll know like okay maybe i should cast it from a string to something else if it yeah from a number to a string if it's not already a string so yeah this is mostly the only difference about typescript and javascript but yeah highly recommend learning it because it's not that big of a jump from javascript but it will improve the quality of your application like a lot so we have installed the vector icons i really hope that they are working on android as well test them out if someone is doing that live let me know in the comments i'll test everything at the end yeah let's move on so now we get into the interesting part but no before that let's clean a bit our project because it has a lot of things here so okay let's close everything but we will not need uh app.tsx here you know what um we're gonna delete most of the things that we have here for example styles at the end we will not need the styles um the scroll view everything inside the scroll view will delete so copy everything from here and we're gonna leave only the safe area view uh status bar and that's it after that we're gonna add here our pages okay what else uh yeah that means that now these components section should also be deleted so let's delete the section and here we can remove a lot of unused dependencies like this i think i can do command dot and remove unused declaration delete all unused imports yeah and then one more time to fix something else command dot fix all prettier okay this is better so now our up uh screen yeah it's very minimal uh it only have a safer review a status bar and then we're gonna add everything that we will need here down below okay keeping our up.tsx clean we will need to separate our code into different uh components into different screens so for that reason we will need uh let's create a src directory and we're going to put all our code there so what we will have let's create a folder in src for our screens uh this is what where all our screens will uh will be defined then another folder called components this is where we will declare all custom components and i must name up compo then components yeah like this it looks weird but i hope it's correct okay what uh what else what else um yeah we'll see we'll see we'll see uh what we'll need because yeah we can get started with this uh you should have downloaded the assets uh so i'm gonna show you where rv right now before getting into the code so uh yeah you should have downloaded this amazon ss.zip if you have a look at them i have here's an image with the colors of amazon but we that was going to be helpful for us to choose colors uh the presentation and also the data so let's grab the data inside our project let's yeah copy it and i'm going to put it in source will be able to do that come on if i drag it it will move it right oh no okay so here in data yeah i have this entry point which is a markdown file you can view it like this and here i have all the product images that you will need uh i prepared it for you so it will be easier for you to yeah not start searching for images and focus on your code open somewhere else uh and then here you'll see uh the files and here i described uh what is the data structure of the files we have a product uh which is a list of products that we have we have product and this is one individual product with more information for the details page and also we have a cart and this is the information that we will need for our shopping cart um [Music] yeah here is the data you can have a look um products product products and so on okay yeah having said that yeah we know about our dummy data yeah we can move on how can we use snippets in webstorm for react native i think there yeah i'm using a library um yeah i'm not gonna stop now i i'm gonna prepare a video for my vs code setup and i'm gonna speak about the snippets that i'm using a lot of people have asked i'd be happy to pay you to build cameo up clone name your price uh yeah guys if you everyone else wants to see this application drop some comments below and everything depends on what community wants don't need anyone to pay me if a lot of people are requesting this i'm gonna do it of course because yeah it's i'm happy to build projects um yeah let's uh let's get going so here we have uh here we have our home uh home and search screen where we will see yeah at the moment we see a lot of information here uh so starting from the top where is it yeah starting from the top we see here a search bar where we will be able to search for different products uh then some uh filtering here and the page with the results at the bottom we uh see the navigation that we're gonna take care later so let's focus here on what is the smallest component that we can start building and yeah because in react native we as i said we split everything into smaller components and here i would say that the smallest and also the most important component from this page that i see is this product item component because it's the same component but different data here is the same component here is the same component here the only difference is the data that they are displaying but how they display it's exactly the same so that's why we will be able to create a custom component by sending some data it will render it and we're gonna be able to reuse it so what uh okay let's move to the next screen because i want to focus specifically on this component so here it is uh what is this component composed of first of all from high level we look that it has two columns the first column contains an image of a product and there is the right column okay in the right column we see that it's not only one thing it has some multiple information the first one is a row inside this column inside the big column we have a row uh that will display the title then we have a row that will display um our uh how is it called ratings and at the bottom we're gonna display a row with a title with a price sorry okay let's start building this thing and yeah let's open our visuals to the code and start coding it okay for this i'm gonna create a new screen a new separate screen for our let's say home screen let's let's define this as the home screen so in our source screens i'm going to create a new folder called home screen and inside the home screen i'm going to create a new file called index dot t as ts because it's typescript x because we're gonna use um jsx one cool feature because we are using uh react native uh 64 right 60 0 64. where is it react native 64. yeah i know that we don't have to import react anymore so let me general erect native functional component uh this is the boilerplate that i'm gonna use and yeah as i heard we don't need to import this react here let's see if it will work i'm gonna change the name here from index to home screen let's copy this here i'm gonna add some preacher is not happy with this come on i think i should disable preacher because i'll spend so much time just making sure that it works so hello okay so now we we have defined a very small component for our home screen so let's go into our app.esx let's import our home screen and render it inside the app to do that i'm gonna write import home screen from source screens do you want it like this source screens home screen and to render a component we do that similar to how we do uh with built-in components home screen like this uh if you're coming from web development it's yeah it's the same as we would render div or h1 and so on uh yeah can't find variable react so apparently i was wrong but i read in their blog post maybe you need some settings in order to for it to work without importing react but that was a try from react right save okay we have there hello it's there okay let's delete the text and here render um product component so our product component let's start with a view for the container of a component that is going to include everything and the view will have a style for the styles we're going to define them shortly but let's define them now const style equal to style dot dot create and here we're gonna define all the styles that we will need first one is gonna be style styles let's call them styles dot root we're gonna have it here and we're gonna define them later like the styles that we need there so what do we have inside our view uh our view is the whole container yeah the whole container and as the left column the first component here it's an image so let's do that let's render here image what are you doing i image the image needs first of all yeah style styles dot come on did they do something wrong yep most probably i did something wrong uh image and then a source what's going on what's going on here view what i don't like has no corresponding closing tag no you have one yeah okay here i didn't close the the image uh we need to import the image from react native and for this for the source uh we need to define like what image we want to render so we're gonna send an object with uri and the uri we can take it from our data somewhere here yeah we have a uri we can copy it and drop it here drop it baby okay after defining yeah the image will need a width and height uh to be displaced so i'm gonna go with some random numbers right now just to see that is there height 250 save yeah it is there okay so what else what do you complain here okay guys should i just disable typescript um prettier because yeah it's gonna mess with me okay so the left column uh is done now for the right column we have here uh more things inside it so for that reason uh i'm gonna put them inside another view just to just encapsulate all of them to to be able to render them in different rows the first one will be a text for the title i'm going to open a product here copy some text from here because i'm lazy and i don't want to yeah like that uh we have a text uh what else do we have there we have a rating oh the rating will be interesting uh ratings and as the last row here we have the price so price is another text letter is to say from dollar sign and here the price for example 13 59 okay yeah now we can start styling everything but before styling it let me add some styles here so style style is equal to styles.title then i'm gonna copy it for the price as well price okay let's define here the title the price and i will start with the root so uh for the road right now we see that our image and the text are displayed in different rows but we need to display them in different columns to do that we're going to specify the uh justify con flex direction not justify contact yeah flex direction will be row it's going to be one row and everything else we're gonna display there like this uh okay uh what else does our route need it will need some margin because it touches the borders so the margin let's say 10 then um it needs a border you see that it has a nice gray border here um yeah so border border weave will be one pixel and border color like a gray ffff i don't like it call her speaker come on like a very light gray this is going to be a d1 g1 d1 that's okay that's okay what else some um yeah our corners right now are very sharp so we can make them a bit more rounded by doing border radius five yeah that's okay and overflow if i do overflow hidden will it do what i expect no it's not gonna do what i expect but it's okay because the issue right now is that where is it uh here on the left the image still has sharp corners but on the right it looks very nice with round corners i can even increase it to i don't know 10. yeah that's okay we can also add background color here background color and fff for the white to beat white okay that looks better all right for this view i will need some styles here just to add some spacing around the text so styles dot right container let's call it like this i will have here um padding or yeah let's do with padding padding to add some spacing inside where i have a container then let's not forget to add here comma and now we have here this space between the image and also on the top and so on okay for the title for the title i see that the title goes beyond the screen i will try to fix this by going here in the text and saying that it can have a number of lines it can have three number of lines three lines okay and here for the title maybe i have to add weave 100 to save it it shouldn't be larger than the parent 100 title why do you do that title right container let's try it with a background color red what's going on here yeah right container why because the root should have with 100 percent of the whole screen we should take not more than 100 right why you do not work fifty percent no i will add everything hmm will it work with flex one no because what do we have here i have margin right yeah i have margins so i will delete the margins from our root where do you go there why is it so i will have to add here to the home screen uh some styles as well so styles page and for the page let's try a flex one here by the mess around so for the page the page will have uh padding because we need that space back so the padding will be 10 as we said uh what's going on here with the root [Music] title petal will not need this right container where is the right container going yeah flex one here for the right container okay does it display everything bluetooth usb yeah it displays everything there okay so the page does it need to be 100 no it's default 100 root of the component you have a component should have 100 percent no no right container yeah i shouldn't have messed up with any weave because everything works just with flex for the right container okay so uh let's think about the image the image um i have looked at we are doing so um i would say that weave yeah but we we shouldn't say the weave we will use flex so if i use flex one here and flex one to the right container will be both of them will take half of a screen but i want the right container to take a bit more so two for the right container i would go for two for this one and three for this one something like this because if we look here yeah i think that is two and three here okay uh and the image should also have a property uh resize mode because it depends on the screen size how we will resize the image so we want to say uh contain because we want to display the whole image even if it will not cover the whole page because right now let me try to show it to you 50. [Music] yeah right now uh we we have our size mod contain and we see the whole image even if it has some white space around however if we will say cover then we'll not have any white space it will cover the whole space that it has but it will crop some of the image so in this case i think contain will work better for us so going back to flex2 uh yeah i think that that's that's good regarding the height but yeah that's okay the exact text we just need flex one the title will will need um yeah it is displayed with a little bit larger text so font size will be 18. okay that's good and we will already see that if the text is too long because we set the number of lines free uh it will automatically add three dots if it cannot render the whole text so it will stop add the three dots and that's it because if we have here four lines it will render whole text but that's not what we want we want maximum to have three lines there if it doesn't fit it will put three lines okay for the title it's okay um price as well i think the same font size is it uh font weight bold i don't think so but we can try so let's try font weight bold okay that's good uh the last step will be to yeah to render our ratings right okay for the ratings for the ratings we will add a new view with style rating styles ratings container inside this view we will display five stars and we're gonna display them using vector icons let's vector icons directory and let's search some some icons for v-stars okay uh it's my internet is very slow star come on uh star and star hollow um let me see the style we are not that round fear something like this oh for from the phone to awesome i think i will use star and and they also have star half star half empty we will need this one so font awesome let's import them from here where is it uh import font awesome from react native vector icon slash and awesome like this and here we will render the font awesome name will be uh star size let's try 18 and for the color it's gonna be the color that we will see here this orange e4 7911 e47 what 7911 save star not start vadim oh that looks awesome okay so let's uh for now let's just uh copy paste this icon and we'll see if we will improve it okay like this uh last one we can say but it's a star dash all and the yeah this one will be star dot uh slash uh how how is it star half empty oh there is a star half empty and star half full which one should we use guys of course star half full because we are optimists cool okay so for the ratings container we will okay and yeah before finishing here we will also have a text that will render the virtual number like how many ratings there vera so friend something like this okay so for the ratings container i'm gonna add it somewhere here we can do it at the bottom and we need to display them in the same row so we already did that for our root we know to do that by flex direction row and now they are displayed in the same row [Music] yeah we can add some styles here for each icon to add some space between them because we are touching right now and yeah we need to keep distance because it's covered in stuff uh star i will add it to all of them star will have margin not a lot like free it's a lot too yeah that's better we see that the title is not horizontally aligned with the icons to do that in our ratings container we will say either align items center let's check center yes line item centers and now they are on the same like horizontal line with the stars uh okay i think that i'm happy with uh with how it turned out we can add also some vertically vertical margin margin vertical to the ratings container like 10 to have like more space between the title and and everything or a5 yeah and yeah i think with that said uh our ui looks very similar to um to this ui we display the title we display the stars how many ratings uh the price um yeah i'm pretty happy with that um what else i think that um i wanted to also render a old price um i'm gonna disable pre-tier for entire no disable pre-care for the whole project do we have it okay the very display like this more readable yeah i agree that's good um yeah i wanted to display also the old price so if there was an old price we'll display it and we will cross it from there so let's add that text inside text because we can because why not uh and i'm gonna add here text and i'm gonna have a different price something like this and the style will be equal to world price old price font size can be [Music] 12 i guess font weight we don't need it bold we can do how is it normal i hope it's called normal um margin uh left let's add five pixels margin from the left or padding padding oh it doesn't want okay i can do some space here css where is all price and text decoration text decoration line line through this will show it as like this i will scroll zoom in a bit so hopefully you see it better yeah and right now we also display the old price that is crossed uh it's a very common feature in a lot of e-commerce applications um okay we have all the code for our component but everything is still inside our home screen so like this we will not be able to reuse this for different components and so on because everything is in the same file for that reason next step will be to um to create a separate component for this product item and we're gonna do that inside our components let's create a new folder uh the folder will have a name i know um product item something like this uh inside product item let's add the index.tsx uh here we're gonna do react nadi functional component the name will be product item product item and uh instead of these views we will copy everything that we have in our home screen for our render product so starting with this view until you have a last one from here only the the last view you shouldn't copy it yeah i'm gonna cut it from here and i'm gonna paste it inside this one let me fix a bit of that yes let's import there yeah we will need image we will need uh view we have text uh we will need font was some from here in our product item we need to import it there oh come on preacher don't give me a hard time and styles for styles in home screen i decided to declare them in the same file but usually in yeah in bigger projects it's advisable and what i do i create a separate file inside the component called styles.ts uh yeah make sure that it's in product because i didn't yeah like this it's in the product item styles and here i can uh declare them con style sql style sheet first of all let's import the style sheet from react native import style sheet from react native no native and at the end of the file we're going to export with styles export as default export default styles and by exporting them we will be able to import them in our index.esx from our product item so here we do import styles from dot styles from this directory styles from this file that we just created let's save yeah i don't see any issues here uh now we can move on move back to our home screen because we don't see anything uh on our screen um i'm gonna clean everything except the page from these styles because we need the page here and we will want to render our product item in the home screen so to do that we import it the same way as we would import like a component from react native we do it from um product item from two components product item and we render it yes simply by calling product item save and it's back there however yeah i can remove the image there and text we don't use it here save yeah uh we see it here that's really cool but the most important part is that we can yeah duplicate it and we'll see two products and three products and four products how uh as many as we will would love the only thing is that we need some spacing between these products so back in the product item styles i'm gonna go to the i don't need page here in the root i'm gonna have some will it work margin 10. back to how we started so 10 is too much 5 5 is good and in this case we actually in the home screen not no we need it okay we can do here margin vertical yeah margin vertical five yeah that looks much better okay so now we have uh individual components uh product item and by just using it it will display this component in our page we will be able to use it anywhere in our application for example in the search page we can use it uh in the shopping cart we can use it to recommend our products so yeah just by doing this a separate component it will help us here reuse it anywhere we will need it however right now all the data is the same so all the components are rendering the same data yeah all the components are using the same data which is not what we need uh we need a way to send to send some data from our for example home screen we will we need to send the data to our product item so that the product item will know what it should render not only how should render but what should render what data it will need to do that uh yeah we can send this data as properties of this um of this component of this tag similar to how you do that for i don't know like uh in html you have a d image with source uh something like that and then alt and this is the properties this is how you send properties to the component the same way we're gonna do it here for our product item so our product item will render an item but we can define we can define here let's say const no oh you know what i'm gonna start using our dummy data because why did we create it so we have our data and we have our products this is a list of products so let's import import products from uh data products and here for vitam i'm gonna send the first product in that array so products at position zero elemental okay no no worries uh yeah if we look at this file yeah we have an array here and each um each item in this array represents the data for one product in our search page the first one here is the clean architecture book then is clean code then yeah it's other projects with different images ratings price and so on okay this is how we send data but now the idea the the thing is how we will receive this data and how we will read it so back in our product item index here we go we will receive the properties here in the function um properties props here has any okay in rat native uh in javascript that's enough you just write props it will work like this here as well but because we have um we have typescript uh yeah we need to declare some types like what what type like what properties do we expect from uh whenever we use this product item i'm gonna define them here as product item props this is going to be an interface an interface is a way to define like how will objects look the interface will have so what properties do we have if we look here we have an item property let's grab item this is the item and the item will be what will it be will it be a string will it be an um i don't know uh boolean it's not going to be a string or burial it's going to be an object of different uh properties the first one will be for example id uh if we look in our dummy data products yeah we have id title image average rating ratings price and oil price so id was going to be a string title is going to be a string image it's going to be a string it's a url um what else what else what else do we have here uh re average rating this is going to be a number um what you don't like here quick fix things prettier problem okay you want it like this i will do it like this uh ratings also number price number and old price is also a number but some of these properties are optional so we can define uh but we are optional by writing a question mark i don't remember where is it here no i think it's here question mark yeah and now well price is optional because not all of them will have an old old price [Music] yeah okay now if we look at the home screen here where we send the item it knows that it expects an item and it doesn't have a red arrow here it has a red arrow because it doesn't know what type these products is but don't worry about that so uh we receive this information we receive it here in probs then let's take it out from the props so the cost item equal props dot item because yeah we send it as item uh yeah this is the long form a shorter form how to do this is if we have item here an item in the object we can simplify it by saying okay the structure there the structure of item from the props and also you can if you don't have a lot of properties you can do it directly here so we take the item outside the props directly here all these three steps are the same so use the one that you feel that you understand and feel comfortable with okay let's start with uh image so for the uri here we're gonna uh instead of um passing uh yeah hard-coded image i'm gonna say item dot image and you see because we define the types vs code will already suggest us properties from there okay like this oh come on uh this is our title right so uh to access a variable inside our jsx because we cannot do item dot title because it will just render it as item.title item.image and define is not an object oh yeah yeah because i'm not sending any items here so let let me first delete these ones and leave only the one with an item uh undefined is not an image products products products like this sorry for my typo okay where is it yeah we cannot do this just item.title because that's what it gonna show so whenever we are in jsx we want to access some uh variables or functions from javascript we put them inside curly brackets and now we render the actual title that we receive in our item uh what else we have here ratings container okay we know the ratings we're gonna have some logic here so wait a bit let's render the what the number of ratings item where is it item dot ratings yes and then for the price here we're gonna render item dot price and here item dot old price like this however if our item will not have an old price because it's possible we're gonna still render this dollar sign so we need to render this text conditionally only if item has an old price to do that we're going to put it inside curly brackets because yeah that's going to be a javascript expression and here we're going to do some magic so we're gonna say item.oldprice and the text this means that if itemholdprice display the text if if it exists if item has an old price display it if not just ignore it uh preacher what do you want yeah it wants it like this so in this case we don't render anything even this dollar sign however if we add back the old price we render it correctly this is how you render conditional [Music] conditional air components conditional views inside react rack native yeah this is the condition this is what you want to render okay only this component is taking us so much time um what do they want to do with these stars right with these stars with stars i'm gonna delete all of them and i'm gonna i need to loop five times for this and render it five times um so yeah i'm to put it inside um yeah javascript expression and here i need a an array of fifa elements um how to declare easily javascript array of five elements javascript array of and elements how to create okay it's new array dot something so new uh ray we need five items and we need to map through each item like five times and for each item we're gonna render these star save i messed up something here okay one more closing bracket like this now i didn't want to do it does it need like this hmm come on where are you oh come on should i do it with a for loop no easy like this dot map looks stupid i know will work let's hope what's going on here yep i said it will work so this is the element and this is the index of the element okay index right so for the index we have a number rate average rating so we need to say if uh the star that we want to render right now is less than the average rating we will display a full star because yeah it's to the left of where the average is if it's to the right we're gonna display a full um star so i'm gonna do that logic here inside the name of a star the logic will be like this if um the index or yeah i can call it i if the index of v star is less than uh item dot average rating then the the icon that we want to display is star otherwise is star o average rating two yeah it works but it should be if uh index is less than uh meth dot floor just around the average rating yeah like this so if it's 2.2 we display two if it's 3.2 we display three it is four we display four if it's 5.0 it's all of them okay that's perfect for okay yeah so i'm i'm not gonna spend time for displaying like half a star uh the logic will be pretty similar you will check if if it's uh between these two values you will display as a half star so that's a challenge for you to to do what do you want fix spread here okay tab expected where okay let's not waste time with this one please save so all right we render them dynamically that's good that means that we can go back to our home screen and if i put here another item save we're gonna display a different item you see the image is different everything is different uh two we see something else for yeah you see now by changing only the data that we send we can uh render a different uh yeah a component with different data uh all right having that having that uh we can say that we finished this product component component it's reusable we can send data we can send props we understand what props are and now we can render a list of products with different with different data yeah based on our dummy data to render a list of products you need uh to use a flat list component from react native so let's um yeah i'm gonna delete it later so let's uh render this flat list and the flat list expect two mandatory properties first one is data and the data is simple for the data you will send an array of items that you want to render in this flat list in our case our product is this array let's send the products yeah it should be array and flat list will display one component for each item in that array but you also need to to tell the flat list how it should render this item inside the array like how should it render each individual item from that array and for that we will send the render item function uh yeah this function will receive here the item that it tries to render we take it we destructure it from our properties here uh and then we render our product item and we send via the item itself so this render item function will be called for every individual item here and it will send this item to our component and yeah that's how we loop through all the items and we render a custom component for each item okay we see it here render correctly let me just remove the first product from here yeah we see and a list of items we are able to scroll through them they all look really nice with different images based on our dummy data and all of that just by yeah rendering this flat list um i think we saw a warning each child in the list should have a unique key property okay yeah when you render a list react expects you to send a key property so that the list will know when to render on which specific item to render because uh yeah just to optimize your application uh and to do that we're gonna set say key extractor is equal to a function this is this will also receive this item and we will take from the item will take the id right because we have an id and we just return the id specifying good [Music] do i have different one two three four five oh six seven because yeah i know that um id is the default key and we don't have to specify the key extractor in case we don't have an id to that i uh to that yet in that item then we need to provide a custom key extractor but now uh it should automatically know no child analyst should okay it probably needs and right now if i refresh it i'll come on key extractor i wonder what what what let me check again the products seven six five four three two one okay do you receive an item like this save and define is not an object ref item id yep yep you just found your channel i'm going to have lots of marathons next week that's really awesome come on what's going on key extractor let's have a look let's have a look rocked native key extractor item dot id yeah that's that's what i'm doing oh no no no no no no i know where that issue is coming from i think it comes from the product item and from here from uh from the ratings because this is also a list of items if i comment it out if i delete it and rerun the application yeah that means that we don't need the key extractor it should automatically know am i correct yeah it automatically knows but why d is the key and going back here we need a key property here key will be um yeah what key should we assign item dot id no it's gonna be like this a string item dot id plus the index item id dash index because if we just say index uh there will be other elements with the same index in other components and in that case it's not gonna yeah like this it's not going to be unique and if we just put item.id then we have five different um icons in in the same item so that's why we need a combination of item id or and not i but like this i save you can also generate a random key here that's that is gonna work also as well um okay maybe change it to a number all right so with that said now we don't have any warnings everything is perfect our flat list is displayed our component is um is rendering everything as we we expect i would say that this page is done and that we should move to the next page uh it took me yeah we are one and a half hour already um that's gonna be interesting we're gonna we have to speed up a bit how are you doing guys uh sorry i didn't look in the chat because trying to focus okay horizontal scroll bar falls yeah we can also disable the scroll bar that's totally possible you are the best thank you very much no you are the best close with okay i don't know why but when i use amazon app it doesn't feel native yeah because it's not a native app uh it's just a web view so it's an application that displays the website um yeah because it it will require it would require a lot of resources to to create the same application as we have for the website and they decided that okay we can um we can give up on some native features such as notification but they will have the same experience both on website and mobile application and so on uh dynamite love you vadim your hard work is speechless thank you very much i really appreciate that you that you see it array 5 feel uh yeah probably that's best room why didn't do you know flutter i heard about that what's that is that a dessert okay if you're already an experienced react developer developer will the transition to react native be smooth how would you describe it it's going to be smooth uh the all the hard parts all all the logic comes from react from the react library so you are gonna be familiar with everything the only difference is the styles you're not gonna write css you're gonna write styles in javascript uh as you saw here and also um yeah the the built-in elements that you're going to use so you're not going to use a div you're going to use a view you're not going to use like um h1 for example you're going to use a text and that's it like there are also some small things that uh you most definitely will uh get used to but other than that here it's mostly the same not the same but yeah you're gonna it's gonna be easy to get there hey let me try to pronounce your name isaiah yeah thank you very much for the donation fist bump yeah let's go okay let's finish up with show horizontal scroll bar to false yeah let's do it if uh that's very important uh okay show horizontal bar false by doing that [Music] show horizontal scroll indicator but not horizontal it's vertical vertical yeah and it's gone we don't have that ugly scroll indicator okay guys let's let's move on because because we have a lot of things to do today okay the next step is the product page uh the product page we're going to start with the title with a van we have to render the image carousel here and this carousel will render multiple images we're going to be able to swipe for them uh then the option selector which we might drop we'll see okay for that reason let's close everything we have more people hello piotr thank you very much for the donation um yeah where where are you from because you have a russian name but um yeah it's not rubles yeah for our product details uh we need a separate screen so let's create a new folder in our screens called product product screen great work thank you very much product screen uh in product screen we're gonna need the index.esx let's uh react nati functional component product screen it's not a good idea to have pre-tier and yes lint during live streams um okay screen we have it here and uh the only thing that we need to do is to replace the home screen with a product screen because we want to see it here in our emulator right now we don't have navigation and yeah this is going to be taken care by the navigation but we can do it manually here so from screens we're going to import product screen same name and here let's replace it with product screen okay we see here product screen that's uh that's good so i can close the up index for the product screen i will need the styles.ts because we're going to have a lot of styles here so i don't remember that the shortcut for the snippets so i'm gonna have to do it the long way style from react native cons styles create and let's export default the styles by doing that in our index we can import import styles from the same directory styles okay so uh what do we have here we will have a title we will have an image carousel uh okay and then the next where is the next title image cursor not here yeah this can be can be our title so styles dot title then we will have image carousel then we will have option selector after that price description quantity selector price here description quantities selector and what what's the last part is the buttons okay buttons right what should we start with [Music] okay let's um let's import some dummy data here uh the product and start using it right away without writing here data so let's import this time we'll import the product not the products i have a separate file for this data for details it contains more more data there so let's do it from parent folder parent folder data then not products but product like this and here we can say this is going to be the product dot title we have it there awesome uh image carousel i think i'm gonna do it the last one option selector price price is the easy one because we can basically copied from our product item here where do we have it uh yeah let's copy the text with the styles price it contains also the old price we will put it here and i'm gonna have i'm gonna take also some styles from there for price and old price okay what okay it's not item it's product product product save yeah the price is there okay description for the description it's gonna be also pretty simple uh we're gonna have item dot not product item product dot description let's give some style to it description let's add uh yeah all the information and then we're gonna be able to style it uh quantity selector you have a selector somewhere tricky and buttons okay error line 9 title title thank you um so what yeah it's a lot of things a lot of things for the selectors for the selectors uh what did they use for the selectors in our uh netflix clone i remember that not a lot of libraries are uh are working it's a bit tricky to to work with um drop down selectors so let me have a look at the netlist clone do we have any i can go in there components was there the movie item episode item no which is that movie item let's try nope not this one or maybe it was uh in the screens in the movie detail screen index here and i used a picker from a react native picker yeah from here all right let's install this library uh this will help us um here it is uh to have like the drop downs that we will need for uh both the color and for the quantity not sure why quantity is with a drop down here to be honest weird design choice yeah let's let's first of all install it so yarn install yarn advantim come on man it's so hot in here and what installation steps do we also need to take yeah auto linking for react native above 16 yeah only no additional steps for android required and for um yeah mac os only pod install and that's it okay let's do it let's do it let's do it np x pod install and we can import the picker inside our component here and what what do we have here option selector so for the option selector we're gonna have a picker dot pinkish just picker and inside it we will have picker.item dot item with label and value okay i'm going to show you how it can be used and then we're going to adjust it for our use case and i need to rerun the application because i did put the install where do you live at the moment i live in spain and arizona it's a island very far away from civilization uh why don't you use expo in this build and what is the limitation of expo in this application um the limitation i i could use expo because it would have helped me get started much easier and yeah i really love expo but in this build i know that uh in the end we will need to do payment integrations and for payment integrations you um you need um you have a native variac native cli version or i could start have started with expo and whenever i need the native code i could have ejected but i decided to because we will need this native libraries to start it with recognitive cell life this time we're gonna have expo on our channel for sure in the future so come on what's taking you so long i finally ordered a chair so hopefully it will come soon because my back is screaming right now uh successfully built let's see yeah it's here and we see the selector here for java and javascript that we have here okay that's uh that's nice uh but we will like to render the options that are coming from the product because if we have a look at our dummy data product uh we have here an array of options so uh let's loop through this array of options and for each option let's render a picker item so to do that yeah i'm gonna leave only one and here i'm gonna do item dot not item but product right product dot options dot map so let's map through each item and for each option inside our array we will render a picker item like this let's close it so yeah let's add the brackets even though they're not required hey why do you did you delete it [Music] map option what's wrong with you quicker item label hey come on you are open here and you're closed here what oh i needed one more okay i didn't see it yeah i need two closing brackets one for my map and one for this one so the label will be there will be option dot just option because our option is a string and the value yeah let's do uh also option like this so here we have um a picker with different options that we have here so if we will have here a red one we will have here three options i'm not going to spend a lot of time styling this picker yeah you can send here uh styles and do it as you see fit uh but i'm gonna stick to to the defaults like this because yeah we have a lot of things to do uh the only thing that i'm gonna do is [Music] to introduce state here because right now yeah we we select an option but in our code there is nowhere uh where we save what the user selected to do that yeah we need we need the state in this component that will define like which option did the user select at the moment so whenever the user finishes finishes his checkout we know like yeah what option to order and what option to to send him to do that i'm gonna use a hook called use state and i'm at the top of a function here i'm gonna define this use state uh so use state uh yeah we can have it um yeah this is the default value like that uh our state will contain and our use state hook will return us two values an array with two values the first one is the actual value so let's call it uh selected uh option and the second one is a setter is a function that we're gonna use to change uh the selected option so usually you call it set and the same name set selected option option uh okay with the selected option we can send to the picker here um how is it called selected value right selected value is our selected option and uh there is a callback on value change on value change item value item index set um we will call our setter this one set selected option set selected option item value like this and let's delete that one i don't need item index here i can also simplify this a bit and doing that yeah whenever i will change it visually nothing changed however we can do here console log selected option and if i open the debugger by pressing command not on on android is command or control m here is ctrl d i'm gonna do debug with chrome i'm gonna open press fn f12 for inspect here so we can see the console okay let's wait a bit until it runs yeah this is how you debug and how you see all the warnings everything now let's uh change the selected value to space gray we see here space gray then to red we see here red you see we keep track of what is the default value also you saw that initially we didn't we console log an empty value so to fix that we can say that the default value for the selected option will be the first option in our array so it's going to be product dot options at position zero but that's only if option actually exists can i do that um because option is is not mandatory field because we have there are products without option i'm gonna do a check so if product dot options we're gonna set it to product options at position zero otherwise it's gonna be null like this and initially we should see black yeah like this and refresh yeah the initial is black black we see here we change the red red is here awesome okay next step next step what's the next step speaker option selector then quantity selector i'm not sure why did they choose to do it like this with also a drop down i think i'm gonna use i'm gonna design them similar to uh the way they are shown in the basket um yeah like a number with plus and minus sign very simple let's try to do them uh real quick here so i'm gonna have a view i'm gonna have uh yeah these are buttons these are two small buttons so we have a minus button and a plus button uh to do uh to create buttons uh yeah let first of all uh it's better to create a separate component because we will need it both here and also in the shopping cart so not to waste a lot of time afterwards to refactor i'm gonna create a new components a new component a new folder the component will be called quantity quantity like this selector uh okay let's define uh index here index.tsx uh react native functional component uh and this is gonna be quantity selector okay we have a view then i started explaining that we will have a button and to create buttons in react native we have this pressable component uh it's not a button it's actually a very primitive component without any styles it's just a component to wrap anything that you want uh inside inside it and using the pressable we will be able to uh detect user presses so we can say pressable on press the one press will be on minus uh the one minus is our function that we will define here with the logic that is going to happen when we press the minus button so basically we will just decrease uh the quantity uh yeah inside possible here we need to uh to put something uh we can put just the minus text like this after the button we have the quantity let's say zero and after the quantity we will have the plus sign and the function will be const on plus and here on on plus okay let's include this component in our page and then we will be able to adjust the styles of it and implement the logic of course so in our product screen let's import let's import quantity selector from components quantity selector we're gonna use it here like this and yeah it's here at the bottom of the screen we can see them very small let's real quick um style them so i'm gonna do the styles inside here styles style dot create uh we will have a style for the root we will have a style for the uh button for the plus and minus button um probably button text like for the actual text inside the button and for the quantity quantity with quantity let's assign these styles to all the components that they need this is our route okay this is our button this is our button text this is our quantity again button this is button text okay so for the what do we start with root uh i want to display them in the same row uh for that reason it's going to be flex direction row okay button will have i don't know a width of 25 and height 25 we're gonna align items in the center to have a plus and minus either minus sign in the center the same as justify content to have them both vertically and horizontally uh you know what the root as well will have a line items to have um the quantity text centered uh the background color yeah do we have a background color yeah we have a grayish background color there and the whole component has a border with one border color gray let's pick where is it something like this it's gonna be okay and why is it full screen um [Music] wha no no no no that's very weird why is it okay we'll gonna figure it out sooner or later i can yeah easily i can define with 100 pixels like this and we're gonna have justify content space between is it good it's perfect i will increase the size of the buttons vadim don't waste a lot of time please background color of a buttons a darker gray too much i think oh so ugly i will do it like this and the border later so what do we have here uh from the styles it's pretty good i'm not gonna try to make them perfect here [Music] i don't know quantity color we can define a color here as we saw here the blue i guess it's this zero zero seven eb nine zero zero seven eight nine [Music] yeah okay that's fine button text font size item stop stop stop stop stop stop perfect okay now uh the styles are done we need to implement the logic and the logic will be uh okay we need uh to render a variable here not not a simple text but an actual variable that we will hold in state and whenever we place on minus and plus we need to change this value uh so the the thing is that we don't want to handle the state here i mean we don't want to keep the state here because the quantity selector will just be responsible for rendering them and for calling some functions but the actual state should be managing the parent component for example in this case in the product screen because here is where we have an option as well as option like similar to option we will have um quantity and asset quantity right or we can also instead of will it will it confuse people okay let's keep it like this so quan city set one titty okay having them here we just need to send them to our component and that component will display the quantity and call set quantity whenever we place plus press plus or minus let's do that here so one come on quantity is equal to quantity and set quantity is equal to set quantity we just send the state and the setter like a function that will change the state uh by doing so inside our component here we can receive the quantity and the set quantity like this and yeah instead of writing here zero we will render the quantity and if i save here should be one yeah because that's the default state that we set on minus whenever we press on minus we want to set quantity to uh quantity minus one right and if i do minus uh that works and here should be plus one and if i do plus it works we increase the quantity if we want to uh prevent people from going below zero we can do a simple check here we say math dot max between uh it's either zero or yeah quantity minus one so the minimum value will be zero will it work yeah after i press it doesn't go below because yeah this value is minus one this is zero and the maximum value between zero and minus one is zero that's how we stop it at the position that we want okay okay okay yeah i think that we yeah we're done with this quantity selector back in our product page here okay quantity selector we have a buttons for the buttons you know what i'm also going to create a separate component because we have like this button we have these buttons and i don't want to style them always i don't want yeah i just want to um to have a reusable button that they can use in different places where we need it for that reason components let's create a new component folder button and the button will have index dot esx react native functional component here will be the button uh so what properties will the button receive it will receive first of all the uh the text that we need to render like yeah like this text and there on press the one press will be a function button props let's define also the types for this interface the text will be um string on press will be function i think that's how you save it is going to be a function am i right i might be wrong so instead of a view we need the pressable because that's a button pressable uh we send to the button on press we send the function that we receive from properties and inside the text we render the text that we receive now we have a simple impressible that we will be able to style before that let's just render it here on the screen to see it and be able to to style so we're gonna have a button that we can import from there text and on press is going to be press uh yeah at this moment is going to be an empty function we're going to implement it a bit later so we have two buttons there the one says add to cart and one buy now so add to cart and the other one is by now we can here do console warn uh add to cart just to know that it works console yeah same thing here we can do and say bye now let's save unexpected token unexpected token what what you didn't expect here one press oh here on press forgot the arrow and if i press on add card i see them as text i will sell them later yeah the add to cart is going so long by now by now that means that yeah we take care of on press and interaction correctly back to our button let's define the styles styles stylesheet.create and let's style the yeah root and i don't know text let's assign the style store components as styles dot root and the same thing here for the text styles.text okay the root will have a background color background color uh well come on this orange e4 7911 e four seven nine one one like this it will have some margin then okay it will have a height of 35 let's align everything to the center justify content center align items center save now the titles are in the center what does it have also it has some borders not sure if i want them and also the colors are not the same they're using a bit different style there but i'm okay with this i would do the border radius border radius 5 to make the round and for the text text font size bold no no font size 18 is too much it doesn't look good 16. yeah this is better um and yeah i would keep them as like this i cannot wear their weave and border collar board their weave to be closer one and border color will be something like this but a bit darker okay let me try to get one from here i guess save doesn't seem to show up maybe even darker one yeah something like this uh yash i i would also say the text color should be white but in their case it's black okay their colors are a bit um lighter but yeah i'm okay with that you know these are details but yeah you can play around with colors to too much in the design that you would like with that being said i'm done with a button and going back to our product screen we have here what replace prettier give me some time fix this prettier problem fix everything on press okay here in the button i think i messed up the type so it's a function and the result is a void like this yep so we have a button our buttons are done we have quantity selector is done now probably we will need to add some styles to the description to the title uh price is okay and yeah the image carousel image carousel okay let's go let's um yeah before going there let's add some styles to this description we have styles here description even the view will have a style root let's start with some spacing usually when you add space like everything completely changes yeah i read the book about like how to easily improve the design and spaces and colors is everything in design so root uh we will add some parting right padding 10 okay i will add background color white because now it's a grayish okay like this and what what else spotting okay we have um description for description we will add margin vertical to give it some room 10 yeah here ah it's okay i don't mind um i'm thinking that the buttons shouldn't have any margins uh themselves because you see that we do not seem aligned with everything else so i'm gonna go into our button here and where is it margin i'm gonna do margin vertical as well so now they will be aligned with the parent will be full size with a parent okay title let's add some styles for the title what should be there uh it pretty much matches my design of from here to be honest i don't have to do anything color dark gray and no it's too light no i don't need anything here if i will want i'll come back and design it better so yeah what else guys do i need the image carousel and everything will look perfect right we have here options we have okay okay okay description the description i would you know what what will make it look better the line height right line height it's 14 no 16 it's 18 oh no no no like this 20 even 20. yeah just probably 20 is too much but no it's it's perfect just like this it's already like more readable the tax is more readable and it looks better so um yeah the next step the next step will be our image carousel what was the book name uh it's refactoring ui it's a pretty expensive book i would say but it was really nice so guys i'm gonna be back in just one minute um let me know if you have any questions and when i'm back we can talk for a minute or two and we're gonna implement the image carousel that we see here on the screen so i'm gonna be back stay here i'm so mad all of these panels all right so you can use ragnay style snippet in this code when starting out new styles okay thank you very much [Music] native style yep perfect thank you very much that's gonna save me some time all right okay okay is it possible to pass the styles as a prop to component and then using uh styles from props default styles inside component yeah that's possible and yeah you gave even password like that's how you do it so for example um in this case button let's say that uh we will want to send some additional um i don't know button styles or text yeah button styles like container styles and the container styles will be an optional object right object so in our principle we want to merge container style with default cells that we have here so in this situation we can either as you said do an object and the structure of root and then the structure of the container style where is it con contain either like this that will also work or you can simply put them inside an array so if you send an array of styles to the style of of any component it will know to merge them uh properly and also add the styles that you receive as props as the second one uh because if you'd like to override some for example background color here we can do that from the product screen here let's go to the add to cart we want to send container style and we want to override the background color with more of an yellow right i don't know it will look terrible but just for the purpose of showing you that it's possible uh like this you see we uh send um some additional styles through props and we merge the styles that we sent with the styles that we already define in the component anyhow with these buttons this is a very good use case and it's used very commonly because you want to have default styles but maybe in some cases you want to send some some different styles and and that's how you do it thanks for the question uh glad to be here hello uh vada krasala spasiba um okay let's move on so for uh people that are just joining in i'm not sure yeah i think that there are some new people that are coming here uh yeah what are we trying to do here today we are building a full stack ecommerce application using react native uh and we are doing this based on amazon design uh yeah we're building the search page with the products which is already uh done uh we have built in it in the first part of the video uh now we are working on the product details page where we will display the details of a product uh inside the e-commerce website um yeah we're finishing this with the image carousel that's what we're going to do right now and later on we're going to display the shopping cart the address form here and put everything inside navigation set up a navigation so we still have some things to do uh we're gonna be here around let's hope that uh we're gonna be done in one and a half hours okay so as i said the next step that we have to do is to create the image carousel we've got the second coffee thank you very much alex yeah yeah uh what's the backend that we are gonna use we're gonna use uh for this build uh aws uh amplify but that's gonna come uh in the next week so subscribe to the channel make sure to turn on the notification bell uh because we are live every friday at 2 p.m gmt will show how you uh to upload an app on play store uh i've been asked this multiple times um i might do a separate video uh with uploading an app to the play store but yeah like oh yeah i i can do that not promising that it's going to be this week or next week or but it's going to be there okay image carousel so what is going to be the image cursor is going to be um yeah a horizontal list of multiple image images that we will be able to swipe uh from yeah through them and see them uh the cool thing about this uh is that we will be able to snap the image to the center of the screen so just by a simple swipe the image will switch and is going to be centered in the screen not just yeah you're going to see what i mean by this in a moment and after that yeah we're going to implement these dot indicators in the bottom of the screen to see like on which image we are which image we are displaying at the moment do you want to create the entire app today uh especially i uh yeah i had a disclaimer at the beginning and um if you're mean the entire amazon app no i'm never gonna be able to to do the entire amazon app even if i would want and i would have all the time in the world but the things that we planned uh for today um are the things that i explained just now and today we're gonna build only the ui uh part of application in the next video we're gonna build the back end and in the third video we're gonna build the payment integration uh to have a fully functional up a full stack application with the front-end back-end uh payment integration and so on so uh yeah everything today we're gonna build the things that we plan for for it okay so let's let's get going let's get going uh for the image carousel i'm gonna create a new a new component of course uh and it's gonna be image car like this carousel index.tsx uh and let's react native image carousel come on okay what about product logic what product logic do you mean uh image cursor so what uh the image carousel will receive it will receive um an array of images so images that it needs to render and also it will receive [Music] nothing else only an array of images everything else will be handled here [Music] okay let's just write images here to be sure that we are rendering this carousel in our screens product screen index and here we will display them image carousel with the property images that we are going to take from our product dot images images our product dummy data contains an array list of images so that's what we're gonna send there if we save we see here images somewhere between the text is there yeah let's go back to our image carousel and as we already know to display a list of a list of items a list of things in react native we use a flat list a flat list and the items data not items data uh is going to be our images an array of of image urls and the render item here we have item okay this is a function that is going to be called for each image and here we need to specify how we want to render the image improve in in other places we created a custom component here we can we can define the component here like how how each item should look so it's going to be an image with some styles style styles dot image and the source will be uri and it's going to be the item because yeah where is our product data product here we see images is an array of urls we receive here this array of urls we send that it to the data of a flat list and the render item will be will be called each time for each individual url here and the url that one individual url will be this item that's why we take the item and we send it to here to uri um okay i need to define here some properties i can define them in line so without defining an interface i can say images is an array of string save i messed up here some image let's import the image styles nope styles i will define the styles here so how did you say react native style yep thanks okay we will have styles dot root and start that image right road and image we need to import the style sheet from react native save unexpected token unexpected token okay we need to close the image because we forgot to do that okay and it's here so for image uh usually when the image is not displayed is because of a width and height so let's just add some random wave and height just to see if it's displayed save yep it's displayed the thing is that we want to display them horizontal not vertically to do that in the flat list we can pause here an option horizontal this will display them horizontally that's nice uh the image width will be um let's say that it is going to depend on the on the screen weave um to take the screen weave because we want to to have a dimension almost to to to cover almost the whole the whole screen we can say that um use dimension use is it use window dimension let let me remind myself how is it react native use dimensions yeah use window dimension okay and window with yeah having our window wave here oh um that means that we cannot define the width in our style but we will do that inside here so the style will be as we already uh talked about how to define multiple styles here so i'm going to add them inside an array so first one is the styles that is coming from here that is going to have like for example height and so on but for the weave we're going to define here with which is the window with save like that window weave and also some to take into account some parting right minus 20 yep like this okay all right uh the height of the image will be 250 will it be enough yeah and the image will have cover was it cover mode no cover mode resize mode contain to contain everything on the image yeah like this okay uh it looks good uh should we add some i don't know padding here like can you putting no we can add some margin 10 and that means that the weave should be minus 40. yeah because yeah it's 10 uh from the margins of the screen here and to the left and right and then to the left and right of the image itself so that's why it's window width minus 40. okay we we are displaying these images here that's really awesome we can also hide the show horizontal indicator to false to hide the scroll indicator like this but now it behaves like a scrollable thing like uh it doesn't snap to the view so to do that we can add some properties to the flat list so whenever we scroll a bit it will automatically focus on one and put it in the middle of the screen so to do that we can work with with a snap to interval uh snap to interval and and snap to interval here needs the the width of each item so how uh why this each item i think is window with like this okay it also needs the snap to alignment snap to alignment in this one expects a value center and or start so where should the snap interval like this thing be and i guess in our cases and or center center and also it needs the deceleration rate which can have which can be fast or slow so in our case it's going to be fast like how fast it will move from one item to another yeah here you see i just scroll a bit and it comes back to the center if i scroll a bit more to the left it will center this one and so on all of them i think i messed up something with this window weave to be honest because it doesn't actually center it let me just add some background color here to have a look ground color red so here it works okay but here center and i don't know [Music] should we be slower oh no no no it's 20 minus 20. without taking in consideration them i guess yeah 20. it's in perfectly in the middle this one again perfectly in the middle without taking into consideration the margin of a page only the margin of the image because yeah that's okay yeah that's uh that's really nice and it was pretty easy to to build so let me delete this one and that's how we render um carousel with images the next step is to this dot indicator so we need a list of dots and uh that will indicate like at which image we are looking at the moment uh it might feel uh and seem hard but it's it shouldn't be that hard to implement because yeah the dots are also a kind of representation of the images but in different form so for that reason we can um we can uh do we can look through all images and for each image render a dot that's the simplest thing that we we can do so image dot map for each image and index we will render a dot a view right the view will have some styles style will be style dot dot so let's render let's define the styles for this dot but that should have like we've uh i don't know 25 height 25 border riders to make it a circle border radius like also 25 but where are they and background color the gray gray gray green oh but no uh okay yeah yeah so we're gonna work with this gray uh so it's not gonna be background color it's gonna be border uh weave one and border color gray with yeah this one yeah we're here 25 is too much 10 10 10 is much better and we will put them in [Music] in a view because we need to put them in the same line style star styles dot dots dots okay dots container or just dots and let's put these dots inside for that what you don't like save styles has already been declared yes i know where no okay okay okay dots will be flex direction row to put all the dots in the same row like this and align items center and justify content also center we don't need the line item because all the items have the same size uh for the dot we will need to add some spacing so let's add some margin also five yeah that's that's pretty pretty nice this is how yeah dot i think it also has a color just to you know what i can do background color this one and the border should be a bit darker right no this one later even lighter perfection now guys now yeah we display these dots but they do not display the active dot like which which is the active image here um okay the first thing is that we need to know like which is the active image like what uh index is the image of the active yeah what what index is the active image for that we're gonna need a state so active index and set active index is equal to use state initially it's gonna be zero let's not forget to import the state from uh react like this and yeah and here inside our view for our dot we need to uh to check if this is the active one we need to change a bit the background color so let's let's do this logic here so we will put it in an array and define custom styles here and the custom styles in our case will be them let me think how to do it properly okay styles is okay styles dot and the background color will be background color this one background color this one so if this is uh the image with the active which is active if index of the image that we are rendering right now is the same as the active index from our state then we're gonna render the color will be darker and otherwise it's gonna be lighter does this make sense we have conditional background color check and yeah if index if the index of a dot in this case the index is 0 and the active index is zero if they match the background color will be this one if they don't match it will be this one so if i change in the state here uh the index to one it's going to be the second one and so on now we need to think uh how should we sync the image carousel with the dots like how should we update this active index whenever we change um slides like change images background color red is a game mover yeah i'll always use them okay yeah as i said we need to um to understand when the image is changed and update the set active index for that flat list has something like i also added it here on view viewability on viewable items changed and viewability config okay so their own viewable items change yeah this is a callback which is called whenever uh the items uh in a flat list have changed like which one is visible on the screen and which one are not so with this uh callback but we also need to add the viewability config we will be able to call when okay uh the callback will have an option here viewable items okay first of all let's add the config viewabilityconfig and this is an object which contains uh which where we can set like how should our item visible items be managed for example it has a uh either a view area coverage percentage or a item visible percentage threshold they're kind of the same but for the area coverage uh the item will be visible whenever uh it's gonna be on whenever it's gonna cover more percentage that you set here so if you set here like 50 the item will be considered visible whenever it will take half of the screen with items visible percentage is the same but think about how much of an item is visible on the screen not how much space it takes on the screen so if half of items is already on the screen we consider it visible in our case i think we're going to work with view area coverage percentage and we consider that the item is visible if more than 50 percent of it is visible on the screen and this i think will um will make sure that only one item is visible on the screen is considered visible on the screen view error is going to be 50 let's see yeah let's say 50. okay also it has a minimum view time and this is very useful um if you scroll very fast through the things and you don't want to trigger any interaction any changes then we can say that the item should be on the screen for the minimum of i don't know like 300 milliseconds i think it's milliseconds right i think it's milliseconds so the item should be visible on the screen for at least 300 milliseconds to be considered as visible in our case we don't need this minimum view time it was useful in our airbnb clone but here is not needed having uh let's console log viewable items why it's so slow come on a view view v is not defined come on will you work oh my god we have so much still guys how do you hear me how do you see me the stream health is excel excellent but my pc is very slow i'm afraid come on unavailable items changed refresh please refresh no oh okay can you hear me guys i think my vest because of my pc let me try to close some tabs here will that help i'm just gonna wait i i really hope it it gets back to normal because i had it previously and it got back to normal so i'm gonna just wait a bit for it to get back to

Channel: notJust․dev

Views: 102,379

Keywords:

Id: WuAMLwrYu68

Length: 184min 12sec (11052 seconds)

Published: Fri Apr 23 2021