Building the Ultimate Nike App in React Native & Redux

what's up not just developers welcome back to a new live stream I'm super excited for today's build because we are starting a new application and what can be more exciting than that so today we are going to build the Nike application with react native and Redux this application is pretty fun to build because uh it has a lot of interesting features even though it has a minimalistic UI but instead of talking a lot let's actually see a short demo of application that you are going to build by the end of this stream so here on the main page we're gonna start by displaying a nice list of products and we can scroll through them we can see them very displaying two columns from here what we can do is we can go to The Details page of this product and on this page we will see more information about van sneakers for example and what's cool about this page has been nice image Carousel that we see here on the top and we can scroll through the images and see more details from this page we also have the add to cart button and we can press on it and then this automatically adds that product to the cart and we can access the card from the top menu by going here and we see all the items that we have added to the card at the bottom we will see the calculations like total subtotal and so on and um yeah as you can see like the user interface is quite minimalistic and I really love it because it's easy to get started but uh by the end of this build we're gonna get into some interesting features into more advanced features like navigation and also Global State management using Redux and Redux toolkit so I'm pretty sure that there is something to learn for everyone and you're gonna enjoy this project together with me if you're new to this Channel first of all welcome here um my name is Vadim I'm a full stack developer and I have experience working in a lot of companies including Amazon founding my own software development agency but at the moment I decided to focus full time on helping developers all over the world here for free on YouTube and also with our premium Academy at academy.not just.dev uh if you enjoy what we're doing here make sure to subscribe to the channel uh because that will help us a lot in reaching more developers and helping even more people from our community with that being said I think if you're ready I'm also ready and we can actually get started with today's build because we have a lot of things to cover today I'm always setting the the scope of a project higher and higher for every project and hopefully we will manage in time and you will learn a lot today so hello everyone in the live chat how are you doing guys uh you cannot download the asset bundle yes before that uh before we get started make sure to download the asset bundle by going to assets dot not just dot Dev slash Nike Nike um and that asset bundle contains some dummy data some pre-made components and other important uh information and files that we will need throughout this build to move on even um easier for you so you will not focus on writing dummy data but on actually building and learning how to um to create mobile applications with react native did you get a haircut uh I don't know I cannot say that this is a haircut but yes I've got a haircut thanks to my girlfriend Alex not girlfriend fiancee sorry uh all right also besides the asset bundle I have prepared for you a step-by-step guide and you can find me uh the step-by-step guide by going to the link that you can find in the description I'm gonna open it right now uh so just for you to see how it will look and this step-by-step guide actually contains uh even code Snippets that will help you uh follow along together with me here so that's how it should look come on so yeah I prepare here like everything step by step so if something is not working just make sure you can come here check if you copy it correctly uh I included go Snippets for everything that we're gonna do so it's a pretty expensive guide um to to help you move along and build this application yourself so I'm doing my best to make sure that everyone no matter your experience can follow this tutorial and even if you're a beginner you're gonna be able to build this application by the end and also if you have already some experience with react native you're gonna be able to learn something new today because we will cover some Advanced topics um all right so I think we we are more or less ready to get started and if you follow uh people are saying that we are not able to download it didn't you get um email just follow where URL uh put your name and email and you should receive the asset bundle there uh everything should be working is anyone else who managed to download basket bundle let me know in the comments just to make sure that it is working or otherwise I'm gonna look into it shortly but if you follow the step-by-step guide the first step that we have to do is let's go ahead and initialize and empty uh export application uh so for that I'm gonna open a new terminal let me zoom in so everyone can see properly let's go to Project and YouTube not Academy and here we have a Nike all right so here um I'm gonna clear once you are in a folder where you want to initialize the project go ahead and run npx create Expo up and then give the name of application for example Nike up so you don't have to have Expo okay the Knight cap is already installed okay uh Nike up clone for me that's gonna be you don't have to have Expo CLI installed globally anymore you can easily use npx and then using the createx publication this will download the latest version of a CLI uh for the Expo and we'll initialize it with um for your project so the only thing that you have you need to have from the environment perspective is node by having node you're going to have npm and npx that's going to help you run the application uh initialize it and also you're gonna need a code editor and in my case there's going to be Visual Studio code in one where we will um work uh to to build application but any other code editor will work okay see if it download uh work so uh hello let me uh I'm gonna try to to help you after after the the build uh write me an email and I'm gonna send you a man Olive asset bundle if you still do not get the email maybe check the promotional or spam folder to find it there foreign all right so now we see that our project is ready so what I'm gonna do is I'm gonna go ahead and open the project with code by running code let me actually clear everything and I'm gonna do code Nike up close this will open the application in Visual Studio code if you don't have this shortcut code just open up manually code and from here go to file open folder and search for your folder from Visual Studio code I'm going to open a terminal from a terminal new terminal here on the top yes I hope you can see it and I'm gonna run the development server so let's go ahead and do npm start that will start our Metro bundler from where we can run our application on either a physical device or on a emulator in my case I'm gonna press I to open this application on an iOS simulator if you're working on a Windows or a Linux machine and you have already android setup you have an emulator you can press a to open it on Android emulator or alternatively and the easiest way without having to set up Android Studio or xcode is by simply downloading the Expo go application on your physical device it's available both for Android and iOS and after that go ahead and scan this QR code and the application will run directly on your physical device on your phone so that's the easiest way you can do it you don't have to go through the struggles of installing and setting up Android Studio for example uh but yeah for me I'm gonna go ahead bring my emulator here come on something like this should be fine come on and yeah let's let's press uh I again to open it on this um iPhone okay so here we have our brand new application running successfully on our device so if we open the files in the Explorer here the entry point the first file that our application is going to run is the app.js so if we open it up here uh we're gonna see this text that we actually see on the device so if you're gonna change it to hello world that should automatically Refresh on them on the device and now you know that everything is connected and set up for you and we are ready to get started with our application uh actually I will take one small extra step in order to get rid of uh the red squiggly lines for for visual studio code uh you don't have to do that your application will still work I just want to um this to look a bit better so I'm gonna go ahead uh here on the bottom press on configure.js config that will create a file in my um in the root directory here and I'm gonna change from react to react GSX and if I save now the file go back yes my red squiggle Alliance that we are complaining about not importing react went away but again that was optional just to get rid of them okay perfect so the first step uh for our build is rendering our home screen home screen UI so if we look at the Nike supplication the home screen is pretty simple it displays at least a list of products they're displayed in a grid view where we have two columns and you might already think how we can do everything from the beginning like how we can put like two columns and then images and then a flat list scrollable and so on what I like to do is I like to break down the UI into the smallest and simplest component that we can possibly think of and in this case one of these Atomic components on this page that I can see is an item that displays one product so for example yeah like we have these snakes that are displaying this product that is displaying this Nikes and so on like on this page we have six of them all right let's go ahead and start uh rendering it from there building the application from there and if we look at the UI like that item is not more than a simple image so let's go ahead and in our up uh up.js let's start rendering that image to render an image we need to import the image component from react native and here instead of a text hello world I'm gonna go ahead and render the image a four-way image in the guide where you can find the URI so I copied it from there and let's go ahead and provide the source The Source will specify what image we want to render so if we send here an object with a URI we can specify a remote image by providing the URL to a public publicly available image I have prepared this for you so you don't have to find any images just look into the guide and copy this URL from there well we've only rendering vcri nothing will show up on the screen just because we still have to provide Styles we need to say how big we want this image to render without them it's just going to be empty because the sizes will be initialized with zero so let's provide another property to the image component called Style and go ahead and display the Wii for example 100 and height 100. we should already see something on the screen we see this image there well instead of rendering with 100 which is hard-coded values in pixels and it will look different on different screens on smaller screens this can this image will look relatively larger and on large screens for example on an iPad this image will be really really small so what I actually want to do is to render them with relative width for example I want to render them full with 100 so if I do 100 the width of the image now is 100 of the width of the screen of a width of a parent component which is our container here now the height remains 100 and what we actually want to do is to render it as a square so the height should be equal to the width how we can do that we can simply do that by providing the aspect ratio of one over one or simply one and that will render it as a square and the height will be calculated based on the width and the aspect ratio um uh okay perfect so now we Define these Styles but instead of at the moment we have styled this image in line so basically we wrote the Styles um inside our GSX a better way is to extract our Styles in the Styles object here at the bottom so we can specify image is equal to the styles that we have defined and from our jsx here we simply access them by calling Styles dot image and we are back here we see the styles for the image this will help us keep like the the code that is responsible for the structure which is our GSX here like how things should be structured from the code that is responsible for the styling how things should look on the screen perfect so we have this image here um The Next Step will be to render a list of images not only one right because if I on the home screen we saw that we are rendering multiple items okay so to render multi multiple items we first of all need some data the data I have prepared it for you so let's before importing it let's go ahead and create a folder inside our project called SRC that will keep all our source code this is a standard so we keep all the code that we are writing in the SRC and here we can go ahead and create another folder called Data in this data folder we're going to put all the dummy data that we will need from the asset bundle that you have downloaded uh here is the asset bundle let me do it like this open up the code directory and there is this data folder I have product.js and carp.js which um are the data that we need for for our application to help us move faster so I move them inside the data folder if I open cart for example if I open products this is an array of actual products it contains a lot of data but what we are interested in at the moment is that every product contains this image image property and this is actually what we need on the home page the image property of our product perfect back in our app.js let's go ahead and import our products from Source data products now um the component that we're gonna use to render this product is called a flat list and a flat list helps us render list of data in a performant way so let's go ahead and add some spaces here before our image and start rendering our flat list the flat list will be a self-closing tank because we don't need any children in it we will Define everything inside the properties and there are actually two required properties for a flat list to work one of this property is the data basically what data do you want me to render and in our case we said that we want to render the product the array of products and the second required property for the flat list is how do you want me to render one item in this array so that property is called render item let's do it like this I'm gonna probably put them from new lines to make sure that you don't make mistakes with syntax so render item property expects a function a function that will be called for every item inside the product array and what we have to do is we have to return some GSX we have to basically say how we want to render that product so with that being said let's actually implement it okay render item expect a function let's define the function the function will receive some parameters and that parameter is an object from where we can get the item that we want to render at the moment this item will be one product from this array for example this one and it contains this the image that we want to render what we want to do with this item we want to render this image for every single product like this and instead of hard coding via URI because right now it renders a lot of products but all of them are the same image because we have we are hardcoding it what we want to do is I want to specify that the image URI is going to be item dot image basically take the image property of our item and just by doing that we already have something let me try to put it into one line because I think it should fit without problems yeah now it looks much better flat list render item and for every item we are rendering one image component and here on the right we can see a beautiful list of scrollable items perfect but the problem is that we wanted to display them into call columns right okay um well to do that first of all we need to make sure that the comp the component that we are rendering uh is going to take half of a screen at the moment our image is taking actually a full width but we want it to take half of a half of the screen right because we want to fit two items inside there so I'm gonna go ahead and wrap our image inside the container and that container is going to be a simple View I'm gonna do it like this View and yeah so we are rendering for every item one container and inside that container via image all right so let's give some styles to this View and I think I'm gonna do Styles dot item container and we can go ahead and Define it there what's the problem oh I think yeah I had their an extra character on the screen and now it should be better yes let's go ahead and find the styles for this item dot container in our styles and as I said I want them item container to be half of a screen to allow two items to be on the same row so I'm gonna do 50 percent and I'm also going to specify some padding in order to have a little bit of spacing between these items so padding one should be fine okay at the moment it doesn't look very uh good but we need one extra property on the flat list to make this work and that property is the number of columns and if we specify that we want to render them in two columns we're gonna receive an error but go ahead and press r to refresh the application and now what we see is we see actually our list displayed beautifully in two columns uh with yeah with items displayed inside perfect the last step that we should do here because we are almost done with the home screen it's pretty simple but in the next uh screen with the details we're gonna go into more details on uh on working with text with rendering Carousel images and so on but for now it was pretty simple uh I hope you managed to follow along so far uh what we learned so far is how to render images so to render a remote image we need to provide the source with a URI and for the URI we need a public URI to an image without styling the image we are not going to see it on the screen so make sure to give a width and a height property to them for styles and then we also saw how we can work with flat lists to render lists of data scrollable list of data what I want to do now is I want to extract this logic into its separate component because this logic is our product screen and we're going to extract it into a separate component in order for us later to easier switch and move between different screens so inside the source directory let's go ahead and create a new folder called screens and inside this screens I'm going to go ahead and create a file called Product screen dot GS okay so let's see what makes uh a rack native component a rack native component is a simple function so let's go ahead and and start with defining a function uh products green we Define the function with an arrow Style and What Makes a JavaScript function to be a racked component is the fact that it should return some GSX the jsx is the syntax that we saw here and that's how we Define our component and in our case the product screen is going to be our flat list so go ahead in up.js copy the flat list from here put it inside the return statement here and we should also make sure to import some of the things for example flat list view image and product uh I'm going to be lazy here and I'm going to go to app.js and I'm gonna copy all of the imports from here into our product screen I'm going to remove a status bar because we don't need it here and another thing that we need to move from up.js is then styles so let's take the styles and leave him here don't cut them from up the jet because we still need some Styles in app.js but let's duplicate them in the product screen at the bottom so what do we need we need item container and image but we don't need the container here so I can safely delete that style um we need to fix the way we are importing products because the relative path is different so instead of going to Source I actually have to do double dots to get outside of a screens directory and then go inside the data directory last thing that we need to do here is to export product screens so at the bottom of file let's do export default product screen okay we don't see anything on there on the right side because in app.js we are not rendering anything let's go ahead and import our newly created product screen from Source screen product screen and inside our view here we can go ahead and render product screen if we do that we are back to normal we're back to our list of items but now we have our custom screen that is rendering them and from up.js we simply access that screen and in the next step is going to be easier for us to move between screens and by the end of the video we are also going to implement navigation to do all of this navigation automatically I want to also clear uh clean up a bit from the up.js because we do not need the products anymore we do not need the flat list we don't need the image at the moment and probably the text as well maybe if we'll we'll need later I'm gonna import them and from the Styles in app.js we do not need vestyle for the image and for the item container because they are about the product screen okay so with that being said I think we are done with the home page that is rendering the product screen the next step is going to be uh a bit more interesting and we are going to go ahead and render them project Details page before we do that I want to check the live comments to see how people are following along and I see already someone joining van not just developer and supporting us on YouTube thank you very much for your support I really appreciate that um all right let me see read some comments or questions will you use AWS please uh I haven't planned this yet I haven't planned if we're gonna continue this with backhand side uh actually the goal of this tutorial was to teach you how to use Redux and to have an introduction to Redux but I wanted to do it in a fun way not simply like hey here is how you can press a button change the state in global State and so on I want things to be exciting for you I hope you enjoy this project based methodology that I'm using and by the end with a fully blown application with e-commerce features so maybe we're gonna continue it let me know in the comments below if you want me to continue this project with maybe implementing the backhand side and also potentially the monetization how to integrate the payments here or maybe some animations or something else that you are interested like why you you decide guys unable to boot device do I have to install iOS emulator yes in order to run web application on your own emulator the way I am doing here you actually need to install xcode and to install them by installing xcode you're gonna get access to the iOS emulators if you haven't done that yet the easiest way without going through a lot of struggles is go on the App Store if you have iOS or Play Store on Android and simply download export goal if you do that you can then uh scan vs QR Code by pressing C here you're gonna see the QR code scan it I can actually do it right now and it actually takes like two seconds like you scan it you see open in xcode and then it will load right away here on your device so just one application on your phone and you're ready to go uh I'm gonna add the presentation PDF inside vest and bundle however I focused mostly on the step-by-step guide that you can get in the description I hope that's clear uh invest step-by-step guide actually explains and shows all of these steps in details that we are doing here with also called Snippets so that's Focus now um do you provide the source code on GitHub yes we're gonna provide the source code after this project is complete at the end like after the um this tutorial continue would be nice please do please continue awesome thank you guys I'm happy that you enjoy it and moon is saying Heaven cheers from Marrakesh hello how are you doing there please do backhand and payments uh is it a good practice to list items what do you mean by that Hello Alex I understood that please do back and back and payments and streaming video streaming video for this application probably doesn't make a lot of sense but yeah we we have a lot of plans like this year is going to be filled with content with projects so make sure to subscribe to the channel guys I'm gonna go through two more comments and then we can continue with our product details screen respect from Pakistan hello all right guys so let's move on with that project and we're gonna go to the next step before that I'm gonna quickly do a commit just for us to have a checkpoint in time so this is this was our products screen okay perfect I'm gonna close everything except our app.js I can close even Bob dojs all right so now as I said we will start working on our time we can do it like this let me zoom in you have this guide uh in the link in the description I will repeat that just to make sure that everyone knows where to find it so moving on to the product details screen this is uh this page has a little bit more content so we're gonna find out how to work also with texts how to render Carousel images how to work with icons buttons how to make them be displayed always on the screen with absolute position and a lot of our small little tricks and to render beautiful user interfaces so yeah I think we're gonna start from the top and we're gonna render the carousel but yeah let's go ahead and copy the starter code for our component just to have it um to have it easier to get started for us it just contains some comments I'm going to put it so in our screens directory let's go ahead and create a new file for our product details screen dot Js in this file uh as I said from the um from the guide I have copied the starter code oh my God it's so hard for me to to follow everything yeah so from a guide let's copy the starter code here it is and what it does it defines the component that we already know how to do and it takes the first product from our array of products so at the moment it's uh it's a dummy product that takes it from the dummy data uh and it renders simple View and it's ready for us to implement all the components from that page we also have a Styles and we exported the component so it can be imported from them other pages we have to actually import it in our app.js because at the moment we are rendering the product screen but we already moved to product product details screen so let's go ahead and import it in app.js and replace the product screen here I'm gonna comment it out and instead I'm gonna render the product details screen all right so at the moment it's a blank screen without anything there but slowly we're gonna put things and we're gonna render them here so let's go ahead and start from the top and we're going to start with the image carousel for the image Carousel again start small start with the things that you already know because maybe at this point you don't know how to render image Carousel but you know how to render an image because we already did that and in the first component so let's go ahead and do that let's import the image from react native and render it here image we need that we need to provide a source and the source needs the URI the URI we're gonna take it from the product dot image and for the style we need to provide some Styles there for example a weave we want it to be full full width of a screen so it's going to be 100 and the aspect ratio of 1. just by doing that everything that we are doing here we already know how to do and we can look back into the code that we have wrote before and we see the image here on the screen uh the problem is that it is in the middle it's in the center I'm not sure if we exactly want that and uh what we can do is we can open back up.js and we see that our screen is inside this container and the container if we look into the Styles it has some styles to align everything in the center I'm going going to actually delete this because um we want the page to to flow from the top to bottom so make sure to do that and we can go back to our product details screen okay so we know how to render an image the next step is okay how we can render a carousel well it's much easier than we thought because we can Leverage The Power of a flat list and we worked with a flat list in the previous component to render a list of data in this case our data is an array of images and for every single image we need to render the image component yes it's different uh position it's something else but with the power of flat list we can send some properties to adjust the way we want it to look what do I mean by that okay let's try it out so let's import the flat list first from Rock native and for the image Carousel let's go ahead and render flat list we as a self-closing tag we remember that it needs two properties it needs data and it needs a render item render item for the data we need to provide an array the array which array if we look into the data products.js every product also besides the image also contains an array of images so let's go ahead and access this array of images in our product details screen we have a product and we want to access product dot images if we look into that the images every item in this array is a string that represents the URL to that to that image so now knowing that information we know what item we will receive in the render item it's going to be a URL to any image and what we want to do with that URL to an image is to render the image component like this again it will render the same item because if we look at the source here we are rendering a product image the main the thumbnail of a product what we want to do is to change this to the item that we're gonna get from the render item perfect we see different images however they are rendered vertically right we actually wanted to render them in a horizontally scrollable list well with flat list that's possible we simply provide horizontal here and that should work but you might see that okay everything disappeared and why well um why this appeared is we moved our flat list to be horizontal what does that mean it means that the flat list itself the container that displays the flat list is going to be infinitely wide not actually infinitely wide it's going to grow in with as more items are displayed on the screen now if we look at the items that we are displaying for example the image we said that the width should be 100 of its parent so we have a cycle dependency the image depends on the width of a flat list and the flat list depends on the width of the image if we change this from relative to for example 100 everything is going to be displayed there you you can do it even 300 here so now we see that it actually works the problem was with relative width but yeah we actually wanted to display them full width of the screen okay there is another way we can display images and items full width of a screen whenever we do not we are not able to use like the relative with in that case we will actually take the size of a screen and we will send it to the weave here to take the size of a screen we can import a hook called use window dimensions from react native Now using this hook inside our component at the top here we can take the width of the screen using use window dimension this will return us the width of our phone screen of our device basically so we can take this width and send it to the style and in this case our the width of our image is going to be the same as the width of our screen so we are back to what we had before and because they have the same name we can simplify this by adjusting with like this okay perfect uh but um what else what else what else um maybe you don't like the scrollable indicator at the bottom that shows there that's perfectly fine and we can get rid of it by using a simple property called shows horizontal scroll indicator and we say false we don't want to show that now it's more clean it doesn't show it the last step to make it to make this scrollable thing look like a image carousel is to use web paging enabled property on the flat list and by doing that whenever we scroll it will make sure to Center the close this image and now we can smoothly scroll through them and flat list will automatically align the closest image in the center so without this as you saw like we can be in this situation which is not actually what you're looking for which paging enabled you have this nice ux where the image is centered and yeah that's how we can um render a image Carousel using a flat list and free additional properties horizontal to make it horizontally uh paging enabled to to make it uh Century closest image when we release them the finger from the screen and also like hiding the scroll indicator to make it look more clean all right perfect now let's move on to the the next part which are our texts so we need to display the title we need to display price and the description so for that let's go ahead and use a text component and we're going to render here product Dot name do we have a name yes product.name uh we need to make sure to import the text component from react native text like these so we we're rendering the product.name we need to also style this so I'm going to give styles dot title and let's go ahead and copy this for the price but we have to change product.price here the Styles will also be price and let's do it one more time for our description product.description description and for the Styles description okay so we see here all our text nicely displayed here but yeah like we we still need to work a bit on their styles um but yeah before we actually style the titles I want to add some spacing for uh around like around this box because at the moment all the text goes from the left side to the right side of the screen and they look really cramped I can do that individually for the title price and description but I'm gonna have to repeat myself over and over again with the same property so instead of that I would rather put them encapsulate all of these texts into a view I'm gonna close this View here after the description and for the style of this view I can simply say padding 20 and this will add this nice padding around all our components perfect um look for the tiles of our title price and description I'm gonna go ahead and take them from the guide that you can also uh we can you can also do uh I have both Styles here so we don't have to waste a lot of time I can explain what we do um with the font size we basically control how big we want them the font to be so for the title we have a 34 and for hours we have a smaller font with a font weight we can specify how if we want the phone to be bold for example or you can also use values from 100 which is very thin 200 and so on all the way till 900 I think so I'm going to use a 500 which is a little bit less bold than a bold uh but yeah it looks it looks nice here uh what else margin vertical adds a bit of margin between the title and the price um and another thing is here line height which adds more spacing between the lines in the text so without this check out the description I'm gonna uncomment this and now the text looks more cramped and it's harder to read and where where we have a lot of text I usually like to increase a bit the line height uh you can do it like you can see it obviously if you do 50 for example the spacing between the lines are really big but 30 should be look should look good there for the price I actually have to render uh how's it called the um the dollar sign before rendering the price there so I'm gonna do dollar sign yeah something like that besides line height you can also play with letter spacing so for the price if you do letter spacing I don't know 20 . you can see how wide is the space between uh the digits uh I am not sure why I wanted to adjust the letter spacing there but yeah we can probably do something like five here or even two is it very yeah I think it looks better 1.5 yeah should be good like this now we introduced another problem whenever the we have a lot of content on the screen in this case we have a lot of text in the description this content goes off the screen and there is no way we can look and see what's below we cannot scroll at the moment when this happens what we have to do is we have to encapsulate our content inside the scroll View and that content will become scrollable the scroll view can be imported from react native and the content that we want to put in the scroll view is basically a starting from the flat list including the flat list I'm going to copy the ending of the scroll View and I'm gonna put it just after this view but before the comment add card button because add card button this is going to be a button outside the scroll View so if I do it like this now all the components inside this scroll view will become scrollable and we can scroll and see all the content in this page it's important to think what components you want to put in the scroll view because if you leave out the flat list from the scroll View and put it started from here then the flat list will always remain on the top and only this part will be scrollable and it will look something like this in this case it will probably need a style yeah not sure why it's not working like it needs some Styles like content content container style I think Flex one well it doesn't matter but you see the idea what they want you to say whenever you leave out some components they will always be visible on the screen and the other content inside will be scrollable like this one maybe that's the interface that you are looking for but for us we want the images also to scroll up together with the text and here the carousel is still working we can still scroll through it and we can also scroll down to see the text all right so I see a lot of new people joining today so guys how are you doing today to give a little update we are building the Nike's uh e-commerce application and we're going to do that with react native and shortly we're also going to implement the global State management using Redux so if you are interested in Mobile development make sure to follow along this video is going to be published on the channel so you can bookmark it and watch it afterwards if you missed the beginning but yeah it's a step-by-step tutorial we're going through all of these screens it starts slowly in the beginning with simple uis but sooner we're getting into more advanced topics so I'm pretty sure you're gonna learn a lot from this build and if you're enjoying what you're seeing so far make sure to subscribe to the channel that will help us a lot to reach more developers and help even more people from our community so far we're going strong we're one one hour in and we have almost finished two screens uh shortly we're gonna get into like navigation and shopping cart and managing the state and yeah it's gonna be fun for now on this page what I also want to do is uh I want to show you I did uh Adidas here watching silently and following with you great are you uh how is the pace are you managing to follow along everything good Oliver hello guys let me know in the chat how how are you doing guys where where are you joining us from uh but while you're writing in the chat uh we can take a short break in probably five minutes uh but for now I want to show you how we can render buttons so for the buttons we have um a primitive component called pressable and this pressable component is very similar to a view which means that it doesn't have basically any Styles any predefined Styles but what it allows us to do is to handle user press events like on press on long press and so on so we're gonna use a pressable component to render our button so the principle is going to be the view and inside that we want to render the text component that will say what add to cart well at the moment I'm not sure where we will see it probably nowhere it would be like other best scroll view but yeah like don't worry because we will apply some Styles uh starting with a pressable we're gonna apply the style dot button and for the text we're gonna apply Style .button text let's go ahead and Define these tiles here and we'll in our Styles we have a button Style and we have the button text so we have a button um I'm gonna start with a position um in the application but we are cloning in the Nike application the autocar button is always visible on the screen and I think that's a good user experience because with the main call to action button that you want to render on a products page and you want people to always be able to click that button so to render a button always on the screen we're gonna work with a position and apply a position absolute to the button I already see it on the screen maybe you don't it's there on the top uh what I'm gonna do is let me let me do a background color red that's the way you debug things and you see it there at the top okay uh the button is there but we want to display it on the bottom so we simply say we want it on the bottom uh and how Far From The Bottom because if we put 0 it's going to be right here at the bottom we probably want it like 30 pixels from bottom or something like that okay perfect that's already better um The Weave at the moment the button takes the width of our text what we want to do is we want to take the probably 100 of us the width of a screen like this or maybe not 100 because we need some spacing around so let's do 90 and that's not gonna take a little bit less space than the whole screen but it's going to be aligned to them left what we can do is using the Align self property we will say that we want to align this item in the center and that will put this button nicely in the center of the screen here perfect uh yeah from the background color red I think we can easily go to background color black now the text is not visible because the text is also black so we let's go ahead and change this to color White yes I see the text there um to give it more space to this button I'm gonna play with padding and padding is the spacing inside the container so if we say padding 20 this will add 20 pixels around the box there of this button so it looks like this now to make the corners of this button round we will use the Border radius and we will provide like if you provide 10 like that's gonna make the Border just a bit Round And if we go a little bit more it's going to make them fully round the way we want it to be and lastly we want the text to be in the middle so to align with text in the middle we're gonna give uh justify content to the button Center and this will align all the items in the center but this is vertical so we need align items Center and this will horizontally align the add to cart button in the center I think that everything for the button uh I also want to change a little bit for that style for the text to make this font a little bit more bold like a 500 and to increase a bit the size so font size font size 16 maybe that's gonna be enough yeah I think that's good so with that we have this button always visible on the screen and what we can do is we can press on this button at the moment nothing is happening but let's actually see if we can handle this press event so for that I'm going to add here to the pressable the on press event and won't press event expects a function that is going to be called every time the user presses on the button so let's define a function add to cart which we didn't Define it yet but we can do it here in the component const add to cart is equal to a function and I'm going to go ahead and use a console.warn add to cart just to see something on the screen to see a user feedback a feedback so now with this having in place if I press on the add to cart I see this nice warning that is um only showing in development so it's only here until we actually implement the logic that thing we're gonna do in the video by the end of this video so now we see that we can handle properly via touch event on the button and we can listen to this event and do our logic later on all right um in the guide I also showed you how you can work with icons uh that actually optional so if you are interested check it out in the guide you see how you can import icons how you can search for icons and how you can have a a button with an eye conveyor if we will have time by then maybe I'm gonna show you but that's not the most important part of a tutorial and I really want to make sure we managed to do the important part which is coming up very soon now we are finished with our uh product Details page we can go ahead and do git add and we can commit minus m product details screen perfect the next step is going to be our shopping cart UI and we're gonna get into it shortly after we look through some live comments so if you're still coding me I will give you two three four minutes maybe five if we have enough comments to uh to look at um hello from Friends hello Oliver how are you doing do a payment application tutorial from Tunisia Botswana um Sri Lanka okay West Africa hello foreign hello I see you yes so guys how many of you are following along let's see where you're just watching it on the background vote in there Paul I just run it hello from a Cuban on Finland hello angel Senegal hello when we're changing image details not changing what do you mean by that what exactly you're changing and that's a fun project hey any Moon thank you very much for the donation Army shows included with a source code shows which which shows what are you talking about I don't know thank you very much for the support and one I really appreciate that hello from Philippines hello yes I see more than 60 percent of people are actually following along that's awesome we have one more screen on the UI side uh that this is the shopping cart screen and then we're gonna do navigation and then we get into the global State Management foreign get empty when we on the items to the order screen while using AWS amplify and card um in this video we're not going to implement the backhand side so in this video we're gonna manage everything on the front end like adding products to the car it's changing quantity deleting products from the card and all of this stuff um if we decide if there is enough uh requests from you to to see how to do the back end um and if we do that with the back end like when we submit an order yes like we will delete the card but this is again like it's it's one part of of the whole functionality like we have a lot of of interesting features there in in the cart like to to other things to change quantity to to calculate totals and so on so on show on Show Must Go On following along and everything is working that's great I'm super happy for you let's go are you using node 18 or 16 to be honest I have no idea probably 18. I think yeah yeah I uh upgraded recently so if I do node version it's 18 at the moment foreign but everything should be working on the uh on the 16th as well the Nike shows Nike shows are we doing some shows ah shoes I think you're talking about shoes oh yeah all right um I wish I wish Maybe you should have done with API um we can do the API later I now want to focus on them on one topic like building the UI and also managing the global State here we have a lot of projects using apis definitely yeah all right guys so uh I think we can move on with next features uh and our next screen but we will uh have to render uh is going to be our shopping cart screen so let's go ahead and start by defining the shopping cart uh as a new file in the screens so let's create new file uh what do they call it do they call it shopping cart shopping cart dot GS and here let's go ahead and Define the const shopping cart equal to empty component that will return let's simply return some text at the moment shopping cart um we can import this text from react native and lastly we can export uh by default via shopping cart Now with an empty component like these let's open up app.js and let's import our newly defined screen shopping cart from Source screen shopping cart and here let's comment out the product details screen sorry and let's render the shopping cart uh the text will be very visible on the top um if you know about this issue there is a way to solve it with safe area views in order for our content not to go behind these unsafe areas like the Notch and so on however I'm ignoring it on purpose for now because in a moment we're going to implement navigation and this issue will be solved automatically so let's move to the shopping cart here and what will a shopping cart display a shopping cart will render a list of shopping cart items these shopping cart items uh I actually have prepared these components for you just for us to move a little bit faster uh towards the the goal of this tutorial so let's go ahead and Define investors a new folder called component and from the asset bundle let's go ahead uh yeah like in the asset bundle there is the code in the code there is components and I have prepared this card list item let's drag it in our component here and we can have a look at what uh what it renders but I think we're gonna do that once we see something on the screen so I can show you exactly what's what on on the screen let's go to our shopping cart and having a card list item and also in the data we have some dummy data for the cart.js this cardiologist contains information about items that we have added to the card the structure of this item is as following it contains the information about the product it contains them quantity of it um of that product and it will will potentially contain other things that we selected about the product for example what size did we select it what color did we select it and so on so besides the product it contains our configuration that we want to know about the product foreign so now that we know that we have dummy data we have a component that will render one of this cart item let's go ahead and shopping cart import a flat list and render put them together so instead of this text I'm going to render a flat list and for the data I'm gonna do card and this should automatically import the card from the car data from data card it looks so bad come on you can do it and yeah render item and for the render item we're going to Define this function that receives one item and this item is one card item from our dummy data here like one of his objects and using the card list item that we can import here card list item we're gonna render It Card list item and let's send card item equal to our item and make sure to close this component as well so um I'm gonna stop for a bit so you can check the structure of this file so we we're rendering a flat list we already saw how to work with flat list for that we need two pieces of information the array of data that we want to render which is coming from our dummy data and if you want to look into it and see more details how it looks you can find it in Source data card.js now for every item in this array what we are doing is we are calling this render item function and for every item we are rendering a card list item and we send this data as a property layer now if we go into the car list item we can see what I'm rendering here so basically yeah like we are starting with an image on the left and in the middle We have basically a container if I do it like this you can see it easily like we have the image on the left and everything else on the right okay let's go deeper inside the content container and here we see okay we have the name on the top we have a size that is coming from the property there and in the footer we have um basically the quantity we have two icons for plus and minus signs that we will use to increase and decrease the quantity and lastly we have a text for our item total basically what's the price of this item multiplied by the quantity now below I have like all the Styles so as you can see like it's really repetitive uh so that's why I'm giving this component um through the asset bundle so we can move on with uh we will meet with the content so uh guys let me know if this step work for you if you see the same thing that I'm seeing because we will move on to the next part because on this shopping cart page we are not done yet we still have to do to render some things for example at the bottom of these items what we want to do is we want to render three lines of text one for subtotal then for the delivery fee and then for the grand total so to do that to render something uh at the bottom like after all the items in a flat list we can send a property to a flat list called list header component if we do that we can render here it should be a function that returns some GSX so we can render a view and inside this view basically multiple rows like three rows of text um for example one of this row will contain let's do it like this it's going to be view the first view is for our Styles Dot totals container it's going to give us an error because we have not met we have not yet defined the Styles and we have not yet imported View so let's go ahead and import View and style sheet from react native and now at the bottom we also have to define the Styles so Styles equal stylesheet dot create and we need styles for the totals container we'll see what stars we need there in a moment but the view inside is our basically the row that will contain two text box one of the text is the first one is the label subtotal and the second one is the value and the value will be I know I can hard code it at the moment uh I see the problem I said the least header component what they actually meant uh is list footer component because at the moment the items are displayed there in the header so I'll replace header with footer and yeah like that's also uh good to know because you saw how we can also render things on the top of a flat list okay uh we see the label subtotal we see the text uh there but we are not displaying the same row because we need to provide the styles for this row and the Styles will simply be Flex Direction row if we do that we are displayed in the row and to make sure that we put one I one text on the left and one text on the right we will use the justify content and specify space between to put all the available space in that container in between the two components that we have here so now subtotal is on the left and the value is on the right oh all right okay uh for the totals container I think what I want I needed it for is to add some padding like 20 to make sure that we yeah they look better um I think should bet should be good or yeah like that should be good probably oh no no no um yeah I want to add a little line on the top uh so to have a visual separation between items and the totals to do that we can do it with uh borders so for example we can say we want the Border color to be gray for example and the Border top weave off one and if we do that we see them line there and yeah like I did I don't like that the line is starting actually from the side so instead of having padding 20 here I'm gonna have margin 20 and now the line is starting from where I expect it to start and besides this I also want to add some padding on the top to add spacing between the line and the first text but in top 10. between the line and the text and the color is a value gains borrow I think it's a lighter gray perfect for the text here I think I also styled it with style.txt so let's do text here increase a bit the font size to 16 and do a color gray okay that's good and I'm gonna apply it to all to the value as well and yeah with the Styles I think that's good now let's go ahead and duplicate this Row one more time for our delivery so delivery um yeah probably 10 like this and lastly we will duplicate it one more time for the total total 500 420 420. but I want the total to be displayed with bold so I'm gonna Define a different style called text bold and this text bold I'm just gonna simply duplicate with text change it to text bold and also apply um font weight 500 and I'm gonna font weight 500 and I'm gonna remove a color in order to make it uh yeah black like this and to add more spacing between the lines we can do that by adding margin vertical to the row component and two might be what we are looking for all right with that being said we our footer is ready so we have our totals here displayed and uh what which view which view is yeah so yeah like it's a lot of things but um we slowly we have styled everything and render them in in separate rows and so on and yeah finally what I want to do is I want to render the checkout button which will be quite similar to our where is it in the screens in the product details screen uh our checkout button is going to be quite similar to the add to cart button because it will also be displayed um always on the top of the screen so let's go ahead and copy this principle from here from product details screen in the shopping cart and where will we put them I think we will put it uh besides the flat list not in the footer so for that where our flat list ends which is here we can put the pressable but you will see everything became red that's because in react all the components should return one single child and the thing is that now we are returning to child flat list and pressable to fix this problem we're gonna encapsulate them inside the empty component which is called laws of fragment and we're gonna close it here at the bottom and that will solve this problem now we are returning one single component this fragment which contains two Childs inside okay that sounded if you are not a programmer containing two child inside that sounds really bad but it makes sense in programming let's go ahead and import pressable from react native uh pressable we imported for the on press um I'm gonna actually remove it because we don't need it any uh at the moment for the text there's gonna be checkout check out lastly let's go ahead and bring these tiles for the button and button text from a product details screen I'm going to scroll down till I get the button and button text to the shopping cart I'm gonna put it there and just like that we have our checkout button here perfect foreign rendering the least footer component inside so at the moment we are doing we are rendering this component the footer component uh here inside basically we're defining like what to render in line with a flat list uh usually yes in order to keep everything more cleaner we we usually take this into a separate component and I can show you how we can do that at the top here we can Define const shopping cart totals and this is going to be equal to this whole function so if I copy it from here and put it into the shopping cart totals like this now we can simply take the shopping cart totals and send it to the list footer component like this and now the flat list is much cleaner we see like data render item and okay in the footer we are rendering the totals and if we need to get into the details like what are the totals and so on we can look at this component here one extra step is to extract extract it into a separate file and in that case like it's going to be even better but I'm gonna stop here I just wanted to show that's also possible foreign can you add swipe down to reload the card we would be able to do that but at this moment it's not it doesn't make a lot of sense because um there is nothing to reload everything is going to be in our Global State Management like it's not remote data it's not coming from an API so yeah but a flat list allows you to do that so don't worry uh also about like the things that our components are behind them notch in the next step we implement the navigation and that will be fixed automatically all right so uh more or less our shopping cart user interface is finished uh yeah actually that's everything we need at this moment for the shopping cart so let's go ahead and do git add git commit minus m shopping cart screen and in The Next Step we're going to put all the free screens and that we have built so far together into a navigation system so that we can navigate from one to another foreign let's see before we before we continue we can take a very small break to go through the live comments any advice for people who would like to start coding with Flex experience in react native um I would recommend going through some of the builds that we have on this channel because I'm always trying to make them accessible for all developers no matter your experience so the only thing that I expect you to know is basic programming and basic fundamentals about programming and here I'm talking to know what's a variable what's a function what's an array what's a loop and so on and experience with JavaScript is also required I'm not explaining like how JavaScript works here but everything that comes to react native to the rendering part to even like some of the modern JavaScript features that we are using like the structuring and so one I'm explaining them everything in these videos so a lot of beginners were able to follow along and complete these builds themselves I also there is also the step-by-step guide but I'm providing with every build and that will also help you move along and uh see what we have to do um check out some of the beginner friendly tutorials on the channel there is that Tesla clone with a lot of people enjoyed this one is actually quite easy to follow along um so far like we it should be doable for everyone now we're gonna get into navigation and Global State Management the complexity will increase a bit I hope it's going to be slowly and I'm still going to explain you what we are doing step by step I'm on uh I'll try to get back to you on Instagram it takes a bit more time uh it's I'm really really busy with this with um preparing everything for YouTube and also uh working for our premium courses um we are recording new modules we're improving it so it's constant constant a lot of work and by the way yeah if you are at a point where you went for a couple of Builds on this YouTube channel and you're taking value and you want to advance to the next level as a react native developer then check out the premium course that I have prepared and that we already have a lot of students there more than 400 or even 500 students are currently enrolled and are going through a course uh in that course I'm taking you from basically beginner and all the way until you know how to build full stack end-to-end applications with react native naws amplify the link you can find in the description below check it out it's really uh in-depth and finishing it like you have a model a mental model on how to build end-to-end mobile applications laughs ABC is saying you helped me land my first react native developer job oh my God that's so awesome like this is that success stories that uh that makes me happy and what makes me continue doing all of this and here on YouTube where can I get the source code the source code is going to be available in the description I'm gonna post it on GitHub but first I have to finish it like we're still live after the life is finished I'm gonna put it there foreign how to have those connecting lines you have on the brackets and that is yeah like ligament you're talking about yeah like The Arrow functions right uh check out the vs code top vs code extensions video that I have on the channel and where I explain how you can add this font that automatically transforms the arrow functions foreign all right we have a lot of comments uh so so so people want to see the backend as well I'm getting lost a bit in the comments give me a second would it be better to have a button as a component definitely that you I like how you think already every time you copy paste things uh in your code and that's always uh true you should think how you can make this abstract how you can make it every more reusable so yes it would be better to make this button a reusable component because we already used it in two places if you know how to do that that would be a great a great um way to see how um to to play around and test it for yourself what are we going to eat for to navigate uh for this tutorial I decided to go with react navigation even though we played with explore router previous week I really loved how it works um I'm pretty sure that a lot of things will change for export router in the next weeks or up until the next version of Expo so when Expo router will be available by default using Expo CLI at that point I think I'm gonna use it more often in the build I just want this build to um to be more future proof and with react navigation that's going to be the case are we going to complete this application this live in this video the plan is uh at the moment we so far we have built three screens we have built the product screens with product detail screens and the shopping cart screen the next step is to connect everything into the navigation system to be able to navigate from one screen to another and then we're gonna go into implementing them logic by global State management using Redux and Redux toolkit oh why I'm running out of breath and yeah like we're gonna implement the global State Management and in for that like we we need a bit of time to to make sure that everything is clear so that's the plan for today okay yes we're gonna use Redux toolkit yes read uh the Redux toolkit works with react native as well so guys um let's go ahead and follow the next steps we still have as I said a lot of things to do and Implement in our application and the next step is to put all of the screens together into a navigation system and for that we're gonna use the react navigation Library uh you can check out the documentation for react navigation by going to react navigation react navigation here it is and we have a super nice documentation there so if you go to the docs and we're getting started you will read more details about the react documentation I'm going to explain you step by step like what we are doing but I'm not going to get into a lot of details because as I said my focus for this build is the global State Management so what we're gonna do is we're gonna install and set up react navigation we're gonna use a native stack navigation um which looks like come on which will help us move from one screen to another and will help us like go back and so on I don't I don't have any reference to see how it looks but we're gonna see it exactly in our application uh go ahead and check the step-by-step guide that you can find in the description below below I think I'm repeating at this point too often but there I have prepared for you the installation command for the navigation so let's copy this command that installs the react navigation native and the other dependencies that we will need for the navigation and let's paste it in our terminal so I'm gonna press enter and we have here react navigation native which is the core of our navigation then we have a native stack uh Rec navigation native stack which gives us the possibility to implement native Stacks a navigator that works natively the native screens and the safe area context these are the dependencies um okay now that we have done that uh I'm gonna put all the code that relays to the navigation into a separate file inside our source so let's go ahead and create this file called navigation dot GX so in Source navigation.js here we have it so let's define the navigation component which will return some GSX uh we can go ahead and export default navigation and the first thing that we need to do in order to make navigation work is to use a navigation container and put everything inside that navigation container so let's go ahead and import navigation container from react navigation slash native that's how we import it and we're gonna render this navigation container here navigation container as the the root component in our navigation okay for now um I'm going to import our screens we will need them later here so let's go ahead and import products screen let's go ahead and import product detail screen and lastly the third screen shopping cart screen now let's simply render the products screen inside the navigation container which is not the way we uh we will do it but just to see something on the screen lastly what we have to do is we have to go to our app.js and instead of rendering the shopping cart which at the moment we can delete all of these three components as we will not no longer render them from the application but from the navigation and in the app.js we simply need to import the navigation from Source navigation and render it here like this okay we see the product screen because in the navigation that's what we rendered product screen perfect but as I said this is not the way we are rendering screens inside the way we render routes in using react navigation is we need to use a specific Navigator and a navigator basically defines how them the navigation between one screen to another is working and also how is that how they are presented on the screen so for example a bottom top Navigator this is a sub this is an individual Navigator a hamburger menu with a drawer that another Navigator in our case we simply need a stack Navigator so we're going to import create native stack navigator from react navigation slash native stack having this function that will help us create a stack Navigator let's go ahead and create this stack stack equal create stack Navigator simply calling this function uh outside the component like here at the top what this stack what this function is giving us back is an object with two properties stack.navigator I'm gonna remove it from here one of his property is stack dot Navigator and this is the component that we need to wrap all our routes inside then the when to define a route in that Navigator we use stack Dot screen investigator screen expects to required properties the name of a screen which in our case can be a product and the component that we need to render for that screen in our case products screen I made a mistake somewhere here no I need to close the stack screen here and just by doing that we already steep a product on on the screen and also we see this title in this title this header at the top this is coming from the stack from the stack screen so it's automatically managed for us perfect the same way as we Define the route for our products we need to Define it two more times for our product details which will render product detail screen and for our card which will depend which will render the shopping cart screen okay now we have this route but still there is no way to go to that route well let's go ahead and fix this problem and what we want to happen is whenever we press on one of these products here we want to open the product details screen so let's go ahead in our source screen product screen because this is the product screen and to navigate to a different screen when we press on this item well first of all we need to transform this item from A View to a pressable because we need to handle press events pressable like these so this is a pressable and we will send by one press event that is going to be a function uh we can actually I think extract it to no let's let's keep it there for now if we do console warn uh pressed and the item dot name if I press here pressed this one Air Force like Cosmic and so on all right so we are detecting press events now we need to navigate to the product details screen to navigate we need an access to the navigation object there are a couple of ways to get this navigation object but if you are working inside the screen basically if you're working into a component that is renderism as a stack screen here product screen the easiest way to get it is through the props we will receive it as navigation like this so the structure of a navigation from the props and instead of console worn here we can use the navigation object to navigate navigate and here we need to provide the screen name where we want to navigate the screen name was product details to double check go back to navigation and here is the name that you're looking for now if I'm going to press on one of this item I'm redirected to the product details and the cool thing is that I also have a back button automatically handled for me so everything is working as expected all of them will display the same data because we are still working with nami data so they expected behavior is simply to show the product Details page foreign foreign another thing that I want to show you is that the way we display a screen using stack Navigator there is there are a couple of ways we can adjust this so for example if we want the product details to come from the bottom basically render as a model we can do that by going to the navigation and for the screen that we want to change this presentation mode we can provide here additional options for the options let's provide the object and we will provide the presentation object and the presentation will be a model so if you do model now if you press on this I think I need to refresh now if you press on this no come on should work presentation model for the shopping oh because I put it to the shopping cart and into the product details yes product details now it displays as a model coming from the bottom on Android it will look a bit different because it will look like a native android model so that's expected but it's still a model so we can dismiss it by just dragging it down you can look at other ways you can display it so you can do full screen model full screen model so in this case it comes from the bottom but it's a full screen and in this case you will not be able to swipe down to close it you're gonna have to add the close button and go back there so that's why I'm gonna stick to the presentation model for this one I need to refresh to do that I can go here and press R to reload and now yes it works better and yeah like as you can see through this model you can scroll vertically you can scroll horizontally and also you can scroll from the top to close it uh to close the model completely Brian is saying I prefer using the use navigation hook yes I also prefer use using the use navigation hook and this is another way we can get access to the navigation object and why I prefer doing that let me show you how to do it but it's actually in this case it doesn't really matter it's only a personal preference so if you don't want to take it from the props if like this I'm going to delete it from the props we can use a hook called use navigation and that will give us the reference to the navigation and everything will work as it was working before this use navigation Hook was imported from react navigation slash native like this at the top and why I prefer doing this overtaking it from the uh navigation from the props is in the props we are only gonna get this property and inside the component that is rendered by the navigation so only in the product screen in the product detail screen and in the shopping cart inside them components that are nested for example if we look into the car list item here in this car list item don't expect to see the navigation here because this is a component that is not a screen that is not rendered by the navigation so if you need it here you will have to use the use navigation hook so that's why I always use when I use navigation hook because this way I'm pretty sure that I will get the navigation there so it's in my opinion more reliable okay are you planning to show splash screen I was not planning to do it for this today no what is what exactly are you interested in seeing for the splash screen like how to render a custom splash screen or what exactly hmm so [Music] um how do we navigate to the cart um to navigate to our shopping cart I think the best way to do is is to render an icon in the header of our navigation um and that I can yeah we can do that by hmm so the next step is to implement a button that will redirect us to the shopping cart I am planning to do that as an icon in the header in the title of our screen how we can do that we can do that also through the options that we send to this deck screen so if I'm gonna send them the button to the we on what screen do we we need that shopping cart I think we need it here in the product so if I'm gonna do options here is equal to an object I can provide here header right and this header right we can specify a component that we want to render in the header right part and the component that we want to render there um is going to be is going to start with a pressable because we will need to handle press events um yes we're gonna need to handle press events inside it we're gonna render an icon in the icon I think it's the font awesome so let me go ahead and import font awesome five from Expo how is it I always forget the import statement Expo Vector icons like this so the icon here in the pressable is going to be a font awesome 5 with a name what's the name shopping cart shopping slash card with the size 18. and color probably Gray okay we see that I conveyor perfect besides the item I think I also will render a text that will represent how many items are in that um in that card and the text don't forget to import it from react native at the top and we see the text below the cart item okay uh to fix this I'm simply gonna say the style of our pressable will contain a flex Direction row to render these two components in the same row perfect and let's also add some styles for our one here like a margin left five and a font weight of 500. something like this will look perfect all right uh good and now we see this navigation here uh what we wanted to do this for is whenever we press on this icon we want it to navigate to uh the card screen so we know that on pressable we can add a OnePlus event and here we can define a function that will do the navigation and we also know that we need to use the navigation object and to do navigate to Navi gate to the screen with the name card but where do we get the navigation from because we are inside the options again here we have a couple of options if we take this out into a separate component we would be able to use the use navigation hook in this case if we want to leave this here what we can do is instead of specifying the options as a hard-coded as an object we can pay attention we can move this to a function that returns an object so again instead of this object we can move to a function that returns an object in between these two closing brackets let's put the round bracket so it's a function with our parameters this is the arrow and this is a return statement and this is returning the object with options what this allows us to do is it allows us to receive the navigation object through their properties here and now we have access to the navigation and in the option in the header right we can use this navigation object to navigate to a card and if I press on the card here we go we are in the card perfect um if you want this item but no I think that's that's good here okay foreign so I think uh yeah the last thing that I want to show you is now the background of all our Pages became gray what we wanted is to have him as a yellow back white background so how can we adjust the style of all these screens at the same time without having to go and adjust the style of every single screen well we can do that by providing the screen options to the stack Navigator and in the screen options we can provide content style and here we can provide styles that will be applied to the view that renders the content for example if we do background color red everything will become red so let's go ahead and do white here and now our screens are back to having a white background like this and with that being said our navigation is complete for what we need at the moment and we can go ahead and do git add and commit everything no what no all right so the last step in today's build is going to be the reason why I wanted to make this tutorial and that's going to be managing the global state of this application using Redux okay that's gonna be fun I hope I'm gonna manage to explain you in a simple way the way I explained everything to you I've been avoiding uh going into the Redux just because it gives a necessary complexity but if you understand the the concepts which which are quite a few of Concepts if you understand them individually you're gonna be able to understand the whole thing and everything is kind of it will make sense so my goal for today is to make sure that you finally understand react Redux and how to work with it how to set it up how to split everything to split your Global state in order to make it performance so it's going to be challenging but I'm ready for this and let's take a very small break like two minutes to go for the live comments and then we can get started with Redux foreign at the moment the items are coming from dummy data it's not coming from a back end in order to make this project easier however maybe I cannot promise right now but if you're watching this video later check it out on web in the playlist or in the description below because maybe we will do a next episode of this video where we will implement the back end and these products and these items will come from a back end uh so if you're interested also let me know in the comments uh and next week we can go into and implement the backend as well someone is asking about model with um Android device let me go ahead and run this application on an Android and for us to see how it looks there as well foreign so here I'm running the application on Android let's see how the model will look if I open like this yeah it is going to look like a full screen model it's different than no it's actually quite similar as the card so yeah that's how it is implemented on the Android foreign and let's try to see with a full screen model if that will change anything but if I'm not mistaking the full screen model will default to a model on Android and will only be different on iOS yeah on Android it defaults to to being a model so yeah that's that's how it works on Android it looks cool thank you yeah I also really like this application I love it from the Simplicity of it like it it looks really nice and yeah I hope that this tutorial will help you have like a like a starting project for any e-commerce application that you might want to build so if you have a project where you need like e-commerce features I think this is a great starting point moreover we're gonna get into the global State Management so this is going to be ready to scale uh and be and grow in size in terms of features and what the application can do okay so are you ready guys for uh the Redux part we are getting into it so we are two hours in let's see how much it will take hopefully not that much okay so first of all um let's discuss a bit why do we need a global State Management at all because we can define state and we know how to work with state in a component so for example in our case we have our shopping cart and we would have to define the state the problem appears with sharing the same data between multiple components for example adding things to the shopping cart happens on our let me bring my here yeah adding products to a shopping cart happens on the product Details page here we can press on add to cart and here is going to add Vader displaying products from the shopping cart happens on the card page calculating the subtitle happens also here in another component then we have this are rendering the number of items in the header of a navigation so as you can see the same data is required in multiple places of our application so when this happens um one approach we can do to still be able to use like component State using the use State hook is to take the state and put it up in the tree uh into a component that is a parent of all the components that depend on this data in our case one of these top components can be our app.js so our app.js can potentially Define here the state for our shopping cart and then and then the next problem appears sending and accessing this data one way to do is send it through the properties to the navigation and then from the navigation receive it here send it to the screen and then from the screen send it to the components and the problem that I'm explaining right now is called prop Drilling and which means is like we are just getting some properties we are sending it down the tree we are getting it we're sending it down so this becomes really annoying and error prone like if you forget to send this property from one component to another you break the chain and um that you're not going to get the data where you need it moreover you include a lot of unnecessary data dependencies that will impact the performance of your application okay another way you can solve this problem which a lot of people are doing nowadays is using the context API well that's gonna already be better because you're gonna solve a problem with prop Drilling with a context API you don't need to send this property all over the place you can encapsulate with the context provider all your application and then where you need it using a hook like use context you can get this data okay that's fine the problem here with a used context is performance and a necessary re-renders so for small things I totally I always recommend sticking with use context everything is going to work okay for small applications and especially for data that is not changing very often use context is actually that's why it was created for data that is not changed often for example changing the theme like from Dark Side to light mode that data is not changing often so it's perfectly fine to do it with the context because yeah it's okay I don't know why I'm running out of breath maybe that's because of my aligners that prevent me to breathe normally take a second with him um so now we get into the data that is changing often in application and one of his use cases that makes a lot of sense is this shopping cart use case people are adding things to the shopping cart people are adding it from one place in replication and viewing it from another placing application we are changing the quantity changing the quantity can affect our data like the total and subtotal like it's a lot of interconnected data that we need in multiple places of our application also this data is changing very often so that leads to us having to implement a global State Management okay so there are a lot of ways to implement that there are a lot of libraries for managing Global State um however in this tutorial we're going to use one of the oldest one and the most popular probably um which is called Redux I've been avoiding using teaching Redux for a long time but in the end like it's still an important library that is used in a lot of uh projects and a lot of companies and I think it's going to be very valuable for you to have some experience with Redux and to work with it so in today's tutorial we're going to implement Redux using the Redux toolkit which makes a lot of things simpler and with less boilerplate and we're gonna Implement all our state for the shopping cart and so on in this application so first of all um I'm going to shortly talk about how Redux Works behind the scenes I'm gonna go through some of them um [Music] some of the concepts of Redux for for us to to make sure that we understand what we're talking about because there are a couple of them like store actions reducers and so on uh to explain that I'm gonna use this diagram here yeah that's probably fine so in this diagram we see how data flows in our application having uh using Redux as the global State Management on the bottom we have a user interface and this is our react native code and here on the right we have our store um starting with the store what is this store the store is the main source of Truth this is where our state lives this is the global state that we can access from anywhere in the application now this state is consumed by UI and is rendered on the screen for example a shopping cart items they are the state in the in our store we get them in the UI we render them there now on the UI side we have uh here we have an example with uh like depositing and withdrawing money from an account for example we have two buttons deposit and withdraw when we press on this button we trigger a an event handler basically the onepress event when we do that what we want to do is to this basically send an event out there to to the to the universe the hey and action happened we are not changing at this moment anything we are just informing the universe that something happened and this events these things that we're doing here is called we are dispatching actions an action is specifies what happened and also contains data that we'll need to know about the action for example pressing the deposit ten dollars might trigger the action deposit and will have a payload of 10. pressing on the withdraw will dispatch an action called withdraw and the payload will be 10. okay these actions as I said they do not change anything we're just sent out there as events what they are doing is they will trigger one of a reducer reducer water reducers reducers are simple functions but we Define in our store that takes one action we take the current state and based on these two information they mutate the state based on their action so a reducer takes the action it takes the state and updates the state to reflect the new changes it's basically a mutating the state once the reducer completes it updates the state yeah the reducer will update the state and this will trigger the UI to update what it renders on the screen so so far I hope you there you you got a little bit of the concept of how Redux works we have a store that contains our data this data is displayed on the UI when we do something on the UI press a button submit a form or something like that we are dispatching an action this action triggers a function which is called reducer and that reducer updates the state so it's a lot of things going on here but basically we are sending events and triggering functions at the end of the day when we user does something we send an event based on that event we are executing some code that will update our data and that's mostly everything you need to know at this moment um why are you ignoring I'm trying my best to deliver the best value here and I'm gonna answer their live questions in a moment guys um so I really want to make sure that you get all of these Concepts because we can easily get lost in all of these store dispatch reducer State event actions and so on hmm okay all right all right uh let's go ahead and yeah one last thing uh in order to Define and to work with Redux we're going to use the Redux toolkit which is a set of tools on top of Redux that helps us create and manage our store in a easier way basically we have to write less code um than we would do if we work directly with Redux this is called the modern way of working with Redux so for that we're gonna go ahead open a terminal and let's start by installing two libraries we're going to install Redux toolkit like this and the react Redux this command is available in the step-by-step guide so you can copy from there and let's press enter to install them foreign foreign step is to Define our store for that I'm going to create a new folder called store that will contain everything about the Redux the Redux store so let's go ahead and Define the index file that is the main like our Redux store so um to configure our store we're going to import the function configure store from a Redux toolkit where here here it is now let's go ahead and export the constants to our uh that we will create by calling the configure store and what it needs is an object with some reducers at the moment the reducers will be an empty object because later on we will add the reduces that we need here let's just Define it as an empty store so if we if we check this diagram we know that the store is the combination of the state and the reducers reducers are our functions that update state at the moment we have we do not we haven't defined any reducers let's just generate and configure the store now that we have it here we need to inject basically make it available to the rest of our application to do that let's go ahead and app.js and let's import web provider Provider from not from react but from react Redux so using this provider I'm going to encapsulate everything into the provider and I also have to send the store there in the store we can import store from Source dot store okay doing that now all our components inside this provider will have access to the data from our store and also will be able to dispatch events to the store okay the first step is clear hopefully foreign all right so let's go ahead and Define um some data in our store so what we're gonna do is instead of creating all of them of the state and reducers in the main store we're gonna split it based on we're going to split them logically for example the data about products we're gonna keep it into a separate file the data about the shopping cart we're going to keep in a separate file if we would have users that's going to be a separate file and all of these parts that we split our store into they're called slices this is another term we're gonna use and let's go ahead and Define the First Slice we're gonna start not from the shopping cart but actually from the products just to make it a bit easier for us so let's define products slice dodges okay product slice.js so what do we need here well we will need to import create slice from Redux toolkit like this we need to Define their initial state which is going to be an object and we're going to think like what state do we need there in a moment and we need to export the slice export const product slice and this product slice is going to be created using Create slice and here it needs a couple of parameters it is the name to know what name to use for this slice and we're going to use products it needs the initial state which we defined it here and it needs the reducers basically the functions that will update this state and here because initial State initial state is the same I'm going to simplify it like this perfect so what do we need in in our state our state of products will contain the actual products to display so we can start with an empty array here and that will be enough for us just to get started now the next step is we need to connect our slice to the main store so let's go ahead and store index and let's go and import the product slice from product slice now inside the reducer I'm going to attach it to the products by doing product slice dot reducer so I'm going to take all the reducers from our product slice and I'm gonna attach it to the reducer product here by doing that now we're gonna have access in the store to these reducers and also we're gonna have access to the end um products in the state okay so let's go ahead and on the main page here on the products the product screen let's go ahead and use this Global state to render the product for when I'm gonna open screens product products screen and instead of taking them from the diamond data here what we want to do is we need to take them from the global state taking data from a global state is happening using selectors because the way it works is the global state is a one massive object and a selector is a function that shows how to get the specific data that we are looking for so let's go ahead and import a use selector from react Redux not const but import new selector re ducks like this and we're going to take our products using their use selector hook and this you selector hook will receive all the state that we have in the in the global State Management and we need to specify how do we take the products from this state so we are going to take it by State DOT products because in the index here is the products the name is products so state.products and the data that we are looking for is this array of products so that's why we need another dot products here okay we don't have any errors but the problem is that we do not see any items well that's because if we look in there products slice we initialize it with an empty array let's go ahead and initialize it with a dummy data so I'm going to import products from data products and I'm going to initialize it with this dummy data and now we see the products again in our product screen but this time we're not coming from uh from being imported in this product screen but we are coming from the global State Management okay maybe so far um it's still Overkill because we haven't changed anything but we introduced a lot of topics but in uh in a moment we're gonna Implement a couple of logic for example whenever I press on one of these items I want to display the I want to display the details of a product in this product detail screen what we can do is whenever we press on this item on the products page let's go ahead and uh set it as the selected product in our Global State and then from the next screen just simply take that selected product how do we do that well for that we need firstly a variable in our store and that variable is going to be selected product initially it's going to be null now we need we need some logic we need a reducer basically a function that will be triggered whenever we want to update the selected product hmm so the reducer I'm we're gonna call it set selected selected product and uh if you remember from this diagram a reducer will get the action and will get the current state we'll get two things action and state and based on this it will return the updated state so as I said the reducer gets the state and the action and here based on the state and the action we need to update uh via existing state okay so for now maybe we can console log the data so you can see exactly what information we have here console log action so here is state and here is action in order to trigger this reducer again I'm going to open the diagram the thing that triggers reducers are them actions that are dispatched whenever something happens in the application so using this patch we are fire we are dispatching an action and that triggers a reducer well um with Redux that would be a bit harder because we we have to Define all of the actions ourselves but with uh Redux toolkit our all our reducers automatically create actions for us that we can use easier what do I mean by that is let's open the which screens the product screen because this is the screen that we are looking for and here when we press uh uh on this item before navigating I'm gonna put here another set of curly brackets because before navigating I want to dispatch or let's do update selected product so uh how we're gonna do that well we need a couple of things for that form react uh Redux we're gonna need the use dispatch function and with that we're gonna get with this patch is patch like this now uh from the product slice let's import this product slice in our product screen so import product slice because we need to dispatch an action and that action we're gonna take from product slice because it automatically created for us for every reducer that we have here so let's put them together here in the one price when the user presses on one item we will dispatch the product slice dot actions dot set selected product and here what we need to do is to send the payload and the payload that we want to send is the ID of item we're gonna simply send the ID of item and the rest will happen um in the state like we're gonna find the item by ID and so on so having this dispatch let's open the console and let's try to press on one of these items if I press here we see the whole state like it's a lot of data there in advance if we scroll down a bit we see the action with a payload one and this one is the ID of the item that we clicked on because if I click on another one we see payload 4. and it has a type that is automatically handled for us so uh in the product slice what do we have to do here inside selected product we need to update the state and we need to update specifically the set of the selected product and how we're gonna do well basically we have const product ID is equal to action.payload this is the ID of the product that we want to set as selected now we're going to take the state DOT um products Dot find and we're going to look through all the products and specifically we're going to search for a product where the ID is equal to the product ID that we want to set as selected just like that so we took the information about the action that we want to to happen and that information is the product ID and we have updated the state um so at the moment nothing will happen but let's go ahead and use this data the selected product in our Details page to render the information about the item that is currently selected so in the screens product detail screen to use the data if you remember we need the best selector so let's import use selector from react Redux and we also need the uh no yeah that's everything that we need now instead of taking the product here from the products at position zero We're Gonna Take It product we're gonna take it using the U selector and from the state we're going to take it from State DOT products dot selected product now if I press here it's this item and if I press here it's another item with other images and it will work the same for all the rest of items so let's think what happens here all right starting from them product screen this is the screen with all of these items when we press on one of these items I'm gonna cop comment out the navigation.navigate just to stay on the same screen so when I press on this item here we are dispatching an action and we are sending the ID of the item that we currently pressed now this action so we are handling the event the Press event here and we're dispatching an action to the store okay now inside our store product slice this action will trigger a reducer and the reducer is the function that updates the state the reducer will get the existing state and the action that triggered it in the action we can get the data that we send from the payload and basically what we are doing is we are updating the selected product by looking through all the products and looking specifically for bet ID now these updates the selected product in state and by the time we navigate and we reach the product details that is consuming this selected product by selecting it from the state by that time this product is updated and we see exactly the thing that we need there so two different screens One is updating the selected product one is consuming it and everything works seamlessly okay so for now I'm going to go ahead and Commit This git commit uh and in The Next Step we're going to move to the shopping cart but before that I want to look through the comments and if you have some specific question about Redux and how it works let me know and we can cover some of these topics once again if something was not clear enough so set up Redux and implement product slice git add git status perfect before that I need a short break one minute and I'm gonna be back so stay tuned write your comments now and then when I'm back we're gonna go for them foreign before everything but all right so I am bad guys let me check if my microphone is still working yes all right guys so I am back it's really helpful with free decks how to deal with API and Redux uh yeah with the API we will not get into that today maybe next time yes I'm stuck at the Navigator as soon as I add the stack nothing works anymore trying to figure it out does it show you any errors or it simply doesn't render anything because it doesn't render anything I suspect the problem is related with the some styles so yeah make sure that you updated the Styles and what else you can do Oliver thank you very much all over here you're so nice okay so uh we saw a pretty easy example with managing our products in that state yeah just empty screen uh in that case uh make sure in app.js like have a look here at my structure uh for the container Style actually I don't think I need this container anymore so I'm gonna go ahead and delete it and yeah it works yeah double check with Styles word try to reload the application close it and open it um open it again like from the devtools do Ctrl C to stop the server start it again and run it again maybe yeah like the libraries haven't linked correctly okay but we have to move on with the next steps and our next steps as I said we are finished with the product slice that are uh rendering the product and the selected product here on the page perfect looks so beautiful which one should I buy okay don't get distracted by them the next step is going to be a more interesting example and this one is going to involve our card so what I want to do is we have to manage the whole card uh globally with Redux and yeah like the feature that it will include basically whenever we press on this add to cart button we will want to update the card State whenever we go here we need to look and see the most up-to-date data for our card I also want to be able to change them um quantities and all of these items should automatically calculate the sub subtotal delivery total and so on so yeah we're gonna learn also how to work with a little bit more advanced selectors um yeah let's let's get started with that so investor uh let's go ahead and Define a new slice and as I said slices are logical groups of data in our application and their goal is to keep everything structured not to put everything into the same file so let's go ahead and create our uh uh card slice dot JS and here if you remember from the previous tab we need the create slice from Redux toolkit we need the initial State initial state and our initial state will contain the items that we have in our card and I also want to keep track of some variables here and these variables at the moment they will be hard coded but in a real application they might change so that's why we will put it in the state and this variable are the delivery fee basically what should be the delivery fee at the moment as I said I'm gonna hard code it to 15. and a lot of applications also have some logic like free delivery for orders more than 200 dollars so let's add this free delivery from we're gonna need it a bit later but let's make sure that we have it in our initial state okay so lastly let's go ahead and Export uh the card slice by creating it here so the name is going to be cart we're gonna send the initial State and then we have reducers so what reducers will we have first of all we will the reducers I'm gonna uh recap are the functions that change the state so what functions will we need uh for our card well one of them will be add card item and this will help us yeah like are the new item to the card so we have state we have action and this function will do something also from this page we will be able to change the quantity so that's an average user change quantity and that again we'll get the state and action and will do something okay so let's go ahead and start implementing the um the logic for the add card item so what will happen there well we will receive the product prove a payload of action so let's take it from there new product equal action payload Dot and how we're gonna send it and probably as product as an object called Product now what we want to do is simply push this new product to state item and it should be items sorry items dot push and we're not just simply going to push the product because if we look in our dummy data for the card our cart item is actually contains the data about the product and it contains quantity and maybe even size so let's go ahead and do we're gonna push an object where product is our new product and quantity is one so basically when we press on one of this button add to card we're simply going to add this product with quantity one there is no way to select like how many items you want like we're gonna keep it simple from here you simply when you add it's going to add this one later we will be able to change this quantity but initially it's one okay so now that we have this reducer art cart item let's trigger it and to trigger the reducer we need to dispatch an action so many terms it would be easier to say like like we call a reducer but yeah like behind the scenes like it's it's a bit more technical like it actually like fires an action and that action uh gets a lot of reducers and behind the scenes it only triggers the ones that are rare to handle the specific action and it works based on a type but yeah like with redex toolkit like a lot of this are much easier and you actually don't need to know like how how that that happens there it will definitely help you understand how it works behind the scenes not gonna lie but yeah what do we have to do is we need to um whenever we press on this button add to cart we want to add this item to the card by sending them add to cart item action that will trigger the reducer yes so in the product details screen we're gonna need from react Redux the dispatch function or use dispatch use dispatch we're gonna need X and we're gonna need to get this this patch function using the use dispatch and we're going to need the shopping or the card slice from Store card slice I forgot to call this use this dispatch so make sure to call it like this and now let's go ahead and in this function add to cart instead of console logging this thing here we're gonna dispatch uh the action that we are gonna get from the card slice dot actions dot autocart item and here if you remember we are sending it as a product in the payload so I'm gonna put an object and I'm gonna send here product is going to be equal to this product and basically because when key and the value is the same name I'm going to simplify it to this so by doing this we should um yeah we're sending the action to add to a card and our slice will go ahead and Trigger this reducer and we'll execute this code to push items in the state the last thing to see something on the UI on the screen is to go into the shopping cart and instead of taking this card data from our dummy data here what we want to do is we want to get the data cost card items equal use selector selector this use selector we need to import collector from react Redux why doesn't give me suggestions and the selector will will take the state and will access the state DOT in this case it's not product in this case uh it's card but yeah I forgot to do something and we're going to do it in a moment so state DOT card Dot items so if we do it like this I forgot to do something so let's see what's gonna happen if I'm gonna go to the shopping cart uh nothing happens because they have to reload and I have to send this card items to the flat list and if I go there we see that it's undefined like state DOT card is not defined why is that happening because we Define the slice here but we forgot to connect it to the main store so in the store index.js the same way as we connected a product slice we need to connect that card slice so current card slice dot reducer now if I'm gonna go to the card we don't see any items but if I'm gonna go to some of these items for example add to cart and now I'm gonna check the card now we see them and that's gonna work for other items as well I do it like this come back we see it here if I'm gonna do on the same item two times it's gonna add it twice in them card all right okay so um let's improve a little bit the way our autocart item function works and avoid the situation where we add twice the same item because when that happens what we actually want to do is we want to Simply increase the quantity of an item that is already in state and um so um so what we're gonna do here is before adding before pushing it there let's first check if state DOT items now let's actually find that item first so const product equal let's try to search if we already have it in state items so we're gonna use a find function to find the item with where the ID matches the one from the new product dot ID but it's not item.id it's item dot product dot ID let's call it actually item like this so now we are searching and if our items contain one uh cart item with a same product ID then it's gonna be returned here in the product otherwise this is going to be null so what we can do is we can check if product if product is defined then we simply want to do product Dot but it's actually not product and it's bad if it's gonna work but the actual name should be card item so if card item then cart item Dot quantity I'm going to increase it plus one and otherwise if we haven't found the cart item in the state we will push it with quantity one so if it's there we increase the quantity if it's not there we simply put it with one let's go ahead and check I'm gonna add this one once should be there yes and I'm gonna add this one twice and if I go there I see it with quantity two perfect exactly what we wanted and if I add another one it's still gonna work it's gonna add it as the third one and if I go back to this one and add it one more time it should be quantity freeware quantity free perfect hmm okay so all right let's go ahead and implement the change quantity band um function so the change quantity how that's gonna happen uh basically in that action change quantity we will also receive the let's actually fire the event first and then see how we can do the logic so the event is going to happen from one of our cart items when we press on the plus or minus so that component is inside source components card list items here we have a function for increase quantity and here for decreased quantity so what we need is we need the dispatch function for that we need to use dispatch hook from react Redux and we need the slice to get the action so card slice from Store card slice okay first let's get with this page function this patch use this patch perfect and inside the increased quantity um should we do it with two fabric function yeah I think it will make more sense or like we can either have two separate uh reducers one for increasing quantity one for decreasing with quantity where we can have one reducer that will uh receive an extra property amount that will be either plus one or minus one so this one really depends on how you want to design it I think I'm gonna go with them we were with a step with with having like the amount does it make sense or in order to keep more logic in the store probably we can dispatch two different functions one is increased where is it card slice I have here change quantity yeah let's keep it with one reducer change quantity and in our components card list item we're going to dispatch in the increased quantity the card slice dot actions.change quantity and for the payload we want to change the quantity for the product ID card item Dot product.id and the amount that we want to change it with is going to be one and we're gonna do the same dispatch for the decrease quantity but in this case the amount is going to be -1 now in our uh reducer we're going to receive a payload with product ID and the amount so let's go into the card slice here and first of all let's get the product ID and amount from our action.payload now we need to get the product or the card item by looking through the state dot items and finding an item where them item dot product dot ID is equal to the product ID so where this is equal we're gonna get the cart item and here we can check if Carta if this was found if cart item is defined when we want to change the quantity with their amount so we're gonna add the amount uh and that should be that should be it so if I go here if I do plus no in card list item I think I messed up how I call it so for the minus I'm calling increase where I should call decrease quantity and here I need to have increase so let's do plus if I press enter plus I change the quantity if I press on minus I again change the quantity one more step that we have to do is when the quantity goes below zero or is equal to zero we need to remove this item from the card so after this is happening we need to say if card item dot quantity is less or equal than zero then we need to filter out this item from our items from from the state so actually it should be State items is equal to state items.filter where item is different when card item that's super that's supposed to work let's see let's add more items here in the card and then we're gonna test it out so if I go now to the card and for this Retro High if I change the quantity up to zero it disappears and the rest of our items are still here same for this one and same for this one perfect I'm going to disable checking for this file which I did with this here at the top just not to have a red warnings because I'm not using typescript at the moment thank you very much okay so uh we implemented two reducers adding things to a card change event quantity which also handles removing things from them card um yeah now I want to go into a little bit more advanced selectors and selectors allows us to derive data based on the state and so the idea is that we need to store in the state minimum amount of data and only the data that is unique and rest of the things that we can derive from that data we should do that through selectors so what I mean by this for example um on the home page or no a better example would be the um the totals so one way you would Implement subtotal delivery and total is adding them here in the state as the subtotal total and so on and always updating them whenever you add things or whenever you change quantity but that's not the way it works because this subtotal and total these are derived data that can be calculated based on the items that we already have in the state all right so uh for that we are going to Define selectors that will calculate these values out of items that we have on the stay in the state I'm going to start with an easy one uh and the easy one is displaying the number of items in the card in the header here so for that in the card slice I just need to define a selector that gives us the length of these array items so let's go ahead and Export it from here export cost select number of items this selector will get the state and we will do state DOT card dot items dot length so knowing the state we're gonna get the length of items and this is going to be our custom selector well we saw that kind of selectors that we were doing uh in line but this is a better way because the logic of how we want to get this data is within our Global State not within our components that are responsible for simply rendering data so let's go ahead and use this selector inside our navigation inside our navigation here we will import the use selector from react Redux and we're going to import select number of items from Store card slice and now Sim now putting them together we can get number of items equal use selector and then select number of items now this number of items we can render them instead of them text one here so let's put the curly brackets here and inside it number of items at the moment it's zero but if I do add to cart that's going to change to one and if I go to another item that's going to change to 2 and so on so now yeah we are using a custom selector to get the number of items that was quite easy uh the next step is going to be to calculate in our cart to calculate the subtotal how do we do that so let's export a new custom selector select sum total this again will get the state and we need to calculate the subtotal basically here I'm going to use a bit of JavaScript magic and specifically where reduce function the way reduce function works is having an array of items we need one value out of them and that value is that subtotal so the array of our items is state DOT card dot items basically all the items in our card and we want to reduce to one number the vet number that we want to reduce to is the subtotal so how will how does the reduce work well it needs a function which is called the reducer and here it will return something and a starting value the starting value is going to be zero because we want to count starting from zero the subtotal the reducer will get the the value that we are accumulating moving from one item to another and I'm gonna call it sum because we are we are calculating the sum the decimation of our uh prices and the second parameter is the current items so it's going to be cart item so what do we want to return we want to return the summation plus the card item dot price dot product because the price is inside our product dot price and if I do that um yeah with not everything because we take the price and we have to multiply by the quantity so multiply by card item dot quantity okay so that's going to calculate the subtotal by um adding all the prices of items where yeah we we multiply the price with a quantity simple math right now let's go ahead and use this select subtotal inside our screens shopping cart here right so cart items no we don't need it here we need it in the shopping cart totals at the moment this one is using the round brackets and that means that it automatically returns these component so we need to switch to and normal return statement close it here the component return and if we have this return statement now this is a normal function body where we can use them um subtotal we can use a hook called use selector and the selector that we want to use is called uh select subtotal let's try to render this instead of this value here subtotal and if I'm gonna do add to card here that's gonna add to card and if I'm gonna increase the subtotal we see that if I'm gonna increase the quantity we see the subtotal automatically changes at the same time and what's going to be the same if I add another item there so if I increase the state it increases the subtotal wear the same thing here and it calculates them by displaying the sum of both items and the thing is that yeah like this 320 is not correct in the cart item it's it's damaged data so probably I need to do in card list item where we have 320 here and I think we have to display it as card item dot product dot price multiply by card item dot quantity now it's 160 and it also updates it like this yes it works as expected okay so now we saw how uh with a custom selector we can um yeah calculate a little bit have more logic inside it and calculate um for example summations who are filtering stuff and so on okay perfect um our next custom selector um is the delivery here the logic with the delivery is that we want to display the delivery fee from the initial state or if that subtotal is more than this free delivery form we will make the delivery free so to calculate the delivery fee basically we need access to the state to get this delivery fee and free delivery form and also we need the access tool to basically the result of this selector select subtotal yes we could calculate this one more time but that's going to be redundant as we already do it here in the selector so again what we need to calculate the delivery fee is information from State and also information that is returned from our selector here how can we do how can we combine that well we're gonna use the create selector function from Redux Redux toolkit and this create selector function will will allow us to create a selector that depends on our selectors and behind the scenes it also adds some performance optimization so select delivery price we're gonna use this create selector and yeah like the way it works like I'm gonna uh I'm gonna start simply like for example if I add the first parameter another selector in this case subtotal and then a function that will receive this this value subtotal and if I simply take subtotal multiply by so um let's use this selector display it on the screen and see what we have here so in the shopping cart s delivery fee equal use selector select delivery price and let's just play it on the screen here so if I add an item there and go back here in the car slice for the delivery reply price what we did is basically we said that the delivery price is double our subtotal and that's actually what we see on the screen if subtotal is 160 the delivery is 320 and if I increase it to 320 that automatically moves to 6 640. so in this way using the create selector function we Define what are the dependencies basically what selectors do we depend on then based on these selectors we receive the value in our custom function and we are doing something with it basically we are changing this value okay so we saw how we can add selectors here um another thing is that we need access to the whole state right to the to the whole state for the delivery fee and free delivery form well I'm going to Define another small selector and I'm not even going to export it probably because it needed just to have access to it in this combined one so let's define a selector that will get us the card details basically everything in the cart so card selector equals State and we're going to get the state DOT card now let's go ahead and add this card selector as yeah like the first parameter in this dependency like param um yeah in this dependency like it's not an array like all them items in the beginning of this function they are dependencies that will be sent to as a parameter to this update function so card here is like this so we receive cart and subtotal because cart is first one subtotal is the second one and what we want to do is we said that we will have a logic so if card Dot if select oh my God if subtotal if a subtotal of our order is more than the card Dot free delivery form so basically if we are wondering for example for for a lot of items in that case the delivery will be zero if our subtotal is more than them the threshold from where the delivery is free we will return zero otherwise we are going to return card dot delivery fee so we see that free delivery is from 200 and the delivery fee is 15 if the subtitle is less than that let's go ahead and see if that's actually working so if I add one item to the card and go to the cart here I see delivery is 15. but if I order more items that are more than two hundred dollars delivery is automatically zero and I can go back to 15 and to 0. and this automatically yeah like Works based on custom selectors all right so lastly as uh as a task for you to see if you understood how we selector are working try to define a custom selector for the total and the way it will work it will basically take them value for the subtotal it will take the value for the delivery and it will simply add them together pause the video try to do it yourself and in three to one we're gonna do it together all right let's see if you managed to do it correctly so we're gonna export a new custom selector for select total we're gonna use a create selector because we depend on two other values and that value one of the first value is the subtotal so I'm gonna use this select subtotal and the second one is the select delivery price lastly we need to define the function that will be executed like the function that will uh generate the value so this function will receive two values one for the subtotal and one for the delivery price so first one is subtotal second one is delivery price or just delivery and what we have to return a simple summation of subtotal plus delivery now if I had some last step is to go to the shopping cart and get this value so total is equal use selector select total and let's go ahead and display it on the screen here total okay now if I go here we see that uh yeah the total is 160 plus 15 which is 175. if I increase it with 320 plus 0 that's 320. so yeah at the end of the day like the total is quite like the the selector for but total is quite simple because we can reuse some of the values that we already calculated okay so that was intense let me think if I managed to yeah like to explain everything that I wanted here with selectors now yeah like it will automatically get calculated like both subtotal total delivery and so on awesome so I'm gonna go ahead and do git add git commit uh and B is always our card uh card slice Ray Ducks slice oh and with that being said that's everything that I have prepared for you today it was a quite intense build so we can have a look at what we managed to do so far oh that was a lot alright guys so in this tutorial we learned how to build uh a full end-to-end react native application based on the Nikes e-commerce application so we started simple by displaying the list of products on the home page and here we can navigate for them we can scroll through them when we implemented the next page for the product details here the UI got a little bit more interested we saw how to render image sliders image carousels a lot of information here with text and lastly we went ahead and implemented the card component so I'm gonna add a couple of things to the card and here we can see the card in action it displays a list of items it displays as a an input for the quantity so we can play we can change the quantity and so on after that we have managed to put everything together into a navigation system so as you can see everything works perfectly fine we can navigate from one page to another we saw how to work with models and how to navigate from one page to another lastly the most important part of this build was implementing a global State management using Redux and Redux toolkit so for that all the data for this page for example is coming from the Redux we are selecting we are updating everything there and where these things comes in it comes in handy is specifically for the card because with data for the card is managed and updated from different places in the application for example from the product Details page we can press on this button to add the product to the card at the top of our uh in the header of this title we see that number of items that we currently have in the card if we press on it we see them here so the data is consumed here we can easily update the quantities and that will trigger and will update and real will recalculate all of the subtotals the delivery and the total so yeah it was a fun build uh I hope you enjoyed it let me know in the comments below what other features you'd like me to build in this and if we should continue this at all there is some other interesting parts that we can Implement for this e-commerce application to have it maybe as a full stack application with an actual back end maybe we can Implement some payments I don't know let me know give me some ideas and maybe next week we're gonna do it for now let's go through some comments to see what are you guys thinking about this if you have any ideas if you have any questions did you enjoy the Redux part so yeah guys I'm going live every week on Friday at the same time 3 P.M GMT so make sure to subscribe to my channel turn on the notification Bell not to miss any uh Project based tutorials that we are doing and here we have a fun little drink cheers guys cheers super happy it was a really productive week and I'm happy when I'm ending it on Friday with a successful build and hopefully something valuable for you as well from so much talking my um my lip is already bleeding I can feel it add animations yeah that's another thing that maybe will be something interesting like with animations foreign to GitHub and I'm gonna put the link in the description uh as soon as we finish this live stream so guys if there is no other questions we can take this conversation to Discord you can also find the link in the description and I'm gonna see you next week with another build war with a continuation of this one probably the second part the second part is coming because we I really love application it's something exciting so I hope you enjoyed see you guys later bye bye

Channel: notJust․dev

Views: 55,144

Keywords: vadim savin, not just development, notjust.dev, react-native tutorial, react native ui design, react native live coding, live coding, javascript, react tutorial, react native tutorial, javascript tutorial, react native ui, Nike, Sneakers, nike shoes, Redux, how to use redux, Nike app, react native for beginners, redux for beginners

Id: Gvxv6JCabA8

Length: 213min 55sec (12835 seconds)

Published: Fri Feb 10 2023