🔴 Build the Airbnb app in React Native [ Advance UI ]

what's up guys welcome to a new stream i'm so excited about today's build because today we're gonna continue our airbnb clone and we're gonna focus on more advanced feature than in the previous week so if you didn't see the previous week live stream we have cloned airbnb and then we focused on uh beginner-friendly features to render list render images flat lists navigation and so on but today we're gonna step uh step up our game and implement um we will start with where is my mouse we will start with places autocomplete that will be powered by google so whenever you uh type a place uh we will do a uh request to google and we're gonna get out a complete uh suggestion right there then we're going to implement the maps view in rack native and the cool thing about this maps view will be the custom markers which you can see here on the map where we want to display the price of accommodation on the map the same way as airbnb is doing then we're gonna implement this cool feature of airbnb where they have a carousel displaying the details about accommodation that you select on the map uh and also this carousel is connected with a map so whenever you scroll through uh the carousel the map updates and displays the current active uh property and it also centers in the middle of a screen and so on so without further do let me show you exactly what we're gonna build so um this is our application that we have built in the uh previous week um if you didn't follow along i will provide you with github repositories so you can start from this point but i highly recommend you go back and start from the beginning because you will learn a lot so the first thing we implemented is the dynamic autocomplete place recommendation from google so whenever i type they update automatically and here we display just cities so if we select one then we can uh go to the next page uh we see the flat list that we have rendered in the previous week and here we can see the properties in a list view but the cool thing is that today we're gonna step up and implement uh a tab navigator where we will be able to display the results in a list and also in a map view so this is something new and here we can see that the map centers around the places also we can change the place on the map and it automatically updates in the list view here and so on so here we can also if we change on uh if we scroll through the list view here in the carousel the map automatically updates and uh shows us where his bet plays and as you see the cool feature is that we are displaying the price of a property on the map and not just that boring uh pin that google is displaying yeah this map is fully functional uh both on ios and android you can scroll you can zoom in zoom out move and so on so um yeah uh who am i my name is vadim and if you're new on this channel thank you very much for joining i hope you find something valuable today to learn um i'm a full stack developer for over seven years now at the moment i am the cto at vitinium which is a small startup in the sports industry where we have over 15 000 users i also worked as a software developer engineer at amazon where i also used react and javascript technologies that's uh if that's interesting for for you and also i'm passionate about coding building impactful startups and sharing them with you all my journey all my wins and losses and all my experience that i have so um yeah this is um this is the quick intro so let's see in the live stream chat what people are doing where are they joining from i'm really curious every every time people from all over the world is joining so i'm really grateful for everyone joining and finding these videos available i'm putting a lot of work into this so if you don't mind smash the like button and subscribe to the channel because in 2021 we'll gonna drop uh much more fire content and we will cover rack native amplify maybe other technologies that people want so it's going to be interesting so guys hi everyone i'm looking at the chat right now uh so let me yeah brilliant hello uh brink is asking to uh do the detailed page on this rock native um video i didn't play plan the detail page yet because i don't think that's uh that's a very challenging feature because everything that we covered we can take the knowledge and apply it there but at the end if we still have time i promise you that we will do a basic uh detailed page i'm not gonna go into all the details because the detail page at airbnb is just huge so we'll try to do something basic the navigation between them so you will understand how things works and then you can improve on that uh all right hello alexandra hi call mind hello khaled uh adrian hello someone is asking will you create the backend uh with aws for this project uh yes of course but that will come during the next week so guys uh if you were following the previous week's live stream uh no let me okay i have one more slide so uh what do do you need for this uh build in order to follow along because uh i would highly recommend you not to just not watch this uh videos like a netflix show uh but actually try uh doing uh everything that i am doing yourself and try experimenting uh with this project because that's uh how you actually learn uh not just by watching but by actually messing around like uh getting your hands dirty with the project and so on so um if you want to follow along you will need a google developer account uh because we will use both autocomplete features from google and also the maps so you will need that one also you will need a billing a billing account attached to your project so yeah then you will need the dummy data and if you also need this pdf documentation that will serve you as a step-by-step guide how to follow you can find them at assets dot not just dev uh slash airbnb and you will download their folder with all the dummy data with which is updated for this for this video and also this presentation if you didn't follow along a previous video and you want to start from here all the code that we will start from today is available at this repo github.com1312 airbnb clone you will find it also in the description of the video so no worries um yeah let's move on so yeah if you follow along a previous video you might remember that my live stream got interrupted at the end so that's huge thanks to my internet provider which decided to stop uh yeah to stop my internet and i couldn't finish my uh the last step that we were doing there and uh but the good things is that it's just like two or three minutes at the end but it was interrupted so today we need to finish the navigation that we started in the previous video uh and the first step will be to implement the stack navigator for the explore page so first of all let me let me let me find here our project here is our emulator uh well nope nope nope nope okay i'll make it just a little bit bigger something like that okay so if you uh clone the repository from uh github at this moment in time you uh the repository will look like this or you can find the exact commit if i update it later so you can start from here so i'm gonna do yarn start to start the development server and then i'm gonna do yarn ios to run this application on ios because right now we are running the demo of it the finished product so yeah let's wait until uh something failed um i'm gonna try to remove application delete up because that might be the error yarn start you have that worked and now you're in ios hello tipu hello pranav uh pranava is asking how often do i stream my stream uh i try to stream regular regularly oh god that's a hard word to say uh on friday so every friday um usually at this time so it depends on your time zone i try to keep it consistent so yeah join every friday our live streams hello murali so what happened here might it be from the pods npx pod install [Music] might be might be so uh let's give it one more try yarn ios yeah this project should work both on ios and android uh this is just my preference to test it on an ios device because the emulator works much more smoother on my machine than an android emulator but at the end we're gonna test the application also on android to make sure that everything is working uh on both systems so you can also follow along using an android emulator or even an android phone connected to your machine kaiosada from indonesia yeah the project is uh used uh is using react native cli we are not using expo for this project because a lot of people are asking me not to use expo uh everyone wants react native cli so that's what we are doing yes i'm working on a macbook yep okay build successful whoo that's already a good start so loading loading come on come on okay so yeah this is uh the application that we left previous week we have a bottom tab navigator then we have this page where we can search but now nothing is very recommendation are not working we're just there hard-coded so if we click on something we should uh get to this place so uh the last thing that we implemented during the next week was the search button here so if i open our components um that's uh screens guests page to to select how many guests here and we implemented the where is it yes lint what happened come on you were working everything goes fine [Music] should i disable it yeah i'm going to disable it not to yeah because i get a lot of errors during the live stream and i don't have time to fix all of them uh so uh search no where is it guests index it should be search yeah exactly so we implemented this pressable uh and which is this search button so whenever we press on this uh we need to redirect somewhere but at that point in time we didn't have uh a screen where to redirect so in our navigation folder uh in our home tab navigator we have our explore tab so our explorer tab is this tab in the in our uh bottom tab uh navigator the thing is that in this tab uh yeah let's change it how it was before uh it contained the welcome screen welcome how is it called welcome screen yeah it contained the welcome screen so or home yeah it's called home home screen yeah it contained the home screen uh but the thing is that whenever we go through all these steps uh where is it yeah whenever we go through all these steps we should get back to the explore page however we should see the search result page so that means that our explore page hey hey priyank thank you very much for the donation uh prank is asking detail screen please uh love your enthusiasm thank you very much yeah i will try to do it at the end if we have time if it's not like a three-hour stream i will definitely try to implement that because it it's not very hard so remember remind me advance so as i was saying uh at the moment our explore page just renders one component but because we need two different pages to be displayed in the explorer depending uh if you search or not so either the welcome page or the search result page we need to transform a v-stub into a stack to include a stack navigator here and that way we will be able to uh display different screens so in order to do that let's create a new file the thing is that yeah i already created that so uh yeah let's uh spare some time and i'm just gonna explain everything that i did here so for the explore navigator which is v-stub i created a stack navigator a stack navigator can have like multiple screens on top of each other so we can go back to the previous ones and so on so we create a stack navigator using the craze tech navigator from react navigation and then in inside the stack navigator we render two screens one is the welcome screen which displays this home screen and the other one is the search results screen the search results screen display the search results page so whenever we navigate to explorer it goes here and because this is our first page this is what is going to render so yeah in the home tab navigator instead of including the component here we save it is gonna be our explore navigator which we import from our file so yeah we why are you on this page let me try to refresh because it should be on yeah now it's on the welcome page because uh this is our first screen and this is what the default will display so when if we put uh the search result page first uh it will render the search result at the beginning and if i uh actually refresh it come on come on i hate yeah now we see the search results page because we didn't specify exactly on which page so it takes the first one as the default but we want actually the welcome screen to be the default page so we leave a welcome screen there we try to refresh and uh now when we press on this search we want to navigate to the search result which is uh in the explore tab so if i go to our guests index i'm importing navigation using a hook at the top navi const navigation equal to use navigation and using this navigation i say that i want to navigate uh to the home to the home page and the screen there should be explorer and inside the explorer there is another screen called search results so this is nested navigation where we have a multiple level levels of navigation so from this page we can go to the home tab home navigator then to the explorer tab which is in our bottom and in the explorer we need to go to the search results page so if now i press on the search i see the search results page if i press back i'm back to the welcome screen because because our explorer navigator is a stack and it puts screens one on top of each other that's why we are able to go back from here directly to welcome screen hopefully that's clear guys um yeah that's the only thing that uh i i'm not writing as i go because i already implemented it uh during the previous video when the live stream was down so i think it's pretty easy so follow along if you fail to do something just check the github repository and make sure that you don't have any typos right now let me do git add git commit finish navigation and the next step will be a tab bar navigation for uh yeah for the search result page uh right now when we go to our search result page it's just a simple page but now in this video we will want to render two different type types of views so the first one will be a list view as we see here and the second view will be a maps maps view which will display our map so we want to display them in a top tab bar to be able to switch between them easily so to render top tabs we need the next library material top tabs and also the react native tab view so i will grab them and install you can use yarn or npm to install these libraries and then we will create our top tab bars in this page so let's paste them here wait until it saves uh i'm not sure if i need uh if it installed any pods so if you are on uh mac os developing for ios you will also need to run pod install after you install any libraries uh to install any pods if there are any new ports okay so now we need to declare to define a new navigation uh for our search results page so let's call it file search result search results tab yep tab na vigator quite a long name but we'll know exactly what it's for so i'm gonna declare our functional component here search results tab nah v gator like that i'm gonna delete this from here and the next step will be um to import this search result tab navigator in our explore navigator and to render it instead of this component instead of this component we'll render another navigator which will be a nested navigator which will contain these tabs and so on so let's import search no search result tab navigator and we can render it in instead of the search results so let's save and yeah failed to compile because uh we didn't return anything okay so we need to import um from the library that we just installed react uh native navigation no react navigation now the navigation material top tabs this one we need to import the method create material top tab navigator now let's create a tab using this method create top top navigator and here we'll call the first uh as you saw like it's pretty it's pretty much the same for all the navigators they use a create method and then dot navigator for the top component and inside that we declare uh the component.screen for example for others so here will be the listview and the component component for the list view will be search results yeah let me first import it import search results from components is it here no not component screens screens uh search results and we're gonna render it here right come on vadim yeah and the other uh tab will be our map view which later one will display uh the map component but now we don't have that yet so we'll display the same component just to see that the tabs are working let's save and see if we have something there so as we see on the top we have like the tab with the list and if we move uh to the right we see the map tab at the moment yeah as i said like we're just rendering the same component but we're gonna change that later in the video so yeah that's that's how you display that top top navigator uh right now let's try to do a bit of styling so to style the tab navigator we send the property tab bar options and there is the yeah it has an active tint color to display the the color of uh the text so the color i will put uh this red color that we have down below as well so if i save now i see that uh text is displayed with this color and also it has another property called indicator style indicator style uh and where you uh it's got it's used to style the indicator underneath like this this line so if i say that the background color of this indicator background color should also be yeah this color save and we see that but the underneath color uh of this tab is also uh red or pink how is it called vsp so yeah we that's our top top navigator so here we have our welcome screen uh if we go through all the search uh pages when we get to our um search results page which displays us two tabs a list and a map yep hopefully that's clear so i'm gonna do git add git commit top top bars yeah okay let's uh let's see what people are saying so um yeah someone is uh yeah people are uh speaking about expo and react native cli and yeah i'm kinda i also kind of agree with the statement that beginners will find it much easier to get started with expo and i also agree with other side that uh expo has some limitations but yeah most of the things that you can do in expo and whenever you get to a limitation you can eject but that's another story so i'm doing like both react native and expo depending on the project if it's very beginner friendly project which we did the test lab then we used expo to easily get started if it's something more complicated for example this one i i'm not sure if it would be possible to do the maps and auto complete features in the expo project so yeah someone is asking uh someone saying that we are uh trying to learn react native with my videos can we record more videos for beginners yeah i'm trying to i'm trying my best to record as many videos as possible but i'm also i also have my startup which i'm working on i also have i'm finishing my university this year so hopefully in um in one or two months i will have much more time and i will be able to upload besides our live stream that everyone enjoys will uploa upload also short form content so yeah stay tuned hello tipu from bangladesh next challenge for you uh uber what do you say i am saying that that's uh requested by a lot of people and that's probably what we're gonna build uh the next uh application it's either uber or e-commerce so write down below what application you would like me to do next uber or e-commerce or even something different okay guys so we finished with the navigation everything is set we are good probably we're gonna come back in order uh when we will want to send some properties from screen to screen but that's gonna come later so the next uh topic the next step is places autocomplete okay this is an interesting uh this is an interesting topic and it is used in a lot of application that that offers some uh places search um search of some places some business names um restaurant yeah i was working for example at a restaurant up and they were having like a lot of restaurants and we were using places auto complete for finding like restaurants nearby and so on so this feature is used in a lot of application so let's try to understand how it how it works how to integrate in react native uh so we will be able to do it in any application for that we are gonna use react native google places auto complete library a very long name uh and here you might find the url so let's open the link and see the installation guide there okay so yeah this uh this library works with google api um autocomplete places autocomplete and it's very easy to use and style the components i found it pretty convenient for for what we need to do and yeah the first step is we need to install the library so go with npm or with yarn so let's do that right now okay the step two will be to get our google places api uh and we need uh for that we need to create an account uh on google uh yeah google api so a google developer account i already have one so let me try to go to my console developer one second guys so uh yeah let me see okay so uh yeah after you create a google console account a google developer account uh you will create uh a project and also you need to create uh how is it called a billing account so you need uh you need this billing account because without a billing account you will not be able to use the autocomplete and the maps features uh that was one mistake that i did i didn't set up this billing account and nothing was working and for two hours i was debugging like why it's not working uh then yeah when i read that you you actually need the billing account and you need to connect your project with that billing account um so uh yeah after that we go to our uh api and services library and we make sure that our project is selected here on top uh and for uh autocomplete features we need google places api to enable this one so let's uh search google places google places and you need this one the first one google places and you open and you press enable i already enabled it and after you press enable you need to get the the api key so then go to your api services then credentials and there you will see a page where you can create api keys so uh yeah it's a easy step you create the api key then you copy it and you you you i will show you where you uh can paste it in our code so um let's um yeah let's see what's the next step uh so we enabled yeah if you uh we don't need this tab at the moment because we don't need uh the user's location but if you want to improve this and you need the reverse location of a user you will need to enable google maps geocoding api so uh let's see if yeah i think that that's everything that we need from the installation purposes so right now let's go and create a page where we will use this google place autocomplete but um yeah we already have that page so i'm just gonna copy uh this example so let's go to our source screens destination search and in our destination search let's open index dot js so here somewhere we will put our search yeah i'm gonna put it just on top of our usual text input so let me go on this page we are here so if i put this google place how to complete we need to import it from react native google places auto complete here we go uh let's save and we see that it's rendered there underneath so i'm gonna you know what i'm gonna add some margin to the text input because um google places uh renders as uh as a position absolute so that's why it's underneath so for our text input i'm gonna just add some margin top 50 pixels so i'm gonna add it even more 100 so yeah here is the input from google uh search autocomplete if we write something we can see that it's not working uh because we didn't paste in our api key here so go ahead and copy your api key from google console i'm gonna do it uh here don't worry i'm gonna delete this api key so uh if i save uh then i refresh my page come on and it's still not working because we might have forgotten to install the pods and to rerun the application let's see if that will work yeah we set the key so if you are in this situation where you it renders but it doesn't give you any suggestion one thing that i had was uh that my account didn't have billing enabled and also make sure that you in a enable the places api that we have enabled like two minutes ago so right now let's rerun the application and have a look if it works all right let's wait until everything is set up okay let's go here and search now and nothing is showing up [Music] why uh okay let's uh let's think let's check the debugger and see maybe uh very something interesting some errors oh okay okay i'm gonna um come on are you doing something no nothing let's try what to add it into a view maybe the places are not this their display but not visible i don't know height 500 and yeah google places here yeah that was the error so actually the recommendation we're showing but because our view did not didn't have a height it was not rendering properly so if i added the height to 500 now it works as expected um i'm going to keep it like this right now and at the end i'm going to think like how to to properly style them uh but now let's uh adjust them a bit to look more like what uh yeah to look uh to design them in order to look them as we design them previously so the first thing that we need to do is instead of search to say where are you going then let's save okay uh this google place uh autocomplete has a property uh styles and here we can send that text input style so we already defined the styles for the text input which we can take from our styles.txt input here let's save and let's delete the margin top from here because it messes up everything here so yeah that's our style for the text input uh all right um then when we need to render instead of okay where is it instead of rendering these rows that are coming with a style default by google which is nice uh because we don't need to style anything if we don't need them but in our case we have our default styles here so it would be better to display these yeah these pressables instead of these rows so in order to do that i'm gonna copy uh this component from render item in our flat list and i'm gonna uh put them into a separate file uh in order to easily access them here i'm gonna show you what i mean by that so i'm gonna create a file calling um suggestion row dot js so functional component uh no actually yeah i'm gonna paste everything that we copied from that file and i'm gonna give it a name so it's gonna be called suggestion row so it will receive that item export default suggestion row okay jsx attribute must only be assigned and a non empty expression where is that from uh item um what's happening here no idea yeah we are actually returning it so if i just oh yeah i know here in index we don't need this flat list anymore and we will import our suggestion row on top let me just remove this import suggestion row uh yeah from this folder and uh in google places autocomplete we can have a function called render row and we can set the custom component to this to this value so it will receive an item and we will return a suggestion row suggestion row item and we'll send the item that we receive for each row so let's save and whenever we press here as you see we are rendering our components and they look completely different from what google had by default so that's actually good uh now we also need to um yeah because these styles if you see they are putting inside a another row with some uh lines between them which means that they are still inheriting some styles from the parent component so in order to prevent that we're gonna pass a variable suppress default styles and now let's save and we can see that these components are using only the styles that we provide so yeah that's much better and we can have the flexibility to render them the way we actually want okay another thing that we need to do is uh yeah another thing is that we need to do to to tell google api to return us only only cities because uh in airbnb when you search something you don't want to search for i don't know mcdonald's or something like that or area 51 but you need to uh to to get only cities so to do that we're gonna say uh in the query that the types should be only cities let's save and now if we press uh for example uh yeah i think we need to just refresh yeah right now uh our um recommendation will give us only cities so that's good because yeah that's what we want to do so now if i press a there is no area 51 but it's only like atlanta austin and so on so that's uh regarding the types the next step is whenever we press on this item uh we need to do something so the thing is that um if we see google places autumn complete has already a on-press method which will uh return us data and the details about the place we pressed so uh with that said uh we can now safely remove a pressable from our row because the navigation will happen in that um on press on press event so let's just replace this pressable with a view and delete the on press here because here we just want to display um just want to display the rows and whenever we press uh if i open the debugger where is here i'm not sure if it debugs actually no it doesn't so command d or m for android and press debug and if i go here and press on something i see the description the data and the details about this place which also gives us me the [Music] yeah the description the format terms and so on that's good and what else what else yeah and inside this one press we need to do that virtual navigation and um as we said we will navigate uh to the guests page to the guests later on we will send some data to that guest from the details so if i'm here and i start typing something if i press i'm redirected to the guests in order to get information more information about that place which is for example latitude and longitude which we will need later uh we will pass um a property to google places autocomplete which is fetch details uh and if we save if i refresh and here if you see we are consoling console logging data and details so i'm going to show you how they look let's go here if i press on this one and i go to the debugger uh this is uh yeah this is the data which contain description my string and only like minimal information about that place uh but the second one is the details so in the details we actually have a geometry for example which contains the latitude and longitude uh we can we also have like photos we can display photos yeah it's a lot of information about that place so we need that in order to know like where to find based on the latitude and longitude so uh let me quickly uh think if we implemented everything about autocomplete uh yeah we did the placeholder on press events uh the query fair details we press style styles and render row yeah i think that we did everything now we can safely remove our text input that we have here right and yeah all right and also we will not need the state because uh google places autocomplete um handles the state automatically okay like that let's try to take it out from our view with the height and put the styles on the container so i'm gonna remove that uh yeah that's probably good and in the styles for the container let's save the height will be i don't know 100 percent and also i want the container to have a background color of white because right now it's gray and i don't kind of like it and instead of margin i will put padding ding where are we going atlanta for example here we go we press on atlanta we are here yeah that's uh everything about the autocomplete features you can find the documentation and see what other properties this autocomplete contains uh yeah they have a lot of options and it's very customizable but that's what we need for this project so i'm gonna add everything get commit minus m uh auto complete and yeah we can say that the autocomplete is finished all right let's check what people are saying okay okay so a lot of people i see that they want uber facebook loan i'm not sure if i'll do facebook long uh soon because i don't know i don't like their ui to be honest it's very cluttered like there is a lot of stuff there uber with e-commerce stripe connect api for payouts oh that's that's a big project i would rather split them into two smaller projects like a uber uh that is focused on the maps and um drawing like the the directions and so on and e-commerce that is focused on probably ui and also on the payouts believe me vadim anyone can do this play please make creative react native up uh i'm really happy that you can do this and i'm pretty sure a lot of people can do this but at the same time there are a lot of people that are just getting started so i hope that for them it is valuable so that's what why i'm doing this beginner friendly projects yeah i'm also interesting interested to do some more advanced projects but at that point at that point i will not do a like step by step and explain everything because they're like i will have fun but i think it's not going to be interesting for people so we'll see we'll see what our projects will do but i'm pretty sure that we will do something that is on the level that for you um yeah chill guys chill everything is all right taxi up yeah i think uber is a kind of a taxi app so it's the same category okay okay okay surprise default style i was struggling on that a month ago yeah that's good that they uh gave some default styles and the possibility to just turn them off and style them as you want because a lot of libraries that you might use they have default styles and to actually change that style it's a pain invest so it's not the same for this library and that's what i found it very very flexible so i like that okay uber clone with no then react native all right i'll take notes of that when you go back shouldn't it take you to the search screen uh no actually that's not how uh in airbnb it works so let me just try but yeah it shouldn't be like that so i'm gonna open a page come on let's go there and if i go back uh yeah here it goes back actually to the search screen if i'm not mistaken but you can do that as well you can assign a custom go function for the go back and you can redirect to this page [Music] okay so for everyone who is joining vc uh today we are uh continuing continuing our clone of airbnb uh and today we're gonna focus on more advanced uh feature than the previous week we're gonna implement the uh autocomplete feature from google uh using google api uh then we're gonna focus on displaying everything on a map view with custom markers with prices and so on and um also like a carousel to display them uh where is it yeah the carousel that will display the accommodations in the map and also it will be connected with a map so yeah this this is what we are doing and i think we can move one let me check the chat a bit uh what is the back end of this project the back end of this project will be aws amplify and we're gonna implement it next week joined uh just joined today guide me please yeah i gave a bit of introduction of this project uh there is a video on my channel from previous week where we started this project from scratch uh if you want to focus only on this more advanced features like autocomplete and maps feel free to clone it from my github so okay uh priyank this is one top notch learning love to see your udemy course would love to buy it yeah thank you very much thanks for the support um yeah probably next year i'm gonna drop a course which will go into much more details because during live streams i don't have a lot of time to go into all the details of what it takes to build a production ready application so with a course i think that i will have this opportunity and time to get into everything that you need to get an application on market starting from zero so i'm gonna do that stay tuned all right guys so let's go to the next step okay the next step is displaying the maps and for the maps we are going to use react native maps and this is a package which you can find on this link let's open the link and see the instructions on how to install it yeah these maps need a little bit more setup and you can find all the installation instructions here in uh in the npm project or on their github page i'm gonna follow along everything but if you uh get into any troubles uh please make sure to check the troubleshooting here uh it should be somewhere here yeah troubleshooting and make sure that yeah you followed step step by step everything that needs to be done so let's start by uh installing the library so use the npm or yarn depending on yeah your preference i'm gonna go with yarn i'm gonna add the rack native maps uh okay let's see the next steps yeah since direct native 0.60 uh auto linking uh makes all the things a little bit easier because the library is auto linked automatically so you don't need to take any steps to link the library however we need to take some extra steps to set it up okay onto two on ios you can choose between google maps or native apple maps i chose to go with google maps for ios in order to keep it to keep it consistent with our android application and to make sure that everything that we have on android we have on ios and vice versa so uh using apple maps is much easier because you don't need to take one extra step uh however i decided to keep it consistent with android and use google maps for ios on android you'll have only one option to use google maps uh okay we need to obtain uh we need to enable the api uh for both um ios sdk and also for them uh android sdk so let's check the next step build and configure ios okay now we're gonna uh configure maps on the ios if you are developing right now only for android you can skip this part and we're gonna get to the part where we will configure for android so let's check uh react native 59 and lower we don't need this because we are using react native uh 64 i guess uh we don't need this as well let's move let's move uh yeah using uh cacao pods with react native 60 so let's install the pods you can either uh go why you can either go into that directory and call pod install or you can easily do npx port install ios this will install all the ports for our ios project and okay i'm gonna skip this step for the app store submission because i don't intend to submit this application to app store however if you uh intend to submit to app store um change this variable in the info file uh enabling google maps on ios react native all versions we need to uh take this step so we need to first of all import google maps in our appdelegate.m so let's do that our pods has installed so i can close this i can close all the tabs as well so let's open our ios directory the name of a project in my case it's airbnb clone and then here you can find updelegate.m let's open this one and at top let's import google maps after importing this we need also to add this line and make sure to add it as the first line in the method did finish launching with option so here after the opening curly braces i'm going to add this line and we need to drop our api key here so uh you're gonna use the same api key as you used for autocomplete features and uh later we're gonna uh enable the uh for a project for ios sdk so it will work also for ios okay uh enable okay should be the first call of this method yeah we did that uh whenever do one of the following so uh because we are not yeah we're gonna choose the react native no not this one this one react native 060 and higher so we need to add the following to our pod file before above the use native models so let's copy this open our ios pod file here and here you can find i use native modules use native models which is here somewhere on line seven before that other couple of lines and paste the code that we just copied from the documentation uh yeah that's it so now let's try to run i think we should run again put install oh yeah and run for this style um yeah i'm gonna do with np exporting for the install ios and i'm missing the part where we enabled google api where is um you must sign up and create a billing account okay but where does it say yeah i think it's here yeah but the thing is that uh we go to our google console console developers.google we select our project and in the library api library we find here we search maps maps and we see maps sdk for ios and maps sdk for android we should enable both of them and in my case they're already enabled but you you should enable them here and you go to the android and enable it here so yeah that's it that's it what uh that's all what you need to do and you can use the same api key as you used for them autocomplete features so uh where are we recognitive maps installation okay so right now we should be able to re run our ios app ios and we can uh already create the the the screen where we will display the map the map itself so let's go to screens and let's create here a new screen [Music] called search results map search results map yep here we'll create a file index.js i'm going to generate the boilerplate for a functional component so here i'm gonna call it search results result results map map search result map and we can import it in our navigation uh search results tab navigator uh let's import it here search results map let's call it search results map and let's um let's render it uh in our map screen so here instead of search results we're gonna send a search results map so if we save if we go through all the screens that we have here let's go start we will see a list and if we go to the map we see our not just a component which means that we render our newly created component so let's have a look in the documentation how you render a map so it's pretty easy we just import the map view from react native maps and we render it like this giving it a initial region so let's do it here and hopefully it will no it doesn't want so let's just import map view from uh react rack map view no it's not react native maps how is it called iraq native maps my short-term memory on the point okay i think that it needs some styles because again um if i give it to this view style let me try with save uh export default what's statement expect x what did i do something wrong there nope what's happening i don't see the issue here okay now i see it so yeah um okay the map itself also need a style and for it we will also say that it's full width and will you work now of course it will now we see a map rendered and that means that our setup for ios went uh as expected so um let's not continue this um until we set up the maps for android as well and then we can continue working on the map itself so uh let's go here uh and scroll to our build configuration for android i need some water okay uh we don't need this because it's 59 and lower we have 60 we skip this one as well react native all version uh so we need um let's open our build.gradle and we can find our build.gradle in the android build gradle and here in the build scripts uh the ext uh we need to add the play services version and also uh android maps util version let's add them here and uh the current version of play services is 17 for android maps util i found it you can access this somewhere there is a link yeah these links and you can find the version so let me just have a look at what version is currently it's 2.2.0 for android maps utils 2.2.0 as of today this is the latest version so other than that [Music] the setup in this file is done let's go to the next one okay okay okay react native all version if you don't have okay but we have uh yeah we skip this one as well and this is the next step that we need to take in android manifest.xml we need to add this meta data with the api key and here we will set up the api key and we copy this and we make sure to place them inside the application um tag so android app source main android manifest and in the application tag we can do it yeah at the bottom here let's add them here come on uh and we should paste the api key here and we will use the same api key as we set up for example for i don't know abdul delegate okay and you will only need this to add use i'm not sure if we need actually this one you will also need uh to add this um did i add it where i was testing i'm not sure if we need that one so let me check where is the api key yeah we actually had it so yeah add this as well okay react native 59 and lower it's not for us for all version ensure that you have google play services installed uh all right let's let's have a look and uh check if our application is working on android and i'm gonna do yarn android hopefully my pc will hold on like all the streaming uh application two emulators uh like five so yeah this is the previous application let's close it yeah this android emulator is going so slow come on so slow please don't crash my pc so are you working i guess you haven't updated your airbnb app do you mean that the design nowadays is different i think that i installed the application just before um yeah just before starting these tutorials and also maybe they have their they usually do a b tests and if you have a different design maybe we are in different groups and they are testing different design how they look okay all right come on 90 let's go let's go please work please work i don't want to spend the next hour debugging and figuring out like why oh no why have notification one there so let's go it's slow but we can see if it will work a a please work [Music] please work yes autocomplete works let's go next search maps maps map so slow how could i work with an android emulator for so long when i thought like why i'm not using ios emulator we're running much and yes it renders so uh that means that everything is set up correctly one android as well so if you follow along what i have been doing uh you should be good to go and your application should run on android and on ios as we can see here if you have any issues uh first of all go through the troubleshooting in the installation guide you can see it here so for example if there is no map try to do v-steps and so on or if that doesn't help join our discord channel and ask me there or down below in the comments and i'll try to help you for now i'm going to close this slow ass emulator and we will continue setting up our setting up our maps where are you so let's close everything source and let's open our screen search map results um yeah this is our map um one thing that i want to do should they okay let me think what's the next step we need to take so install the library we enable google api make sure billing is enabled we install the api key now let's work with uh displaying um a marker to display a marker on the screen uh okay all right so initially initially initially initially i'm gonna just adjust where is my map view yeah the latitude and longitude value uh because my dummy data is somewhere there so it's around 28.3 latitude minus 16.5 longitude and 0.8 uh launch to delta and latitude delta so let's save that and if i refresh the application what's going on what's going on from time to time the refresh button doesn't work like i press it like command r and i should spam it until it works i hate that so uh i think that i'm gonna hard coded that screen because i don't want to go through so many steps until i get there so uh you know what i'm gonna do i'm gonna go in navigation and this is just for easy development i'm gonna go into the home tab navigator and instead of the explore navigator i'm just gonna display the map itself and then we're gonna change it back so i'm gonna comment this one i'm gonna duplicate and instead of exploring navigator i'm gonna do search results maps like this save and yeah this is explore and we see right away the maps now it's going to be much easier to to not go through all the all those steps okay so um if we go to our react native maps uh here is a way how we can render a marker so we just um display a marker from react native maps we give it coordinates title and description which we will not need so let's copy and see how how it works so inside our map view we check where it ends it's here and we need to delete the closing tag and add an actual closing tag uh in order to be able to display a child which is a marker so let's import the marker from react native maps more marker like this for uh the latitude um i'm gonna copy these two i'm gonna send them here as a hard-coded string will it work will you work we'll see make sure it's double curly braces like one for saying that it's an object and one for uh starting with javascript same way here and we don't need the title and description we just need that marker let's now save see marker on the map oh that's interesting because i'm i'm wondering if oh no on the ios we are using the ios maps if you see here in the corner it says apple maps because on android i remember that marker had a different style so we had something wrong there how do yeah let's check if we skipped one step there for installing for ios so let's go building for ios okay okay found all right your project target yeah enable google maps on ios react native all version this we did finish launching with option and here is i think i didn't rerun it on ios or what no i did ios [Music] ios airbnb clone up delegate m we import google maps all right and in them did finish launching with options as the first line we add this okay what else we added these above use native modules and then we should run um [Music] let's try to run again pod install use native modules we added this okay let's try again to do uh npx pod install maybe i forgot to install the pods and now let's do yarn ios hey the guy uh that guy said he was just searching to know which platform should i learn for app development and your video showed up so for uh what is your objective do you want to develop mobile applications or like any applications like web applications or what is your goal and maybe i can try to help you let's go build successfully installing and it's still ios maps what did they do wrong um build that's interesting i have that [Music] let me check ios airbnb clone delegate m okay we imported this library in up delegate m okay on the top and here as a first line we have a gm services save hmm i'm pretty sure that everything that we're going to build will be the same using uh google maps but uh i don't want to risk it so uh i'll try to to make sure that we are using google maps instead of ios maps so let's make sure that they didn't miss anything here oh okay i remember i'm a big brain stupid stupid brain so actually it works but in the map view in the map view you we need to send another variable so we need to save it the provider okay provider is provider google okay i could waste it like one hour understanding why it doesn't work so now yeah now we see the google logo here which means that we are using the maps from google okay we have a marker we have a coordinate now we need to actually style style those coordinates to style to style this marker because in our application uh we need to display like the price on the map as following like in a in a bubble we display the price so to do that uh we can where is it marker we can send some children component to the marker itself and when we do so it will render the children elements so i will delete the end tag from here and i will add the marker down below so for for the custom marker here we will render it inside the view and we will have a text here that will display right now a hard-coded value like this so let's have a look uh here save and um i'm not sure if you can see it but it's there let me try to zoom in yeah it's there it's a written like 300. so uh we can also we can we can also style them so that's what we are gonna do now um but what i want to do now let's let's first style it so styles [Music] okay for the style we don't need the height and weave we will say that the background color will be white like that it will have some padding to have some space five now the 300 here looks a bit better but let's let me put it from new line to see it better so we added sorry so uh border radius to make it round we'll add it around ten yeah it's round uh then border uh color let's add it as uh gray and border width will be one to have some some nice little border uh to be able to see it on the map yeah we can see it there so border red maybe we can even increase the border radius uh to make it more round as we see here um okay for the text as well we need to send some um styles let's say that the font weight should be bold save okay now we can see it uh much better on the screen yeah this is um this is how we can customly render a marker on the map and now instead of just rendering one marker with hard-coded data let's try to render all our accommodations that we will import from our dummy data and let's try to render them uh on the map based on their latitude and longitude so if we have a look at the assets uh data uh our feed our feed we here we can see a list of places uh that is a yeah our dummy data later on we will receive this from our api however at the moment this dummy data doesn't have longitude and longitude latitude so go ahead and download the dummy data that i updated uh on the link that you can find where assets.not just dev.airbnb and you will find the dummy data there with updated values so let me try to find it on my pc somewhere verdammy data um okay so i'm gonna go here uh airbnb somewhere and airbnb assets and feed.js and yeah here i'm gonna just copy from that file and replace it here so the new file contains this coordinate field with latitude and longitude we will use these variables to be able to render uh render our markers on the map so let's go ahead and import import the places from uh data not assets assets no come on where is it assets yeah data feed okay places we have it here uh i'm gonna go ahead and take this custom marker and put it inside a separate component in order to have it more reusable and to keep our file cleaner because right now as you can see it's already a lot and it will be harder to understand in future so let's copy the marker where it starts and where it ends let's copy it and in our source dot components i'm going to create a custom component called custom marker custom marker i'm going to create a file index.js there gs come on functional component let's import everything we need and we can uh paste in the values that we copied the marker uh come on i need to give it a name custom marker custom marker we need to export it i need to reformat it code how is it a reformat code so this custom marker will receive the coordinates from our props so we can take them them uh destruction from here as uh cowor d nate coordinate props yeah we will take coordinate from props and we will render them here we'll send them instead of dummy data we'll send the them fro through props coordinate right like this and also we will take the price from props to be able to display different prices on the map price so instead of 300 here i'm gonna open the curly braces and write price to display it from our props okay that's cool now i can import uh our custom component here as custom marker because somewhere there come on you can do it like that and let's delete the marker from here now here uh we need to loop through all the places and for each place to render one marker on the map and to do that we can uh use a map the map function from javascript which loops through one array and transforms it to to something else so for example we can do places dot map and for each place we want to return a custom marker a custom marker and we will save at the coordinate coordinate is equal to place dot coordinate and uh price price let's do it like like this coordinate and price the price will be price will be place dot and in our feed we have i think a new price a new price let's save and have a look at what happened we see a new 55 there but is it everything that we need yeah as you can see we have on the map already for [Music] sorry we have four markers and these markers are um coming from our data uh in from from our uh dummy data so come on what's happening there where is my code i've lost it okay so yeah we map through all the places and for each place we render a custom marker that's uh that's cool now the next step is um to be able to press on on a marker and select it and the selected marker should be displayed with [Music] should be displayed with black background and white text to be able to differentiate between selected and non-selected and to do that let's uh let's keep in state the variable of the current selected place so let's do um let's say selected place id and we'll we're gonna keep just the idea of it because knowing by d we can easily find it in our list and in our dummy data set selected place id equal to use state initially it will be null because initially nothing is selected and use state should be imported and i don't know why we don't how to com complete here use use state okay use state that's good so um whenever we press on on a marker whenever we press on the marker we should set the selected place with id uh that we selected so for example if we press here we will set it in state and then based on that we will be able to render it to render a different uh style so let's say uh we will send here is selected and this will be a boolean field if this place is selected or not so um when this place will be selected only when place dot id like the current place id is equal to the selected place id from our state so when that uh that are equal that place we can send it as selected so we will be able to um yeah to display it uh differently so yeah let me just put it as the last one okay so uh one press we will send a custom function here so whenever we press we will call set selected uh and we'll we'll set the current place id to our uh state this way we will be able to display different styles and to press and change it in our state so let's go i need to drink some water okay let's go back to our custom marker and from props we will receive two more options on press and is selected on press oh come on and uh is selected selected with one press it's pretty easy we send it to the on press of the marker so on press is equal to one press because uh they have this property and they call it whenever we press on that so that's easy with is selected we need to um to to declare some different styles based on this is selected so the background color will depend on the is selected field so if uh that marker is selected the background color will be black otherwise it will be white the same way goes to the color of the text so color of the text will depend on the is selected variable so if it's selected it's white and otherwise it's black okay let's save nothing should happen however when we press on something now we see that that that particular marker has been selected and is displayed with different styles and if we press on something else they again move to the one that we have actually pressed okay that's good that's uh that's probably it with our maps and how we render uh how we first set up then render the maps render custom markers on the maps and also how to render uh different styles for the markers dynamically based on which one we press and so on so that was it later we will implement something even more interesting so maps um yeah just maps okay okay okay install enable make sure billing is enabled get ebay key and render everything there who awesome how are you doing guys are you still here are you following along uh so as a darcy saying you can also make a mini video uh or a blog for adding different phones in rack native yeah that's very good idea and i thought about that i have it in my ideas list my ideas list is is quite big and i wish i had more time to to actually film these videos and release them but it's gonna come definitely seer abdullah uh finally caught you live yay hello so mad looks amazing thank you very much uh and with the next feature it will look even more amazing you'll see like how interactive it will feel uh teach flutter man your company ditch write react native teach flutter um at the moment i will teach rock native i'll stick with react native because that's what i'm using day to day at my work and yeah i think that track native has a very good community and a lot of potential so yeah that's why i stick with rock native maybe in future i will do some flutter okay which one is better class component or functional component to be used which one react native developer should use in their app so as soon as react introduced hooks we wish to do everything in functional component because everything is so much elegant and so much better in terms of code readability um first of all you have these hooks that help you drastically and there are like very simple use cases for example the use navigation hook improved our code quality and readability so much because we were passing the navigation through props to through all the components down to the smallest component where you actually need that navigation so it was a mess like if you forget from one component to pass the navigation like your app wasn't working but with hooks like you don't need to pass this navigation you just need to use the use navigation hook so it's so much simpler and like most of the components don't need navigation only like some buttons need navigation and like this simple use case improved our code uh code readability so much and much more like a lot of things are uh are easier with uh functional components uh okay uber it's clone all right we'll see in future so guys um let's move on we are to our uh hopefully we can finish in one hour uh okay so uh the next step is the place car uh a place carousel item component and i'm speaking about oh i forgot about my cool plugin i don't have it now so i'm speaking right now but let me open it because i paid money for it so i need to show off this one so how can i i already forgot how to activate it oh here it is so yeah uh here i'm speaking about the a component that will display our uh place where like accommodation with uh the image the uh number of beds uh the title and so on uh it will display in a bit different way when we are displaying it in the list because we need it very condensed like to be very uh high to be like i don't know like 100 pixel or so and then we will uh use this component to create that carousel so without further ado let's uh start working on this and yep let's open my code and uh here let's i will close uh all tabs and in the source components i'm gonna create this um directory for i don't know post a car row cell item something like this um i can actually start from our post component because it will be quite similar so i just need to rearrange the things on the on the screen in order to display them uh the way we want it so let's just uh copy and paste the uh the post component into the post carousel item and now let's try to render it in our search results map here search results map here map view and down below i will just add it i don't know inside the view uh inside the view with some styles which will be position absolute and i'll display them at the bottom of the page like 10 pixels from the end and inside here i will display the post car row cell item i definitely misspelled it but let's try to import it and see so import post easier to just i'm a lazy person like that so post carousel item here we need to send a post so the post will be um let's just take the places at position zero so the first post from our dummy data play sys save and we see our post rendered here yeah i think that's uh that's pretty good so it's a good starting point to make sure that we from this we need to render it this way so we need to rearrange some stuff on the screen make the phone smaller and so on so now let's go into our index and yeah currently as you see that all our items which is image text and so on are displayed uh [Music] as rows and they have like the same direction like everything is is a row in this view however in our case here we have two columns we think about this as a separate column this one is a new column and the second the right container will contain like rows so that's what we need to do right now to put everything except the image into a view like this [Music] view uh and a for vac container will say wait the container will save at the flex direction flex direction is um plus direction or how is it called uh flex display direction oh my god my brain freezes all right where where where in them come on vadim think think um yeah flex direction why doesn't give me autocomplete row save yeah is displayed as row uh the thing is that now the image uh is displayed as with 100 so the width in this case uh will be automatically set and we need to set the height to 100 so we need it to take the the height of the whole container here so height is uh 100 for the aspect ratio of the image we will need uh one by one so we send like one that's good um for the image i think that's that's uh it right uh yeah we'll need also to remove the border radius from the image because we don't need we don't need it here okay for the container let's add some styles here but i'm gonna add another uh inner container because i need to split some styles such as shadows and things like that so in the postcard i'm gonna add another view here with a style of inner container and i'm gonna close it just at the end so here right come on [Music] save okay so for our container which is about our container here we will declare the height of a container height will be let's try 120 pixels that's good the flex direction shouldn't be on the top container it should be on the inner container now we see it better uh okay for this container for the outer container we'll add some padding uh to display some spacing between the items and i think five will be enough uh what else for the inner container here let's display background color background color white save let's add the border radius border reduce radius 10 border rogers 10 and the the problem is that we don't see the board the righteous because of the image so uh we can set that uh uh overflow hidden overflow should be hidden so everything that uh goes outside our inner container should be hidden so if we save now we see the border righteous displayed correctly here because everything else is hidden so what else what else what else yeah now we need to render uh to set the width of this container and we cannot set it with with 100 percent like of the screen or something like that because we will render it into in a horizontal view and that view will be uh very long and we will be able to scroll through it so that's why we cannot do it uh right here and we'll do it in the index and we'll set it uh the width based on the width of the screen so we can take the width of the screen using a hook with use window dimensions dot with it was imported from um react native so uh for our container we are going to put this to merge two styles so the width will be with minus and we need to do like minus like around 60 pixels to have some space around because if you see in the next part whenever we see one component we should actually see a bit of a second one in order to know that there is something and we need to scroll so that's why it's not 100 of a screen that's why i added like minus 60 there so -16 where is it post carson item right [Music] okay what else what else um why is it so uh in the search results i'm gonna add some like bottom 20 even more right 30 40. yeah something like that uh and we need to delete some items from here because it should be much a bit simplified so in the postcard sell item we don't have a total price we only have a price per night there and we also don't have the old price so let's save this one it's a bit better let's delete some space from here yeah i think that's good and on this view we can add some uh margin uh horizontal and we can add i don't know like five pixels to have some space between or even ten to have some space here all right so if i add them legs one to take up the whole space from here and not overflow [Music] yeah i think that's uh that's good enough for our postcard carousel so um yeah we finished the uh the place carousel item component which based on um uh place item it renders this view and we can use this view uh in our next step where we will render the carousel flat list so let me just check a bit of the chat on what people are saying uh okay um alexander greece hooks are adorable yep with hooks you can do nice things okay guys let's continue because my voice is cracking i don't know why um yeah i was sick this week so maybe that's why we need to use this uh place carousel item uh in our flat list in a flat list so first of all let me uh add everything to git and get add get commit minus m uh carousel item and now where is it okay carousel item is done we can go into the search results map and here instead of rendering just one post carousel we will render a flat list flat list so um we should import it from react native and you should be already familiar with how to use flat list we need to send a data property and the data will be our places because that's what we want to render and for the render item we will take the item from here and we will return the um how is it called already forgot postcard item post cursor item post carousel item and the post will be our item something like that uh let's save and we see how that what's happening oh i didn't want that okay okay we see our flat list rendered here we need to render it horizontally so um horizon we just send a property horizontal and that's it it renders nicely horizontally we need to hide the the scroll bar so we say show horizontal scroll indicator false okay it disappeared um what else what else why it's not displayed properly i think we have there is then i think that they just don't fit there and in my case i used a smaller font here so yeah let's adjust the font uh over all the text and also some spacing between them so components uh post cursor item style and here and here for the description let's say a font of 14 or 15 line height we don't need that uh and for the price we can also go with a 15. okay bedrooms 10 uh all right i think that's uh that's good enough okay so we rendered our post item component and while we are here we can also if you see here i rendered a bit of shadow underneath so in order to display some shadow you can there is a nice shadow generator uh react native shadow and there is this react native shadow generator so you can set like the the depth of the shadow i'm gonna go with something like this and you just need to copy this shadow properties and we can place them on our components post carousel item style and on our container save and now it renders some shadow underneath the items that looks i think much better whenever you are in doubt like how to make something look better just add some shadows and it's gonna pop that is like our inside joke every time at the startups when something doesn't look good like we add some shadows and it instant it instantly looks better so okay uh on something more important okay here is our flat list okay for the flat list if we need to implement that feature that will snap the elements as a carousel uh we'll snap them in the middle because right now you can easily uh scroll through the items and they are not center for example if you look like this you don't see neither the left one nor the uh right one so in order to do that we will send a couple of properties to our flat list and the first one uh will be uh snap to interval and snap to interval will should receive snap to interval uh should receive the width of our items so the width of our items depended on the width of uh yeah of the screen so let's do the same here from react native dot with and snap to interval or our wave was width of the screen minus 60. okay the next one was a snap to alignment and we want we can either uh snap to the start of the item to the end but we want to actually uh to center of item whenever we snap so it will be always in the middle of the screen and also the deceleration rate which will indicate how fast it will snap so let's save and with these three components we can now if i scroll and release it will center my items so you see that they are centered correctly this is the last item and that's why it's not centered but other than that like everyone snaps you can see a bit of the left component a bit of the right component that's how you know that there are still other components and you can actually scroll through them all right that's our carousel um yeah that's our carousel container like the flat list let's add them resell list okay so uh the next thing is we should uh we should uh somehow where is it yeah we should sync the carousel with our map so whenever we uh press on an item on the map come on where is my code yeah whenever we press on an item in the map we should scroll uh this list in order to display that that item so how can we do that um first of all uh we need to define a listener like a effect for uh that will be called every time our selected place id is changed so whenever we press on this it will change the selected place id and we need to run some uh some code whenever this happens to do that we can run use effect which is used for specifically these side effects that should happen so something happens and on the side we also need to do something else and as dependency we will put the selected place id to make sure that this function will be called only when the selected place id is changed so let's import this effect from react use effect use f if i could type effect use effect so let's say console or warn scroll to selected place id so scroll to null initially and we can avoid that by because the first time it will also be called and the first time our selected place id is null so let's have a check here if selected place id is null which we can write it as as following we will return so we will get out of this function so let's save now and we don't see initially the the console worn however when we press we see scroll to the index 0 scroll to index 2 and so on so now we should think how we should implement this scrolling mechanism so okay the first thing is we need to um we need to tell the flat list to scroll to one element and to do so we need to save a reference to this flat list to be able to access it so to do that we are going going to need to declare a flat list use ref a reference and using this reference which we will import from react we can yeah let's we will first give it to our flat list ref ref no refresh i'm not mistaken yeah not refref but ref flatly because that's how we call this flat list so uh yeah knowing this we can call flat list dot scroll to index and give it an index and then it will automatically scroll to that element i would also check if flat list is not null here in order not to have some errors so if selected place id is null or flat list is null we will not do anything but if they are not null first of all we need to find the index of the element in our list so so yeah our uh index will be places dot find index and it it suggested me to autocomplete so for each place we will check if place id is equal to the selected place id from our state and if that's the case we will return the index with that index we can say flat list dot current dot scroll to index and let's send the index as it expects an object so that's why we need to put them in curly braces so it expects index.index but we can simplify that and just say index save if we press on this one our list automatically scrolls to this item and so on if we press on the other one here yeah as you can see it scrolls automatically whenever we press on a different item here what else what else the next step is also very verse like let me try to um it should work the other way around whenever we uh scroll through the list our items should be highlighted to be able to see where is this property on the map so when we scroll we need to update the map and display the marker uh yeah depending on the list item that is currently displayed on the screen so to do that we can register we can send to the flat list a property viewability uh on viewability items changed and this is a function that is going to be called whenever the the list item changes and it will and it will send us viewable items and items that has been changed so let me try to yeah it will send us the viewable items so we can actually console log viewable items and if we save yeah changing on viewable items on the fly is not supported i'm gonna refresh this refresh uh airbnb clone here no not this one the other one this one so uh if i scroll then something should be console logged so let's go to our debugger where we can find it here so yeah here is our items and this is called like uh this item is visible because it's actually visible on the screen then uh the middle item from here is visible and the third item which is also visible on the screen but it's very little like i don't know like one percent or 10 percent of that item is visible on the screen uh and that's uh not what we wanted to do because we can uh we need only the middle item the item that is visible uh more than i don't know 70 percent of the screen because if we are like this we still want this to be the active one so uh we actually can send some properties uh to our um flat list and this is the viewability config and the viewabilityconfig contains uh property item item visible right visible percent threshold try to remember that fresh hold something like that and here we need to say like whenever the item is visible more than 70 it should be considered as visible and most probably i yeah it's only one s visible so right now if i save on the fly is not supported and i need to refresh it and shortly we will fix this issue because right now yeah right now we can just change it and i will scroll one time i will check the debugger and now we can see that only one item is visible and it's the one with id1 that's actually what we wanted because well the item on the left and item on the right they are visible but they are not enough visible they are not more than 70 percent on the screen so if i scroll up again uh if item that is visible is with id id3 so that's cool that's what we need and i was having this problem when whenever i change something here i i get an exception changing on viewable item change on the fly is not supported and i had a lot of issues with this the problem is that it's something internally with a flat list and how they handle this do-ability config and the workaround will be to use references uh for the viewability config and for the for this callback so let's depl let's copy this object and declare it in a ref so const view config is use ref and inside here we can pass it as initial value of this one so we can use this config to pass it down below with the current value this way if i save and if i change the value on top for example 30 let's save um on oh the same things we should do with yeah with this function so on view changed dot current on view changed and i will declare it as well as a reference one view changed use graph and i'll pass in the our function let's save and right now i can yeah i can change these values without any issues and i don't have any errors for refreshing i need to refresh automatically um it also fixes some other problems whenever we want to use state in their own view changed and that's what we need next because every time we changed we change our view here we need to set to change the active place or the selected place in our state uh where yeah uh okay let's let's uh change the state and set in our state the element which is uh currently on the screen so first of all let's check if if viewableitems.length is more than zero because there might be a situation where no items are visible on the screen so we want to take uh take selected place will be viewable items because it's an array we will take the first one so we can do like that and also dot item because that component has also the index and so on but one of them is the item so having this item we can say that set selected place id to the selected place dot id from here let's save and now with this implemented let's think if something will work let me try to refresh yeah right now we see that uh the one with 20 this one with 20 is active on the map and whenever we change the page it uh automatically changed the um the active state to the one with 65 which is this one and so on so yeah whenever we change yeah the list here we change the items uh in the map and vice versa if i press here it goes to the first one if i press here it goes to the last one if i press here it goes here and so on so now we have a two-way binding between our map and our flat list and whenever we change something it reflects involver component and vice-versa all right so uh one more thing that i want to implement is let's say uh let's say that we zoomed in on this map here on this item to see to see it closer we zoomed it here and whenever we want to see the hour one it actually changes but we don't see it on the map so it would be nice if we can um yeah it would be nice if we can um animate the map and move a map on the current active position so we can do that with uh but we also need to in the same way as we have a reference to our flat list we need a reference to our map because there is a specific method on the map which we can call to animate and move a map around so let's use a ref here let's send it to our map uh ref is map uh and we can use the method where is it whenever we change the where should we um i think this should happen in the uh where is it the use effect i lost it use the fact yeah i think it should happen in vcu's effect whenever we change uh the selected place id and we know that we know the selected place actually we don't know it yet but we will know it so const selected place is equal to places at index because we already know the index and we need to uh define a region on where the map will zoom in so let's define the region const region is equal to uh so the latitude latitude will be selected place dot coordinate dot latitude the longitude uh the same one selected places coordinate longitude and also two more things like latitude delta latitude delta t dude where is it delta um and this defines like how far away uh how zoomed in you you should be so i'll put a 0.8 here and latitude longitude data longitude 0.8 again and using this region object that we define here we can say map dot current dot animate animate to region region save okay so now let's check what happens if i move to this one it centers this item on our screen if i move here it centers here so that's good if we just move around the map and we go back to an item it shows us in the middle same happens if we click on this it centers the map so this way we get like a really responsive map that actually works uh centers everything like based on user input it also has this list which we can scroll and it automatically updates the map with active uh place um yeah and i think that's uh that's a really awesome feature and i'm really happy with how it turned out and um yeah uh i hope that i will use it in more uh project and it will be also helpful for you in uh in some of your projects because yeah there are a lot of cases where you need to render some uh some some things on the map some businesses or some places and when you can do this in a nice way like this with custom markers with custom carousel to display more information about that place uh with being able to update them on the fly very responsive to the user i think that's really powerful and that's a really nice design so without that uh let me add everything and let's think if i implemented everything from this one so um yeah okay map and list synchronizations in sync yeah think with a mop i think that i think it's uh it's done with this one so um let's see if people are still here it's uh quite a long build two and a half hours already and i have never been to the toilet so i'm gonna be back in one minute guys don't leave um and we're gonna continue with one more feature which was requested by one of you guys so one minute and i'm back hey thank you for waiting and okay so how is it going guys are you following along uh ricky asked how did he get his terminal terminal like that i have a lot of plugins installed and i usually do that when i uh i get the pc and after that i never touch them so i don't remember which exactly but it's definitely based on one um on one blog post so if i'll find that i will make sure to send you so let me know if you still need it and it's actually usually it shows you like which branch you are on like how many commits yeah commits are not pushed yet um yeah and a lot of things so let's drink some water okay guys um actually this is everything that i have planned for today but one of you exactly priyank asked me very much to implement the detailed view of one accommodation and i'm gonna try to do that uh real quick now to show you how you can define a separate page for each individual place in one list and navigate to that page when you click on that item so i'm not going to go into a lot of details of the of that specific page but i'm going to show you only how to set up how to structure it and how to navigate so let's go here and we will create a separate screen because that's one screen and directory will be post com post screen or accommodation screen i called it post to keep it consistent with other builds because you have like posts in a feed but here you can call it i don't know accommodation place flat whatever you want so let's declare the index file of of our post screen functional component post screen and and and here post screen okay um in our post screen i will um i would like to render it instead of the maps in the explorer so i'll do the same little hack in our home tab navigator and here instead of explore navigator i will render the post uh page all right and it's gonna be from post screen yeah not post page for screen keep it consistent all right so here it is we see not just a component there uh awesome okay in our post screen in our post screen we will have we will display something very simple similar to our post component so let me just yeah i will actually reuse that component so i will include it here so we will have a view we will have a post which will receive a post equal to post i will take it shortly so this post we will import from our components import post from components components uh post and the data for the post uh right now i'm just gonna take it i'm just going to say like import places from assets no one more assets data feed and our post will be equal to places at position one so i will take the first post from our list but shortly i'll show you how to dynamically take it based on the id that will receive through navigation but right now let's just do it like this let's save so we see our post displayed here so in the view i will add the background color uh white yeah that's better and i don't know yeah so here instead of rendering a post you will probably render a detailed post so i don't know in the components and let's do something similar so you have post let's uh copy paste the post into a uh post page or detailed post detailed post and detailed post let's come here and in the index i don't know it will have a long description and let's first of all let's import it here instead of post detailed post so we know that we are working with it save right now it's still the same however in the index let's save it we will also want to render um a long description so text uh will have like um paul post dot long description and we need to define it this long description in our data so let's go assets data feed and add besides a description we don't even have a description oh we have title we have type and title and yeah let's see this is just a description so the description will be i'm going to take some dummy text from lorem ipsum hello ipsum and let's take this text and put it here let's do the same description for every other one to be able to render something um paste paste all right let's save and now we see underneath here the description the long description so we can go to our detailed post style and give this text style styles dot disk long description and in the styles let's define the style for this and we'll have like i don't know like font size not 18 but probably 16 line height 20 line height 24 yeah something like that and i don't know margin vertical 20. okay that's just to show you what you can do of course you can take this uh one step further and render whatever information you want about that uh post in this post page and okay let me do one more thing show you how to display if the description is too long so detailed post here let's say that the description will be even longer so here i'm going to add one more lorem ipsum come on so i'm going to add it here come on no please it's it it crashed not it it stopped come on you can do it please don't do that i don't want to lose this stream are you here are you here why it's not responding let's wait a bit to see if it recovers hey i think it will be faster to just close it hey are you here webstorm uh kill process all right and let's open it again sorry for that but it happens uh airbnb clone okay we need just to do yarn start and yarn ios yarn ios so what i was doing i was changing here the length of the description so i think i copied paste it i will add two more lorem ipsum to have a very long text and i'll show you how to have a scrollable page okay i've built successful come on let's go yeah so our app is very long but we cannot scroll right now so in order to be able to scroll we'll import the scrollable scrollable component from react native and we're gonna replace the top view with a scrollable and save hopefully it will work uh element type is envelope you swear to a string um it doesn't oh yeah the scrollable expects only one children so a child so let's go ahead go back we where we had the view and just put a scrollable around it so scrollable and we copy the whole view here and we put it inside the scrollable will it work now element type inspect this stream for building what cannot resolve scrollable it's not scrollable scroll view scroll view i forgot so scroll view save and right now we can scroll through the page as you would do in any other page if you have a lot of content here so with that said let's now render this page detailed page somewhere where it actually belongs so let's uh go into our source navigation because right now we just render it randomly here and we can go and delete from home tab navigator we can delete the post screen and we can uncomment the explore navigator and this will show us the welcome screen so where should we display this post page we can do that in the root com in the root navigator so in the root navigator is our router and here we have our home destination searches guests and we can have a new screen here called uh post post page or post it will display a post screen and hopefully it will it's not from it's not from there post screen well you know where to yeah from here um uh but that will be just a com motivation or something like that and i don't even know how to write accommodation okay having this post here we are able to navigate here from some other component so where do we want to navigate here we want it from some components from for example from our post index uh we will re we we need to set uh a function whenever we press on this post so we will all import the pressable and we will replace the view with pressable we give it a style on press and go yeah go to post post page so let's implement this function const go to post page and here we need to navigate so to navigate we need to import um the use navigation hook to be able to take the navigation use navigation from react navigation react navigation native and here we'll say const navigation equal to use navigation and we can say navigation dot navigate to the page post that we define there let's save and that means that whenever we go here search and we press on this post it should go us to the accommodation page of that post and if we press on the next one it should also go to a specific page but now we see that it goes to the same page like it has the same data so we we should uh somehow send a property like to which exact exact post you want to go like not to any post but to a specific post we can do that by sending here a object with all our parameters so instead of sending the whole post object it's better to send ids for navigation so we'll send post id is post id so we send this information to our post page so that means that in our screens post screen index we can we should receive this information there so let's import another who called use route route from navigation native rack navigation native uh at the top of a component we'll say const route is equal to use route and and whenever and let's just console log route dot params and see what we receive there so let's press on this one let's go to our debugger and we see that we receive an object with post id 0. if we go back and go to the next one we receive post id 1. so we know the idea of the post that we want to display now we need to filter through all the places and get the one with that id so the const post will be places dot find place uh the place will be we'll check place id if it's equal to the route dot per rams dot post id params dot post id like this uh let's save and hope that it works so we press on the first one remember 20 per night and this image we see it here we go back we press on the third one 55 per night 55 per night and it displays vet specific information so that's how you implement a post page and you send uh through navigation and try to send as little information as possible so instead of sending the whole post i could do that as well i only send the id because here right now we can filter through the dummy data but later on we can do a get request to our api and receive only the data about that post so okay that's uh how you do that and remember to implement that in other places as well because if we go to our map we should also be able to press on this item and go there so to do that we do similar to what we did here we use navigation we import navigation yeah here [Music] and we say go to post page and instead of a view we have a pressable with one press on press is equal to go to post page without calling it be sure that whenever you send a function you not call it because it will call it instantly and it will navigate instantly sorry okay we import repressible here on the top save it and let's try to press it and we go to that navigation we go back we are still here we press on the second one like with this image it's here boom press on this one here boom list all right so priyank here you go are you satisfied is that what you actually wanted to to know how to do it like the basic structure of the pages like how you can navigate how you can send data from navigation and i think that uh what you're displaying here is not that hard to do like you just do like yeah you just render text or tables or images or flat lists or yeah reservation form buttons and so on so i think that steps i covered so you can take as an example other places where we render things like that but now you have the basic structure of a project hey thank you very much for another donation thank you i really wanted to learn params concept yeah so here it is you send uh params as a second object uh in the navigate try to send us uh as little params as possible and do the hard work inside the component okay adarsh hello hello so guys um let's try to run this application on android and make sure that it it works there as well because we finished everything that we planned today so let's have a demo and look once we have our android here and our ios let's wait until it installs because this is the old version yeah someone is saying just make one video about the correct folder architecture and pattern to be followed by react native develop developers yeah thank you for recommendation i think that's a good topic and it's very important in order to keep your project manageable when you grow because if it's a mess it's going to be harder to find things so yeah i think it's a good subject to talk thank you very much uh priyank says yes loved it thank you so much this is so helpful you're the best thank you very much for appreciating my work and i really hope that it helps you and yeah let's learn together so here we have application uh on the left running on android on the right running on ios this is the home page uh whenever you get uh whenever you open the application on the bottom we have different tabs that we can move around at the moment we can move around but we are displaying the same component because we didn't implement those specific pages because of time constraint however in the explore page we can uh search for a place that we want to go so let's press where are we going here we can write we can start write for example tenerife and we can select the tender if you from the auto suggestion that is powered by google and this is like the autocomplete autocomplete feature let's do the same on ios here on this screen we can set different uh number of adults children's and yeah infants the same we can do here plus minus if you press a lot of time on the minus it doesn't go below zero and then we can press on the search and search come on android is a little bit slower as you see uh here first thing that we see is a list a list of properties that it found now it renders dummy data and you can scroll through this list the same way you can do here and also you can press on the list and it will open the post page and here you can display more details about that accommodation like a long description a form or a button to reserve it and so on the same way on android let's check if it works let's press and wait until android loads yeah we see it here we can go back we can go back here and now uh the cool thing about this project is our map which i hope works on android because i didn't test it yet so here our map displays um all our properties uh with custom markers and we designed them uh by ourself the way that our markers are displayed on the map and this is very cool and it gives very nice nice touch and if you have a specific design for your application you can have like here like your colors or for example prices or uh instead when you do like for example uber you can have a car and so on like you can do a lot of things here in our case this is the prices on the map you can you see the the places here at the bottom and you can scroll through them and whenever we scroll here our map automatically updates and it displays which is the active element on the map so here you go here we see that this is the position of this on the map is here that's really cool because uh it's synced with the map and the flat list is synced and also whenever we press on an item here the flat list displays the information about that item it updates automatically and whenever we press on an item we see the page of that item we can go back and search uh the next one check the next one go back it's still here so you don't lose any data yeah this is i think very nice and user experience let's have a look if on android it works it's quite slow but it works it changed on the map we press we see the accommodation page we go back we can yeah scroll press on another one it changes in the map and so on so yeah guys this is the application that we have built during the previous videos if you enjoyed it please consider subscribing to my channel and drop a like uh and join me next week where we will uh develop a backend of this application so we will have a full stack working application that will be probably ready to deploy if you are developing something similar and yeah a lot of people use this as a learning opportunity because using these clone builds uh you experience the development of a mobile application from start to finish and the next thing would be like to deploy the application so for the backend we are using aws amplify uh and we are gonna implement authentication uh a graphql api storage and more cool features so uh yeah don't forget to join uh next week also on friday at the same time depending on your local time zone and we'll be here streaming and finishing this application i really love aws and how easy it makes to uh to implement some of the features for example authentication uh is uh three lines of code in your setup you write three lines of code and you have full load authentication flows registration screens authentication screens forget password emails email confirmation and so on so that's really awesome so um yeah thank you very much for watching let's get into a q a if you have any questions right now during the live stream and if not we can do a git add git commit minus m uh post page post page and let's do a git push so right now everything that we have been developing so far you can find it on uh the git repository github repository sorry and uh it's github github slash 7 vadim slash where is it airbnb clone elevation is not shown on the droid phone yeah that's interesting let's see yep yep yep i see weird that's weird and that's a great time to find about that um yeah as i was saying you can find it here on github simon vdm airbnb and yeah i pushed everything right now uh let's check but i think it's not about elevation it's about shadow [Music] shad shadows react native shadow android react native shadow android i think i will uh close our io no let's leave it yet how to set shadows my voice come on i think elevation one render shadow in android without installing any fair part c okay why it's not working in our case one way to get shadows for android is to install recognitive shadows i don't want to do that i'm pretty sure there should be something easier elevation we have elevation why [Music] components post carousel item style here we have elevation 10 if i do one will you work nope no why is that let me try to just add it to something else to be sure that it's not because of that one i don't know image yeah but that's interesting oh i think that it displays but it's not uh so if i remove elevation no it doesn't do anything no changes save yeah it doesn't change anything elevation position relative maybe because it's in a um inside maybe is because it is inside absolute component uh search results map here map map map if i remove these ones i'm not sure how it will render and where are you i'm gonna comment out the maps so this is how how you debug here is a quick look into how you debug information scroll to index should be [Music] let's do it our way uh with 10 no height 10 percent 10 percent yeah i think i'm quite let's see map it's not there right yeah so i don't think i will be able to solve it right now but i will definitely let you know guys probably in the discord channel how to do that and i'll check that afterwards because i'm pretty tired right now and it's definitely something that i'm missing but that's yeah i i know that shadows are a problem on android and you need to uh customly do them uh somehow so yeah i will i will let you know about these shadows on android okay so let's see our questions react native has future of course it has future i am using it a lot of companies are using it there are cool updates about rack native so yeah definitely okay would you show how to release react apk um yep i i was thinking about that's the only step that we are not covering yet of how to actually release the application on market um i would try to either do a short video about that or to do it in one live stream but as you see that this live stream takes like three hours and if i go into more details like it's gonna be take me like five to six hours and i won't have a voice after that i'm actually planning a 12 hour stream so if you are interested about that um yunnan thank you very much uh who invited him to make a long stream from the beginning till the end with the release phase of the upcoming plus in the comments okay alexandra you don't think about my health right so yeah i'm thinking about long streams uh a one long stream i don't know 12 hours that's very it excites me a lot but i need to prepare for it for a long time and to think about one idea that i can take start from the beginning till the end and publish it to the market um let me get some water uh next friday uh o l a what is that i i'm not sure about o l a elevation is no okay uber app yeah it's on my list uber a lot of people are asking for uber it's going to come rack native or expo uh if you are a beginner i would definitely recommend expo start with exploits much easier to set up you will have less things to set up locally it's going to be much easier to start projects and when you learn you'll definitely start a lot of projects like smaller so it it will be easier with expo and then you can get into react native cli because where you need to set up a lot of things manually and so on and um yeah it depends on on the application but if you start with expo you can later reject so you will have you you if you eject you don't have any other limitation after that what do you think about pva application um yeah these are progressive web apps uh i think that this is a very nice a very a very good trend and i think even a lot of popular application uh web application and websites have a pva and also my blog is a pva so you can install it as an application on your phone and um yeah it's it's it's really powerful i don't know um you um when i was looking into the pvas at that time i think it was like one or one and a half years ago at that time there were still some limitations so i'm not sure right now if we improved on that and have more integrations because if you need like uh i don't know like working with camera with files with stuff like that then pva is not that powerful uh because you have these limitations but for simple for example for a blog for simple application with just display content pvas are are really awesome uh okay let's see where i'm lost where i am ci cd for react native cicd for react native uh yep i can give you some recommendation on that we have vci cd for our red native project at my startup and it automatically builds it automatically pushes to google play so far and we are using um how is it called um let me just check and and tell you how is that service called come on i forgot really i need to sign in gitlab come on i cannot sign into gitlab yeah oh yeah here here is the sign in button wait a second and i'm gonna check in my project how is it called i have a very short um short memory oh multi-factor authentication where is it here it changed and we go to 15 new mobile no not this one where is it where is it with him get lob no how is it called man no that's that's interesting i cannot find it pipelines oh you know what let me uh is it here yeah here oh is it cold fast lane yep fast lane so this is the the tool that we are using to build and to deploy everything and we just um here we just have this gitlab ci set up with stages to build the application to deploy to market and if you push to master it will deploy to production if you push it to develop it will push it only to internal tests and so on when will you cover video recognization bot what is that uh thanks a lot for your videos uh thank you very much for appreciating that i really um i'm happy that you like it what's the next ui design uh i think you should vote between what was the most popular request uber uh e-commerce um yeah i think these are the top requests uh which technique ui library you use react native paper or other ones i try to design everything myself however i don't recommend that i usually recommend using one library we are using the react native elements but it's a pretty lightweight library and there are there aren't a lot of pre-made components so okay guys uh i think that uh it's time it's time to to take a break and to to to eat something and yeah thank you very much for joining thanks everyone who has joined this during life uh thank praying for the donation and um yeah if you found this valuable please consider subscribing to the channel smash the like button uh and let me know down below what uh would you like me to build next and i'll take it into consideration write down do you want uber or e-commerce because people are uh torn between these two so uh yeah guys as usual take care stay hydrated

Channel: notJust․dev

Views: 67,767

Keywords: vadim savin, not just development, notjust.dev, react-native tutorial, react native ui design, react expo, react native live coding, live coding, javascript, typescript, react tutorial, react native, javascript tutorial, programming, react native clone, react native app, react native for beginners, learn react native, react native project, react native project tutorial, react native tutorial, build airbnb clone, airbnb clone react native, airbnb clone tutorial, airbnb clone

Id: 2zy2qX1eR6E

Length: 199min 5sec (11945 seconds)

Published: Fri Dec 18 2020