Go Travel - Mobile App Dev | React Native Expo | TailwindCSS| Google Places & Rapid API's

welcome back guys hope you're all doing great and today in this course we're gonna build a hybrid mobile app which successfully ran both in iOS and the Android so we're gonna build a travel advisor which going to use the real-time data set and we are going to have the Google Places API where the user can search for different different locations Okay so screen these are the three different screens we're going to build by using the react native Expo actually you can create an application by using react native CLI and Expo CLI we're going to use the Expo which is really user friendly for the beginners to understand the react native much better so I'm going to show you completely from the ground how to build all these three different screens and how to use the Google Places API and how to use the rapid API to fetch all these data and to display it in dynamically okay so let me show you the real application how exactly the our app is going to looks like so this is the home screen once the user loaded the app this is how it looks like and you can see it's animated perfectly and all these UI designs are nicely done by using Tailwind CSS I'm going to show you how to use the Tailwind CSS even if you haven't used the Tailwind CSS no worries I'm gonna help you completely understand it and how to use it and once the user click this go option if you click this that will helps the user to navigate it and we have this nice animated options to show that the still the data is being loaded and you can see that we have the real-time data set which is coming from the rapid API okay then so once the user clicks over here that will take the user to the next page you can see that will take the user to the next page where the user can see the complete information is about that particular restaurant what is the ratings and the contact informations all these informations are being loaded directly from the rapid API and if you have to if you want to change the location you want to look for the different location so if I click the search option over here then I can type that place any place you want let's say uh torrento oops all right so Toronto if I click that so that will take some slight timing because it's coming from the it's not a premium we are using the free version so it's taking some time to load all these datas and everything and once it's successfully loaded you can see it's loading it's loaded all those places over here so if I click that I can see the information support that so like that you can change the live informations you can see the hotels attractions if I click the attractions so it's taking few delay but it will load that information you can see that is a slight delay because of that the version like free because we are using the API free version if you're using the premium one it will be much faster all right so here we have the attraction so the user can tap it and they can see the in all the informations about that location and you can see the that a particular attraction information so just like the same way they can search for any different kind of places any places all around the world because we are using the Google Places API that helps you to search the places once the user tap that option it will gives you the latitude and longitude location using that latitude and longitude location we are pulling this data from the rapid API all right I hope you guys are so excited so regarding this build because uh without wasting your time so now let's get started all right then so let's create a new project folder in our desktop or you can choose your preferable location in this case I'm gonna create a new folder in my desktop and I'm going to name it as travel advisor hyphen YouTube good so let me open up this folder in my terminal here we go and let me make it a little bit bigger so before getting started so open your browser and let's have a look at the react native so I already opened the react native official website or you can create a new tab and search for react native and click this first link that's their official documentation so if you are learning any new technologies so please go to the official documentation section by section to understand it much better I would strongly recommend to go through the documentation sex by section by section okay so click here get started and there are two different ways to create a react mobile app so we do have Expo CLI and we have the react native CLI so the difference is if you're a beginner please use the Expo go if you already have some knowledge in mobile app development use the react native CLI okay in this course we are going to learn how to use the Expo and we are going to build the export project okay so if you want to learn more about the Expo click a new tab and search for Expo CLI or simply search for Expo you can find their official documentations for Expo projects alone so click here so in this documentation you can learn all the commands and the informations regarding the Expo projects briefly so few packages are common for both expose CLI and react native CLI but some of them are quite complicated the way how it's getting configured and everything is completely different when compared to Expo and react native so please go through their different documentations whenever you're working with the Expo or react native so in this case you can see there are certain commands which really helps you to create a project and to run and all those things it's explained briefly how to start it how to print build it and run it and everything so I don't want to use the npm or npx every single time whenever I need the Expo I'm going to install the exposure line directly in my Global so that I can access all the Expo commands directly by using the export keyword itself so click this option Global Expo CLI click it and there you can find this command npm install hyphen G Global Expo CLI so just copy this command and paste it in your terminal so let me open the terminal where it is ah here we go and paste it here so that will take a few minutes so to get install it done in this case I already installed my expose CLI and I do already have the Expos CLI installed so please wait until it's successfully done once it's successfully done run the command Expo hyphen hyphen version so that will gives you the version number which is installed in your machine all right so let's clear it and to create a project folder to create all the net to download all the necessary files for your export project so run the command export init and here you need to give the project folder name or if you already inside the project folder just like me press dot slash okay because we already active we already created a folder inside this folder I need to bring all the export project files so press enter so this will take some time uh right so so okay so once it's exploring it it's triggered it's showing three different options you want to create it with the certain navigation tabs which is with some predefined templates or if you want to create it is a blank project in this case we are going to of course we are going to use the blank project there are two different options either if you can create a project by using typescript or you can use the project bar JavaScript so choose the first option because in this course we are going to use the JavaScript not a typescript so press enter so this will take some time so that will take few minutes to download all these projects so please sit please wait until it's actually done it's still loading all right then so it's successfully downloaded and uh so here we can find few commands and all those things which really helpful for uh our reference so don't worry about it so let's open this project in our Visual Studio code so run the command X story in codespace Dot there we go so that will open our project in the visual studio code and we make it bigger and here you can see all the necessary configuration package.json Bible configurations app.json and app.js lots of things over here this is the file which is currently being loaded and here we can see view or text let me explain everything one by one like when we are starting building the applications so now all we have to do is to how to run this project so that what we are going to do next all right then so since we successfully loaded the open the project in the visual studio code now what we need to do is we need to install the simulators to run this applications so what we need to do is let's open up go to the browser and if you're using in using a Windows operating system you can use the Android Studio to check your app directly in the Android Studio or if you don't have that much configuration so you don't need to worry about it we can directly run these app in the um browser itself so let me show you so open up your terminal Ctrl J or command J and run the command Eon start and that will trigger the command Xposed start so that will run and here you can see the barcode right so we have the lots of option you can run it in the Android or iOS simulator or you can directly run it in your browser itself if you want to check it directly in your mobile phone itself we can do it just install the app name called Expo go just install this app name app from your Play Store or App Store so that you can directly see the preview of your project in your mobile phone itself so just install scan open your camera and scan this thing and it will open the Expo Go app so view our Lively connected with this project and your mobile app so whatever the changes you are changing it will directly reflected in your mobile app or if you want to run it in the web so press W so that you have to install this thing otherwise sometimes it will directly opens your web browser itself if it is showing anything else just install the command what it's showing then it will work fine in this case right now I'm not going to use the web anyways let us copy this thing and let me create a new terminal and here let me paste this command so that will install this in our folder cool so let it be installing and in this case if you open your browser if you want to download the Android Studio please download the Android Studio then only you can use the Android simulator as sorry Android emulator okay so once you downloaded it so you can open the Android SDK package manager and you can trigger the Android emulator for which Android version you are going to create it so open the Android emulator so in this case I'm not going to use the Android Studio so just download it and it will show you all the option necessary options for if to guide you to open the Android emulator so let me close this and go back here in this case I'm going to use the iOS simulator if you want to use the iOS simulator or if you're using your Mac already open your app store in your MacBook and or search for xcode and you can download the latest uh tools latest version of the xcode and that's a developer tool which helps you to use the similar iOS simulators so download it and then you can you are good to go so here I just downloaded it and let me open it just pressing I if you want to run it run for Android version you just need to press a if you want to run it for the iOS just press I so that will run open up the iOS simulator and and here we go so that's loaded my application and it's still loading the Expo sometimes for the initial startup it will take some time so please wait because it's trying to build all the apps and files which is already downloaded so it will take a moment so please wait until it's built it completely because once the first build will always take some time once it's builder then the next change is everything will be run much faster all right so and here let me bring all the commands again and still my web app web option is not showing so anyway let me stop the server one time and let's restart it start and now we can see that the web option is active so now if I press W so that will opens the browser and it's opened in the separate tab let me bring it over here and here we go it's running it in the localhost online double zero six and this is the mod which I have in that project so far all right so let me go back here and let me start my iOS again IOS app again because you can see once you restarted the server always it shows this issue like disconnected from your Metro okay so you have to reload your app either press Ctrl or or command r or simply click inside your terminal press your key r that will reload your apps completely and it will try to refresh the changes there we go so it's now active now let me close it and go back to your app.js and try to make some changes inside this text component here let me say like hey there a new app or something say the changes once I made the changes and instantly you will see the changes in your mobile phone or your simulator or even in the browser itself there we go so this will refresh automatically whenever you're making changes that's the duty of Expo X4 will take care of it okay so we successfully installed the emulators and I show you the way how to use it in your mobile phone itself okay the next thing is to how to use the Tailwind we are going to use the Tailwind to make this materialistic UI is to create this nice UI which we're having over here we're going to use the Italian and I'm going to show you how to configure the Tailwind CSS that's what we are going to do next all right then so let's open up the browser over here and search for Tailwind CSS react native okay so that you can find the very first link Tailwind CSS react native that's the package we are going to use it so click it and if you scroll down you can go through there the informations regarding this packages and everything the configurations and setups and everything which is briefly explained over here in this case I'm going to use it we can go through it or you can simply click this link over here documentation link so right click and open it so that will takes you to their separate web page where you can see the configurations for Expo separately react native separately everything is here so for Expo just you can follow this informations from here but the same okay so what we can do is just let's see in this case I'm just going to use this one from here let me go here and scroll down we already created the application and this is the dependency we need to add so copy this command and go to your terminal and paste it press enter and copy the second command yawn adds it'll be in CSS so it's installed paste it and run that command so let's go here so now we need to initialize our Tailwind CSS so that will create the Tailwind configuration file so let me copy this copy it and run the command on Tailwind CSS in it so that will initially allies our tagline configuration.js file and we need to replace the content because which content you need to monitor for the ages when you are making any changes for your Tailwind CSS in this case it should monitor this specific file copy this content and update this content file so it should constantly check the app and the folder name called SRC in this case we don't have any folder name called SRC anyway later we'll change all those things otherwise let me delete it let me delete this say the changes and what we need to do next we need to update the plugin information in our bible.config.js so copy this line and update it in your Babel config paste it here save the changes all right so now it's successfully we configured that file that configuration of your Babel and everything next we need to wrap the entire component into the Tailwind provider so copy this line and go to your app.js and paste it over here Tailwind provider and wrap your entire component just like this copy this and simply change the changes over here so here I don't need this plus sign delete it and we don't need this plus sign delete we'll save the changes okay so since we don't need this style component anymore so let me delete this style component delete it so that we don't need these Styles also let me delete it and we don't need this style sheet also delete it save the changes so once it's done and you can see it's push your content completely to the top of your status bar and behind your Notch display and everything so what we can do is we can change this view directly to the safe area view so basically we have to maintain entire content inside this APR or not in your status bar so I'll change this view into safe area view so whenever you're using the class please make sure while importing the packages if you are using react native and react native web together so if you're using react native web that will load only in your react native that means in your web not in your emulator or your mobile app so because we are using the web mod also in this case imported in the react native import react native so choose that package so now it's changed once you save the changes that will put it inside your option over here and it is using the fast refresh option so instantly it will refresh your files and everything okay and if I'm making any changes over here that will get refreshed thing that will get refreshed instantly all right so then what we can do is let's go ahead and install the Tailwind extension so search for tailwind and there you can find the Tailwind intellisense so please install this extensions which is really helpful for you to create a tell to create a custom UI by using Tailwind much faster okay so let me close this and here I'm gonna write class name sorry for this text class name equals let's say if you move here and that you can see how to write the Styles and everything you can see the options so in this case I'm just going to say class name is going to be um text red color or something let's see save the changes and you can see now the color is successfully changed text it's showing in a red color so if you want to bring it in the center of the screen all you have to do is to class name equals so basically when you're using a flex box in the web view by default it is in a row Direction but when it comes to mobile app by default it is in a column Direction so I need to make sure that this view it's taking the complete screen size so Flex one okay then everything should be in the center and now that will push the entire content in the center of your screen so basically our Tailwind configuration is successfully configured properly and it's up and running perfectly fine okay so but the problem over here with this configuration right now is it's only checking for your app file in future we might work in a different different screens on different different components being created so we configuration should work properly for those things also so to configure your custom folder so go to your top and open this website it's already opened here and here you can see the advanced setup and click the babble option and there you can see the the folders screens folders or components folders or you can directly type it by yourself dot slash your folder name and inside any subfolders inside that whatever the file name it is and if it is in this extension that should constantly monitor it that's what it's basically doing folder subfolders file name and only for these extensions so let me copy these and let me go here and right after here add a comma and paste those changes save the changes now all we have to do is to create a screen different different screens and all those things when it comes to screens of course we need to know how to navigate from one screen to another so next what we are going to do is we are going to learn how to configure the react navigation and that's what we are going to do next all right then so let's open up our browser and search for react native navigation and there you can find the very first link react navigation for react native apps okay react native apps so click this and click the redox so there you can find out all the uh installation procedures and configurations and everything so first what we have to do we have to go install the at react navigation native so change it to yawn copy this command and paste it in your terminal so paste it yawn add add to react native so paste the changes let it download and install those files and next what we need to do we have to install the Expo Pro the for this project we have to install these dependencies too either copy this command or this command both the same see react native screens and react native safe area context so copy the on command and paste it in your terminal so that will download those two necessary packages for your export project and if you're using a react native you have to link this so react native CLI this is for if you're using a react 90 CLI so you need to run the Pod install command inside your iOS folder but for the time being we don't need to worry about it because that's for react native and you can straightly come over to the navigation container we have to wrap the entire content inside our navigation container okay so copy this option and go to your app.js and right after here import it and let me delete this we don't need it anymore and here I'm just going to say navigation container and everything and all the screens that's option should be comes inside in the inside the navigation container so let's go back here and let's move to the next page hello react navigation cool so each uh thing each screen will be managed as a stacks of layer so we have to install the stack Navigator Library so click the yarn and run this copy this command and paste it over here all right so follow through the documentation that will really helps you for configuring all these things okay so react native Stacks we already installed the react native screens and everything and here we are going to use the create navigate native stack Navigator which helps you to navigate from on screens to another all right so let me copy this line and right after here import it all right so then what we need to do is we have to create the create uh Native stack Navigator so copy this const copy and after here I'm just going to paste stack create native stack Navigator okay so this is the stack object which you will see uses to navigate from one thing then here you have to configure all your screens in this way so let me copy this and let me paste it here so stack Navigator the first screen is going to be stack screen home component this is the component name okay like using this name only you can navigate from on screen to another and this is your component basically we don't have this component so let's go here right click new folder and let's create a folder name called screen okay use the exact same name what we created here copy this my bad this is supposed to be screens then only your tail will will Tailwind CSS will look into that folder inside the screens folder and create one more folder called the components copy this and right click a new folder and paste that folder name components basically these this folder is for all these sub components and this is screens is for our main screens so inside here I'm going to create a new component that is the home screen and right click here and create a new file home screen dot Js okay and you have to install one more plugin called ES 6 es6 or you can click the ds6 so that will okay so where is that like es7 JavaScript this one es7 plus react redex native Snippets so this Snippets helps you to create the component much faster so let me show you so in a react.js burner web project we used to say rafc to create an arrow 6 function but here you need to run react native function export r n f e that means react native functional export component so if you want to create it with the style component with the style content style component you can use the second option in this case I'm just going to use the first one so press tab so that will create a functional component with the export statement okay so now our home screen is ready and here let me say the changes all right so now it's refreshing the changes and it's showing an issue cannot find the variable called home screen basically we haven't import this so let's import it save the change so now it's been imported and here you can see it's showing the header and as well as the home screen so that means our home screen is successfully loaded let's make sure the Tailwind CSS is also working fine so let's see um class name equals text red 400 save the changes okay look at that the color is changing now so fine with that Tailwind configuration is working perfectly with these screens and everything is working fine so we successfully created a stacks of screens so oh sorry the react nav be successfully configure the react navigation so yet we have to create a different different screens we have to configure we have to customize this screens in a different different way so now what we are going to do basically we are going to customize the home screen just exactly the same way over here so the design what I'm using is it's like it's not the original design which I created by myself basically I'm using the design from here I'm using this design from the dribble the design is so where it is so this is the design I'm using here we go this is the design which is designed by travel app concept by Odin Russo which he done a really nice job which is a really good design I'm using his design I alter it a little bit with the images and all those things this navigation we don't have I altered it a little bit and that's the design we are going to use it okay so we are going to build this home screen now this is the home screen which we are going to build it and that's what we are going to do next all right then so let's get started for customizing our home screens over here so first of all what we need to do is I already shared this all the necessary images which we are going to use in this project you can download these images from the link which are given below so click go ahead and download all these images so let me bring this into our project directory so here let me copy this and put it inside the assets folder directly so paste it over here so replace it okay so now because I've defaulty we do have the favicon and icons and everything okay so here we can see all the images has been copied Avatar hero photo okay everything has been copied now into our options okay so now what we can do is basically and every time whenever you're refreshing your screen for instance let's say let me open the terminal and let me reload the app okay so in case if I'm reloading this app see here reloading and you can see whenever you are reloading you can see it's showing some uh the PNG over here basically that's a refresh if you want to change that loading PNG over here that's the splash screen if you see Splash dot PNG this is the PNG it's loading over there if you want to change this into a different the instead of that if you want to keep it in a different images or anything in this case what we can use so let's say [Music] um instead of this this is icon.png basically this is your app icon in this case we can use this okay let's say if I'm using this one let me copy this completely copy copy this restaurants okay so now what I can do is I can go to the app.json and there I can see the splash okay it's loading the image called Splash dot PNG change this restaurants.png and if you want to change the icon and change this to restaurant.png that's my icon it's going to be so save the changes okay so every time now when I'm refreshing it if I reload it it's load that specific icon see you can see that changes okay if you want to make it little bit bigger you have to create a customized size icon over there so that will be loaded over that screen it will be changed and it will be displayed over there all right so now we change the icon now what I need to do is all I have to do is to customize the home screen I don't need this tab option I need to remove it to remove the tab option so all I have to do is to get the navigation options first so here okay so I'm going to use the use navigation hook which provided by the react navigation and let's create that faster const navigation equals use navigation which is powered by react navigation native we are going to use that use navigation hook and I'm going to use the use layout effect so basically use layout effect is like whenever the UI is loaded is there any changes in the UI this will be triggered okay this takes two different parameters just like the use effect hook first one is the functional parameter and the second one is the and second one is a array of dependencies so inside here I'm gonna say navigation Dot set options set options set options and then inside the set options we are going to pass the objects so first object is going to be header shown and the shown object is going to be pause if you don't want to display it just simply say header shown it's false and you can see it's in that menu that option is not showing over there okay and if you scroll down so basically over here view in like um if if you in a web applications div view is exactly it's equals to the division div tag so simply you can say div is view in the react native so whenever you are trying to create a new division you have to use the view if you want to display a text instead of touch one paragraph and all those things you have to use the text all right so in this case we are going to use the view and this view is going to be should it should be inside the complete uh inside the safe area of the screen so what I'm going to do is I'm just going to change I'm going to delete this completely delete it and I'm going to create a safe area view safe area view make sure that you are using react native not instead of react native web use the react native okay and double check it's installing it is imported inside the react native cool so if you have a look at the screen so we have to create this one right we are going to create this one so let's go ahead and for that I'm going to create a view and inside here I'm just going to say text and just hi there save it first so now we can see that it's perfectly in the safest area of the screen okay so next what we are going to do is we are going to create this sections these text sections over here so that's what we are going to do now all right then so since we successfully removed the header options and everything so next what we need to do we need to create this the layer option over here sorry this complete text options over here so let's go here and let me delete this text anyway we are not going to use this delete it okay so then what we are going to do is basically what we need to do is we need to make sure that the safe area is taking the complete screen length so before deleting this text you can see so class name equals I'm just going to say BG red or something if I save the changes and you can see it's not taking the complete screen length so we have to make sure so Flex one save your changes now it's checking the complete screen length so I don't want this specific color I'm going to use the white color itself white or if you want to use a different color you can use the different color in this case I'm going to use the white color okay and I'm going to make this position as a relative position itself okay so now it's taking the entire size of the screen and the first division is going to be your the top section that is going to be the let's say first section okay so please comment it whenever it's possible so first section so we are going to create it as a view so let's create a view tab here V is a Capital One so please make sure that's a capital letter and inside this view so basically here this is one View and this is one text component this is completely a view inside this view we have this one another another view that's a division and this is the separate one okay so let's create one more View and inside that view we are having a text component called go all right save changes so simply it will looks like a go so basically this is entirely that's a division that's a single view okay so see here just a moment um why give me a minute just a minute so here okay and let me bring it here now now okay so here if you have a look at it over here so not this one so let me change this to here this is the first division this is the main division that's the main view inside that main view we have one more view okay this is one more View and inside that we have that one more text component over here okay so basically we have three we have we have to create the main view main View and we have to create one more View and we have to create a separate text tag inside this text tag we have the one more text tag this is what we have to create okay so let's go here we already created the main view we have to created the separate View and here we are going to create one more text inside here we are just going to say travel say we changed so let's customize this thing so first what I need to do is I need to bring everything into a straight line so class name is equals I'm going to change this to flex row so that will bring everything in a straight line and of course I need some space from the margin and as well as in the left and right I need some space you can see we have some space over here okay we have some space over there and as well as we have the space over here also this and at the top area we have some space so all we have to do is to create that necessary Space by using the um padding and margin so let's go ahead and create that now so in the left and right I'm just going to say px6 save the changes so now you can see that over here you can see it's having some space and it's the same way from the modern top so from the margin top I'm going to use mods in top eight I think that space is enough with me so these are just trial and error you can adjust it until you feel satisfied okay then what we are going to do is and basically that should be always in the center items Center and space between these two should be space x 2 because I need some space go and travel it should have some space okay so let's start customizing these so class name is equals so first I need to fix the width and height for it so let's say with this 16 and height as well as 16 and of course it should be completely in a black color so BG black which looks like this okay I need to make it perfect circle so rounded oh rounded pull cool so any changes now it's perfectly rounded and everything should be maintained in the center of the screen so item Center you can see go is in the top left corner okay so justify center now of course it is in the center of the screen but the problem is we can't see the text color so last name equals if you change the text color to white color save it changes now we can see the text over there but here we are using a different color okay so we need to find out what exact color code it is so let me open the color Reader application so what it is here picture so let me bring that picture over here okay here so let me go click this and figure it out what exact color it is where it is there we go this is the color code okay so this is the color code so let's copy that color code and let's paste that color code over there okay copy it and instead of here I can use double open the double square bracket and give you a custom Styles and that will display the color over there and I need to make it a little bit bigger so that I'm just going to say text 3xo and I'm going to say font as a semi bold font semi bold save the changes look at that I think that's perfectly fine okay so the color code here I'm going to use this not this one because it's not copied perfectly so it's I copied something else so I'm just type that color code which I needed this is the color code I need it good fine okay so now the goal is ready the next part is for the travel part okay so let's see last name equals the color code is going to be text hash and let me copy that color code and paste it here and you can use these color code for your reference anyway I'll I copied all the color codes in the and I pasted in the description box so that you can copy it and keep it somewhere whenever you need this exact same color code or you can use your own custom color code so let's say text three axles for this one 3XL and of course I'm just going to say font semi bolt and save me changes look at that so that's perfectly look exactly the same as the way what we have over here so we successfully finished the first text section so the next we move on to the next part all right then so now let's give a break so first section is completed so let's over here and now let's move on to the second section so that's the let's give a comment as second section second section all right so here now what we have to do is let's have a look at here first so what we have to do is so basically we have to create um a separate a division sorry wait a second right showing permissions and all those things let me close this and here let me bring the triangle to here okay so first what we have to do we have to create a view inside this view now what we need to do inside that specific view we have to bring and two different text boxes that's what we are going to do now basically so that's the option okay so inside this this is the main division inside that division we have to create one text box and another one text box that's what we are going to do now okay so let's go ahead and start building that let's go here and let's create a main View and inside that we are going to create one text View and that text is going to be enjoy the trip enjoy the trapped width and the second text or the second text good moments so let me copy it and paste it one more time and I'm just going to change this to good moments save the changes okay so basically that's looking like that so we just have to customize it so for this class name I'm just going to add the padding and the margin exactly the same as PX 6 and margin top eight and space between in the Y not in X left and right the top and bottom I'm just going to add space y three so now we have some space between these two text boxes and let's customize this text box now one by one so class name it's going to be okay so the text color is going to be um hash 3 C 6 0 7 2. oops better I copy it and I paste it making blender mistake okay so now we can see that color over there and the text size is going to be custom size I'm just going to fix it as 42 pixels look at that that's absolutely fine okay so and then I'm just going to copy the same color code for this one class name is going to be text hyphen hash paste it changes and the text size is going to be a quite big size so text I'm just going to say 38 pixel and I'm going to make it font bold save changes that looks like this so that section is completely fine now the next what we need to do we need to bring this the third layer so that's what we are going to do now so right after this um over here or we can keep it inside the second section after this text box itself so I'm just going to say text okay and I'm going to say lower Epsom but this is not needed this much big I'm just going to say until where we can do um let's say under this I think this is enough and let's have some Styles over here so class name it's going to be and text size and all those things I'll just copy this color code text color first we can choose the text color so text is going to be hash this color code and the text size is going to be a normal size like this okay so now we successfully created this exactly as it is so then what we need to do is we have to bring this image and these two different circles so let's bring those two two circles then I'll show you how to bring this image over there okay that's what we are going to do now all right then so let's create this blue circle first so let's say um this is the second division this is the second section is ending over here so let's say as let's see third section or let's say Circle section okay so here and we can say we are going to create a plane view only View okay so basically that view is going to be and in the absolute position okay so let's see here I'm just going to say class name first let's create the width and height I'm just going to fix the with this 400 pixel 400 pixel and height is also going to be the 400 pixels 400 pixels Okay so then what we are going to do is basically BG I'm going to say hash we are going to use this exact same color code from here copy it and we can paste it over here save the changes and you can see a very big box over here so we can make it as a rounded full now it looks like a perfect circle so we are going to make it absolute so absolute it's going to refer its parent element over here the view safe area view that's going to be absolute that is in the top now okay so from the bottom I'm just going to push it 36. from the bottom it should be there and in the right side I'm just going to say write minus right 36 like that so now it's perfectly in the right side okay so what we are going to do is basically we can copy this line completely and we can paste it one more time instead of this color I'm just going to change the color code copy it change the color code and instead of bottom 36 I'm just going to bring it a little bit down so instead of bottom that is X let's say minus bottom 28 save changes so you can see that Circle over there and instead of keeping it over there I need to bring it in the left side so change this right to left now we have that Circle over here okay so to the top of this we have we need to load the image container and that's what we are going to do next okay then so let's see uh you can find this image which is in the assets folder which I already shared with you you can find the image name called hero so we are going to load this image in that specific position so let me close this so before loading into that so let me create a separate sections first let's say image image container or something so basically what we are going to do is we are going to create a separate View okay we are going to bring a separate view in this specific position in this complete position and we are going to keep that image over there okay so let's create a view okay View and class name is going to be this view should take the complete length whatever the space it's available it should take the complete lens of Flex one and the position it's going to be relative position and everything inside in this view it should be exactly in the center position okay so now if you apply any background color or anything you can see this is that position see basically it's taking the complete available position so I don't need any thing let me delete that uh I'll keep everything in the center and inside this View what we are going to do is we are going to bring that image okay so I'm just going to use the image amag image from the react native I'm going to use that class image and a self-closing component so basically loading an image inside your uh using the image component so you have to use the the property name we have to use the prop called Source prop inside the source prop you have to supply the um if you are supplying a URL you have to supply it using URI you can find the URI you need to supply the URI and paste that URL inside here that will load that image directly so for instance let's say if you want if you want to load any image from the browser for instance let's say let's go to the pixab A pixabay so let's say I want to load this picture oops not this one we can search any pictures let's click the home menu okay so let's say I want to load this picture so let me copy this image address and go here and paste it here okay so it's not loaded because we didn't give any width and height so let's say if I'm giving the class name class name I'm just going to say with 20 and height and 20 object power save changes and that you can see it's loaded the images over here so basically you have to use this component and you have to see if you're using a URL you need to supply it inside the UR like this inside the URI inside the source prop inside the source prop you have the URI object and you need to supply your url over there and one even though if you supply the URL it will not load it just like in the way in a web once you're given the URL it will load the image whatever size it is but inside the mobile you have to keep the exact size then only it will load that image in this case we are not going to load this and what we are going to do is inside the assets folder I'm going to create a new file called index.js index.js because later in the project you might have a different different uh images so every time you can't import uh one by one image inside so that will make a very big import statement so if I am importing let's say in a same component I want to import 10 to 16 images sometimes not that much if we are going to do then it will create the 10 to 16 import statements differently I need to import it in this way so that's the reason we are creating an index.js inside the assets folder and I'm going to export that image export by default as hero image from dot slash and I'm just going to copy that name of that image copy the name and paste it here save the changes now which will be exported and inside the home screen inside this URL inside this URL I can simply say I'll delete this I can bring that hero image save the changes so it's showing an issue okay so what we can do is instead of supplying it in the URI will directly Supply it over here there we go so now the image is successfully loaded over there Okay so basically it's taken that complete that loaded image loaded over there but the problem is height and width so it should take the full height so why the reason it's not working is because it's an object which is coming from our local file if you are using a URL then only you need to use the URI currently this is an object so that's the reason I'm directly supplying it into the source object Source property okay so now the image is taking the complete width and height and everything okay so then what I need to do is I just need to push it little bit from the top because I don't you can see I don't want to see this gap between this so I'm just going to push it little bit down okay so I think this is perfectly fine okay so we both clay build the same replica over here you can see the image is perfectly in the left and right it's perfectly fine and here also it's perfectly fine one the only thing is missing is all we have to do is to bring this option over here just like this the outline and as well as this view over here we have to bring that one so that's what we are going to do next all right then so let's have a look over here first so what we need to do is inside this image so basically this is two different divisions these are two different divisions you can see this outside is one division oops um just a moment outside that outside is the different division so here this the outside circle is a different division and inside that one more go is the different one and inside that we do have this go text okay so that's how we need to wrap these stuffs inside entirely inside that okay so let's go ahead and here so what we need to do right after here I'm just going to create one view that's a main View and inside that view I'm going to create one more View and inside that I'm going to create one more text and that is going to be go save the changes so that will display the go over here so basically that should be exactly in the center over this specific position okay to do that what I need to do is all I have to do is to make this main division main View as an absolute position so absolute from the bottom I'll put it in the 20 okay and say the changes now it is over here right then what we need to do is so we can say that as width 24 and we can say height as 24. and [Music] um one second view just a moment okay so here we made the height and width so let's say the changes and if you're using any background color background let's say if I'm using any background color you can see that background color so basically we don't need any background color for it all we have to do is to just um we need to bring the Border all we have to do is to bring the border so let's do that but what we need to do is basically it should bring everything in the center of the screen even if it is absolute position it's not bringing in the center of the screen I think what's the reason image is perfectly there and it's using this relative position only fine Ah that's the problem so it is not is inside the division that's why I'm wondering actually it is supposed to be in the center of this screen over here because we already wrapped it as an item Center and justify but this is supposed to be inside this View over here now it is in the center position so my bad after this image only you have to create that after the image you have to create that now it's perfectly fine but I don't need this background color so here I'm just going to say border so all I have to do is to left side and right side so you can if you have a look at over here what I'm talking about so you can see here so here and you can see the left side is a little bit thinner and in the right side also a little bit thinner but on the top it's a little bit darker but bottom we don't have a border effect so that's what we are going to do now so what I need to do is for this I'm just going to say border left bottom left I'm just going to say 2 and border right I'm just going to say 2 and Border top I'm just going to say 4. okay and the Border color we are going to fix it border we are going to say the exact same color this one copy that color code and paste it over here so now you can see that okay in the left and right we have thinner border and top we have a darker one but the thing is like um what we can do is uh this is let me enable the wrap word wrap so that we can everything in a single screen okay so I need to make it rounded for round and full so now it will be rounded you can see that then item Center and justify Center that will keep everything in the center of the screen bingo so now what we need to do is this one with I'm going to make the width for this view so last name for this width I'm just going to save with 20. height one 20 and I'm just going to say item everything in the center justify everything in the center and make it rounded full and the BG color is going to be background is going to be hash this exact same color code what we are using at the top this one said it changes now it will be in the center and for this text what we are going to do is I'm just going to say class name and text gray color let's say gray 50. that's I think that's enough and the text size is going to be a little bit bigger I'm just going to say 40 pixels and font semi bold is enough semi changes look at that I think that's perfect and otherwise you can reduce the little bit size over here 36 pixel okay 36 is perfectly fine okay so that's looking perfectly fine so what we need to do is so basically it's simply doing a applying button so we need to add some clickable even so it's not looking fine right so when I click it it should it looks like some clickable actions over there so instead of plane um a view so what we can do is um I can wrap this View I can wrap this view completely into a touchable opacity touchable opacity use the react native and inside here and now when I click this see we have the touchable opacity all right so if you want to change this touchable opacity for the entire view then wrap the entire View for the touchable opacity in this case I'm just going to keep this button like this okay and then the next part now you can see that we are done with pretty much with our home screen the only part is remaining in the home screen is just the animation we just need to add some single animation when the image is loading we have to make sure the image is fading in and we have to add some animation pulse effect for this button over here it should pulse constantly okay so we are going to use that animation so that's what we are going to do next all right then so to add the animations inside the react native basically we need to use this package so let me search for react native animatable search for that and there you can find this package react native animatable npm so click this so here you can see all all the props for that how to add the animations how to import this animations and what are the different animations that it can see if you scroll down you can see these are all the different animations that you can use bounds fade in Bones out fade in Fade Out All the entrance animations exit animations all the options you can add it over here okay let's take your time and go through all the animations and everything so let's first install this package so let's scroll to the top and copy this name copy it and open your terminal Ctrl J or command J and paste it over here install that so it's not like this come on let me clear it and add your on ADD paste it so that will install that package and now what we need to do is to so here we need to import this one copy this and scroll up okay scroll it up a little bit and at the top right after here I'm just going to import that one import start star animatable and everything okay so once you added that one all that you need all I have to next what I need to do is to all I have to do just like in a frame or motion what we will do we'll wrap it in by using the motion object here we just need to wrap it with animatable object animatable animate Dot image okay just like that you need to wrap it and objects what are the objects is then you have to supply you can supply anything what is the animation you are going to use what is the duration delay Direction easing these are all the using objects you can use okay in this case the animation I'm going to use for this is animation the animation name is going to be um pulse I'm just going to use the pulse animation okay pulse then uh easing easing [Music] um is out easing is out okay and then save the changes otherwise we can use in not pulse okay fade in so basically fade in for your image my bad is in not save the changes so now once the image is coming in it looks like that so if I refresh it look at that okay so then for this this button over here that is this view so here hold your ALT key or option key to create a multi-cursor editor and then type animatable Dot View okay then press the Escape key to remove that uh animatable options that the multi-cursor options so the animation name we are going to use this over here is the pulse animation and the easing option we are going to use is uh ease in out save changes and the it should run constantly so iteration count that's an object you can use and I'm going to say infinite save changes so now we can see it how that pulse effect look at that so that's looking awesome right so when I click this it have that uh fade in and create a node effect by using this touchable opacity and this having this pulse effect like it's having it's running infinite time number of times over here okay and it's nicely animated because of this e is in an ease out effects all right so now when I click this that's need to navigate to the next screen and that's what we are going to do now all right then since we successfully added this nice animation and nice touchable opacity for this so we need to make us make a slight changes over here so when I click this like outer layer it's not adding that opacity so the problem is because I added the opacity for the inner interview not for the entire view so let's put it outside like this and let's bring this outside like this save the changes now when you do it it will have that entire animation of the opacity level but the still be having some problem that's because um what we can do is maybe instead of changing this stuff like that we can simply change we can copy this and change this entire outer view as attachable opacity View and delete this touchable opacity all right so this small alteration and now the UI will remain same and when you click it the entire outer layer will get you can see including the Border you have the that opacity level and everything all right so now let's add that click event for this so when I click this it's need to be navigated to be second screen okay so let's do that so before moving into that we need to create one more screen so I'm just going to create a screen name called discover .js and I'm going to say rnfe react native function export component save the changes and let's get to the home screen over here okay so inside the Discover screen now what we need to do is uh we have to add a lot of stuff so before we do that let's move on to the home screen now and in the home screen over here I need to add the touchable on press event okay in a web in a web app we used to write an on-click events over here we need to write on press so using on press event okay so now we are going to navigate it that's why we create an object called navigate we haven't created yet I think so yes we need to create an object by using the use navigation hook I think yeah we already done that use navigation is there so we need to use that navigation yeah navigation dot navigate so here I need to give that exact screen name where it's need to be navigated so here I'm just going to say discover so basically using the navigation object which we created in in the previously and we have the method called navigate and we are instructing it to navigate this specific screen so this screen we created it but we haven't configured inside our stack Navigator so here all I have to do is to I have to create one more so stack dot screen and I need to give a name exact same name so copy that name and paste it over here and the component is going to be whenever it sees in the navigation option throwing this name so it should load this cover component so make sure discount component is added over here and here let's say the changes now when I click this that will takes me to the Discover page so I can come back by clicking this and even in the real mobile phone the gestures will also will work okay in the simulator it's very hard to keep track it but in the real mobile app if you check it in your mobile phone the gestures will also work perfectly so now all we have to do is to just to remove this discovery navigation option the the menu you can see in the for that page we have this header so we just need to remove it and we can start customizing that UI which we have two disk design so let me open that just give me a minute I closed it unfortunately so where it is I think I saved it over here ah here it is let me bring it to the screen so we have to design this screen structure by structure okay so the first of all we need to start removing that header which we are already having there so that's what we are going to do next okay then so let's close everything so like I don't need the app.js over here index let me close this let me close this and let me close this so let's keep the home screen and the Discover alone so here what I'm going to do is I'm just going to copy this object let me copy it and I'm going to paste it so we don't want to waste our time and typing the same code again let us copy and paste it over there and I need to import this one let me import it imported and here we are getting an issue what is that issue while copy and pasting where exactly I'm pasting it so oh God I missed this line my bad let me copy this completely and let me paste it here yeah now it's fine so here we need to import this and we need to import this uselet effect save the changes now you can see that the header is gone now so all I'm going to do is to we are going to basically create this option over here you can see we are going to create this basically this is a complete view all right this is a complete View and inside that view inside this View oops sorry main View and inside this view you have one more View and we have another view okay so this is the structure we have to create now so let's go ahead and create that so I'm going to change these two I'm going to change that both these two as a safe area View using react native so I'm going to import it from the react native make sure that you're importing it from the react native okay and I'm going to add this safe area view for us and this safe area view should take the complete play space available so Flex one so that will make sure to take the complete length and I'm going to give the BG as a white color and I'm going to give the reposition as the relative position let me delete it so as I said we need to create one complete view first so that's what we are going to create now so here I'm going to create a view so that's the main View and that inside that I'm going to create two more view this is for that text content and here this is that for oops and this is for that image tag so inside this what are the text we do have inside here we have this two different text option discover and the beauty today so we are going to add these two text boxes over there so let's bring that text so what is the text we do have discover so this cover and let me copy and paste one more time instead of this cover I'm just going to say discover the beauty today some catchy text you can change you can write your own catchy text over there all right so let's uh save the changes let's see how it's looking look at that so we do have that options and everything let's add this image later first let's fix this text box and everything so for this view basically we are going to this text boxes and these two should be in a single row so for the main view I'm just going to say it has okay so let's say these things has changed this to flex row so this will change it to a flex row and everything should be aligned in the center and they should justify the space between so both of them should be distribute the space between them and in the both the left and right side I'm going to add a padding effect as px8 so now you have some space over here and that type and for this I'm just going to do the uh I'm going to leave it as it is because I'm not going to add anything else uh everything is perfectly it is in a column Direction and for this discover text name equals okay I'm just going to give the size as text I'm going to fix the text size as 40 pixel so 40 pixel and then um color of the text is going to be hash and I'm going to copy the color which I already used 64 6B what it is um no I haven't used that color so let me type it so color code is 0 B 6 4 6 4 6B this is the color we are going to use which looks like that and I'm going to say it as font bold save the changes and that look exactly as it is how it's looking over here then we need to change these things for class name for this text color is going to be hash Pi 278 27873 so don't worry about these color codes and all those things I already shared it in the description so please go ahead and copy this 5272 8th my back 0.27283 then text size is going to be 36 pixel save the changes that looks like that I think that's perfectly fine right cool so then what we are going to do is I'm just going to write the styles for this View so basically this view is going to be with 12 height 12 and for the time being I'm just giving a gray or let's say I'm giving some color later I'll remove it you can see a box over there and that box is going to be rounded MD say the changes now that is rounded perfectly okay and I'm going to say as item everything inside should the item Center and the justify Center because inside this we are going to just keep the image that's what we are going to do apart from that we are not going to add anything else in the assets which I shared with you already if you haven't downloaded click the link in the description so that you can download it so click the Avatar this is the Avatar we are going to load over there so in the future you might add the login authentications and everything in that time you need to keep your authenticated user profile picture over there for the time being I'm just loading the dummy image right now so image we are going to use the image image let's import that image from the react native and then close this thing of course we need to export that image name so let me copy this image name and inside the index.js file lets me export this thing so export default as Avatar from dot slash avatar.png now I can use this object name over here so source is equals Avatar okay and we need to import that avatar from the assets images and the class name for this is going to be of course it's going to take the width full height full rounded MD and object power send the changes and look at that now we have that image perfectly sitting over there and if you wish to add some shadow effects too you can add some shadow effects for it so let's say shadow LG okay so that might add some shadow effects further over there okay so we are pretty much done so then what we are going to do is we are going to bring this search box which is actually a real um a Google Places search box okay so once you click that and it will shows the autocomplete options and everything and that's what we are going to do next all right then so since we successfully created the top header section so next what we need to do is we need to create this search box so basically this search box is bind with Google Places API powered by Google and it have an autocomplete feature so that the user can type the places name it will show the suggestions of the places with an autocomplete option okay so let's see how to add that to add that we are going to use a package name called Google like sorry react native Google Places autocomplete that's a point big name so anyway I'll show you so here search for a package called react native Google Places yes it is this is the one so react native Google Places autocomplete so open it and that gives you the preview how exactly it's going to be this is what we needed we need the search box and as well as we need the auto complete feature cool then here we go so how to install it first we need to add this package of course let's copy this line and let's open up your terminal and let me add it over here so that will add it so let's go here and step two go to Google Places API and enable Google Places API web services and you should have the billing of course only if your Google like the main your Google account if you have a billing account then only this places apis will be enabled so because this will charge you when you're using the API that is a certain limit so you uh until a certain limit it's free once you cross that limit you will be charged as much you use it will be charged so pay as you go okay so to do that what you need to do is so click here and go to console.goog console.cloud.google.com so that's the place you need to navigate so I dropped the link in the description so please click that so here first of all what you need to do is you need to create a new project for yourself so here I already have a several project if you don't have any project so please click here and create a new project if you click this so that will ask you to type the project name and what is the organization location and all those things in this case I'm not going to create anything else just create for yourselves just create a new project okay because that's having a very certain limits for each email ID already I do have a quite a list of projects over here okay in this case I'm just going to click my own which is which I I'll be using for a very long time because this is the account which having my building accounts and everything so once you created that project open it this is how the dashboard looks like and in the left side you can see over here in the left side you can see buildings so click the buildings and make sure that you added all your Billings and everything so here it will take some time so make sure that you added your billing payment how what exact payment method you are going to use and all those things if you go to the payment overview okay so you need to add a billing account even if you don't have a billing account initially it will ask you uh to add the billing accounts and everything so here you can see it shows you the payment options manage payments options and everything you need to add your debit or credit card over here so that will be automatically debited and at the certain time of period all right so now what I'm going to do is over here um let's say I'll go to the apis and services once you completed your billing account go to the apis and services all right so here in the library click the library and search for places API most probably it will display it over here itself otherwise search for places API lasers APR search for Google Places API you can find the very first one it's also click it and I do already enabled it for my the demonstration so here click enable for yourself so it will take a few minutes to enable it once it's enabled it will choose this option as manage and all those things okay so here you can if you scroll down you can see the documentation of this API how to use it and all those things and here you have the pricings also how much it will charge and all those things if you click this it will shows you the details of charging analyzing it is mostly it shows pay as you go like that is a certain credit limit once you charge move that credit limit it will I'm sorry once you go beyond that credit limit it will charge you as much you go okay so mostly for this example free version is itself more than enough okay anyway but it will allow you to use only if you already enabled it otherwise there is no options so now this actually enabled it now let's go back to the um where it is let's click this link okay so let's go back to the apis and services go back to the apis and services and click the credentials and uh we need to access the key bar is that key just a moment show me the key and wait a second where we can find that key key key key key key I think this is that key so e i z a yeah this is that key okay so once you added that it will shows you a API key once you added that option it will shows you an API key so this is the API key which is auto generated for me okay so click that and open it and initially it will ask you to do you want to allow any restrictions which applications you want to add so key restrictions if you open the API key and you can see currently I didn't have add any restrictions so far over here that means this if anyone having this key they can access this key through any of this particular domain services and all those things so most probably no issues after this term tutorial of course I will delete this key anyways if you are making it if you are working for Android or iOS app please be more specific so that will restrict this key access okay for the time being I'm just keeping it to leave it as it is and then this is our key I'm just going to keep it as it is and now since our yeah that package is successfully added so what we need to do is so here this view let me close this let me go back here and go to this package over here and we need to add this line so let's copy this line import Google autocomplete let me copy this line and let me scroll up here and right after here let me paste it okay so then what we need to do is we need to bring one more view because we need to keep that thing in our design if you have a look at it this is a separate view so we need to keep this in a separate view for that I'm going to create one more view this is the view it's been completed over here I'm going to create one more View and I'm going to name that view give it last name okay so that view is going to be um let's say Flex row okay Flex row item Center okay and I'm going to say BG BG White and MX oh margin left and right four and rounded Excel and P Y 1 and p x o and let's save the changes okay currently nothing is happening let's add some shadow effects also so that you can see exactly how it's going to looks like so Shadow LG okay so now we can probably see something over here okay so let me bring that um let me add some margin top from the margin top it needs to be so instead of white color if I change this to red or something so that you can see it much clearly what it's happening over the sea we have that option over there but I don't need the red color I need white and then inside here I'm going to bring that Google Places this one the autocomplete feature which we have so let me copy this and let me paste it so probably it will bring that text box over here but it doesn't work because we need to use the our key over here so that's where this key take places let's copy this place key and let's replace this key with our key okay so probably you are not supposed to use this key as it is we need to put it inside the environment variable and we need to access it through environment variable that way you can keep your keys and everything safer okay so now for the time being to keep it simple I'm just going to keep leave it as it is and along with this okay so now I hope everything is done so if it is so let's try adding let's see uh let me check now you can see that once you added your keys and everything it started to work perfectly right it started to work perfectly and it's it's up and running and it's working perfectly when I type the guide showing a list of suggestions over here and we do have the console log also let me go to the control panel currently there is nothing so when I click it you can see it's giving me a bunch of values all right so it's giving us a bunch of values description and match the substring what is the length offset and a lot of informations like the place ID this is the unique Place ID using this place ID we can fetch the informations by using different apis of the Google we can access the complete Place informations and everything okay so probably what we need is we need only the geographical location that means latitude and the longitude locations to access the latitude and longitude location in this package you need so after quite long research I figured out from a stack Overflow how to access the the latitude and longitude location so let's go back here and let's go back to the library and let's click the places API one more time if you click the documentation and there where it is places um iOS not iOS API so here please auto complete location [Music] and oh my goodness I missed it where it is not this one or this one or this one um not in this then where it is where it is inside no not here documentation Google Map API come on I missed it right it is geolocation geocoding uh geolocation we go somewhere I forget where I get that not this one then I think geocoding um example apps uh reverse geocoding with Place ID um all right so leave it I totally forgot what I checked that one otherwise let's search for um we are getting the mm-hmm let's say react native Google plays autocomplete okay get latitude and longitude longitude ah here we go this is the one this is the one which I searched this is the one I used to figure it out and here you can see this this this answer is really helped me a lot okay using this answer only now we are going to get the geographical location so we are basically in our example we are getting the details from the details we have an object called geometry and inside the geometry we have the location okay inside uh the location just like the same way we have the viewport also in that we have two different objects location and viewport using the viewport we are going to get the viewports okay so to do that what are the things we need to add so first we need to fetch the data so fetch details of course fetch details it's going to be true so now it will fetch the details objects and the place folder I'm just going to leave it as it is as a place and okay on press event so we have the objects and everything and inside the queries we do have the languages and the keys and everything is perfectly as it's supposed to be and we need the geometric so to get the geometry Google place details query so I'm going to enable the Google place details query inside the Google place details query I'm going to enable the fields basically I'm going to enable the fields object and that Fields object is going to be jio Geo metric g e o geometry geometry we are going to enable the geometry object okay so for that make sure there is no spelling mistakes and all those things fine now it is fine and inside here instead of this data I don't need this data anymore let me close this close this and I'm going to get the details conditional checking details question mark dot if it is have geometry object question mark Dot and get the as I said we have two different object locations and we put in this case we are going to use the viewport viewport I am going to print that baby changes and now let me close this and let me search for the toga again and if I click this that will in the console we can see it's printing the Northeast latitude and longitude and the Southwest the latitude and longitude this is all what we needed all right so let me copy this because that's the Durga which is the current location let me copy this text edit we need it a lot so let me create a new document and let me save it changes Okay so this is what we needed later we'll access this latitude and longitude Northeast and Southwest that's what we needed okay so let's keep it as this and now the next what we need to do is we need to using this latitude and longitude location we need to get that places informations and now I'm going to show you how to do that now let's go and do that all right since we successfully integrated the Google Places API which is up and running perfectly fine so next what we need to do is we need to activate our place the travel API so let's go ahead and do that so search for um let me leave it as it is so let me create a new tab and here I'm going to search for um rapid API search for Rapid API so if you're using the rapid API initially you have to sign up with your Gmail or GitHub whatever your account you have sign it up and basically over here this is free for you can use the free in this case I'm going to use the travel API the travel uh I think travel advisor um [Music] advisor yeah this is the one this is the one which I'm using right now all right so here you can see hotels restaurants attractions shared flights all the options you can search and if you click the pricing details you have the pricing details you have the free version which is 500 requests per month okay and for per second you can get the five requests and if you're using Pro you need to pay 20 per month I think 500 is the NF the free version is enough for the practicing purpose for this project anyway we are not going to make this live we are just going to keep it half our own personal portfolio for our portfolio purpose let's go to the end points over here in this case let me open the restaurants oops not this one let me open the restaurant and you can see we have lots of way to access it in this case we are going to access it by using boundaries because that is necessary to give the latitude and longitude locations okay so this latitude longitude locations if you are searching it by using places it's really easy but if you are working with the latitude and longitude location there are very certain limits of apis which work with the latitude and longitude locations Okay so what we need to do is all we have to send the latitude and longitude location which we already collected from our Google Places API we do have if you remember we have um where it is here it is we have the north east and the south west latitude and longitude location okay so that's what we need to supply over here bottom left bottom left basically that is the South South uh Southwest and top right that is the Northeast so that we have to supply the latitude and longitude locations over here that will gives you the list of details okay so I'm just going to um I don't I need to remove The Unwanted informations so let me delete these things which is not necessary we don't need it let's keep it limit 30 records it's fine USD it's fine okay open now let's um okay let me do not include it in the request we don't need it and kilometer okay distance since kilometer that's in we can keep it and language it's okay so fine so these are the informations which we need to add and now let's change the latitude and longitude location which we have so here what's what it is asking bottom left latitude so we that's why I copied it so bottom left that means Southwest bottom left latitude let's copy this latitude information and let's paste it over here latitude and top right latitude that means North East latitude let's copy the Northeast latitude and let's paste it to here and now it's asking bottom left longitude that is south west longitude let's copy this longitude and now it's asking top right longitude that means north east longitude so now let's test this end point Let's test this endpoint so this should return there we go now you can see it's returning all the restaurants which is nearby which is in this current location see Doha it's giving the dhoka and it's showing the restaurants name restaurants and everything so basically we are going to use this informations in our uh project so we have the apis now it's up and working now we need to integrate it and we need to bring it inside our local store in our local file that's what we are going to do next all right then since we successfully enabled the travel advisor API using rapid apis so we know that the apis is working perfectly now all we have to do is to complete the design so that we can integrate this with our UI so we need to create this sorry we need to create this menu options so first let's create this menu option so that we can um start moving on to the next options over here so let's go ahead and create the menu options first all right so this is the view and right after Shear I'm just going to say menu container basically that's the menu options and here we are going to create the one more View and inside this view we are going to create the menu continuous menus options and everything one by one all right salt um what we can do is um so if you have a look like this like whenever the user wants to scroll down this entire thing needs to be scrolled right I can scroll up and down right I need to scroll this thing entirely up and down so it should go as well as and it should scrolled up and down in that case what we need to do is we need to change this view as a scroll View as a scroll View scroll view react native scroll view so now it's enabled as a scrolled View and here I'm going to create a view view because inside this scroll view this is the first main view we do having this is this first main view this is the one and then this is the next View and then these are the next review containers like this three different views we have so let's go ahead and create the first view That's the menu main container and let's add some styles for it okay and I'm going to say Flex row Flex row item Center item Center and I'm going to keep it in the center just if I Center and PX left and right padding left right and margin top I'm going to keep it as eight so that will bring something over here currently nothing is showing and inside here I'm just going to bring the menu containers one by one okay so let's have a look at this menu container so what do we have over here so we have the the image and we do have the name of it so these two informations so let's create that so I'm going to create a separate component so that's the reason we created a new folder over here and here I'm going to create it as a menu container.js and I'm going to say rnfe react native functional export and I'm going to use it over here menu container okay so this menu container needs a key it should be unique so key let's say uh I'm going to use the name itself so I'm just going to keep it as a hotel and then I need to supply the name of the menu content what is what exactly this is going to be so name is going to be hottest so let's Supply it so title equals importance then what we need we need the image so image SRC equals so here I need to supply the URL so I do I already have the Assets in our uh assets folder Hotel this is the hotel we need to supply this vector to do that let's go here and let's copy this and paste it for hotels and for attractions and for restaurants okay so let's change this bottles directions and restaurants okay so let's copy the one by one image photo copy it and give it over here for the then what else attraction copy it and give it over here then what was restaurant where it is copy the name of that image and give it over here so now we have the executable objects so now we have the objects over here so that we can use it inside our menu container so I'm going to supply the object over here this is the hotel so I'm going to use the portals images okay so since I need to get this state so we need to understand which exact menu is currently active it is currently active I need to change the background color of that selection so to do that what I'm going to do is I'm going to create a stage over here so use State snippet and I'm going to name it as type set type initially the type is going to be restaurants initially we are going to pass we are going to use the which one let's say here restaurants we are going to passing the restaurants so basically why I'm giving the type over here is because if you have a look at it the restaurants and for hotels the URL is typically same only this thing is going to constantly change so I don't need to change the entire stuff of this API calling I just need to change this part so you will understand it later so I'm just creating a new new state snippet with the type I'm going to pass that type okay if that particular type and the name which is currently being loaded if both are same then we will change the background color okay so type is going to be type and set type is going to be set time okay these are the informations we need to supply it into our option and it's showing cannot find the variable you state of course we didn't we have to import it it's imported now it shows it's working perfectly and you can see the menu content is loaded properly and we need to bring all these Keys objects over there so let me copy it and I need to first I need to bring the title let me expand it and let me bring the title prop inside and we need to bring the image let me copy it and I need to bring the image prop then I need to bring type then I need to bring the set type copy it and say the changes so next what we are going to do we are going to customize this menu container okay and that's what we are going to do next all right then so since we finalize the layouts and for the main menu main menu container so let's customize the each menu cards one by one so let's go here and have a look at our design so let's see how exactly it's been designed over here you can see it do have a main View and inside that we have one internal View and we have another one okay we are displaying the text and we're having the image over here so let's go ahead and let's do that all right so where we are so let me over here fine so we had all our images the properties and everything which is necessary we had it and this is until it's going to be touchable opacity let me change this to touchable opacity tangible opacity react native change this to then only we can add an on press even for it okay and let me delete this and I'm going to add a class name for a class aim is equals so basically we are going to change you know everything inside this into it should be always in the center so item Center and justify the center and space y uh because we are going to have two different objects that should be some space between the two different objects in the uh top and bottom it should have some space so space Y2 and I'm going to create a view inside first and then after that I'm going to bring the text so here inside the text I'm going to bring the title of it and here I'm just going to bring the image and I'm going to display the image over the image let me close this and I need to supply this source for it oops image is not been imported let's import it through react native now it shows the source object inside the source object you need to supply your image source okay now it will shows the image source since it's showing the image source we need to fix the width and height of this view so then only you can display that image otherwise it will not be displayed I'm going to give the um you know not a normal string I'm going to use the dynamic string literals because dynamically we are going to change if that menu is active we are going to add a background color if it is not we are going to change the background color so I'm just going to give width that's 24 height as 24 and shadow SM okay so rounded 4 and now the background color is the different part if it is active we are going to give the bring the background color see currently here restaurants is active so it's having that background color apart from that in these two menus nothing doesn't have that background color so that's what we are going to do now so here what I'm going to say here I'm going to write a condition okay if that type if that type is double equals to okay if the the type in that state we we are whenever the user clicks the menu we are updating the state if that state value and the title values both are same then we need to apply the background color otherwise we are not supposed to apply with so I'm going to say title title dot to lower case and basically I'm going to convert to a lowercase okay so why we are converting into a lowercase because we are sending the informations in the upper case but in this state we are updating into a lowercase okay so that's the reason we are converting into a lowercase to string value dot lowercase if it is equal to that then I'm going to apply a background color which is going to be BG Gray 200 Orioles I'm just going to keep it as empty I'm not going to add any classes or anything else I'm just going to leave it exactly as it is okay so say the changes and for this we need to add a few more Styles everything should be in the center and justify the content in the center save the changes and now you can see the images is being loaded and I'm going to say class name for this is going to be with full height object cover save changes and now you can see I don't want this object cover containing save changes now you can see that the image perfectly and you can see the name it's also being displayed so let's add some styles for the text class name equals text is going to be text iPhone and Slash and I'm going to use the exact same color which I added over here so let me copy it and I paste it over there then what we are going to do I'm going to make it as text Excel size and font semi bold save the changes now we can see it's showing that images and just just like the same way we are going to bring three more menu containers let me copy it paste it paste it and this is going to be photos and this is going to be attractions and this is going to be a restaurant change this to attractions and here also we need to bring the attraction image and this is going to be this strong runs and we need to bring the restaurant images restore friends save the changes and now we can see that we do have all the necessary options and everything okay fine so is there any spelling mistake restaurants restaurants fine okay then and now what we need to do is um the space between them it's not fine space between them it's not fine so we need to do some changes for it so let's because it's not aligned properly you can see that see here how we having it and here how we having it they are not aligned properly that's a mistake so we need to fix that issue so what we can do is we can say this as Flex row item Center justify Center space okay everything is fine instead of Center maybe what we can do so justify between all right so now that is perfectly fine and is it showing that background color so let's go here and let's change this background color to little bit darker color I'm not sure whether okay you can see that it's applying the background color but it's not showing it quite properly so let's add some padding effect so that we can see it much better cool now let's change this to 200 okay so now we can see the restaurant type because initially we are sending the option as the restaurant and the by default it's loading the state as a restaurant only so it's showing this options over here so on click what I'm going to do is whenever I'm pressing this I'm going to change the state I'm going to update the state value so basically we need to add a non-precivant over here so on press on press I'm going to call a method called handle press so let's copy this let's create that method over here const handle press equals and arrow 6 function and here I'm just going to say set type set type so change the type as title dot to lowercase okay send the whenever I'm clicking it get the title of the container and set it convert it to a lowercase and set it as a type okay so whenever the changes that is some changes in the type we need to update the use effect okay let's see whether it is working or else later we'll change it so when I click this now you can see it's basically working when you click it the state value is getting changed and the type is being updated and so the background color is also being it updated so I think we quite done with our menu container so next what we need to do we need to move on to the internal sections over here this is what we are going to divide the build next all right then since we successfully finished the menu container so next what we are going to do is we are going to brindle to this complete section okay so let's go ahead and first let's bring this one then we'll go ahead and bring all these the rest of the stuffs and everything all right so let's go okay and now we are done with this view option so press enter then what we need to do is after that view we are going to bring the um this option we are going to bring this particular section this one so let's go ahead and build that one so I'm going to create one more View inside here and this um what we can do basically we can keep this thing we can keep it in this element as a complete um we can keep it in the complete view this both in a complete view because if when the user is searching something if there is no data we need to display here as a node data menu right we need to display here as a no data otherwise we need to display this card all right so the better option is to keep them as a single view that's the view inside this view first we need to bring that um we need to bring that particular text and we need to bring those icons and everything so we need to bring that cards and everything fine so let's create this now so we created The View and we need to create one more view inside this view we need to bring the text view okay so text here we are just going to say top tips or something that's anything top tips or something and then after here we have an explore text and we have an arrow Mark over here icon so let's go ahead and we need to add [Music] um touchable opacity we need to add a touchable touchable opacity from the react native close it inside this I'm just going to add a text and that is going to be explore X flow okay so now we need to add this icons so when it comes to icons so if you are working with react native you can use hero icons or to keep it simple you can use Expo icons if you search for Expo icons you can see this the very first link where you can search the icons and everything see you can search the icons over here what exact icons you want you can search it there and here if you click the icons export documentation and there you can see how to use the icons so by default we have the Expo Vector icons which is already downloaded and installed and everything okay let's make sure whether it is already inside our package.json or not let's go here and there you can [Music] um no it's not that um interesting so we need to download that okay so where is the package name then I think this is the package name so let me copy this let me copy this it's not allowing me to copy react native Vector icons it's going to the their documentation uh here it is npm so this is the one we needed let's copy this and let's install it yawn Specter records on and Vector icons so this will add the vector icons inside our file now let's go here and let's go back and let's open their very first link you can see this webpage let me apply some filters I'm just going to use the font awesome and font awesome icons and of course material icons these three only so let me filter it only these three okay so now here I'm going to use the right arrow Mark so right arrow okay so Arrow if you search down you can find out here the long right arrow basically this is the font awesome so if I click this you can see what exact thing you need to import let me copy that and let me scroll up and let me import it import it and you can copy this line too and you can paste it right over here okay so font awesome it's been added size 24 I think that's pretty enough and the color code is going to be Hash a 0 C 4 C 7. save the changes and you'll get that now you can see the icon over here cool right that is simple as that now let's add the style this is the main View and after that view we have the view for this text element let's bring it as a row first so class name and let's say blacks row item it's align items in the center and justify the content in the center justify it in the center or between I think between is much better so between and PX4 and margin top eight changes look at that PX it's 8 I think px8 is better eight I think that is too much in so let's keep it as PX4 okay that's fine let's do the same thing for our this touchable opacity also so class name so let's say Flex row bring everything in the flex row and item Center and justify Center and let's say SpaceX one or two I think this is pretty much enough or we can give two also okay that's enough okay so now let's add the styles for your text so class name text color first initially the text color is going to be I'm just going to copy the text color let me copy and paste the text color hash paste the text color and of course the text size is going to be 28 pixel and font of course it's going to be bold like this then for the for let's explore text let me copy it and let me paste it over here so that you can write it class name is going to be this text color text size and font wall it looks like that look at that so we successfully finished the text section and then next what we need to do is we need to load our the items sections and everything so after this View enter here we need to bring one more view view and for that view I'm just going to say class name it's going to be PX4 margin top 8. Flex not root flux we are going to change it in the row the action Flex row an item at in the center and justify evenly and flex everything in the around because each and every card should be a wrap position according to the size everything should be adjusted properly okay so flexor app fine now everything is perfect save the changes and inside here that is the design inside here we're having multiple cards right here see card number one card number two and corn number three card number four so basically it's having a multiple cards inside so we need to bring one by one as a separate component and inside that component we have image and the location and of course name so we have the name and the locations okay so let's go ahead and let's build that all right then since the top section is successfully done this section is fully done now we need to bring this item card container so let's go and create a new component called item or container.js so I'm just going to use rnfe so save this react functional export then here inside here I'm just going to bring that container item card container let me close it let me copy and paste it two more times okay so here inside this item card compound container I'm just going to supply the key for the time being I'm just going to keep the key as 101 and for this as key as the and then two so unique key we need to maintain the unique key right so that's the reason we are using these things then I'm going to now you can see we have two different item cards containers over there and what are the things we need to supply we need to supply the image location name and location all right so let's apply the image so here all your alt or option key over there and then type first we need to supply the image so so image SRC prop we are going to use images or say okay I'm going to keep it empty for the time being then trying to and then location all right these are the props we need to supply cool let me copy this and paste it in our item card container first it's going to be image source let's be structure the prop title oops I think I messed up copy and paste it and copy this location and let's paste it there fine so now what we need to do over here so let's Supply it for the time being I'm just going to supply a dummy image okay let me Supply Adam image so I do have an image URL to resemble a restaurant image and copy this image from the pixabay only okay see this is that image currently so anyways for dummy image let's use close to the pixel a let's choose some image for the time being I'm just going to copy this image address and I'm going to give it in this location over here and as well as for this I'm going to give another image let me give an another image let me copy this now copy image address anyways later these images are going to be loaded dynamically so no don't worry about this and the title I'm just going to say is something here I'm just going to say sample or something location I'm just going to keep it as okay current location okay say the changes all right so now we can see that that we Supply the images and everything it's been perfectly supplied to here so let's go and customize the item menu card container okay so what we need to do is let's open the item card container we do already destructured all the informations and everything and now um as usual I'm just going to delete this and I'm going to bring the touchable opacity react native and inside here I'm just going to bring the image image from react native and inside this image I'm going to supply the source so source is going to be image SRC so this basically that is a new URL which we are supplying it it's a URL it's not an object so you need to use the Ure you are sorry URI and I need to supply that Source image Source okay so even if you are using a real-time data API when this comb it is going to be a URL not an object so previously whenever we used these things or objects not on URL so in this case currently right now we are using URL so you need to use this Ure use our URI all right then I'm going to give the class name class name is going to be uh with of course it's going to take the parent width and height it's going to take only 40. and around it of course rounded MD and now object cover and then since it's using the parent width so I need to fix the width for this touchable opacity over here so it's going to be rounded MD and it's going to have a border and Border Gray 300 and space y should be 2 and PX3 py padding left and right 2 3 and padding top and bottom two and Shadow MD and BG white color okay those are the things and we not border I'm going to say BG BG and at last I'm going to fix the width I'm going to say the width that's 182 pixels these are custom sizes so you can write these Styles adjust the width size for you because these are just trial and error make sure comfortable until you feel comfortable with that Styles and everything okay so each card margin we have top and bottom we are adding some space and now we can see that perfectly a box is created inside the boxes image is loaded perfectly after the image we just need to bring the text boxes and everything so let me bring the word wrap enable the word wrap so that you can see these tires and after this image as I said I need to bring the title so let me copy that class name so that so here let me bring it so text object class name oops class name I'm going to bring the title that will bring us the title but the problem with the title is it is not supposed to be displayed like this like what we need to do is sometimes the title name is will be big or sometimes the title name will be smaller so I'm just going to make sure it so if the title dot length if the length of the title if the title dot length if the length of the title is greater than 14 letters then I'm just going to slice it I'm just going to say so dollar title dot length so not done sorry title dot slice we are going to use the slice method so slice until 14 characters then add these two dot over there if it is greater than that length otherwise simply print title okay so if the let's say if I'm giving something instead of something I'm just going to say something a very big or something that will automatically truncate the excess word and it will add those two dots over there okay so that's the reason we are adding it like this so let me copy this one more time and here we are going to bring the view because we need to bring the location icon so if you have a look at this design you can see it does have a location icon then it's displaying the text okay so for that we are going to create a view and inside this view I need to bring that location icon let me call paste this text anyways here I need to bring that location so let me go back to the but it is not here the icons so let me search for the icon name called map map marker okay so choose any motor issue which you like ammo so I'm just say I'm going to use this one let me copy this I think already we copied the font also no here let me paste the font awesome and let me copy this and let me paste it here save the changes and instead of black color I'm just going to give a very specific color code let me copy that color code and let me paste it here say the changes and it's not going to be 24 it's going to be 20 like that fine and the size is going to be 14 pixel and the color code is going to be a little bit lighter color not as exactly or we can use the same color itself fine that's good and location I'm just going to keep 18 I'm going to check 18. 18 and this is going to be location say the changes now it shows the and still for this we need to add a few more Styles we need to make it item Center and a flux row that's what we are going to add here for this view let's add a flux row and item Center and let's add some space between those two text and now you can see that we successfully created this what is this design we successfully created this cards and everything and if you look at it having a nice opacity level see having a nice opacity and the card everything is being successfully loaded now only thing is remaining it's all we have to do is to pull the real-time data from the rapid API we need to pull this record by using axios we are going to pull this record and we are going to re-render this entire item card container according to that particular data and in the meanwhile we have one more thing that we need to bring a nice loading animation and as well as we need to bring that um what is that uh the if there is no data to display we need to display that no data available or something that's what we need to do next all right then so now let's add that nice loading animation so let's go to the Discover page okay so what we need to do is to add that nice animation effect so what we can do is we can so that is basically called as an activity indicator so here let me search for activity indicator Expo so if you go to the activity indicator and there you can find out the activity indicator but it's not showing any examples or anything what it is um react native activity indicator thank you Come on load the examples it's not showing the examples why review enabled web Android it's not showing so go back activity indicator Expo tap to play it's loading ah see this is the one uh it's kind of look like that exactly the same way so start loading see just like this this is the one that's the one we are going to use now okay that's what I'm trying to show you so I'm just going to go back here and all I'm going to do is to copy this launch with this color code let me copy it and we are going to paste it so the thing is it's more important but we are going to paste it so basically whenever it's getting loaded this entire place should not be displayed here I need to bring that activity indicator right so what I'm going to do is the scroll view the scroll this NDS scroll view itself it's not supposed to be displayed this entire scroll view itself it's not supposed to be displayed so when here I'm going to create one more state so use State snippet is loading if it is loading for the timing I'm just going to set it as true if it is loading it should display that activity indicator so I'm just going to say if it's loading and then it should render this view menu it should render this view menu or else it should render this end there scroll view let me bring this over here like this inside this view we are going to bring that lower than activity indicator and the class I'm just going to add some class name for this so this is going to take the complete available length whatever the length it's available take it and everything should be in the center item Center and justifying it in the center and the activity indicator color I'm just going to use this color code which matches our design and I'm going to import this activity indicator from the react native save the changes and now you can see we have that nice loading animation so if it is not loading then uh let me change the state if it is not loading then it will display that sections that container sections and everything so we successfully implemented the lowering spinner into our project so next what we need to do is uh what else we need to add we need to add that no data option if that is no nothing to display we need to display that no data so that's what we are going to do next all right then so now let's uh display that no data found option so where we can do this so we can create a one more state so use State snippet I'm just going to say main data initially this main data is going to be an empty array okay so where I'm going to check this inside this place this is the place it's rendering all the um this is the main tag over here this is the place where it's rendering these two items card container right here I'm just going to check Main data dot link so initially conditional rendering so length if the length is greater than 0 then only it should display this [Music] um what is that um okay sorry if the length is greater than zero that should display this react fragments otherwise it should display this react fragments so inside here I'm just going to paste this changes So currently it's not showing nothing because the length of that array is basically zero so inside here we need to render the components so what I'm going to do here I'm going to create a view a view with the class name basically it's going to take the width as a complete width and height I'm just going to say a 600 pixels a fixed height it's not going to be beyond that okay then item Center and space y as 8 and justify everything in the center and the inside this View and I'm going to bring an image image and the source of course and the source is basically it's going to be and not found I do have a not found PNG over here so first we need to bring this to our assets folder where it is index.js let me copy this and paste it and here let's copy this name and let's paste it here and as well as here not found okay so let's go back let's close this let's go back here I'm going to use this name over here not found and class name for this thing is going to be um let's say with 32 i32 and now object cover fine so now that should display that uh image over there all right so then what we need to do is after this I need to bring a text that basically it's going to be oops no data found this is that one we are going to bring this text box so this is supposed to be top of it but why so let's say VG red and let me see okay it is not coming in the center location I just wonder why with full height full items in the Center and justify everything in the center this is should come let me remove this line okay justify Center them why it's not coming okay maybe probably because of this issue I think so 400 yeah that's the issue okay so 400 is more than enough and now I'm just going to delete this background color we don't need this at all so that is pretty much done so if there is no data to display it will display this no data found image okay so now we are pretty much done the only thing is remaining it's just to we need to load the live data with our card container we need to we need to um integrate the API then with the main data over here we need to load that information so that's what we are going to do next all right then since we successfully finished with our UI settings and everything then let's move on to our data integration part so let's go to the travel API travel advisor over here and now we need to import a package called axios so let's go ahead and open up your terminal so let's add that play on ADD axios so let's create a new folder in our project collapse sorry collapse everything and right click a new folder API and inside this API I'm just going to create a new file called index.js okay inside this API index.js file we are going to bring that um this typically this one so I'm going to change this to uh um JavaScript axios like this okay so you can change the code settings which you want in which you are trying to induce this axis JavaScript I'm going to use the axios so then I'm just going to typically um either you can simply copy this and you can paste it directly inside but I'm not going to do that I'm just going to import serious that will import the axios and then I'm going to create a function export const get places data equals asynchronous this is going to be a synchronous function and later inside this we'll Supply the parameters like what kind of type restaurant or hotel or attraction or you and the latitude and longitude location which exact latitude and longitude location you are trying to find out okay and here I'm just going to open the try and catch if there is any error is coming I'm just going to say that's return [Music] three turn now I'm just going to say null okay otherwise here we are going to get the data we are going to call this axios so where it's so we are going to copy I'm going to copy this URL copy and I'm going to say awaits await axios dot get I'm going axios dot get okay and at Dynamic string literal and I'm going to paste that URL I'm going to supply this URL and inside along with this URL we need to supply the parameters option parameters these are all the optional params so I'm just hoping to copying this params and I'm pasting that params over here these are all the params okay and this param is should be inside an object it's an object for params and after the parents you need to supply the headers also copy the headers copy the headers and paste the headers to just like this await axios dot get inside this bracket you can see we have everything first you need to supply the URL then comma you need to open an object object inside the object parameter you need to supply the param object then you need to supply the header object so if you want to keep this key settings and everything inside as environment variable it's better you can keep it in the environment variable in this case I'm just going to leave it as a trans assembly and this will return the data object right this will return the data object so right after here I'm going to return that object data basically we haven't create the data so here I'm just going to say const okay so uh we are going to destructure the information so if you go here and if you go to the results so what do we got we we got a data object inside the data object we have all the 33 image 33 options I need only this data I don't want this filters and all the rest of the stuff I need only the data so I'm just going to restructure it I need to get the data inside the data we do have all the data okay that basically what we are going to do what we are doing in this we are destructuring the entire result and we are getting only the data object and we are storing it into the data variable so and then we are returning that data object okay save the changes that's what exactly we are doing over here now this is successfully this is ready to use it inside our um our e y so what we need to do is here I need to get the use of it I need to create a use effect so let's go ahead and write create after here so you need to understand the basic difference between the used layout effect and the use effect use the fact it's like if that is any changes in the component it will re-render that component use layout effect if that is any changes in your entire UI that will re-render that entire UI okay that's the difference so we are using the use effect hook use effect and that will takes at two different parameters one is functional and another one is array here I'm going to first enable the set is loading as true I'm going to enable it as true then I'm going to call that get places data okay places data okay and that will return so initially this it's loading for the restorance and with by default places latitude and longitude allocation okay we hard coded it and here that will Returns the a promise along with the data will get the data and then you'll get a result we'll set that main data with the data what we got the complete informations and then set interval for let's say 2000 that means two seconds after two seconds I'm just going to say set loading as false save changes and now you can see it's loading and still it's loading and you can see that it's successfully loaded and it's got the informations and it's hanao I hope according to the coding which we returned I hope now this main data having all the information which is necessary so instead of returning hot coding this two items container items instead of hard coding these two items container so what we can do is um here um let me delete that let me then I deleted that one item container here now I'm just going to cut this okay I'm going to check one more condition that is main data conditional checking dot map okay map data we need to have the parameters data and the I let's say index for The Unique index and open the normal functional brackets and I'm going to render this item card container and here the key is going to be the index number and the image shows basically we are not going to use the image source and image shows it's going to be if you expand any data over here let me show you here and you have this photo object inside the photo object you have the images inside the images you have small or thumbnail or original whatever you want in this case let's say if you go to thumbnail you have the URL over here so go to the data object photo images small or thumbnail or whatever you want you can use that okay so now what I'm going to do is I'm going to customize this instead of this instead of this okay I'm going to say if data does have a photo object if the data does have a photo object this object copy if inside this photo object always use this question mark otherwise in case if there is nothing if that object is not there you will get an undefined error so better use the question mark so that's for conditional rendering okay and if this images have so what is the small size small size is 150 pixels so I'm just going to use the thumbnail and that is thumbnail is 15. original 2000 we don't need it large no medium 550 so I'll take the medium so copy the medium medium I didn't copy ah come on I didn't copy it copy medium Dot inside this we have the URL copy the URL okay let me copy it one more time if this object is there then bring it or else if it doesn't have that then load this image because sometimes it doesn't have a some some data doesn't have this medium or small original so every time we can't check that which one is not that so if that is if that image is not there medium or original if it is missing then load this custom placeholder image okay this will be loaded and the title title is going to be data question mark dot name so you can see in your API we have the name that's the restore name we're going to use that restaurant name and of course we do have location string also so data Dot and here you can see the location string let me copy that location string dot location string so say the changes now it should render all the restaurants which is coming from that particular place look at that see as I told you some of them doesn't have the informations and you can see it doesn't even have a name and it's showing the place folder okay fine that's perfectly fine and if it doesn't have um so these things it needs to be rendered only if the data does have the name if the data does have the name then only these two should be rendered oops we should not write it over here we need to write it inside our card container so container over here these two things needs to be rendered only if that is title then we need to render these two like this uh null is not an object okay so we are getting a null object um if it is not we'll keep it as empty then why it's not then it's working okay it's loading now it's taking some times to loading okay so now it's working and you can see that it doesn't have a name so it's simply ignoring it okay so we are pretty much done over here now all we have to do is just to what we need to do is when I click this it's need to take me to the next page so that's what we are going to do now all right then so since we successfully added these we bring the datas and the scroll view everything is working perfectly so when I click this I need to send this to another page so basically we are that's what we are going to do now so so if you watch closely over here so the click event is happening inside the uh item card container right so what I need to do anyway I'm I'm going to pass this data so where it is in the Discover I'm going to create a one more prop all data equals Theta okay we are getting the data object and I am passing that complete data object as a prop inside the item card container the data okay so here for this I'm just going to have an onpress event for the item card container on press I'm going to pass it to the new screen a basically a different screen so let me create a new screen you screen let's say item screen item crane dot Js so rnf e save changes and we need to create it in our where is the app.js here inside here stack dot screen and the name of the screen is going to be item screen component item all right no item screen copy it and paste it here save the changes so now whenever I'm clicking this on press on press whenever the user press that option we need to navigate that user so that we need the navigation hook so const navigation equals use navigation which is provided by your react Navigator so I'm going to call a callback function I'm going to use the navigation method so navigate so this time I need to navigate to a different screen and along with that I need to pass a parameter all right along with that we need to pass a parameter this time we are not passing an ID we are passing a complete data so the name of the screen is item screen and I'm going to pass an object and inside that object I'm going to pass a parameter in a name as a param object in that object I'm sending the data now when I click this now that will takes me to the item screen now basically we achieved it perfectly now when I click it it's going to the item screen but I need to make sure whether I'm receiving the data or not so let me go to the item screen okay let's go to the item screen now inside the item screen first I need to extract the item information so let me copy this and over here I'll paste it and let me import this package now import it and here I need to extract that information so I need to get that information so const the data is equals from the route or OT okay from the route Dot params just a minute okay so basically this route is coming as a default parameter for your screen so it has a default parameter for your screen by using if you are using a react Navigator so we can create a default some default route okay as a parameter and inside that route you have the parents object inside that params object you have the Paras save the changes and now let me I don't want the header also let me remove that header option and I missed this one more time and here I need to let me simply print that console DOT log pure data save the changes now when I click this it's showing use layout effect is not added so let me add it save the changes use layout method now let me click it it's loading now it's bringing the data it's loading loading and let's bring the data all the data here when I click this it's going and it's showing item screen at the Top If I open my console.log now you can see all the data which is related to that restaurant it's been printed in the console that means basically through the route which we passed in that route we have the params object and we have the param object and we had our data which is inside the param object which we successfully passed through here all right so now using that data we are basically going to customize every single a object inside just like the view which we have over here we are going to bring this design exactly as it is and that's what we are going to do next all right then so since we successfully navigated to the next screen so let's create this image container now so let's go ahead and let's bring this complete image section so this two different options and this option so let's bring that one all right so first let me delete this I don't need to print the data so let me delete that one and let me close this close it and first I'm going to bring the safe area View from the react native okay and I'm going to make sure this is going to use the complete class name is going to use the complete length which is available so Flex one and BG white color and I'm going to use the related position all right then so then I'm going to bring the entire thing this entire thing it's a scrollable so the user can scroll up and down so that they can view the information if it is having an excess of information it's need to be scrollable so I'm going to bring the scroll view from react native scroll View and of course I'm going to make sure that it's going to take the complete length as well as so Flex one and p x 4 and P Y 6 all right and inside this scroll view we are going to bring our image container section that is the view okay and that is also going to be class name I'm going to say as a relative position and BG white and Shadow LG all right so inside this view we are going to bring the image first image and that is going to be react native image and basically that image is a new URL so we are going to supply the source with the URI object inside this you need to supply the URI colon and here you need to supply the data object so basically what we are going to do and where it is over here just exactly the same way I'm going to copy this and I'm going to paste it here so this time instead of medium I'm going to check large if it does have a large bring it otherwise use this replacer so right after the source I'm just going to say class name and I'm going to say take the complete with whatever the width available but use only the height is 72 that is typically 288 pixels as a height and object cover and rounded as to X save changes so now we can see we have a nice image over here just like that so then what we have to do we have an image and now we need to bring these two different sections over there so let's go ahead and let's bring that sections so right after this image tag okay so right after this image tag so I need to bring the top view so let me bring the view inside so View all right so here one second give me a minute bye so we are here so last name I'm going to say that class name is going to be absolute position and everything is going to be in a row Direction and insert X that means whatever the left and right size it should take completely and talk from the top it should be 5 justify between and PX six okay that's the view and inside this I'm going to have two different buttons one this one another one this so let me create that one so touchable opacity touchable opacity react native close it and here I'm just going to say um I'm going to bring that left icon so basically I'm going to bring that left icon before that I'm just going to write a CSS style class name and with I'm just going to say width time height 10 rounded round MD and everything should be in the center and justify the content also in the center and BG white color PG white color so just like the same way I'm going to bring one more thing but instead of BG white color I'm going to bring a very specific color code that was going to be this all right save the changes and now we have two different buttons over there but instead of this button as an EMT inside this buttons basically we are going to bring in icons which is from mayor we don't need this link anymore close this and we don't need this anymore close this and here first icon is going to be Chevron Chevron left so Chevron left we can use Font awesome 5 where it is this one Chevron left so copy this and I can use it and I can import this as well that will be imported size it's perfectly fine and this thing is not supposed to be here this is supposed to be here and size and color I'm just going to use this color code copy this color code hash paste it now we can see that icon over there so just like the same way I'm going to bring heartbeat icon inside here I'm going to bring a copy paste it and the icon name is going to be heartbeat okay so that icon is not loaded properly spelling wrong heart spelling wrong and the color I'm going to use it is triple F white color look at that so now we have that nice buttons so now when I click this button it need to be navigate to the Discover screen right so when I click that it's need to take me to the Discover screen so for this touchable opacity I'm going to add that navigation so when I click this so that will takes me to discover screen if I click this now that image is being loaded look at that so we successfully implemented the image we added that image so then what we need to do we just need to bring the names and ratings all these things one by one so that's what we are going to do next all right then since we successfully added the image over here so what we can do now we can bring the uh names and the locations and these options all the options and everything so let's go ahead and do that one so this is done so this entire view is your the image container section so now we need to write these styles for your um Okay so I think in the main section we missed one part oh this one we missed this so let's fix that one okay inside the image container just like the same way for this view just like the same view just like the same view let me copy this and let me paste it inside this touchable opacity and all those things let's delete it instead of top I'm just going to say from the bottom file okay inside this I'm going to bring the price level so you can see we have the price level and we have the price also so we need to bring that price level and the price so I'm just going to create a view and inside that view we are going to have two different text boxes okay so I'm going to say class name is going to be Plex row SpaceX 2 items everything in the center and inside here I'm going to have those two different text objects so let me copy and paste it here and you can pass the video and you can write these two different so inside the data we have the price level and the price so over there where it is if you go here and you can see we have two different objects here you can search for price level and as well as you can find the price also price level we don't have the price for this and few information doesn't have the price and a few of them will have the price so so far doesn't have any anything have the price so that's why it's not displaying there fine no issues so few restaurant doesn't have the price category price informations that's why it's not showing all right so everything is empty ah look at that just like this okay this will be displayed over there this two difference the two text boxes over here so after this division At Last I need to show whether the restaurant is open or closed now so we have an object in your here like open or close now so here here open now text we need to display this text object over there so typically what we are going to do is be our going to create a view like this just like this so that will creates um um why it's having that unwanted spaces view view don't know why that space is there maybe because of the text which has come okay so here it's fine maybe because of the text is coming inside all right so we pretty much done over here so this section is completed so as we discussed now it's for the title section so after here we need to bring the title section so for the title section and the name section so you can just copy these styles and we can write that Styles so basically we are just creating a view a main view inside that view we're having on text box inside that text box we are creating a one more view with an location icon exactly and we are bringing the text box along with that we are creating the text box so that will display the restaurant name and the location name so after the restaurant location what we are just displaying we are displaying the ratings and all those things so that's what we are going to do now so after this we need to bring the ratings and all those things so before bringing the ratings and all those things so let me create a main view for it so let's create a main view that's going to be a main view section okay basically that is the enter this is going this is completely going to be a section A View section inside that view we are going to create one by one view like this okay so let's go ahead and do that and here first what we are going to do is we are going to bring the rating so typically you need to find out the ratings in your data so here if you search for rating few restaurants might have ratings few restaurant doesn't have a rating so you need to check if there is no rating then we are not supposed to display it so we are checking the data if that rating is there I'm creating a view like this is a view you can see here we are creating a view this is the one with the two different view in it this is one View and inside that view we have an icon and this is one view inside that view we have two text boxes okay so main View and another one View and inside that view we have the icon and another one view inside the view we have two different icon two different text boxes so that will creates the ratings over here so just like the same way we need to bring the price level if the user does if the data does have a price level I need to I'll just copy this exactly the same data one more time and then I'm just going to change this instead of rating to price level so that will display the price level and I don't have the material icon so let me import the material icons so save the changes and now that the error is gone and it's loading one more time it's fetching the details and everything and let me click this and now it's showing the price level okay and so if you and I'm just adding one more object so you just you can add what objects you want in this case I'm just you can choose there are bunch of objects over here which object you want you can add it so I'm just going to add two more objects um like I'm just going to add this bearing object bearing which direction it is so copy this and I'll paste that bearing exactly the same code only but with a different object look at that just like this so once it's done after here press enter we need to bring the description we need to bring this description so that description and after that we have the [Music] anything so here we need to bring the description we need to bring this description so what we need to do is so that description needs to be displayed only if the data does have a description so after this I need to bring the description if the data does have a description then bring this description now we're displaying the description so after this now we are trying to display the cosine so if the data which we have a cosine then exactly the same way we are creating a cosine so cosines in if you open the sign object so where is the design So currently here we have 14 different cue signs see that's an array so we are trying to render and array if the cosine object is there then we are trying to render it and we are trying to display the name see just like this come back all right so then what we need to do we need to display this address informations so here we need to bring this address information so typically this is a complete view inside this view we have three different views for phone number three different View and inside that view we have the icon and the text boxes okay so main View and three subordinate views inside that support net view we have two different fields just like that okay so now let me create that one so first we are going to create the main view so let's create the main View so after here we need to create the main view so let me close this magnitude so there we go and now you can see that we have that main view that box over there then what we need to do I need to display a view with the phone number if that data does have a phone number then create one more view inside that view you have the phone icon and have a text icon text okay now we're displaying the then I'm going to bring the email if the data have the email bring the email and that's the same way if the data have the address also bring that address string like this look at that now we have the complete address over here just like that all right so now what we can do is at last all we have to do is to bring that book Now button so I'm just going to bring a very big button over here so just like this so pause the video and write these styles to create a nice button over there look at that so now we have a button and all these Styles and everything is being successfully created now if you go back if you click this and it's showing null object so some object is getting another object so okay so let me reload it which one is getting another object let me reload it somewhere I'm using another object null null null everywhere I checked I checked it I checked it I checked it checked it let me click this it's opening this one it's opening fine this perfect all right it's working no issues all right then so we successfully added the book now and all those options the designs the complete item screen design is perfectly done okay so next what we need to do is we need to make these changes these restaurants or whatever it is we need to change these when I click attractions it's need to show the attractions when I need to when I click the restaurants it needs to show the restaurants when I'm changing the places it's need to change these informations that's the last part of the video so we are almost done our project only very few steps or more so that's what we are going to do next all right then so since we successfully completed the designing part of our the item screen then all we have to do is to make this UI as a completely um a live data like according to the user search we need to update this information so currently when I'm searching the places let's say Singapore so it's showing the places when I click it it's just printing the simply where it is okay so here it's simply printing the the north east and the bottom so Northeast and southwest latitude and longitude location so I need to access this geometric location so I'm accessing that geometric location over here geometry location over here through this viewport I need to update this viewport to our API okay to the API I need to update this viewport information so that's what we are going to do now so what I need to do is so instead of printing this I'm going to create a state to manage all these latitude and bottom left and bottom right latitude and longitude locations okay so let's create a four different view State use States snippet let's say bottom left latitude left said bottom left latitude initially it's going to be now then use State snippet bottom left LNG longitude initially it's going to be then use State snippet and top right latitude that is going to be none then const Target use State snippet top right LNG longitude that is going to be now say the changes these are all the new state objects so so make sure whenever you are changing any changes it is refreshing the entire use effect and it's constantly pulling the data from your databases so don't press Ctrl s controls every single changes otherwise it will constantly pull the data from the API rapid API so you will lose your data so you will lose your free limits so better type all the changes whatever I'm making over here then finally press Ctrl s okay otherwise if you want to see the changes every single time you can save the changes because every time when you're making changes it will render that use effect it will pull the data from the API so you will run out of your free quota instantly so now here what I need to do is I need to set the bottom left I know that in the control here you can see it is giving me the uh Southwest that means bottom left latitude and longitude location so I need to access these two so inside the viewport I need to access the Southwest for getting the bottom left information and I need to access the Northeast to get that top right information so why we are getting the top left and bottom right so that's the thing we need to supply for our data see these are the latitude and longitude optional parameters sorry the required parameters we need to supply our data okay so to do that over here I'm going to say set bottom left latitude that means south west latitude I'm going to copy this and I'm going to keep it over here question mark Dot Southwest question mark dot latitude okay latitude let me copy this and paste it over here it's this time this is going to be LNG Southwest L and G let me copy and paste it one more time this time it's going to be set top right latitude this is going to be latitude we copy and paste it one more time this time this is going to be L and G and here also LNG but not Southeast Southwest this is going to be Northeast because they are top five top means not so not least so make sure so bottom left latitude that means Southwest latitude bottom left longitude Southwest longitude top right latitude North East latitude and then top right longitude Northeast longitude fine now we have all those informations and whenever these changes happened this thing needs to be rendered so bottom left lat and bottom left LNG and bottom sorry top right latitude and top right LNG if there is any changes in these any one of this value it's need to be re-rendered and I need to pass all these informations over here as a parameter and I need to access all those informations over here so what I'm going to do is if that is having a bottom left left latitude then use bottom left latitude otherwise use this hard-coded location if bottom left LNG is there sorry what is now top right latitude is there then use top right latitude otherwise use this hard coded location if bottom left LNG is there then use bottom left LNG otherwise use hard coded location if top right LNG is there then use top right LNG otherwise use this hard-coded information so I'll save the changes save these changes so now let's try it let's search for torrento two rental click it it's loading and it's changing you get that Toronto Ontario it's taking some time because of the we are using the free version but what we are up to do is it's working perfectly fine so when you're changing the location it's changing the restaurant also okay let's try one more time let me delete this completely let's say Singapore so it's taking some time to load it and yeah see it's taking a quite long time to load the data fine many ways it's coming from free version so what we can accept and even I'm thinking my internet connection is also a little bit low so so that's the reason it's taking much more time I think so okay so in this thing we need to add one more thing so when I change this to attractions of course it's need to change the attractions so that's the reason we have the uh idea like type right so here if you check your parameter if you check the attractions like list by boundaries and that also you can see exactly the same URL only but only thing is instead of restaurants it is change to attraction if you change range for hotels over here and that also you can find listing boundaries and that also you can see only the hotels is changed so what I'm going to do is I'm going to pass this type also foreign also if there is any changes in the type render it completely and here I'm going to get the type 2 type and this instead of this I'm going to render it by using but please make sure these names hotels these names are exactly the same names in your uh key values over here hotels changes to capital letter and then for restaurants because these are the names we are basically setting it to you are type so restaurants I copied it copy restaurants restaurants changes to capital letter and attractions attractions list in boundaries copy this attraction name and give it over here traction attraction no changes so save the changes now save the changes over here too so let me close this and now let me change this to ronto flocket I love that place a lot so let me change it now it's changing it should change now so now it's of course it is changed and if I click attractions it's loading and it's uploading over here it's taking some time but it's loading perfectly so now if you click the attractions there we go so you can see the attractions information is completely and if you click this look at that so we successfully finally build a nice travel advisor application with using your the search options and attractions hotels and everything still this application is having some small like flocks and everything what are the future upgrades maybe we can do we can change this to fetch we can enable to use the map apis to give the direction for the users we can use the geographic locations to access the geographical sensors to get the current location to use the GPS to use the GPS to get the current location and we can use the authentications to get the users to get authenticated so these are the future upgrades you can add in a project So currently according to our course so we successfully added the places apis and as well as the rapid API so the user can search for different different places for their attractions and restaurants and everything so the only thing is remaining is just we need to publish this app to the Expo go so that anyone who have the Expo go Application they can use this mobile app so that's what we are going to do next all right then since we successfully uh created our UI and everything is pretty much done over here you can see everything is done so all we have to do is to publish this account so to publish this app to our Expo group so before publishing it to Expo go like what you need to do is you need to go to your Expo developer go to the export developer account go to export.dev and please login into your account okay so please login into your account and make sure like so I already have few applications over here you can see I do already have see these are some like the learning applications and few projects over here so here we are going to push our application so there you can see uh like if you search for Expo publish export publish if this is the command basically we are going to use it so if you search for the Expo publish not this one okay basically that's the command you need to run it okay so let's see so first you need to log in into your let me create a new terminal so that you can see it completely here so Expo login okay so still your it's showing already the user is already logged in if you are not logged in successfully like um it will shows you uh to do you want to log in open the browser and kick yes and then it will log in with your browser so that you will logged in successfully along with your user account so before um logging before publishing it make sure that you having this option that you're logged into your account then what you need to do is I just need to run the command export publish so in order to publish an update Expo knee updates needs to be installed so first we need to install the Expo update so copy this Expo updates otherwise do you want to install it now please yes so press s so that will run that Expo install Expo updates so that will install all the necessary updates which needs to be done to your packages once the updates everything has been done um restaurants.png couldn't publish because oh okay so the problem is my restaurant's PNG which I used is an app icon that is too big so that's the issues showing so what I can do is maybe I don't have any app icon or anything for the time being now so that I can use what we can do we can find the icons so app icon image size app icon restaurant [Music] app icon download let's see whether we can able to download few free icons or anything flat icons okay so we have a lots of icons over here so when this thing what we can do okay I'll choose this one better that's looking fine so we need to figure it out what exact size first so app icon press size in pixels 512 out of 512 okay so here okay I think it's already in vital only I think so five tall pixels okay so free download so here we have that thing now so let me go back here and let me put it over here now I have that PNG order online oh not that here assets folder move okay and let's say I'll rename this file as icon icon.bng or cons dot PNG fine and let me give this to our app.js instead of restaurants here I'm just going to say icons dot PNG save changes and now let's me rerun the same thing again and it start building our Metro Builder it's building now it's building for iOS once it's done for the iOS it will start for the Android too so then we can access the anyone can access this um that project just by having that URL that QR code anyone can access that project so it's builded for iOS and it's successfully build it for the Android 2. fine so now here we go this is your project page this is the URL so if you click this let me open it it's going there look at that so this is the icon the project which we created and this is the uh the QR code so you can use your mobile device to scan this QR code and you can publish this projects to anyone so anyway so let me show you my Mobile screen just a moment so now let me scan this QR code all right and let me open it it's loading now and it's opening the project and it's downloading the new app look at that so if I tap it it's opening the that it's loading it's loading keep on loading loading loading and here we go so it's loaded the restaurants and everything for the current location and if I tap it it's loading all the informations about that particular detail and the gesture is working perfectly Okay so it came back suddenly I don't know okay so here you can see the app icon let me open it one more time I don't know why the reason it's came again so if you tap again it's loading one more time still loading we need to fix this issue for the loading maybe because if you get the premium version I think it will work perfectly so here perfect gesture is working perfectly and let me search a person sorry the place let's say okay so tap it so now it's loading for that space it's taking some time to change the data over here see but it's working basically it's working but it's taking some time to change the location fine if I tap it it's loading and if I change this to attraction and it's still changing all right then so it's changing to the attractions now it's changed completely when I tap it look at that so it's successfully working guys so we finally created a nice travel Adventure mobile application with a nice UI and it's working perfectly still we just need to add the a the authentications and everything so that we can use it for future upgrades and maybe in future we'll try to add those things I hope you guys are excited and you I hope you learn much informations so if you have any questions or anything just leave your questions in the comment box and I I added all the the necessary files and assets which we used for this project I'll leave it in the description below so please go ahead and click it and download it alright then I'll see you in the next tutorial bye bye take care

Channel: Vetrivel Ravi

Views: 108,611

Keywords: google maps api, javascript, react, build a google maps application, google maps react, google maps react js, google maps api places, google maps app tutorial, how to use google maps in react js, google places react, material ui react, rest api react, rapid api javascript, rapid api react, travel advisor application, travel companion application, build a travel application, javascriptript travel app, react travel app, Vetrivelravi, react native apps, expo projeccts, mobile apps

Id: JqPezeQiwxk

Length: 212min 56sec (12776 seconds)

Published: Tue Nov 08 2022