#1 React Native Maps Tutorial | Add Custom Marker & Callout | Dark Mode

hey guys welcome back to my youtube channel today in this tutorial i am going to show you how we can implement this app interface in our react native app so as you can see we have a google map in our app interface and in this google map we have several other components so first we have this search bar and then we have this section where we have different categories and we can scroll through those items and these items are button and at the center of our screen we have custom markers and at the bottom we have different item details and these item details are correlated with these map markers so as we scroll through different items our map is centered to that location and that marker is highlighted as you can see that this marker is little bit bigger than rest of the markers right so we can scroll through all the different items similar thing we can do in our android emulator as well we can scroll through different items right and also we can click on any item and if we click on that map marker that item will be present at the bottom so that's how it's working and also we have another thing we have this sidebar and from the sidebar if we choose dark theme then we can see that our map is changed to dark mode and in the dark mode we have all the facilities right so it's all working perfect for our android so let's see for ios this dark theme as well it's working perfectly right so this is what we are going to build today and let me tell you that this tutorial will be separated in several parts and in this part i will show you how to install react native map in our react native project and how we can create the custom map marker and custom call out and in later parts we will implement complete app interface which i have just shown you and let me tell you one more thing that in my previous tutorials i have already shown you how to implement this sidebar this custom drawer contents and this bottom tab navigation all the different parts of the react navigation version 5. so if you haven't seen those tutorials yet i would highly recommend that you go ahead and see those tutorials i will provide a link of that playlist in the description below or you can check that out from the i icon at the top right corner of this video and with this tutorial i'm going to start a new tutorial series where i will try to show you how we can create a complete app like this home profile bookmarks all these screens right now i will create this explore screen and we have other screens as well but i haven't created all those yet in future videos i will create all those things so if you are interested in this kind of tutorial then hit the like button subscribe to my channel for more tutorials like this and don't forget to hit the notification bell icon so that you get notified whenever i post a new tutorial video so without wasting any more time let's get started with the tutorial okay so this is how our app looks and if we click on get started then we are presented with sign in screen and here we can sign in to our app and after sign in we have this explore tab and here we will add google map so we need to install react native maps so here is our react native map package and here we have the installation instructions so if we click over here then we can see this is the command we need to run to install the package so here i have pasted it now let's see what else we need to do now first we will install this for ios and here it's showing for react native 0.59 and lower we will skip that because we have 0.60 and higher here we have the exact instruction for our version so we need to go to the ios directory and then we need to run pod install command so what installation complete then we need to add this line and this line to our appdelegate.m file and also we need to add some instruction in our info.plist file so here in ios we have this info.plist and here we have this ns location when in use uses description right so this is the field and here we need to provide a text which will be prompted to the user when it will request the user to get the access of the location so you can put any kind of text which asks the user to get the permission so i have provided this text to get the permission from the user and then we need to add these lines in appdelegate.m file so here is the file and here i can add this google maps dot h and then i need to add this line and it will be here so make sure this is the first line after this place and here you can test your api key and to get the api key you need to go to the google developer console so let me show you here is the link so this is the google developer console and this is the maps sdk for android and for ios we need this google maps sdk for ios also so both of these sdk is required to run our application in both the platform and you can create new project from here and enable the api for your project i have already enabled the api for my project so that's why it's showing api enabled if you are creating a new project or if you haven't enabled it for your project then it will display a button called enable so you can click on that button and it will be enabled but before proceeding you need to add some billing information to the developer console then only you can use this api so as i have already added those things for my account i can get the api key and add it over here so i'm going to paste my api key now after saving this let's see what else we need to do we have added these lines and now here we need to add these lines to our port file for react native 0.60 and higher right so this is our port file and before this use native modules we need to add those lines so now save it and after saving it we need to again run the pod install command support installation is completed now that's it you made it so we can test it for our ios at the bottom we have a sample code so i can copy this from here and as i am going to add this to our explore screen so i will open this explore screen.js file and here i will add this code and we need to import this map view and provider google and remember this provider google is only for the ios if you are not using ios emulator or if you don't want to use google map for ios then you don't need to use this provider google now save this okay so we are having some error let's close this metro bundler ui and recompile our project again so here we can see that google map is showing on our app screen right now we need to add the package for android as well so let's see what we need to do for the android so here's the build configuration on android now let's see so for react native all versions we need to do this thing and this is the project white properties and that is recommended so i am going to follow this step if you are not using the project white properties then you can follow this one but as this is recommended i will suggest you to go for this step so here we need to add these lines to our build.gradle file and that is located in our root directory that means within this android directory we have this build.gradle file and here we have this ext and within this we need to add these lines so we have already present these four lines which we can see here and then we have this support lib version play service version and android map utils version so copy these three lines and paste it here and then we need to replace these x values with actual values now the support leave version can be the build tool version so it would be 28.0.3 and play services version is by default provided or find latest version so we can find the latest version from the internet so let's see how we can find that so here we have this link to find the latest version of play service version so we can go to that link and here we have many details for many different packages so we need to search for this one so see we have found three search result and for the first one we have this 17.0 version and this is the latest one right other than that we have 16.1 and 16.0 so definitely 17.0 version is the latest one so it's correct and other than that we have this android map utils version you can also find that by googling this so in the google you can provide this android map utils version latest and here you can follow this link here we can see that the version will be 1.2.1 so we can add it over here now save it let's see what else we need to do so this is also for react native all versions but it is only for if we are not using the project white properties as we are using the project wise properties so we need to skip this one and then in the step 4 we need to add this code to our android manifest xml file so i have copied it and it would be within this path so it is android app src main androidmanifest.xml and here we can add this and here we need to add the api key so i'm copying the api key from here and paste it here now save it now close this metro bundler ui process and check this for our android emulator so now i have to login to my app so now within this explorer screen we can see that google map is working for our android emulator as well it's taking little time to load as i'm running two emulators simultaneously and recording the video as well so it's working properly for android now i will close this metro bundler process and i will run this for our ios emulator and here i will make some changes here i will add our custom marker and with our custom marker i will add some custom column with that map marker so for that i will add some styles over here so i am just copy pasting those styles here first then i will go ahead with the actual implementation process so i paste this code here you can see the codes you can pause the video and take the note of these codes okay so now i will add the marker here so for the marker we need to go to the react native maps and here we have the map view and then we have the marker so we have already added the map view and as i have added some new styles so now let's save it let's see how it's looking right now okay we don't need this container view so now save it now we can see that our map is occupied full screen right so as we don't need the container view so we don't need this container styles as well so now it's looking good now we need to add the marker so here we can see that we have the title description image so all of these things we can add to our marker i will use the image if you want to use an icon then also you can use it by this i can prop but i will use an image and i have already added that image in our assets directory so this is our map marker and i will add that so we can use the marker api to use it we need to import the marker api from react native maps and in the marker we also need to provide these coordinates so let me add coordinate and here i will add this latitude and longitude value and for the marker image i will use this map marker png file so it will be required and here within the asset i have this map marker dot png file now save this now after saving it we can see that our map marker is present and with this custom marker i want to add the call out and we have that option also present here as we have this title and description so we can add title and we can add the description now save it now after saving it if we click here then we can see that our call out is present but it's not looking good i want to customize it so to customize it we have another api called call out so here we can see we have this call out component api so within this callout component api we can see that we have this tooltip flop we have this on place and within this call out api we can use any react native component api right so to use that we need to use this as a child of this marker component and here we can use the call out and similarly we need to import the callout api from react native maps and within this call out we can use react native components and for this call out i want to use the tooltip and within this call out we can provide view text images all of those things right so here i create a view and within this view i will create another view which will be with the style of bubble which is this one and within this view i will present a title description and an image so for the title i will add a text and for this text style i will add style name this one and here i can provide a title and then i can provide a description right saved it now let's see so this is how it's looking so now you can see that we have a border radius to our call out section but we don't have the arrow so it's not looking good i want to add that arrow as well so within this bubble view i will add the arrow so for that we need to add the style this arrow and the arrow border so first i added the arrow border and then i need to add the arrow so now let's see so now we can see that a proper arrow is present over here so now it's looking good now i want to add the image so for that i need to import the image api so i can use image here and for the image style i will use image styles this one and for the image source i will use a image from this banner section so i will use food banner one dot jpg now saved it and comment out this description part now we can see that we have the image but it's not looking proper now i need to place this beneath this text so for this i will change this node to column layout so now it's present at the bottom of this text right and if we want this text to appear then also we can do that so like this we can present it right now i will show you how to implement the dark theme in our map so for that we need to style our map for that i need to go to this section and here we have customizing map styles here we have a link for google style generator now open this here we can create style for our map so here we have the standard and we have dark theme and several other themes as well but i want this dark theme and the standard one so this is the dark theme now after clicking on this finish we have this json data so we can copy this json data and use it here so const map dark style paste it here so this is our map dark style and for the standard one i will use only this one because we don't need to customize any more thing for the standard one so i create another constant map standard style right and i can switch between these styles based upon our preferences and to apply the custom style i can use this custom map style prop to our map view so here i can use this custom map style and here i can provide map dark style now after providing it i can see our map has been changed to dark mode but i want to make this dynamic as we choose this dark theme that time it will be presented with the dark if we switch off the dark theme then the standard styled map will be present so for that we need to get the use theme hook from reactative navigation so for that i can copy this code from any of our previous section so here i have used it from react native paper i can use it from react navigation native as well and then i can create a theme constant by using this use theme and i can use it over here if theme dot dark is present then we will use this map dark style otherwise we will use this map standard style so now save it after saving it now we have the standard style right so now it is showing as standard now if we toggle from this section the dark theme then we are presented with the dark theme style map right so this is it guys this is the first part of the tutorial in the next part of the tutorial i will implement the advanced designing in our react native map as i have shown you previously so stay tuned for that i hope you have learned something new from this tutorial if you do so then hit the like button subscribe to my channel for more tutorials like this and let me know by commenting down below and if you have any other suggestion for me then also let me know in the comment section below and i will see you in the next part of this tutorial in the meantime have a great day goodbye

Channel: Pradip Debnath

Views: 68,546

Keywords: react native maps, react native maps custom marker, react native maps installation, react native maps marker, react native maps callout, react native maps dark mode, react native maps custom style, dark themed react native maps, advanced react native maps implementation, react native maps content slider, react native maps scrollview, react native maps animation, react native maps search bar, react native maps advanced

Id: 4N-8RTeQ1fA

Length: 22min 38sec (1358 seconds)

Published: Wed May 20 2020