LCRN EP9 - Digital Wallet App - React Native UI

hey what's up everyone i hope you are doing well this is jack from buyprogrammers.com and welcome back to a brand new episode of let's code react native in this episode we are going to build a clean looking digital wallet app based on the design created by happy train alerta on dribble.com now if you haven't already be sure to subscribe to our channel and turn on the notification for more videos like this alright now with that being said let's get started [Music] all right so the first thing i'm going to do is to create a project and stop the project structure like we always did in the previous videos so open up your terminal and type react native init i'm going to call this digital wallet app all right now let me just rearrange my project structure a little bit i'm going to just copy everything and paste it in the root folder and i'm going to get rid of this empty folder over here now in the root directory i'm gonna create a folder called assets where i'm going to copy and paste all the assets i'll be using in this project so we have images we have icons as well as fonts so copy folders all right next we'll need to create a read native config file in the root folder in the root directory sorry react-native.config.js so within this config file we need to write module.exports goes to project ios android and we need to add the assets we need the reason why we need to include this config files because we need to install the fonts into our respective project ios and android all right okay next we need to create a folder called constants and within this folder we will create a few files which are icons.js dot images.js team.js as well as index.js so the reason why we are creating this constants folder is because it's it will be easier for us to reference the icons and images later on in the project all right and we will be we'll also be including all the teams that will be using over here all right so let's start with the icons.js so i'm going to type constant back all right as you can see i have let me just hide the terminal all right so i have um added the reference for all the icons that i've added in in the ad sets folder all right so next we'll move on to the images.js all right so wally logo there you go these are basically the reference for the images that we have added in just now all right let me just save the icons file and lastly we'll be heading to the keem.js all right so import dimensions all right so as you can see here we have included the colors the sizes as well as the fonts that we'll be using in the project later on all right so save the file all right next we'll need to create the screens folder alright so create a new folder and we name it as screens so as you can see from the mark let me just um open this open this up all right so as you can see from the mod we have three different screens right we have the sign up screen then we have the home screen and lastly we have the scan screen right so let's head back to create these screens so first thing first we have the sign up screen we have the home screen we have the loops all right so we have the scan screen and of course we also need to include the index.js file all right so i'm going to start off with signup.js so import react from react i'm going to import a couple of components that i'll be using okay from reac native and i'll be creating a sign up functional component and we need to export the component all right i'm going to just copy and paste it in the home.js and change this to home i'm going to repeat the same step on the scan.js like that and lastly we need to reference these screens in the index.js file so import um from home import scan from scan import sign up from sign up i'm gonna export all this components all the screens all right now that we have the basic structure ready we have created the assets folder we have created the constants folder and also we have created the screens folder now what i'm going to do next is that i will install a library called react navigation all right don't worry about this i'm gonna include all this in the block by programmers.com block all right so don't worry about this all right now i'll need to install the bottom tabs well actually i can install the react navigation library all at once like this next we'll need to make some changes on our app.js file all right so i'm gonna remove everything from here too here all right i'm gonna get rid of bulldoze and well you know what i'm gonna delete this as well and here i'll create the app functional component and i'll return something right so here i'll need to import a couple of components so i need to import from react navigation start all right so here it will be create stack navigator and i'll need to import from react navigation native and here it will be navigation controller sorry navigation container and default team all right so here i will need to import the sign up screen sign up all right okay so next we need to create the team variable so defaulting colors will be default team.colors and border is going to be transparent okay let me just hide the terminal and change the spaces to four all right so next we'll create the stack navigator so it goes to create stack navigator and here we'll need to return navigation container there'll be a team prop which will pass in the team variable and here stack dot navigator so we need to add in a couple of props for this navigator so screen options is equals to i do not want the header so header shown false alright so here it's going to be stack dot screen and the first screen is going to be sign up all right oops and the component will be sign up and here we need to add in another prop called initial route name so that it will load sorry it will show the sign up screen on first load all right so what i'm going to do now is that i will try to run the app and see if it works but before i can do that i'll need to run react native link and i'll see cd into ios and run pod install all right once the pod install is completed i'll navigate back to the root folder and run create native run ios alright so it's working the sign up screen is being loaded right so next i will first draw the screen for um sign up screen before we head over to the home and scan screen all right so for the sign up screen we have the sign up back button we have the logo we have the form input and lastly we have the continue button all right so let's let's see how we can do this now i'll first import a couple more components that will be using in this screen so i need touchable opacity i need touchable without feedback i need image i need text input i need model i need flat list i need keyboard avoiding view and lastly i need scroll view i am going to import from a constant file as well all right so import from constants and here it's going to be colors sizes let me see oh i need to i forgot to include the index.js file for constants so what i need to do is basically to import everything from icons images as well as the team.js file alright so import icons from icons import images from images import team from team i'm going to import a couple couple more components um i need colors sizes fonts and now i can then export all of them right so i export icons images team colors sizes and fonts all right so i'm gonna head over to sign up um screen and here i can now import them all right so icons images fonts all right now i'm not sure if you have noticed about this oh no if you look at the mark there is actually a very subtle gradient color in in the background right there's a very subtle gradient color in the background so in order to achieve this result we need to install a library called react native linear gradient so scroll down and copy npm install you can use yarn if you want to and paste it in your terminal all right so every time i uh sorry every time i install a new library i will restart the app just in case you know it doesn't install properly or anything like that happens all right so i'm going to run link create native link i'm going to cd into ios and run pod install all right now i'm going to cd back to the root directory and run react native run ios to restart the app oh i think this is because i forgot to include the us flag the dummy image right so i'm gonna include the us flag in the images folder all right now when i try to restart it it should work all right great it's working now so what i'll be doing now is that i will import linear gradient from react native linear gradient which is the library that we have just installed all right so i am going to use the um keyboard avoiding view i'm going to include some props as well the behavior equals to platform dot os equals to ios then i will use padding if not i'll just keep it at keep it as now alright so the style is going to be flags one so within this keyboard avoiding view we are going to create the linear gradient component which basically creates the gradient background so for the linear gradient we need some props as well the colors is going to be colors.line and colors dot emerald and the style is going to be flex one as well and let's see if it works all right cool now let's take a look at the mac the first thing we'll be doing is the header right the back button over here so i am going to wrap all the all the components within the screen inside the scroll view so the first component that i'll be rendering is the header section so i'll need to create the header function over here render header and i'll return something right so here we will return a touchable opacity i'm going to give it some stalling flex direction goes to row align items equals to center margin top goes to sizes dot padding times six padding horizontal equals to sizes dot padding times two whenever i click on this um button i am going to console.log sign up all right so within this button within this touch board opacity we need a view well actually i think we can just include the image because we need the um back arrow image so image source is going to be icon start back resize mod is going to be contain style is going to be with 20 let me just hide the terminal all right height 20 and thin color it's going to white let's see all right so we have the back button over here back icon over here next we need to render attacks which says sign up right all right i'm going to give it some styling margin left sizes dot padding times 1.5 color equals to white and the font is going to be h4 a lot better now all right so the header section is now ready next we'll be working on the logo section right so to do that we need to create a new render function called render logo right and i'm going to create this function over here and i'm going to return something so here i'm going to return a view with some styling of course margin top sizes that padding times three sorry times five height equals to 100 a line item equals to center justify content equals to center and within this view i'm going to have the image component right so image source will be images.valley logo resize mode this contain and style is going to be with 60 let's see all right great now that the logo is in place next we'll be working on the form input right so we have full name font number this one is slightly complicated because we have the country code over here later on we'll be using a model that allows the user to select the country code and lastly we have the password tax input with the visibility toggle button over here right so to do that we need to create a new render function called render form all right and i'm going to create this function over here function render form and return something so here first thing first i need a view with some styling margin top sizes dot padding times three margin horizontal sizes that padding times three as well so within this view component this container view actually we have full name right the first the first um form input is actually full name all right so here i'll create a view style is going to be margin top sizes dot padding times three and we have the tags let's say full name i need to add some styling for this as well so the sorry the color is going to be colors dot light green and the font is going to be font start body tree so we have the full name label over here then we need the text input right so we need to add some style for this as well margin vertical sizes dot padding border bottom color equals to white border bottom width equals to one height equals to 40 color equals to white and lastly the fonts is going to be polytree we need to add a couple more props over here so we have placeholder enter full name and the placeholder text color is going to be colors.white and the selection color is going to be colors of white as well right there you go it's working let me just open up the keyboard yep like that okay so after the full name text input we have a font number right so here we have phone number i'm gonna create a container view for this as well and the style is going to be margin top sizes dot padding times two and we need a text component that says font number i'm gonna add a bit of styling for this style equals to colors sorry color colors dot light green and the fonts will be body tree so after this we need another view with some stalling let's say start up sorry flex direction equals to row and here we have the area code or maybe country code right so i'm going to call this country code so it's going to be a button it's a touchable opacity i'm gonna give it some styling as well with equals to 100 height equals to 50 margin horizontal equals to five border bottom color equals to white border bottom width equals to 1 flex direction equals to row and lastly the fonts is going to be font stop body sorry two yeah so whenever i press on this button actually i need to show model which i'm going to do it later right so within this button within this touchable opacity we need a view with some styling justify content center and within this view we have an image it's actually this down arrow image over here so image source equals to i comes down and the style is going to be with equals to 10 height equals to 10 and 10 color equals to white like that all right so next we need to show the um let me see we need to show the country flag right so here i'll create another view with some styling um justify content it goes to center margin life equals to five and this one is going to be the country flag image but for now i'm going to use the us flag it's actually a dummy flag image for now later on we'll use the fetch api to fetch the proper data from um some some services all right so the source is going to be images dot u as flight right this is just a dummy data and the resize mode is going to be contained style is going to be width 30 high 30. all right there you go the flag is showing here right and lastly we need the country code so i'm going to create another view and here i'm going to give it some installing justify content goes to center margin live equals to five and here we need a tax component that says that show the country code right which is i'm gonna give it like um us plus one right here i'm going to give it some styling so color is going to be white and the font style is going to be bodytree perfect next we'll need to render the phone number input so i'm going to do it over here font number all right so here we need a text input give it some styling flex 1 margin vertical equals to sizes dot padding border bottom color equals to colors dot white border bottom width equals to 1 height equals to 40 color equals to white and the font is going to be bodytree right here we're going to add in a couple more props the placeholder is going to be enter font number placeholder text color is going to be white selection color is going to be white as well perfect okay now that we have the font number text input ready next we'll be working on the password text input right so over here it's going to be password and i'll be creating a container view for this text input same thing i'm going to give it some styling margin top it goes to sizes dot padding times two and within this view within this container view we have the text that says password like that all right gonna give it some styling color colors dot light green and the font is going to be body tree all right now we need to create the um text input right so text input we need some styling as well so margin vertical equals to sizes that padding border bottom color equals to colors dot white border bottom width equals to one height equals to 40 color equals to white and lastly the font style is going to be body tree all right as usual we need a couple more props for this text input um so the placeholder is going to be sorry the placeholder is going to be enter password the placeholder text color is going to be white selection color is going to be white as well and we need a new props over here which is the secure text entry for now i'm gonna hard code it to true first later on we'll create the toggle button over here right okay oh sorry a bit of typo over here style yep correct now we need to create the toggle button over here so after the text input we need a touchable opacity give it some styling position absolute right 0 bottom 10 height 30 width it's going to be 30 as well so whenever i click on this button by right i should toggle the password visibility but for now i'm gonna just console.log that says toggle right so within this touchable opacity we will have the image component source is going to be icons dot i style is going to be height 20 width 20 tint color is going to be white yep like that all right so after the form inputs we need to render the continue button right so to do that we need to create a new function called render button i'm going to create the new function over here function render button and i'm going to return something so here we need a container view with some styling margin equals to sizes that paving times three and within this container view we need the touch opacity component right i'm gonna give it some styling as well height equals to 60 background color equals to black border radius equals to sizes that radius divided by 1.5 align item equals to center justify content equals to center so whenever i click on this by right i should navigate to the home screen but for now i'm gonna just say navigate to home i'm gonna just um console log navigation sorry navigate to home on the terminal right so within this touch opacity we need the text itself which says continue oh i need to add a bit of styling for this color equals to white and fonts equals to hat sheet perfect now before let me just close this before we move on to the next screen which is the home screen there are actually two more things we need to do here the first one is actually the font number country code selection which basically we will show a model all right and the next one is actually the password toggle visibility uh feature so we'll work on this first then we'll move on to the font country code selection right so to work on the password visibility button we need to first add a new react state hook right so here constant i'm going to create show password state all right so set show password and here is going to be react.ustate and the initial state is going to be false so now i need to navigate to the form and for the password text input which is this one all right so the secure text entry is no longer going to be hardcoded to true i'm gonna use this state that we have just created right which is show password so whenever i click on this button instead of just you know console.log toggle on the screen on the terminal i am going to set show password to inverted off show password right and lastly we need to work on the icons as well so if show password equals to true then i will use the icons.disable i can't yeah that one if not i'll just stick to i now let's see if it works so initially the secure text entry is true if i click on this toggle button it should change it to false like that right if you look at the icons it's changing as well perfect all right now that the password toggle visibility button is done next we'll move on to the country code selection button right so before we can do that we need to create a few react state hooks right so i need the areas and the initial state is going to be an empty array i need the selected area and the initial state is going to be now and lastly i need a flight to toggle the model visibility so it's going to be model visible set model visible equals to react dot u state equals to i mean the initial state is going to be false all right okay now because there are a lot of country codes to be included it's really hard for us to type in manually fortunately we have a service called rest countries that we can call to retrieve at least of country codes all right the endpoint that we'll be using is the all amp point which is this one you can copy the link and see let me see all right internet is a bit slow there you go so if you if you take a look at the json object we have the country name we have the country code we have the calling codes which is basically all the information that we need all right so let's get back to the let's get back to our code and here we need to use the use effect hook all right so i'm gonna type in react.use effect alright this is a use effect hook so here within this yeast effect hook i am going to use the fetch api to get the list of country codes as well as the other relevant information from the rest countries um service right so fetch https rest countries dot eu slash rest slash v2 slash out right so then response response.json then data over here all right let's see what we have here right so i'm going to console.log data sorry there you go we got all the information that we need from the rest country service all right so now what we can do is that we can use the map method all right area data equals to data.map i'm going to use the map method to get the information that i'm interested in from the json object right so item i'm going to return some information all right so the code is going to be item.alpha2 code name is going to be item.name callingcard is going to be plus sorry item dot calling cards zero okay and lastly we also need the flag property all right so for this flight property even though the rest country service is giving us the flag image but it's in svg format so since it's in svg format it's kind of hard for us to use it in our project because it's not easy to you know display svg and react native it's possible but it's quite complicated so to reduce the complexity of this project we are going to use another service called country flex just to get the country flight all right so we can copy the link over here this is actually the the link that you can use to get the country flight right so i'm gonna paste a link over here i'm gonna change this to the country code that we have all right so item.alpha to quote and the style is going to be flat and the size is going to be 64. all right so now we have all the information ready next we'll set it to our state right so set areas area data and if um the area data has data all right so if the if the line is more than zero then i'll give it a default data so area data dot filter a a dot card equals to us the us country code is going to be the default data all right so if default data dot length is more than zero then i'll set the selected area to default data cool now i'll navigate to the font number section over here and i am going to change the dummy image flag sorry dummy country flag to the one we have pulled from the service right so we need to change this to uri selected area dot flight that's kind of weird let me see what's happening oh i think i forgot an s here all right so it's calling cards all right it's working the flag is showing and now i need to change the country code right so i'm gonna navigate back to the font number section and the country code is going to be selected area dot colon code all right perfect all right so next what we need to do is that whenever we click on this button over here we need to show a model with a list of country codes for user to select right so i'm going to look for the area code touchable opacity the country code touch opacity over here instead of just you know console.log i need to change this to set model visible equals to true and here i need to create a new model sorry a new function all right at the outer layer i'm going to create a new function called render area quotes model and i'm going to create this new function over here function render area called model and i'm going to return something all right so here i'm going to return a model and within this model we need to give it a some props animation type equals to slide transparent equals to true visible it goes to multiple visible and here i'll be using the touchable without feedback component and whenever i click on it i will set the model to false model visible to false right okay so within this touchable without feedback component we need to have a container view and i'm going to give it some styling flex1 align item center justify content center and within this view we need to have another view with some styling as well height equals to 400 with equals the sizes that width times 0.8 background color is going to be colors.light green border radius equals to sizes that radius okay yep perfect now within this view we will be creating i mean we'll be using a flat list to show all the country codes right so flat this data equals to areas render item equals to render item i'm going to create this function later on key extract it goes to item item cut shows vertical scroll indicator equals to false and style equals to padding sizes dot padding times two and margin bottom goes to sizes dot padding times two and here i'll need to create the render item function right so constant render item all right i'm going to return something so here i'll be returning the touch opacity give it some styling padding sizes dot padding flex direction equals to row on press whenever i click on it i will set the selected area it goes to item and i'm going to set the model visible to false all right so within this button we will be showing the country image so source equals to uri item.flag and style equals to with 30 height 30 margin right then and after this image we need a text component that's that um show the item name or basically the country name right so style is going to be fonz body for right let's see sorry some typo over here should be flagged not flat yep now the flags are showing yep perfect so whenever i click on this whenever i choose a country let's say argentina the flag will be showing here and the country code will be showing here perfect all right now that the sign up screen is completed next we'll move on to the home and scan screen right but before we can um work on the screen itself we need to work on the bottom tab navigation or bottom tab bar if you pay close attention to the bottom tab bottom tab bar is actually very very similar to the one we did in the previous episode for that reason i will not be spending a lot of time to explain um the bottom tab bar later on as i have already explained in the previous episode right so let's head back to our code and the first thing we need to do is to create a folder called navigation and within this folder we need to create a file called tabs.js so here we need to import a couple of things so import from react import from react native i need view image touchable opacity and style sheet right and here i need to import from react navigation bottom tabs i need to import create bottom tab navigator and bottom tab bar and now i need to import the screens right so i need to import from screens i need to import the home and scan screen and also i need to import from the constants as well and in order to achieve this result um this curvy shape over here we need to install a library called react-native svg right so scroll down and yep look for this so we just need to install open up your terminal and npm install react-native dash svg you can use yarn as well if you want to other than that we also need another library called react native iphone x helper so copy this oops and paste it in your terminal and as usual every time and i install a new package or a new library i am going to restart the app react native link cd into ios and run part install navigate back to the root directory and run react native run ios alright so now we can import svg and path from react native svg and we can also import from create native iphone x helper this iphone x alright let me just hide the terminal and here we can create the bottom tab navigator and assign it to a variable called tab alright so create bottom tab navigator and here we are going to create another functional component called tabs all right it's a functional component and i'm going to return something and here i'm going to export default tabs so here we need to return tab.navigator and within this tab.navigator we need to include the tab.screen all right so here we need to include some props name equals to home because we have three different types over here all right so we have harm we have scan and we have profile right so name equals to home component equals to home as well and i am going to keep it like this for now we have three different tabs so we need to copy and paste for three times two times sorry and the second tab is going to be scan component is going to be scan and the third tab is going to be user but the component i'm gonna keep it as um hum all right i'm gonna save it and i'm going to include the tab in the app.js file right so over here i am going to import tabs from navigation tabs and here underneath the sign up stack that screen i am going to create the tabs all right so stack dot screen name equals to home and component equals to tabs all right now to see if it works we are going to navigate back to the sign up screen and head over to the button function and once i click on this button i need to navigate to home right so navigation don't navigate sorry i think i need to include it over here yep so i need to include navigation over here to remove this all right so navigation navigate home let's see if it works all right cool it works we have three um tabs over here right so home scan and user all right so next we'll need to add the tab bar icon so to do that we need to never get back to tabs.js and within the tab.screen component we will need to add a new props called options right so option tab bar icon focus return image this is going to be the type bar icon right so source icons dot more resize mode equals to contain style it goes to width 25 height 25 and 10 color equals to focus if it's focus it's going to be white and if it's not it's going to be secondary right okay it's right here so i'm going to copy and paste this options prop into the other tabs as well and i'm going to change the image so this one's going to be scan this one this one's going to be user like that all right next thing i want to do is that i want to remove the label and i want to remove the background color as well so to do that we need to add in some props for the type dot navigator so tab bar options equals to show label it goes to false style equals to sorry position absolute bottom zero left zero right zero background color transparent and elevation equals to zero all right so as you can see it's transparent and the label is gone right now what we need to do next is that we need to create a customized version of tab bar button right whenever i click on the tab bar it should float up like this so to do that head over to your tab within the options prop we need to include the tab bar button as well so tab bar button props return tab bar custom button don't worry we are going to create this later on and i'm going to copy and paste it into the other tabs as well all right now we need to create the tab bar custom button function right so we can do it over here so constant tab bar custom button and here we have accessibility label accessibility state children and on press all right and here i will return something and all right so if the tab is being selected by using the accessibility state dot selected if it's selected i will return something and if it's not i'll return another ui right so if the bottom tab is being selected i will return a container view with some styling align item center and i need another view with some styling as well flex direction it goes to roll row position absolute top zero and within this view i will need two empty views all right i need to empty views with the style of flex one and background color equals to white same goes for this i need two and within i mean in between these two empty views i will be creating the svg the curve right the curve over here so svg svg with some props so with equals to 75 height equals to 61 and view box equals to 0 0 75 and 61 and within this svg we will need to include the path all right don't worry i have included this in the um by programmers block so you can copy and paste from there if you want to follow along all right so if i save ups let me just finish it here we need a touch opacity touchable opacity with some styling top negative 22.5 justify content center align item center with 50 height 50 border radius 25 background color it goes to colors.primary and style here i need to include the shadows alright so i'm going to include shadows over here so let me add the shadow style first so constant styles equals to style sheet dot create shadow shadow color colors.primary shadow offset width 0 height 10 shadow opacity 0.25 shadow radius 3.84 elevation 5 all right so we need the unpressed props as well so i'm press equals to unpress and within this touchable opacity i'll render the children right and if it's not being selected i will render a touch of opacity with some styling flux equals to one justify content equals to center align items equals to center with equals to 50 height equals to 50 background color equals to white and we need active opacity equals to one and press equals to on press and within this touch opacity i'm going to render the children well let's see if it works perfect perfect all right now in order to make sure the bottom tab bar fill up the um empty spaces over here we need a custom tab bar all right so to do that in the tab.navigator we need another props called tab bar all right so props i'm going to return something and it's going to be custom tab bar which we are going to create shortly all right so props equals to props all right so now i'm going to create the tab bar custom tab bar so here constant custom tab bar equals to props it's a functional component and if it's i've is iphone x then i'm going to return something if it's not i'm going to return something else all right so if it's iphone x i'm going to return a container view within this view we will have a view with some styling so position absolute bottom 0 left 0 right 0 height 30 background color equals to white and underneath this i will render the bottom tab bar all right so if it's not iphone x i'll just render the bottom type bar like that cool no wait it's not working let me see what's happening um the reason why it's not working the reason why the white background is not filling up the empty spaces over here it's because of a typo over here oh my god all right so right zero now it works right now it works perfectly fine all right now that the bottom tab bar is completed next we'll be working on the home screen normally when we encounter screen like this we will wrap everything all the components within the scroll view and within the scroll view we are going to have a flat list over here for the features and we are going to have another flat list for the special promo right however if you were to use this approach we are going to get a warning that says virtualized list should never be nested inside plane scroll views so in order to get rid of that warning we are going to first create a flat list for the special promo section and then we'll be using one of the flat list props called list header component for the other components over here which includes the you know header component the banner as well as the features all right let's see how we can do this all right so first thing first navigate to your home.js file and here i'm going to include all the components that i'll be using later on so i need save area view i need view i need text i need image i need flat list and i need touchable opacity all right and now i'm going to import all the constants that we need as well so import from constants right and here it's going to be colors sizes icons any fonts icons and images right so what we'll be doing next is that we will be creating a bunch of dummy datas first we need the features data which is basically this part over here all the features right so there you go we have the dummy data for features all right so we have um top up transfer internet wallet bill games mobile prepaid and more right and next we need to have another set of dummy data for the special promo so i'm gonna come over here and do the same thing for special promo all right so we have bonus cut sorry bonus cashback one two three and four once we got that we need to set set it into our react state hook right so constant features set features equals to react.ustate features data and um this one's going to be going to be special promo set special promos equals to react.ustit special promo data all right like i said this time it's going to be a little bit different all right instead of working on the header part first we are going to work on the special promo first so we are going to create a flat list for the special promo so over here i'll first create a save area view and within i'll give it some styling as well and within this safe area view we are going to create a new function called render promos right so i'm going to create a function over here and return something so here we are going to return a flat list and within this flat list we are going to give it some styling so content container style padding horizontal equals to sizes.padding times three we need to set the number of columns equals to two as you can see here we have two columns right next we need to set the column wrapper style equals to justify content space between the data is going to be special promos key extractor is going to be item item dot id render item is going to be the render item function which we are going to create later on shows vertical scroll indicator is going to be false all right and now we need to create the render item function over here so render item it goes to item arrow function and i'm going to return a touchable opacity give it some styling margin vertical it goes to sizes dot base width equals the sizes that width divided by 2.5 and whenever i click on the promo i am going to console log the item title all right so within this touch popacity we are going to have a view give it some styling height equals to 80 border top left radius equals to 20 border top right radius equals to 20 as well and the background color is going to be colors.primary this is actually the container view for the promo banner all right so over here within this container view we will have the image component and the source is going to be images dot promo banner resize mode equals to cover style is going to be with 100 percent height 100 percent border top left radius equals to 20 border top right radius equals to 20 as well let's see what we got here all right so we have the promo banner ready next we'll need to render the title as well as the description all right so over here we need another container view let me scroll down a little bit all right give it some styling padding sizes.padding background color equals to colors.light gray border bottom left radius equals to 20. border bottom right radius equals to 20 as well and within this view we are going to render two text components which are the item title as well as the item dot description all right now we just need to give you some styling so style it goes to fonts h4 and this one is going to be fonts body four perfect all right now that we have already set up the special promo flat list next we'll be working on the header component all right so first thing first i'm going to create an arrow function for the header component over here so i'm going to call this header component return a view and within this view i'm going to render a function called render header and i'm going to create the function over here function render header return something all right now i'm going to set the list header component props for this flat list over here list header component props and set it to header component that we have just created over here all right so let's see what will happen as you can see the text is being rendered over here as the header so next we can work on the header component in the render header function all right so here we need a view we need a container view and give it some styling so flex direction equals to row margin vertical equals to sizes.padding times two and within this view we are going to have another view with a styling of flags equals to one and within this view we have two text components over here all right so two text component we have hello and the name i'm gonna put by programmers give you some styling this one's going to be h1 sorry h1 and this one is going to be 2 and the color 4d2 and the color is going to be colors.great perfect alright so after this we need another view over here we need another view and give it some styling align items equals to center justify content equals to center and within this view we have the touchable opacity this one all right so we have detachable opacity give it some styling so height will be 40 width will be 40 justify content center align item center and background color is going to be colors.light gray all right now within this touchable opacity we are going to render the bell icon so we need image component over here source will be icons.bell and style equals to with 20 height 20 and the tint color is going to be colors.secondary there you go the bell icon is over here and lastly we will need to render the red dots over here so underneath the image component we are going to create a new view all right so within this view we need to give it some styling position will be absolute top will be negative five right will be negative five height will be ten width will be ten background color it's going to be red and border radius will be 5. perfect all right now that we have rendered the header next we'll be rendering the um banner to do that come over here the header component and we are going to create a new function called render banner and this function is going to be created over here so function render banner and here i'll be returning something right so i'm going to return the view give it some styling height equals to 120 border radius equals to 20 background color equals to colors.primary well actually i don't think i need the background color so i'm going to just ignore that for now and within this view i'm going to um include the image component source will be images.banner resize mode school equals to cover style let's go is going to be with 100 height 100 and border radius equals to 20 let's see perfect i'm gonna just remove this all right now that the banner is ready next we'll be working on the features section so scroll down to the render promos function and underneath the render banner function we are going to create a new function called render features and this function will be created over here so function render features and here we're going to return something so to render all the features over here we are going to use a flat list all right so return flat list the data is going to be features num columns will be four column wrapper style will be justify content space between key extractor it's going to be item item dot id render item is going to be render item which we are going to create later and style is going to be margin top sizes.padding times 2 all right and we are going to use the list header component for the features label all right so over here it goes to header and i'm going to create the header over here all right so constant header return a view with some styling all right so margin bottom is going to be sizes.padding times two and within this view we will render a text component that says features give it some styling as well this one is going to be fonz hit street all right so next we need to work on the render item so constant render item equals to item arrow function and return something so here we're going to return a touchable opacity give it some styling margin bottom equals to sizes.padding times two width equals to 60 align item center on press which means whenever i press on this whenever i press on any of these features i'm going to um console lock the description like that so within this touchable opacity we're going to render a view give it some styling so height equals to 50 width equals to 50 margin bottom equals to five border radius equals to 20 excuse me background color equals to item.backgroundcolor a align items equals to center justify content equals to center as well all right let me see what we have here okay cool we have the background color ready next we are going to render the image within this view so image source will be item dot icon resize mode is going to be contain and style will be height 20 with 20 thin color equals to item.color perfect and lastly we need to render a text component underneath the images all right so over here we are going to render a text component that says item description give you some styling text align equals to center flex wrap equals to wrap and the font will be body 4. sweet last but not least we'll need to render the header section for the special promo all right we need to render sorry we need to render this label as well as this view all button right so to do that we will head over to the render promo function over here we'll create a new function called render promo header all right so we can create this function over here so render promo header and i'm going to return a view with some styling so flex direction equals to row and margin bottom equals to sizes.padding so within this view we will have a container view for the text component alright so oops all right the style is going to be flex 1 and within this view we will render the text component that says special promos and the style is going to be fonts h3 all right it's over here and next we need to render the button so over here we will have touchable opacity and give it some i don't think i don't think we need styling for this so whenever i press on the view o button we will console.log view all so within this button sorry within this touch but opacity will render the text component that says view or give it some sounding as well so um color color is going to be colors.gray and the fonts fonts will be body for perfect notice that some of the items of special promos are being blocked by the bottom tab bar so to solve that we need to come over to the flat list and add a new prop called list filter component and here we will return a view actually we will render a view an empty view with a style of margin bottom 80 to push everything up by 80 pixel right all right cool it works now all right so we have completed the home screen and next we'll be working on the scan screen so for the scan screen we are going to have a camera view that covers the entire area and within the camera view we are going to have a header section that includes a close button a label and also another info button over here other than that we will also be working on the um another section on another section at the bottom of the screen that includes you know a label and also two buttons over here so to work on this screen the first thing we need is to install a library called react native camera so scroll down to the bottom of this page and look for the installation requirements open it up and here scroll down and you can see the installation instructions so just copy and paste this in your terminal like that as usual every time we install a new library we are going to restart the app all right so close that and i'm going to run react native link i'm going to see it into ios and run pod install all right so navigate back to the root directory and now before we can use the react native camera library we need to do some configurations all right so scroll down and here you can see for ios projects you will need to add some permissions in the info.please file and for android if you're working on android then you will need to add the permission in your android manifest.xml file basically you just need to follow the steps over here and you can pretty much start using the library all right so since we are working on ios in this video i'm going to follow the steps and since for this project for the scan screen we only need to access to the camera to scan the barcode so for that reason we only need this this permission and as camera usage description so there are two ways you can do this there are two ways you can include this the first way is actually to navigate to your ios folder your project folder and open up your info.plist file and you can include it here all right so just copy and paste this thing your key and your string basically the message that you that um the ios device will be showing to the user for the first time before the user access to the camera right but in this video we are going to attack a longer route by using the xcode itself alright so navigate to your source code ios folder and open up the xc workspace file alright so navigate to your project head over to the info tab and here you can add a new key privacy let me see um it should be privacy camera usage description all right this one and for the value i think it's because my laptop is currently running a lot of programs that's why my xcode is not really responding that's all right i'm going to close this xcode that's all right and i'm going to add the key in the info.plist file over here right so i'm going to scroll to the bottom and i'm going to add it over here let me see if xcode has already added for me all right there you go xcode has already added the ns camera usage description key for me all right so here for the message for the value i'm gonna type digital wallet app needs camera to scan qr codes all right save it and now i think we should be able to run the app all right everything seems to be fine now i'm gonna navigate to the scan.js file so over here scan.js i'm gonna hide the terminal and now i'm going to import some of the components that we'll be using later so i need image and i need touchable opacity and we need to import from reac native camera we need to import rn camera right and we also need to import from the constants as well so constants here it's going to be colors fonts sizes icons images all right all right so the first thing we're going to render is the camera view that covers the entire area all right so let's work on that now to do that we need a view we need a container view with some styling flex equals to one background color equals to transparent and within this view within this container view we are going to render the camera itself all right and we are going to add a number of props over here so we need to add the reference it goes to reference we need the style it goes to flex one we need capture audio set it to false the type is going to be the back camera so rn camera dot constants dot type dot back back yeah that one and the flash mode is going to be off so rn camera dot constants dot flash mod dot off all right so if you're working on android you'll need to add the android camera permission options prop so i'm gonna do that here as well just in case you need it android camera permission options props so within this we are going to have title so permission to use camera and the message is going to be camera is required for barcode scanning so button positive equals to okay and button negative equals to cancel all right save it alright so as you can see here ios will actually prompt a message to the user saying that digital wallet app would like to access the camera digital wallet app needs camera to scan qr codes so just simply allow it and now you see a black screen that's because on simulator there is no camera module later on when we test it on an actual device which is my iphone 8 you can see that the camera is being rendered properly alright so let's not worry about that for now and focus on the ui of the scan screen first so now that we have rendered the camera module next we are going to render the header section all right so to do that within the rn camera component we are going to render header right and we are going to create this function over here function run the header and return something so here i'm going to create a container view with some styling flex direction equals to row margin top equals to sizes dot padding times four padding horizontal equals to sizes dot padding times three and within this view we are going to have a touchable opacity give it some styling with 45 align item center justify content center since this is going to be a close button so whenever i click on this close button i'm going to navigate back to home all right so unpress navigation i need to import here navigation all right so navigation.navigate back to home and within this touchable opacity we are going to render an image component all right so image source equals to icons dot close and style equals to height 20 with 20 tin color colors dot white there you go so when whenever i click on this close button it will navigate me back to the home screen perfect alright so now i need another view for the label or the title right so here view style equals to flex 1 align item center justify content center and within this view we are going to have the text component that says scan for payment give it some styling color equals to white and fonts will be body tree perfect and now we need to add an info button on the right so to do that we need another touchable opacity over here touchable opacity all right so give it some styling height 45 with 45 background color is going to be green border radius equals to 10. align item center justify content center and whenever i click on this button i'm going to just console.log something on the terminal right so unpress console.log info alright so within this touch opacity we need an image component source is going to be icons dot info style is going to be height 25 width 25 and thin color equals to white perfect all right now that the header section is completed next we'll be working on the payment method section all right so to do that we are going to create another render function over here so um render payment methods and we are going to create this new function over here so function render permanent and return something right so we are going to need a container view for this give it some styling position is going to be absolute bottom zero left zero right zero height is going to be 220 padding is going to be sizes dot padding times three border top left radius is going to be sizes that radius border top right radius is going to be sizes that radius as well background color is going to be white oh a bit of typo over here all right so within this view the first thing we're going to render is the text component which is basically the label another payment methods give it some styling the font is going to be h4 all right now underneath this text component we are going to need to render two buttons so to do that we need a container view give it some styling flex 1 flex direction equals to row align items equals to flight start margin top equals to sizes.padding times two and now within this view we are going to render a touchable opacity give it some styling flex direction equals to row and align item equals to center and whenever i click on this button i'm going to just console.log something on the terminal all right so i'm gonna console.log font number since the first button is going to be a font number button all right so phone number and within this touchable opacity we need another view with some styling width equals to 40 height equals to 40 background color equals to colors.light purple align items equals to center justify content equals to center border radius equals to 10 and within this view we are going to render the image component so source is going to be icon start phone resize mode is going to be cover style is going to be height 25 with 25 and tint color equals to colors of purple save it and there you go our phone icon is here and we also need to render the font number text component so we need a text component over here that says font number give it some styling margin left equals to sizes that padding and fonz is going to be 4. all right so underneath this touchable opacity we need another touchable opacity for the second button which is this one the barcode button so touchable opacity give it some styling flex direction equals to row align item center margin left equals the sizes that padding times two and whenever i click on this barcode button i'm going to console.log barcode on the terminal all right so now within this touchable opacity we need a view give it some styling with 40 height 40 background color is going to be colors.light green align item center justify content center border radius is going to be 10. so within this view we are going to render the image component so the source oops the source is going to be icons i can't stop barcode and resize mode is going to be cover give it some styling as well so height 25 with 25 and 10 color is going to be colors.primary save it and there you go the button image is being rendered properly and same thing we are going to need a text component over here so text component barcode give it some stalling margin left equals the sizes that padding and the font is going to be font start body four perfect all right so now that the payment method section is completed next we need to work on one more component and that is the scan focus component all right so to do that we need another function over here so render scan focus which is basically the frame all right which is basically the frame so i'm going to create this function over here right on top of the render payment methods all right so function render scan focus return i'm going to return a view with some styling flags equals to one align item center justify content center and within this view we are going to need an image component source will be images that focus resize mode is going to be stretch style is going to be with 200 height 300 all right i'm gonna push it up a little bit by setting the margin top to negative 55 percent perfect so before we test it on an actual device we are going to add one more prop called on barcode read all right without this prop we would we wouldn't be able to read the bar code right so i'm going to add it over here so own bar code b equals to i'm going to call this function the same name as well on barcode read and i'm going to create this function over here so function on barcode read the parameter is going to be the result and here what i'm going to do is that i'm going to console.log the result not data on the terminal so which means whenever this camera module the react native camera module detects or read any sort of code it will be um console log on the terminal all right so what i'm going to do next is that i'm going to open up the xcode and try to run it on my iphone 8. all right now for the moment of truth let's see if it works i'm gonna head over to the scan screen okay so the app or ios will actually ask me i'm sorry will actually show me the message saying that digital wallet app would like to access the camera so i'm going to just allow it perfect so the camera is actually working as you can see here the camera is actually working now i would like to know if the qr code is actually working so perfect you see whenever i try to scan this qr code the link or the content of the qr code or the content of the um bar code will actually be console log on the terminal perfect all right guys so we have just coded this clean looking digital wallet app based on the design created by happytreemilartanjubo.com the full source code for this project is available for free on byprogrammers.com and i have included the link in the description below so if you like the video if you think you have learned something new from this video we'll be more than happy if you can just give it a thumbs up comment share to your friends and also don't forget to subscribe to our channel for more videos like this i will see you guys in the next video happy coding peace

Channel: ByProgrammers

Views: 45,054

Keywords: React, ReactJs, React Native, Mobile, Development, UI, ecommerce, learning, mobile frontend, mobile ui, react native ecommerce, react native project, react native ui, react native app, react native tutorial, react native ui design, speed code, let's code react native, app development, digital wallet, grab pay clone, pay clone, camera app, barcode reader app

Id: rcXyN_cfGY8

Length: 108min 33sec (6513 seconds)

Published: Sun Jan 03 2021