How To Build the AIRBNB map with React Native and Expo | DEVember Day 5

what's up nojz developers welcome back to demember a month-long marathon of react native tutorials every single day today is day five and the topic of today's video is going to be building the Airbnb maps in react native and Expo so what will we learn we will learn how to use maps in react native we will learn how to render custom markers on the map and also how we can synchronize it with a bottom sheet in order to render the list of all the options on the map from the user perspective this is going to be the result we're going to have a map and we're going to have custom markers with prices um placed there we will also be able to swipe through the list of them and when selected we will see them uh here below the screen before we get started let me tell you a little bit more about demember as I said this is going to be a 24 days marathon of reative tutorial and every single day we are focusing on one specific independent feature today we're doing the maps and in a moment I'm going to show you what we have managed to do in the previous days everything is here on our YouTube channel so make sure to subscribe to the channel not to miss any future videos and if you have ideas we also created the idea board where you can submit ideas vote for the ones that you'd like to see me Implement uh the link you can see it here or find in the description below and actually the idea of today's video I took from idea board and this was one of the most popular one uh around tracking items we seeing things on the map but demember is not just about learning it's also about giving because during this event we are organizing a fundraiser called education for children and during this fundraiser we are supporting the efforts of save kids organization uh in Prov providing accessible education to every child in the world so if you'd like to donate and help help with Vis cause make sure to do so somewhere here on YouTube We have set it up here in order to be easy transparent all 100% of a donation go directly to the save uh the children organization we also have set up some incentives so this is as a way to for us to say thank you for your contribution and I would like to say a big thank you to roio uh roel is here of course hello uh Val and Travis for your donations and if you cannot uh donate the easiest way you can contribute is by simply subscribing to the channel because during December for every thousand subscribers that uh we will get we will donate $100 anyway back to our topic so let's get started with our Maps here is our application hello everyone who is joining us live how are you doing guys and let me quickly update what we have done in every single day in day one we have set up the project with Expo we connected it with GitHub and also we rendered this list of days at two column list in day two we have implemented the animated onboarding screens this is useful in any kind of application to improve a onboarding experience over users in day three we learn how to use markdown in order to uh render content in a easy way without having to to code a lot of it of it so we simply added the markdown editor but you can update in real time and yesterday we have implemented the splash screen animation that you can see here and if I restart the application you see that Netflix the application having this animated splash screen which adds a really nice touchup to to the experience so now is day five let's go ahead and uh I'm going to switch to the the link to the GitHub repository you'll find also in the description of this video and uh go ahead and clone this repository inent switch to the branch that you want to start from every day has the end and the start checkpoints so today is day five and I'm going to do get checkout day five start this is the starting point for day five and then we can do npmi to install the dependencies and when ready we can start our development server with npm start hey rodne how are you doing Navin hello so here is the application as we see it's run running and we are using exper router so if we go to the source application days directory this is where we keep the screens for every single day let's go ahead and create a new folder for our day five and I'm going to Simply duplicate the index from day four to day five just because I'm lazy let's see what we have here uh we have here day five Maps the title Airbnb maps and here we're going to navigate to day five Airbnb we're going to create a new go to Airbnb map so we have a button there let's restart to see what's happening let's see if we go to page uh to day five yes we see the title the markdown title here and if we press on this button we are going to be redirected to SL day5 SL Airbnb so let's go ahead and add this file in day5 Airbnb TSX and initialize it with an empty component just like this let's call it with capital Airbnb screen now if I'm going to to refresh go to day five if I click on go to Airbnb map we are on this page so from now on we are going to work in this component perfect so what library are we going to use we're going to use Expo Maps which uh actually integrates with react native Maps but the cool thing is that they are are including the native code of this package inside Expo go so we don't have to do anything extra in order to use it we can right away use them maps in our Expo goal and it's even easier because we don't even have to uh generate an API key while we're still in development so here is the full documentation of react native Maps library that we're going to use we're going to need the documentation when working with the library but when installing it in Expo I usually like to look at export documentation to see if there are any extra steps that we have to take and here in the installation we see that the installation process is quite simple we simply have to do npx Expo install react native Maps so let's copy the command let's come back in our application and let's in a separate terminal let's run with the npx Expo install command I think I already have some some packages yeah the rock native markdown display that messes with dependency so I always have to add the Legacy perer deps all right the package has been added let's go ahead back in our export documentation and see how we can use it well all we have to do is import mob view from R native and render it on the screen with some Styles let's try to do that together so as I said we have to import map view from react native Maps now instead of a text let's go ahead and render the map view uh probably we're not going to see anything but if I give some style here like a WID 100% and height 100% to take the full WID and height of a screen right away we see the maps and we can even interact with it perfect so that's uh that was quite easy uh we simply had to install map view and render it in our application and because we are using Expo go at the moment expoo is configured already with a pre predefined um API key so we can have it in development easy to start later when you go to production you'll have to generate an API key from Google and set it up and follow uh some additional um steps they should be documented here deploying up with Google Maps here are some instruction for Android and for iOS but we're going to still be in development so I'm going to rather show you how we can work with maps how we can render things with maps and um the documentation will help you if you want to deploy this to production um anyway let's go ahead and generate the styles styles and do them here const Styles equal Styles sheet. create and here let's do map I'm going to copy the WID and height from here and in our component we're simply going to access styles. map now everything is working back as it was working before nice um I think that on this screen maybe now we can leave it but later we can even hide the header of the screen for example if I do stack do screen and if I say options header shown false that will hide the header at the top and the map will be like full screen uh The Weave of the full screen what's going on here if I go to Five go to airbm Maps yes now it's full screen of course you can um you can adjust the width and the size depending on UI so for example if you don't want it full screen you can set it like with a 200 pixels maps and have below like with time title and some other details that's up to you like it's really configurable but in our case if we look at the screenshots that we want to implement the map is actually full screen yes at the top we also have like a header with some information but we will keep it simple for now let's go back to the documentation and see what else do we suggest here well on the Expo documentation that's it now we're going to switch to the actually Rea native Maps documentation the library that we are using and see what else is possible for example you can uh have an initial region in order for the map to be focused on um on something specific that you want for example maybe you only want the application to work in a specific City so you can put the initial region there or you can take the user location and center the map around the user or around some specific Target about markers markers are a very important part of of a map because usually what we need the maps for is to show some some data on the map some markers some items in Airbnb that apartment shown on the map on their location so a marker let's go ahead and import it from R native Maps as marker and in order to render the market it should be a child of the map view in order for that to be a child of a map view we need to switch from a self- closing tag of a map view to a normal opening and then closing tag of a map view because now we can put here inside a marker for example a marker needs the coordinate to know where to display it so if I'm going to give it let's see what data coordinate uh for example latitude and longitude as an object let's try that and if I send that coordinate where we are actually centered on the map we see that in the middle of the screen we get this marker a pin I can zoom in and you will see it properly oh here it is I can press on it now nothing happens but if I give this marker for example a title saying one bedroom apartment now I think it should be able to select it and see a title not sure if on Apple Maps that's happening maybe I can give it a description as well hello there let's see five Maps yes now if it has a title in the description if I press on this marker I'll see the information one B apartment and hello there and like this you can render as many markers as you want so here I'm going to change a little bit the the place and we will see yeah this is a two-bedroom apartment we will see that all of them will be displayed on the map but how do we render a list a dynamic list of markers usually we don't have a predefined list of markers if we are working with a lot of data usually we fetch data from a server then we have a list of items for example in the case of Airbnb we might fetch all the available places for a specific date and as a result we will get information about the place itself and also information about the uh location in form of of latitude and longitude then with that information we can render a marker for every single single apartment uh based on its specific location so we will need some data here let's go ahead and ask some help from chbt to generate us some dami data so what are we going to ask him uh I am building an Airbnb clone for focused on the map give me an array of items or apartment with um to render on the map for every item we need what do we need let's look at the screenshots first of all we need the location uh in in form of latitude and longitude let's do ID latitude longitude what else we need the price uh that's going to be displayed on the map uh maybe a title title Stars rating or number of star and image for the location uh use only let's specify the location that we want to use what's here what's the location here I think is California or San Francisco for the image use a publicly accessible image URL let's see what it will give us output in raw Json format okay okay okay latud longitude 37 minus1 122 yeah I think it understood the location it understood that San Francisco is around this location and as we can see all of them are here uh let's see if the image is actually publicly accessible because we that I always found it it's placeholders h I hoped for something better but at least we're going to have data and then we can start working remember to replace the image URLs with actual okay anyway let's copy this this data and let's go to our application uh where should we store it well let's go into the assets and let's create a new folder for data and here I'm going to create a new folder for day five and inside there let's create a file called um apartments. Json okay here is our data in apartments. Json now let's go ahead in our Airbnb screen and let's import that data we're going to import apartment from assets SL data slash I think we have that assets yes assets I think I have to restart my typescript server day five apartments. Json okay let's go ahead and simply console log this uh array of data here in our compon component just to make sure that what we are working with is what we expect so let's look here yes indeed that's an array of a lot of objects so the data from our apartment Json was imported correctly now what do we want to do is for every apartment go ahead and render one of these um markers on the map and later one we're going to use like a custom like uh marker to show the price for that apartment but uh back in our Airbnb clone we have an array of items an array of apartment in this situation in a lot of application this will be quite similar you're going to have an array of things what we have to do is inside our map view is to Loop through all of these items by mapping over them and for every single apartment we want to render one mark marker so by doing a map over our Apartments we are mapping from from objects inside this array two markers on the map I'm going to have to come on where is it uh here one more now we're going to see a lot of markers but but we are still using hardcoded latitude and longitude let's try to use the apartment do latitude and apartment. longitude sorry for that apartment. longitude and now they should be around one two three around five yes we should see five markers on the map and here is the fifth one and all of them now has a has the same title but if for the title we would use the apartment dot do what maybe title what's going to happen now yes spacious to bedroom apartment Charming sorry modern apartment and so on perfect what's next the next step is yes we have these markers they are rendered on the correct position but we want to render something custom for them where is my vs code here yes we want to render some custom markers for them where we display the most important information so for Airbnb that's the price of the item how can we do that well let's look at the documentation uh we can render markers with custom images but what we want is to render a marker with a custom view so yes they are saying that this has some performance implication and we need to make sure that yeah we are trying to to keep keep them as lean as possible let's see yes if we open the tag If instead of having a self-closing marker and we actually open and close the marker we can add here things like a text where we write the apartment do price uh we can also do a e sign but we can maybe dollar sign uh yes uh I was thinking if it works on Apple Maps as well by the way by default on an iOS the map map view will use Apple Apple Maps and on Android it will use Google Maps so if you're working on Android you will see see a different type of map but all the functionalities almost all the functionalities will remain the same however on iOS you have a option to use either Apple View Apple Maps or Google Maps in order to switch from Apple which is the default to Google we're going to import provider Google and we're going to Simply send it to our map view as provider provider Google Now our Maps is provided by Google as you can see in the bottom we have a bit of different styles the even the markers are different so if we wouldn't have anything inside the markers would look a little bit different yeah something like this which you are familiar with from Google Maps but as I said we need a custom component now we see like these 200 the prices on the map but but it's very hard to see them so let's go ahead and uh put them inside a view and style this view for example we want to style it with a background color white with a poding fre um it's most probably will have a border border with one border color gray okay uh let's round the corners of these items maybe I should make it a little bit larger border radius 20 and the podding I will increase it the ping horizontally in order to have more space horizontally there is there is the opportunity to have a little bit more space there yes for the text I can simply do style let's do font let's try with a font family we have some custom fonts so maybe we can use an inter uh medium do we have something like that inter bold okay okay I like that and the pting can be larger like five and eight maybe or simply five no should be more 8 18 10 yeah that looks better uh let's go ahead and maybe extract the inline styles for example or even we can extract the whole marker component uh that would also work should we yeah let's go ahead and extract it to a custom component because this Airbnb screen will become larger as we add like more uh Lo to it stuff like lists selected one and so on so in order to to keep our component clean we're going to extract one marker component to a custom component and here we will simply render it for that we're going to go in the components folder let's create a new directory for day5 and here we're going to have a custom marker. TSX here let's generate a simple component that instead of rendering a view will render what we already created here for the marker like this I can even cut it from here and use it in the custom marker and as we can see we need to import the marker from rack native maps and we need information about the apartment well the information about the apartment we will send it through properties so let's just Define it here and that's it now back in our Airbnb here we can simply render a marker a custom marker imported from our components and send there the apartment information apartment why do I is it apartment with one p I always thought it's with double P anyway in I will update it here as well then now back in our Airbnb here if I refresh hey Cataline how are you doing yes I'm learning relearning English anyway so now our markers are working uh properly but they are a custom component so all the low detail all the low level logic of implementation it's here and our Airbnb screen now is a little bit cleaner whenever we are doing whenever we are looping through an array of items and rendering an array of components it will um we will always receive the warning that these components need needs a key yes this kind of warning each child in a list should have a unique key that's for uh R optimization so when we have large lists we need to provide this key and it should be unique amongst um other items in this list usually the best way is to take the for example an ID of the data that we are rendering so because our apartment apartment data has ID we can use the ID as a key now we should fix that issue yes perfect what will happen if we press here well we're going to still see the the title and description I don't want that so for that reason we're going to probably delete the title and description from the marker itself because I don't want to open anything on top of it because in Airbnb how it happens when we press on one of these items the the selected room and and with more information is displayed on at the bottom of the screen as we can see here so let's do that let's start by creating a component that will render that at the bottom of the screen and I think the re native Maps also have something to say about rendering overlaying our components on the map so overlaying components on the map should happen using absolute position and the component that we overlay should not be inside the map view it should be a sibling okay so that means that in our Airbnb here a sibling to a map view for example this one will be let's do here display SE selected apartment so let's start designing it here and maybe later we're going to exct export it to a custom component or let's start right away with a custom component not to waste time later to move it uh so this component that will render one apartment let's create it as a separate component in our components folder called apartment um I don't know list item TSX let's generate the boiler plate again I'm using double P for some reason and back in our screen let's render this one apartment list item in the apartment list item we will definitely need the data about one apartment so apartment data let's now simply send where the first element from our from our array so apartments at position zero we don't see anything but as soon as we will make this absolute we we should see it on the screen so let's start with a Styles sheet let's create it here and let's do the following so what do we have we're going to have a card here okay okay a card and maybe a title let's assign the styles of a card to our root View and for the title as well let's go ahead with a background color white just to see something and let's position it absolute if I do that our item is positioned in the top left corner so it's visible here like in this corner but it's very small so if I'm going to do instead of aligning on the top align it on the bottom and maybe not zero pixels from the bottom but maybe like 50 pixels from the bottom and we can also does it have a background color I don't know oh yeah it has and I can do left as well uh like 10 to have some space from the left and right 10 here okay so we have this item for the title we can make it a font family inter bold will apartment info listed be a carousel sorry I may have missed how you plan to display it uh actually uh at the moment the the Airbnb application does not have this as a carousel I remember in the first Airbnb clone that we have done on the channel this component was actually a carousel so we could swipe left and right through the items and it was automatically synchronizing with the map but now it's a bit different it simply renders this one and the all the items are rendered in a list in a bottom sheet navigation like on the first screenshot here on the right so no we're not going to do the carousel or maybe I don't know if we'll have time but yeah today's is a little bit harder for me I received in the morning a bad news but where I we're doing it and uh yeah hopefully I'll manage to do it till the end anyway so if I if I'm a bit low energy today there there are some reasons uh what are we doing why do we have two cards here what's happening what F weird why do we have two of them look if I do red apartment list item am I tripping in Airbnb I only have one of them okay that's super weird thank you cathalene everything is is okay it's life okay that's that's trippy styles. card oh I did Styles card on the text thank you very much yep white and here we had right and left 10 as well okay perfect what else do we have there let's try let's try the image and for the image we're going to render an image component imported from R native image and let's go ahead and start with the source thank you guys for the help uh source so the source URI we as we saw chbt generated some placeholder URI uis um but we yet don't have the information about the apartment that we are rendering let's go ahead and receive it for the property is apartment and the URI is going to be apartment dot image by default we we're not going to see it but if we add some styles to it styles. image and we and if we say that the whff should be something fixed like 150 pixels and we want it to be rendered as a square we can do that using aspect ratio of one and both width and height will be equal if I go here yes we have a image and the title um in order to put the image and the title into the same row the card will get the flex Direction row and we will also most probably remove a padding from the card because we want the image to be flush with um card borders and we are going to add uh another view for the content like everything that we see in the we have the image and we have the right panel inside this card so let's add a view here uh with styles. write container the right container will have this ping in order to have to to add the spacing and yeah if we're going to have like some other text like a description maybe for the title we can already use it from dynamically from apartment. title and then what other information we have here so we have a title we have a price let's go ahead and add the price below apartment. price just like that and for the title we can have something like a margin bottom from 10 to add some spacing between them the on this screenshot I see that the price and the and the ratings are looks like the footer of our right panel they are in the same row on different sides of the screen so let's add another view around the price that will have a style of our footer because besides the price we also want to render something about the stars for example let's just simply do stars is it stars or rating better and then in Brackets we have the apartment. Stars how many stars should be number of stars okay so we have a data here on the screen but we need to render the items inside our footer in putter in the same line so let's do a flex Direction row they are in the same line and I want one the the price to be on the left and the ratings on the right I can accomplish that by saying how do we want to justify the content inside this uh row we want the space the available space to be put between the items and this way they are moved on two different sides of the screen also what we can do is the footer container if I add here a background color you're going to see that it comes right after the the previous child if we want to make the footer container always be on the bottom of the screen we can accomplish that either with margin Top Auto and this will put Auto will automatically use them all the available space for the margin on the top or we can do self align self flex and and this is using oh no flex and doesn't work doesn't work so I'm going to stick with the margin Top Auto and I'm going to remove the background color red perfect perfect uh for the ratings if we want to to to display that is there a unic code star character or will I have to use a yeah there is a uni code star can I copy it I'm a bit lazy to to find the and render a proper icon so a uni code star actually works as well okay looks good uh maybe a description will not hard here below the the the title but I don't have a lot of information to put there say at this apartment we see that the description is if it's too long it goes um past the screen the the size that it uh it requires and that's happening because the description is pushing the the right container so I'm going to put actually the this information below the description is pushing the right container because the right container doesn't have like we didn't set like what's going to be the maximum size so I'm going to show you that by using a background color red and you're going to see that the right container now is too uh large and it's it's pushed by the description because if we shorten it it's going to come back to normal however if we say that we want the right container to be Flex one which means take all the available space but not more uh in that situation it will not push uh past that limit and it will actually go from a new line uh the description will go from a new line maybe the description color should be gray okay looks good looks good looks good price as well maybe a font family inter bold and do they also say night wear but the Knight is not bald H oh well it's going to be okay like this okay so now our basic UI component is ready um I forgot a very very important thing a very important thing on our card the Border radius 20 yes now it looks better and as you can see on the right side it looks good but on the left side we see that the borders remain Square actually they didn't remain Square because uh it's simply the image is overflowing on top of it if I remove a image both all the borders will be rounded we can uh fix this issue by saying overflow hidden and everything that overflows this container in terms of sizes it's simply going to be hidden and the images the image that overflows is hidden now we see properly the the container maybe we can even increase to 70 from the bottom to also see the Google sign perfect with the Flex grow work to that uh instead of a margin instead of the margin Top Auto on the flut on the footer a flex grow what I don't really know if that's going to work anyway the UI of this component is ready and I I think we will uh go to the next step to dynamically render the information about the apartment that we select here on the list for that we're going to go back to our uh Airbnb screen and because this is a dynamic value like which is the currently selected item and which should be rendered in this screen for that we will need a state variable so let's import use state from react and let's say selected apartment and set selected apartment use State initially is going to be null because initially no apartment is selected and if no apartment is selected I don't want to render this at all so let's go ahead and conditionally render the Department list uh list item only if it is selected and we can accomplish that by having um by using the end operator inside the corly brackets inside the GSX portal and if this is a truthy value basically if this has value it will render the component if it's a falsey value and N initially will be a falsy value it will stop here and it will not render the component so now we see that we do not have any items on the map and if I press on something it still doesn't work because we never set the selected apartment when should that happen that should happen when we press on the custom marker so let's go ahead in the custom marker and see what we can send here we can send the on press right and what we can do is on press we can call the well we can simply call the on press that we receive from the properties and this I think I will have to to sooner or I'm ignoring the types but sooner or later I'm going to have to do that so basically we are receiving for props uh call back function on press and we're simply giving it to the marker now from the Airbnb here if we send to the custom marker here on press what should we do when we press on this item we should update the selected apartment with the current apartment that we are rendering now if I press on one of these it automatically appears here if I change it it should change hopefully maybe it doesn't 120 oh yeah because in the apartment list item here I'm still sending the first item from the array instead of that I want to render a selected apartment and now when we change it actually changes the data that it renders here as you can see there is also like on this apartment list item a x button but I think I'm not going to implement that yeah so just like that we have a map rendering custom markers um rendering custom markers and whenever we select them we have a custom component that displays more information about that item and you can also have a one press event on this component so when you press on it it will redirect you to the details page perfect now for the for the next part of the tutorial is we want to have two ways of browsing um listings one of them is going to be on the map but sometimes you want to view them in a list B format for that Airbnb implemented a bottom sheet navigation so which you can drag from the bottom it comes on top of the maps and it allows you to scroll through the items in a flat list to implement that we're going to use the bottom sheet again let's look at the bottom sheet Rec native bottom sheet uh uh package and let's go ahead and install it in our application we are using Expo so let's go ahead and copy the Expo install command and let's run it here it should start with npx Expo and for me it should also have this Legacy peer depths now that it is installed um we should also make sure to set up the gesture Handler but we already work with that and it's already set up let's see in the usage how we can use it so to render it we simply import the bottom sheet from from the library and we render some components inside let's try that out and let's use it inside our not custom marker but Airbnb TSX we're going to render that below the selected apartment so let's start by importing what happened there I import I installed not what I have to install reanimated andjust your Handler okay I think I'll have to Simply install this one so I installed the its dependencies but not the actual package so npm Expo install we Library name oh boy so let's see now yes now it has and let's see how we we should import it yeah it should be bottom sheet from there uh for for ra I'm going to keep it simple for now snap points this is important snap points is an array of values where we want our bottom sheet to stop at so let's copy them from here and we need to import also use memo and what else we also have this on change that is not very important at this moment so I can comment it out from here Styles content container again I don't have anything there so but it's not going to be a problem I just want to see it if it works so five go to Airbnb yes we see the awesome text our bottom sheet is open here and it's open at index one what does that mean it means that it will open at the position from the snap points at that index so index one is 50 and as we can see it takes half of the screen we cannot drag it up more to to the top because there is no value above 50 but we can close it to 25% if we want to let it open almost full screen we can do that with another value of 90 here and this will yes open 90% of a screen and we can swipe as well okay let's see what we need to do there that one is rendering below we we'll figure out about that Sylvester is saying great stream so far I have a question what is considered best practices for for importing components like scroll View and flatl should I import from react native react animated or Expo when available um in most situations you would import them from react native but there are good sit there are some situations where you would want you would have to import it from somewhere else and specifically in our example we're going to have to use a custom flat list imported from bottom sheet this usually is is an extension extension of a default re native component that is adjusted to work in specific contexts in in a this situation that we're going to work today a normal flat list will not work as desired in a inside um a bottom sheet because there is scroll gestures for the bottom sheet itself and there is also scroll events on the flat list and when doing that uh it it's it's a little bit buggy that's why we will use a custom not a custom but a bottom sheet flat list imported from here that knows how to work inside a bottom sheet so usually follow the documentation of the packages and unless specified that you need to use something else keep using the the default ones um for example you you will start even like with animation you'll start with a normal View and whenever you want to animate that you will be instructor or you'll have to transform A View to an animated. view anyway here what do we want to do we want to render a list of Apartments the thing is that we already have a component that can render one apartment list item uh let's use that component to render it inside a flat list inside our bottom shet here so I'm going to leave a text here because maybe I'm going to add some title and below that let's start by using a flat list imported from react native it's going to work but we're going to see like how um when it's bugging we're going to switch to a custom a proper flat list but to get started it's good like this so the data that we want to render in this flat list are all the partments that we imported from the Json or that you fash from your back end then we have a item our render item is a function that specifies what should be rendered for every single item in that array this function also receives the item which is one property one item from the array in this case details an object with details about the apartment and what we want to render is this UI that we already created the apartment list item it's not going to work by default because it has a position absolute so we're we're going to think how we can make it more reusable but let's just get started with this one s here a select department and restart go to Airbnb yeah it's not working properly because the apartment list item has this background of his this position absolute if I'm going to comment that out we're going to see them in the list but we're not going to see properly on that selected screen so what I'm thinking that we're going to do is we are going to have a partment list item as a non-absolute component and in the place where we need it as absolute I want to to have the the bottom sheet closed but I think it's not happening with 0% I think it has a property closable zero is invalid enable pen down to close yeah I remember that so on the bottom sheet I can have enable pan down to close and if I go here and close this one and if I select something we're not going to see the the selected apartment list because it is not inside the it is not no longer an absolute position view as we said we don't want that because we want that component to be reusable so we're going to Simply add a view here around our apartment and only where we display it in the selected part let's close this one here and this view we can style it with the absolute position I mean we can bring everything from here let me just uncommon this let me add one more set of brackets and now it works because first of all the view you the parent the container is absolute and the partment list item is not and if I'm going to open up the this one this one also works uh to manage the spacing between this one instead of doing anything with margins inside the apartment list item which we can also accomplish but this can have different behaviors so in this situation it might be good but if we look in the other cases it adds a necessary margin here so I would I like to I prefer to keep like these components flush without any margin in order to allow them to be used in any situations and rather uh use a gap property on the parent component where we need gaps so for example in this list if I add here the content container style and if I add here a gap of 10 that will add 10 pixels gaps between items and also if I will add here ping 10 it will add it around the item so there is on the left and on the right perfect okay okay let's go style view style prop adding multiple view views will cause performance issues so keeping everything as Lan as possible will make it better deeper you go in render three the more whe Android device will suffer is that are you referring to to to what oh to send that to the to send the Styles down to the apartment list item to override the Styles uh yeah that that would also work we could instead of using an additional view to wrap around this component we could send custom Styles here and inside the apartment list item to merge them here uh maybe I can show you how we can do that hopefully it's not going to be too confusing but what we want to do is instead of having this view we can have um container style and here we can add this custom Styles yes at the moment it's not yet going to work because inside our apartment list item we need to receive this container style which we can also type here as our apartment doesn't have a type yet so I'm going to do the scene I'm going to do any but our container style uh is going to be view style now if we give it here then we can take this container style and use it together with the predefined card Styles and I'm going to do that using a an array and here we're going to do container style but I will also make it optional and if it's not provided I'm going to initialize it with an empty object and this way now the selected one works because it sends additional styles that are being appended to this View and inside them inside our list should also work even if we don't send anything it will only have like the default ones that we Define inside yeah perfect that's um that's uh a little Improvement in the performance good to know so yeah Cataline is also suggesting to type the apartment here with maybe I should simply actually Define the types so if I go to not even sure like how to structure everything not to be confusing because everything is by days um I'm going to never mind it's going to be like this maybe indeed only in the apartment list item I can use the type of I can import the all the apartments from our assets data apartments and I can say that one apartment should be the same type as this apartments at position one and now if I go back to Airbnb here and hover over the apartment list it will tell me what exactly is this field and if we forget it like it's going to have proper typings and the same with container style if we for example have some typos in a style uh without having this view style here on on the property we would not see the error so that's improves a bit them also worth mentioning that uh the word matters because it will override what is already inside style card for example if style card says with we 100 and container Styles plus weave 2, 200 yes that's true when having this uh approach of sending uh Styles uh that you want to overwrite default styles the order of them matters for example in this situation because container style comes second properties that are common in both these objects the the ones from container Styles the ones that are coming through properties will take uh priority basically they will override what's already in the card for example if in the card we have background color white and in the selected one we will send here background color red red this red will take uh will be used because it overrides the background color from the red if you don't want to override things you're going to put it first the one from from properties not sure if you would there is a situation where You' need that but maybe maybe there are some things that you definitely don't want others to override and they can come blast and this way even if we set the background color red here is going to be used from the card from the second property but I'm going to let it the second to allow us fully to adjust any kind of styles on this card perfect uh so back to our bottom sheet and back to the flat list thank you very much Cataline for for the tips um undefine is a valid more improvements we can remove a default by default uh empty object because undefined is a is a valid style anyway uh on this flat list uh first of all on Airbnb you cannot actually close that flat list it only goes as small as showing the title with over some amount of uh places so I'm going to um delete the enable pan to close I also want to initialize it at the first position at the smallest position and the smallest position should probably be 25 is probably too much so maybe at 10 uh in fact uh the best approach for this situation is not going to be a percentage wise uh with because 10 on different screen sizes has a different uh will have a different height we probably will be better to use a fixed height depending on what content do you want to to have there visible so a 50 probably too little 75 as you can see we only need this title there I think this might be enough so let's go ahead and style a bit the title that we have here we're going to do here similar to what Airbnb is doing over 1,000 places yeah and you can actually take the the length of our array which is not exactly right because you will not always have all the places loaded on the client side usually you'd have pagination so You' never know this from the array of data but anyway okay we have over five places let's style this component and we're going to do some Styles dot list title let's do a line text Center text align Center let's do font family inter bold and font size 16 and maybe margin uh vertical so margin vertical I think it should have a lot a lot more on the bottom so margin bottom 15 because when it's Clos we only want to sa this one and I don't even need any margin on the top I don't really like the font Bal there it should be either regular or medium so let me see if I have that Medium font font I have semi so let me use inter semi yes that looks better and when I scroll up I also see them perfect so just like that I think it needs a little bit more space on top as well so maybe oh it's too much how it was probably was a bit better okay perfect um so as I was saying in this situation inside our bottom sheet because we are using a normal flat list from R native there would be some inconsistency when we scroll and what we expect to happen for example if I'm going to uh pinch down really fast in a lot of situations what I actually want to do is I actually want to close the the whole bottom but because we have this flat list we are triggering the flat list animation so we would have have to Target like the top of it in order to close it however if we instead of that import from bottom sheet uh bottom sheet flat list and simply replace it in our flat list with bottom sheet flat list maybe we need this some parameters additional but I think it should work out of a box and if we check right now yeah nothing works probably we're going to have to do some um some Flex one but let's see the documentation not to guess bottom shet flat list uh content container style am I inside of view yes content container yeah I think here I'm going to need a flex one yes and now if I slowly scroll that triggers the scroll inside the the list itself but if I fling down that will trigger the the bottom sheet to to close so yeah about this is a adjusted flat list or an extension of flat list that knows how to properly work inside the bottom sheet context and how to handle the scroll events properly uh to add Flex one to the bottom sheet view uh I think it was here not sure if I still need to do that because it seems to to work properly uh for the selected item I'm going to do a more like a 100 from the bottom just to have it at the top here katal saying thanks V you you make me want to code now you're welcome we're going to do something to tomorrow by the way guys we we talked with Cataline and tomorrow we're going to do a video together we're going to build some interesting and exciting animations uh so yeah make sure to to stay tuned for for tomorrow bottom snap points at position zero very good idea in order to instead of guessing how much space we need to put on the bottom of this one we can take the the snap points of our bottom sheet the first snap point which is our value that is adjusted here will it work string number undefined let's do War a default value of 10 still doesn't work to to work snapo Dot and now if I select uh I think it should be snap point plus something that accounts for the yeah and I can do here if type of the first snap point is equal if it's equal to number then do snap points at 0 + 10 otherwise simply use a pretty fine value of 100 actually oh what's happening did they break uh here instead of this one should be double dots oh I broke everything with a bad okay so we have these basic uh things there are still a lot of ways we can make this more interactive for example when we select one of the items we can automatically zoom in and Center it in the middle of the screen uh what what else Airbnb is doing is when we are opening this one it automatically zooms Zooms in on the on the center of the map and moves it up so it really it's really smooth there but I'm not sure how much energy uh I have today to to implement these features maybe we can do one or two uh let me media how is it called player so guys here is the actual Airbnb if I go on the map so for example when I I select something no it actually doesn't zoom in anything when actually selecting things but when when moving the bottom shet up why are not doing anything it was perfectly working before Oh probably it only works in New York for Spain people like it's it's too much doesn't does it's not worth it implementing it but yeah uh I really like like how it zooms in in order to keep the same amount of space visible on the map when we move this bottom up uh let's see how how easy it will going to it's going to be and I don't promise that I'm going to finish it but we can try let's go ahead and first of all uh see how we can adjust the the the zoom and the center of the map right for that we have here the map view and if we look at the documentation of map view there is a way we can controlling a region or state by sending a region Veer which we can keep in state we can update it and the map will uh will update to to reflect that so let's go ahead and move this inside a const region or map region set map region initially that's going to be use State that's going to be this one that we provided as the initial region now besides initial region here where is it map view initial region let's use the map region but besides the initial one let's also send the actual region this map region not sure if we actually need the initial region when we bind a variable to the region I think we shouldn't need the a initial one and now if I go here it's still going to be um still going to be centered here but if I will change some of the values here as you can see the map automatically updates and the zoom if I'm not mistaken mistaken is uh handled by that Delta the longitude Delta so if I increase here to one that zooms out two that again zooms out and zero we'll zoom in so we would have to play with this latitude Delta and longitude Delta and we will also have [Music] to to to to respond to the event of when the position of our bottom sheet changes so we know what things we need to change now let's see how we can get feedback from the bottom sheet when we are changing the position there is this properties okay animate on Mount style back we need some uh call back functions on change call back when the position changed is it call back when the about to animate to a new position think maybe this one is what we actually need uh I believe that the on change only is being called when we move to a different snap position but we can check that by having the on change here and when this is happening we will simply console log on change and this method will receive a index so let's do index plus index now back in our here on change one yeah it only changes when it moves to a different snap point it doesn't change when we drag it let's look at the on animate maybe it might it will will be the same I think that one has from index and two index from and two from 0 to one so yeah it simply is being called when it starts animating let's see something else animated position animated value to be used as a call back for the position node internally what animated value to be used as a call back as a callback for the position node in internally I think this is when we want to to animate it gesture custom hook to provide pesture event handler which allow Advan and customizing handling for p gesture think that's what we are looking for this is an experimental feature the hook signature can change without okay use G Handler hello hello done let's see what's going on here uh with the gesture events handlers hook default is there a hook provided here use gesture event handler use bottom D handlers custom hook to provide pun events Handler so if it Works similarly to the gesture Handler uh gesture handle equal let's try this one and yes there is handle on start there is also what what else let's see what what properties it has on active on active means that it should be triggered when we actually Source payload context Source payload context so that means there is Source payload and context and if I give a gesture Handler to our bottom sheet doesn't work want to work maybe I need the V to the handle come on expect the zero but got one this is an object and all of them should be there right we are not optional yet still doesn't work maybe they have an example with that custom handle to override the default handle you'll need to handle component when you provide your own handle it will receive animated animated index animated position don't think that's what we need you can use animated index as shared value change map view to an animated map view and send animated as region delay animated index um I'm not sure maybe it will work but I'm not sure this is exactly what we are trying to accomplish because I uh as you can see the come on the maps scrolling is attached to this one so it automatically works if I'm going to do simply by the animated index which changes only on the snap positions yes if I'm going to swipe up it's going to animate and position it correctly but it's not going to have this like real time gestures and I feel that it should be possible by somehow getting like the the progress of Animation or the current position and then based on that animate the the zoom in and out but um oh boy maybe it's this custom handle I don't [Music] know animated index custom hook to provide pesture events Handler which will allow Advanced and customizable handle of for pun gestures maybe this one is a default thing and not something that I'm supposed to use maybe I should simply create an gesture Handler and send it there and I think it should be for the pawn let's try to do that and inside we can send here on begin on start on active come on why it doesn't have pun pun oh uh I am lost I am lost okay it's dot okay okay okay okay pester do on begin that's going to be event let's simply do console log begin pen then let's do one for DOT on active or or what on update [Music] event and here let's do console log update let's see let's see don't have a lot of Hope but maybe use Handler invents is not a function what where I'm using it it looks like no it looks like it wants actually maybe a simple object with on start maybe that's what it needs and the other ones the the handle on active and handle on end no still not handle on start it should be USE gure events Handler is not a function it's an object it should be a function come on type yes it's a function that returns this all right then just Handler is a function that returns an object and let's look here okay it stopped working it crashed completely uh yeah I think I will I will simply give up on on on this feature maybe I'm going to work behind the scenes and show you the solution but yeah today probably is not my day what's happening what can be wrong there uh maybe when I'm doing this all right anyway guys uh this is a homework for everyone to make our map follow the or react to the scroll of our bottom but everything else we have here let me clean up a bit and if we go now to the Airbnb clone yes now we see the the the result of today's video we see a list of markers we can select them and see more information about them and we can look at the items in a list here on the bottom perfect so that was our tutorial for for today this was day five or of our one month long hackathon marathon of react native tutorials uh today was a bit harder sorry for that but tomorrow we are coming with more energy and tomorrow I'm actually going to be joined by Cataline Miron and we're going to build some exciting animations so make sure to subscribe to the channel not to miss our future videos and also consider uh helping us with our found raiser for the save the kids organization to help them support them kids around the world to have access to education you can do that here on YouTube and that would mean a lot to us anyway guys thank you for being here with me and I will see you tomorrow bye-bye

Channel: notJust․dev

Views: 11,407

Keywords: vadim savin, not just development, notjust.dev, react native live coding, javascript, react tutorial, react native tutorial, javascript tutorial, react native ui, react native for beginners, React Native, mobile development, DEVember, mobile app tutorial, learn coding, coding challenge, fundraiser, Expo, React Native Maps, Mobile App Maps, Map Integration, Scrollable Carousel, Interactive Maps, Expo Maps, Carousel List, Sync List with Map, airbnb maps, airbnb clone

Id: ijBG81t0tAo

Length: 103min 19sec (6199 seconds)

Published: Wed Dec 06 2023