Gaming App UI in React Native with React Navigation 6

[Music] do [Music] hey guys welcome back to my youtube channel today in this tutorial i am going to show you how to create this gaming app ui in react native this tutorial is a part of a tutorial series where i am showing you how to implement different types of navigation by using react navigation version 6. also this can be considered as a standalone tutorial if you only want to know about the ui implementation of it in the previous tutorial of this series i have already shown you how to implement stack navigation by using react navigation and how to create this ui and in later parts of this series i will add tab navigator drone navigator in this app so if you are interested in this kind of tutorial then hit the like button subscribe to my channel for more tutorials like this and don't forget to hit the notification bell icon so that you get notified whenever i post a new tutorial on this channel so without wasting any more time let's get started with the tutorial okay so this is our project and here we can see we have this home screen this app function and then we have this main function and first we are displaying this main function then in the stack we have this home screen so now i want to move this home screen from this app.js to within our screens directory and this screens directory is for our screens where all our screens will be presented and then we have the model directory then we have components directory right now we don't have anything in the components directory but in the model directory we have data.js and it's having some data which will be presented in our screen so this will be required later and i have already created this data so that we don't need to spend much time to create this while we will create the ui and after this model we have this utils directory here i have created this dimensions.js file which will export this window with and window height that means our device width and height and these values will be useful to create our ui properly and then along with this within the assets i have this images directory and in this images directory i have few images which will be present in our ui so now let's create the home screen within our screens directory and here let's see how our home screen is looking so this is how it's looking right now and we want to make it like this now first let me save this screen and then instead of using this home screen function we will use home screen from our screens directory so it has been imported automatically by my code editor if your code editor is not importing it automatically then you have to import it first then you can use it here now save it and also i don't want this header here so to get rid of that i can use this code here and save it so now it has been gone now we can start designing our home screen so here first i will require safe area view from react native now within this safe area view i will provide a scroll view and similarly it is also has been imported automatically if your code editor is not doing that you have to import it first otherwise you cannot use it it will give an error so import it first then use it here and then after that i will use a text so here in the text we can see we have a hello message and then after the text we have this picture so here let's provide the text and then we have that image and we can use that image in image background now let's provide the image source here so we have the image in our assets directory here we can see we have a user profile image so i'm going to use this image that's why i'm providing this require and here let's provide the path of the image after that let's provide some styling for the width of it i will use 35 and for the height i will also use 35 and for the image drive i will use a border radius 25 pixel now save it so here we can see the image now let's provide some styling here first for the safe area view which is the main wrapper container here i am providing flex 1 and let's provide a background color of white color now after that let's provide this text and image in a view and let's provide the styling here so first i will provide flex direction row and by providing this flex direction these two will sit beside each other now let's provide justify content and here it will be space between so it has been pushed at the right hand side now i will provide a margin bottom and it will be 20 pixel now let's provide some padding to this wrapper container so that we will have some breathing space here right so here for this scroll view let's provide that padding and here it will be 20 pixel now it's looking good now we need to provide some styling for this text here for the text let's provide font size 16 and for the font family i will use roboto medium now after this view we need to create this search bar now for that first create a view and this view will be the search word so within this first we need to provide the text input where user can provide the text to search okay so we have the error can't find the variable text input so it didn't have imported automatically i need to import that so now it is here but we are not able to see it let's provide the placeholder so here it is right so this is the search text input field now if we look into it then we can see we have this search icon first then we have the search text input right so we need to provide the icon and for the icon i will use react native vector icons and i will use this feather icon so now let's use that here and name of the icon will be search size of it will be 20 for the color of it i will use this color and it will be within the double quotation now let's provide some style and for this style it will be margin right 5 pixel okay i have to close it now again we need to provide some style for the wrapper view so that these two sit beside each other so let's provide this style here and first style will be the flex direction and it will be low so now these two element has been positioned perfectly now we need to create this border so let's provide the border color and here the color will be this color now let's provide border width and it will be one pixel for border radius i will use 8 pixel now let's provide some padding so for the padding horizontal i will provide 10 pixel and for the adding vertical i will use eight now save it so yeah our search bar is looking good now we need to create the arousal but before that we have this title and this button so we need to create that then we can create the browser it is nothing new here it is similar to this layout here the only difference is that instead of this image we have this button and this button i will create with touchable opacity so here i am quickly creating that so i am not going to explain it and i will fast forward this part and then we will focus on the carousel [Music] okay so this view has been created now after that here we need to create the carousel and for this carousel we will use a package called react native snap carousel so we need to install it so i can copy this command and paste it here to install it so it has been installed now we can start using it here we can see we have the basic uses process here and we will have the basic uses we will have this simple carousel here so it will be carousel which needs to be imported right and then here we can see we need to provide these basic informations here so first we have the reference we don't need to do anything there for the data we need to provide the data of the images so here as i have mentioned before that we have this data.js file and here i have already created this slider data so i can use that so here it will be slider data and also it needs to be imported from data.js file then we have this render item which will be the image slider item which needs to be rendered here and for that item let me create a component so within component directory i'm creating banner slider.js file here let's create a component so instead of this we will have image and for the image source okay we need to import it first okay it's correct now we can get the data by passing the prop here and here let's create the render item function so here i'm calling it render banner and let's create that function and here in this function we will have item and index as the prop and here we can return banner sliders and in this banner slider we can pass this data prop and we will pass this item data [Music] so now we can use that data here in the source and that data will be this image so here it will be data dot image which is this field now let's provide some styling here let's provide height 150 with 300 for border radius i will provide 10 pixel now save it before saving this home screen let's provide slider width and item width the slider width will be the width of the device and that we can get from this dimensions.js file so here we have this window width so we can use this window with here but before that we need to import it [Music] and now we can use this for this slider with and as you can see we have provided some padding in the left and right side of this so we need to reduce that from the device width so for two sides 20 means it will be 40 pixel so that 40 pixel needs to be reduced from the window width then we will get this exact width which will be our slider width and now for the item width it will be 300 now let's save it okay so here it is showing some error now let's close this process and rebuild our project so here hit enter so here we can see that our image is showing properly right so the carousel is working perfectly well but for this carousel i want to provide loop functionality so that's why here i will provide low true now save it now after that we can see that it has the loop functionality right so now it is working well now let's see what we need to do after this carousel we have this tab section where we have this free to play tab and paint games tab and this part is little tricky part here it will be kind of a custom switch where these two will be the button and the data underneath it will be displayed based upon the active button so first let me create this section and i am calling it custom switch so let's create the custom component here called custom switch and for this switch we will receive some props let me create those first we will have the selection mode then we will have option one option two and we need this on select switch function so these are the things which we will receive as prop to this custom switch component now after this we need to create a state and the state will be get selection mode and we will update it by this set selection mode and let's use usted from react native and here the default value of it will be the selection mode prop which will be passed to this component from our home screen.js file here after that let's design the component within this view let's provide a touchable opacity and within this touchable opacity we will have the text of the button and that text will be the option one so this touchable opacity will be the first button and then we will have another touchable opacity for the second button so let's provide styling for this wrapper view the height will be 44 then we need to provide the width now let's provide the background color and here the background color will be this color for border radius let's provide 10 pixel for the border color of it i will use this color for the flex direction i will use row and justify content i will provide center for the touchable opacity let's provide some properties so here for the active opacity i will provide one for the on press of it we will have a function which will update this switch data so that means when we will click on the button which is not active that will get activated so that means we need to update some value to make it functional and for that we need to create update switch data function and here we need to provide some value and as this will be the first button i am providing the one value now let me create this function then it will be more clear to you so here after this state let's create this function and here we will receive some value here i will update the selection mode to the value passed to this function and i will pass this value to this on select switch prop as well now we need to provide some styling for this touchable opacity and i will copy paste the style here first i am providing the flex one then i'm providing the background color and this background color will be rendered dynamically by determining the selection mode as you can see here i have provided this one so i'm checking the get selection mode value with one and it is getting updated here with this set selection mode right so we can get that selection mode value by this get selection mode and we are checking it if we have this value equal to 1 then we will render this color otherwise we will render this grayish color which will be this gray color and when the button will be active then it will be this color so that means this color okay after that let's provide some styling for the text as well and for this text also we will have the dynamic color here also it is checking that now similarly we will have another touchable opacity so i am copying this and here for the update switch data it will be value 2 and here we need to check it with value 2 as well as this will be our second button which is this button right and for the text it will be option two and i think i have made some mistake here i haven't closed this curly brace okay so now it's looking good now we can import this custom switch in our home screen.js file after this carousel let's create a view and here let's provide that custom switch and here let's provide the selection mode and by default it will be one so first button will be activated now then let's provide the option one and for the option one we need to provide this text free to play for option 2 we have paid games and then for on select switch we need to create a on select switch function so here i am creating this function [Music] and here we will get the value which will be passed from this update switch function so by this we will determine which button has been pressed now we need to update this state so we need to create a state here by which we will determine the bottom area which area needs to be rendered so here let's create a state called games tab and i can update that by using this set game step and by default it will be 1. now update it by providing the value in this set game step now it will be functional so after this view let's provide that dynamic section so here i'm checking for the game step if gamestab is 1 then i will render this text if gamestab is 2 then i will render this now save it so here we can see we have only this text present now let's click on these paid games and now we are seeing this paid games so that's how it has become dynamic right and now it is rendering the data based upon our selection right so now we need to provide some styling here so that it will have some space so for this view let's provide this style margin vertical 20 so now it's looking good now we need to create this section which means these items and now for that also we need to create a new component and that component name i will provide list item dot js so here let's create the list item so first we have the view and here within this view we need to create another view and for this view let's provide flex direction row align item center and for the flex of it i will provide one and within this view let's provide image which will hold this image now after that let's provide the image source and here i will provide some data from here so right now i'm copying it from here later we will render these items by this data but right now to create the component i am providing this data here but later we will accept this value by some props and after the source let's provide style so width of it will be 55 height will be 55 as well then for border radius let's provide 10 and we need to provide some margin to right side as well which will be this space save it now to check it if it is working or not let's provide that here instead of this text let's provide that list item here now after saving it here we can see for this first step we have this list item right now after this image let's provide another view which will contain this text so first we will have a text and then we will have another text which will have a text like this it's looking perfect like this now we need to just change the font size and styling for this text i will provide this styling and for this text i will provide this styling along with text transform uppercase okay so now it's looking like this so it is perfect now after that we need to create this button and for that after this view within the main wrapper view we need to create the touchable opacity now let's provide the text here and here let's provide a play text so now it has been positioned at the bottom so we need to change the position of it but before that let me provide the styling of this touchable opacity so here i'm providing the background color padding 10 let's provide a width of 100 pixel and a border radius of 10 pixel and for this text let's provide some style and here it will be simple text styling so i'm just copy pasting it now save it so it is now looking like a button now let's position it here at the right hand side of the screen and for that here in the main wrapper we need to provide some styling and the first styling will be the flex direction which will be raw then for justify content it will be space between for align items i will provide center and finally i will provide 20 pixel margin to the bottom so now it's looking good now we can use it here and we will generate this list item by these values so we have this paid games data added we have this free game stated so here it will be the free games data so it will be free games which needs to be imported from our data model now after that we can map through each item of it then here for each item we will render list items now save it okay i have made a mistake so here it will not be currently braced it will be parenthesis now save it so here we can see it has been rendered properly and now we need to provide a key to get rid of this warning which will be the unique key and that we can get from item dot id we have id present for each item which is unique right so that's how we can render the items here and i know that there is flat list and section list present to render items in react native but i have found that flat list doesn't work in a scroll view as you can see we are scrolling complete page here right but the flat list will scroll the list only so that means this section will only scroll and i have found that there is some issue with flat list in the scroll view so that's why i couldn't use it and there is a work around where we can use flat list to render other items as well by providing list header item list footer item props which in my opinion doesn't work here because here we have two different list items because for the paid games also we will have another flat list so that will not work here because we will have multiple flat list so that's why i'm not using flat list here i'm using javascript map function to map through all the items which are available in our data if you know any better solution for this scenario then let me know in the comment section below and by that others will also get to know about the better solutions of it but right now i didn't find any better solution so i will use this one so for this list item right now it is rendering all the static data which we have provided here now i want to render this data by providing some prop here so that's why i will accept some prop so here the props will be photo title subtitle is free and price so let's provide photo here and here it will be subtitle then we will have title then after that here we will render this text dynamically so if the game is free then we will render this play button if it is paid then we will display the price of that game and for that here we can provide a checking if is free equal to yes and that is coming from this value so it is not free so it is providing no and it has some price in it and this game is free so it is having the es value and it doesn't have any price value to it so if is free equal to yes then we will render display text if is free is equal to no then we will display price which we will accept by prop here now save it now after that here we can provide those data so here photo we need to provide item poster so this is the image then we need to provide the title it will be item.title then for subtitle it will be item.subtitle then we have is free and price and we don't need to provide this price because we don't have any for this free games so we can get rid of it but before that let me copy it because it will be similar for our 8 games as well so here it will be paid games for free games we don't need this price and let me see the paid games has been imported from the data right and we have some error here now save it okay so it has been updated now let's see for the paid games so it's looking good but here we can see it's having some issue here we have this fix we have this ellipses for this extra text so we can fix that here for this title text let's provide number of lines one and for this wrapper view style let's provide a width and this width will be the window width which needs to be imported from utils directory diamonds.js file and it will be this width so the window width means the device with minus 220 pixel now save it now after that we can see that it has been fixed so it's working perfectly well and right now let's provide attachable opacity to this image so here i want to able to click on this image right now i will provide back functionality here so let's provide navigation prop here and i can use that navigation dot go back to go back to our previous screen so now after clicking on that image i'm back to the previous screen so that's how it's working later i will provide the functionality here to click the drawer navigator here after clicking on this button so that will be in my upcoming tutorials and that's all for today's tutorial i hope you have learned something new from this tutorial if you do so then hit the like button subscribe to my channel for more tutorials like this and let me know by commenting down below if you have any kind of suggestion for me then also let me know and share this tutorial with your friends and colleagues and i will see you guys in my next tutorial in the meantime have a great day goodbye

Channel: Pradip Debnath

Views: 4,718

Keywords: react native ui, react native ui design tutorial for beginners, react native ui design, react native app ui, gaming app ui, gaming app ui in react native, react native gaming app tutorial, react navigation v6, react navigation v6 tutorial, react navigation 6 tutorial, react navigation stack navigator header, react native snap carousel tutorial, react native snap carousel example, react native custom switch button, react native custom switch toggle, react native custom tabs

Id: I5doVFcG94U

Length: 29min 43sec (1783 seconds)

Published: Wed Oct 06 2021