#2 Sliding Items on MapView with Animation React Native Maps Tutorial

[Music] welcome to second part of this tutorial where I'm showing you how to implement this layout by using react native map in our react native project so in our first tutorial I have already shown you how to install react native map and how we can use google map and in our Google map how we can implement this custom map marker along with that how we can add a custom call-out also I have shown you how to implement dark mode in our map and in this tutorial I will show you how to implement this layout in our map so the search for this chip items and these bottom items along with is animations so if you haven't seen my first tutorial yet I would highly recommend that you go ahead and see that till clorium it will be helpful to you to follow along with me in this tutorial also let me tell you that this is a part of fertile toriel series in which I am showing you how to implement different screens often react native app as you can see we have a bottom tab navigator right also we have a side drawer we have custom drawn items and we can never get between different screens and all so all of these things I have already shown you in our tutorial series where I have shown you different parts of a yak navigation function file so if you are interested in that you can definitely check that playlist I will link that in the description below or you can check that out from the I icon and now I am showing you how to implement these parts right now I am doing this explore screen and later I will do this profile tab along with the notification and these phone so it will be mostly in Y part and I will show you how to integrate third-party packages in our react native project so it will mainly focus into that I will not link this to any server right now but in future I may do that but apparently I don't have any plan regarding that so if you are interested in this kind of tutorials then hit the like button subscribe to my channel for more tutorials like this and don't forget to hit the notification bail icon so that you get notified whenever I post a tutorial on this channel so without wasting any more time let's get started with the tutorial okay so you know the yes tutorial I have shown you how to implement this google map and this custom map marker and also this custom call-out right so this is our code that is what we have done previously now I have made some changes in our project so this is all main tab screen and here for Explorer tab component I am showing map test screen so previously whatever I have done now I have moved those codes into this map test screen dot J's file now I have made some changes to my Explorer screen dot J's file here you can see that I have imported these ap is from react native and some of them are used currently and some of them I will use in later parts when we will implement the actual app screen which I have just shown you so we have made these changes we have imported map view from reality map obviously for the maps and we have imported these items from react native jet results so make sure you import all those titles from react native vector icons in your project otherwise these icons won't work for your project then I have made map data dot J's file in my model directory and in my components directory I have created star rating dot J's file and I have imported those components from those files let me show you what I have created in my map data in my map data I have created these images constant and shear I have provided some images which we will use for our card elements which we will present at the bottom of this screen and we have created some markers as well and in markers we have coordinates we have title description and the images so these are the images and we have the rating and review for those items so this is how I have created all these things and then we have map styles so this is our map dark style and this is our map standard style which I have already shown you in my previous tutorial so I have just make them separated in a separate file so that our main file will be clear and here we will mainly focus on to our main components right so let me change this to explore screen now save it now see these are the components I have added so here I have initial map state here I have the markers which we are exporting from this map data here is the markers then we have the categories which we will display at the bottom of the search word as cheap items now after this category we have the region so I have already added these values these are the latitude longitude value I have added over here already and then I have created a state and I have initialized that state with our initial map state which contains these details right then I will come to here in later parts then we are actually returning our component so we have the view and we have the map view and here I have initialized the region I have provided the style and I have provided this provider Google because I want to use the Google map in iOS and then we have the custom map style and I will change this based upon our preferences then for each map marker we are returning these markers so it is creating every map marker here and then for the view of this marker nap and the images I have used this animated view animated images because I will animate all these things in later parts of this tutorial then we have some styles so you can cause the screens and take note of these pods okay and also I will upload these quotes to my github so you can get those quotes from that group or I will link that in the description below so now start creating our now so now I will create the search bar here and then I will create the category items so for that after this map view we need to create the such work so for that I will create of you and for the style of this view I will provide the Styles dot this search box and now within this view I will use text input for this placeholder we'll provide these states for placeholder text color I will provide black color then for auto capitalize I will provide none and then for the style of it I will provide flex one padding:0 now set this now after saving it we can see we have our search word present over here now I will display a search icon in this place so for that here I will at the icon so I will use iron gun and the icon will be I way search and size of it will be 20 now we can see our search word present over here now beneath the search bar we will display the categories which we have present over here so these are category items so we will present those items as an cheap items and we will scroll through those items so after this view I will add a scroll view because we want to scroll through those items horizontally so it will be a scroll view and as I have mentioned it will be horizontal so I have added this horizontal if it will scroll vertically then we will add vertical over here then I will use scroll event throttle and I will provide a value of 1 and this is called event total will define how often our scroll event will be fired and if we will provide a lesser value over here then it will fire the event more often and it will provide a much more accuracy then I will add so horizontal scroll indicator and I will set this to false because I don't want to display or scroll indicator for the height of it I will provide 50 and for the style of it I will provide style stork this chip scrollview now within this scroll view I want to display the cheap items and we have already present those categories here so we will look through each items for that I will create a map function for the categories and for each item we will render a touchable opacity and within the stretchable opposite of we will have a text and those text will contain the category name and before those text we will have the icon so we have already created these icons here and we have already imported the respective icons for our category right so we are displaying those here and now for this touchable opposite a style we will provide Styles dot chips item right and also we need to provide unity for each items so now save this now after saving this we can say that our chip items are present in this section right and we can scroll through those items so it's working properly but at the end of this scroll view we can see that our last item is positioned at the extreme right corner I don't want that I want to provide our proper gap over here like this so I will align this with this such word so for that I need to provide content inset in this scroll view so here we will provide top left bottom right values as we have this left aligned properly so we don't need to provide any values over here it has been taken care from this style but for the right hand side we want to provide 20 pixel gap so now save this now after saving this let's see okay it's having some issue now let's refresh this once let's see our scroll view is working properly and it has been aligned perfectly as I wanted right now this content insect will only work for iOS so this is for iOS only it will not work on Android now let's see this on our Android device so for that I am closing this Metro Manila dy and from this for Android so this is how our app is looking on Android right now and if we scroll through these items then we can see that it's not aligned properly so this content inset is not working for Android we need to do something for Android so to provide the proper alignment for the Android app we need to provide content container style for our spawn view and here we will provide padding right then we will check for the platform waist if it is Android then we will add 20 pixels otherwise we will add 0 nowsave this now we can see it has been updated properly for Android as well so that's how we have designed our category cheap items properly for both the platform now we need to create card items over here so for that we need to create another scroll view so I will create this after this scroll view and as I will animate this scroll view later when we will click on this mark or that time that respective card element will be present on our screen automatically so for that I will use animated scroll view so we need to add this animated over here as well and now for the scroll view we will add some configuration as we have added over here so it will be horizontal and for a scroll event at throttle I will use one and I will not use any small indicator so I will copy those things and paste it here now for the style of it I will use Styles scroll view now I will create the card elements so for that I will map through each marker element and for each marker I will this card view and for each card I will display an image and the image source will be marker image within this map data we have this image for each markers right and for the style of it I will use card image strike and resize mode will be covered and then after this image we will add another view which will contain the text contents for the style of 8-5 will provide text content style and then we will provide a title and the description so it will be mark or title of lines will be one and for the style of it I will use car title similar thing I will use for the description so it will be description and for the style of it I will use car description so now save it once so here we can see our cards present and we can scroll through all those items right now along with these title and the description I want to display our star rating beside that the review numbers and in order now button so for that first I will use our star rating beneath this title for that star rating I have already created this star rating dot JS file here I can provide the props creating props and the diva props and based upon our props our star rating will be generated so here I will use star rating for the ratings prop I will use marker rating which is coming from here also I will use review prop so this reviews prop and it will be marker reviews so now save it so after saving it we can see that our star rating has been generated right now after this description I will add a button so for that I will create a new view and for this view style I will use style button and here I will use touchable opacity and for the text of it I will use order now for the style of it I will provide styles sign-in and for its color I will use this color so here I can see the button next but I want to provide a border as well for this button so for this touchable opacity I will add a style for unpress right now I am passing an MP function for this style of it I will use textile and for the border color I will use this color and for the border wait I will use one pixel okay this text sign will be here and here it will be signing now after saving it we can say our button is looking perfect so our card has been designed properly but I want to change this call experience little bit when we will scroll through different card items that time I want to snap through each item so it will be a better user experience let me show you so for that I need to use paging in a belt and slap to interval and for this snap to interval I will use card with plus 20 pixel and card width is coming from this variable I have already created this card width which is the 80% of the width of our screen and then snap to alignment will be Center now let's save it after saving it let's check it now you can see whenever I scroll through each item that time we are automatically snapping through each item right so that's how it's working and now I want to Center this item like this currently it's not doing that so I will do those things and also we need to provide content in set as we have used in this scroll view right so for that I will use content inset and it will be applicable for iOS only so torque will be zero left will be spacing for Karndean set also I have created this as well previously then for the bottom of it I will use zero and four right I will use spacing for Karndean set now for the Android we need to use content container style and here I will use padding horizontal and for Android we will use spacing for card insert otherwise we will use zero now save it now after saving it we can say that it has been positioned properly as I wanted and at the beginning of the scroll view it has left some spacing also at the end it has left some spacing right so now it's a better user experience right now we need to add the animations here so whenever we are scrolling through each item that time that map marker will be highlighted so it will be a little bit bigger than rest of the map markers now we will implement those things and for that we need to add the animations so we need to add on scroll and here for animated event we will use native animation so for that we will set this use native driver to truth and for the native event I will provide the content offset and for x-axis I will provide this map animation now let's create this map animation animated variable so it will be new animated and value of it will be zero by default also I need to create another constant for map index and initially it will be zero as well now whenever our Dom changes that time we want to render something so for that I will use this use FX hoop and I want to render this each time or Dom changes so that's why I haven't provided an empty array over here now I need to add a listener for the map animation now this adlistener will get our hand and from this value we will figure out the index of the current item so here I have pasted some code to get the index value and then we will animate our map to that we should so for that I am creating a function called region timeout and here I use this set timeout and within this set timeout function we will check if our index matches with our map index or not if it is not matching with our map index then we will do the animation also we will update our map index with index value then we will get the coordinate from our markers for that index and then we went animate to that region and now for that we need to use this use ref constant so here for this Mathew we have asked this map reference and this map reference has been created by this user evoke so by using this user F we will get the current item by this current property and then we can use animate to region to provide an animation to the map and for that animation I have provided this 350 millisecond time and now we need to provide the region so the coordinate for latitude Delta I need to provide the latitude Delta it can be fetched from the state region latitude Delta which we have in our state right similarly for longitudinal de now we need to call this and Pierre this timer as well so within this clear time off I have caught this region timeout function now save it now let's see I am scrolling through next item so now you can see our map is animating to that position automatically whenever we are scrolling through each item right now we need to provide a proper visual cue to the user so that user get to know which marker is been selected for this item so we will provide an animation to respective map marker so for that I will create interpolation constant where I will provide the animation values so for each marker we will create input range and for the input range I passed some code now we need to create the actual animation and this animation will be scaled animation we will change the scaling of each marker so for that I use this map animation interpolate and for the input range I will use this input range for output range I will use these values so it will start from 1 and then it will scale to 1.5 times of its width and then end of the animation it will again be the 1 times of its actual width and height okay and now we need to return it now we need to use this to our flap marker so here is our map marker before that I will update the style of our map marker it will be skin style and we will transform scale for that item so in these interpolations we will pass this index for the current item and then we will fetch the skill now we need to use this scale style to our marker style so here I have added this now save it now after sending it we can see this map marker automatically changed its scaling now let's scroll through different items so it's working perfectly right and whenever we are scrolling that time we can see the actual animation right so that's how it's working so we are almost completed with this tutorial now we need to do one last thing which is whenever we click any map marker that time we need to scroll through that card item and here we have an error can't find the variable on merkel place i have already added this one marker press in on place and i haven't created this function yet so now i need to create that so here I have created it now after saving it the error is gone now one place we will get event data so it will be map event data and we can get the marker ID from it laughs even tatertot target inst dot return dot t it will return the ID of this marker it will return the ID of the marker now we can use this marker I need to position our card element properly so now I have pasted some code here which determines the x-axis value of these called elements so we have searched the x value based upon this marker ID and for the voice we need to update the x value we think are the insert value now we need to scroll to that card item after clicking on this marker so for that I have to use this use ref function so I have created this scroll view constant now we need to use this in this scroll view so here for the reference of it I will use this scroll view and then here we can get that and with this scroll view we can get the current item by this current crop and then we will that position so X then will be the X which we have determined here and for y it will change nothing because it's not vertically scrolling right and it will be animated true now save this now let's check it once now if we scroll through each item then our map is animating as previously along with this map marker now if we click on any marker that time we are having an error can't find variable marker ID okay we have made a mistake over here it will be marker ID with capital D now save it now let's check if we click any marker that time we are also getting another data now reload this once let's see so our animation is working properly right and now we have a warning calling gate note on the ref of an animated component is no longer necessary so let's see remove this and reload this once you no it's working perfectly so get movie is not necessary currently okay so it's fine if it is not fine then you can also use P get not over here previously when I have made this that time you can get note was necessary to make this work but currently it's showing that it's not men sorry so you can get rid of that otherwise if it's having any error then you can use this get node now let's check this for iOS as well close this metro bundler UI process and run it for aiways so here is the iOS one now let's scroll through the item so our snap to animation is working properly right now click on any map marker so it's working and similarly it's showing that get not warning so you get rid of this no it will work properly so that's it guys that's the tutorial 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 kind of solution for me then also let me know in the comment section below and I will see you in my next tutorial in the meantime have a great day goodbye

Channel: Pradip Debnath

Views: 26,927

Keywords: react native maps tutorial, react native maps, google maps react native, scrollview on scroll react native, scrollview on react native maps, sliding items on react native maps, react native maps search bar, react native maps chip items, react native maps animated marker, react native maps animate to region, react native maps card elements, react native maps slider, slider content on react native maps

Id: 2vILzRmEqGI

Length: 31min 36sec (1896 seconds)

Published: Mon Jun 08 2020