🔴 Google Maps in React Native and Reanimated 2

so i hope for the ones who's still joining that everybody's doing fine today as promised and as we decided last week we're going to work on something very similar to what we can uh what we can see in google maps app and i'll just show you in a second how it looks like basically i think pretty much everybody has used the app before but you have this very complex animation that looks pretty cool but of course when you look at it you see a lot of stuff is happening at the same time you see the navigation bar the search bar at the top that just keeps moving hides and shows you have this bottom sheet at the bottom that also shows some images at the top and it's not just images it's a scroll view that you know just works like a carousel so there's just a lot that is going on on this screen and so we're going to reproduce this um using reanimated2 if you're not familiar with reanimated don't worry i'll still try you know to make it easy to understand and don't estate if something's not clear just ask in the chat and i can explain better okay um as always the chat is very very open so you can say pretty much anything you want as long as you just stay uh remain respectful and if there's some questions in the chat and you think that you have the knowledge to answer them please do if not i'll just give it a look and try to answer the questions about the question for the repo i think it's just easier for you to look at something try to grasp the concepts and how it works rather than you know trying to do two things at the same time what if something doesn't work on your end etc so you'll find the code uh when the streaming is how do you say on goes on youtube on vod so you'll get everything don't worry this time it's more to see how it works what's the method here and i think you'll learn just better by seeing how it happens so i give me a second i just get everything ready and we'll get started so the first thing we're going to work on is the bottom sheet so what you see on the left so we're going to focus on the white part and what we need to do is that when we move you know up when you make a pan gesture the bottom sheet should move by default it's just a view as you'll see in a second but we need to add some gesture in this and to do so we'll use reanimated react native gesture handler and you'll see how this works okay let's jump to coding all right i'll just make sure everything works yes you're seeing my stream first time on your stream just wanted to thank you for your work thanks a lot for joining you know i i hope you're going to learn a lot of things during the stream welcome if you're if you're new so i'll just show you basically what we have but this is not what i want this is our application so as you can see on the right oh it can disconnect it as you can see on the right we have a lot of elements we have the search bar the navigation bar the bottom sheet at the bottom and this black thing in the background actually just give it a a refresh so you can see but basically what we have on the right is everything we have on the left side so we have this map view and actually i just removed the overlay that's the black part just so you can see the map this is using react native maps i think uh yeah react native maps so just showing something very simple and i have the width and height set here coming from use window dimension and everything else the geo bar maybe just you you can get familiar with the different components we have geo bar or the icons at the bottom right picture carousel is the part you can't really see now but maybe if i remove the bottom sheet you'll see the images is the images for that restaurant so just hide it again and then we have this safe area view that wraps the search bar and navigation bar just so you know it doesn't touch the notch so because i said we're going to start with the bottom sheet let's just head over to that component just so you can see how it's made so far it's pretty simple it's a view that is positioned absolute and as you can see i set it to the very bottom of my screen so what i do here is just push it to 90 down of the screen and to do so it just got this height from the window dimensions hook as well inside you have a safe area view again just to keep it away from the notch and uh inside just the title and the fake content and as you see i just wanted this view to be quite big so i need a fake content to make it bigger than than it seems someone says come watch this live we're excited to go through the recording later no worries i really appreciate and yeah i hope you enjoyed this later so that's really just we have at the moment and as i said we want to be able to just touch this um this bottom sheet and move it up and for doing so it's always pretty much the same if you if you will the same method we're going to need three things the first one is to create a shared value and our chart value will contain what is the current position on the screen and as we'll move we'll update that shared value so it will also update the current top position of the view i will just start coding and you'll see exactly what i mean so first i need to create a shared value that will contain our gesture current position of course at first it will be zero because we start at zero and then it's going to be maybe minus 10 minus 100 etc and this shared value will be used by all the orbit components that's why i created it inside app.jsx because then we can you know just pass it down to the other components and as you'll see all the other components will need this shared value so i just create here it comes from your animated and i will pass it down to the bottom sheet so let's call it pan y because it's going to be a pan gesture and just pass it y now when we go back to bottom sheet we're going to take this from the props and we'll be able to reuse it for our gesture for making a gesture with reanimated and gesture handler it's pretty simple again it's always always the same method we're going to use so first you need to create a gesture handler and the syntax is actually maybe maybe unfamiliar if it's the first time you're seeing it but uh if you wonder how this works they have really great documentation if you want to give a look just look for a recognitive gesture handler and you'll see a bit more now i just use everything uh just put everything we need first and you'll see i'll explain to you how this works but basically the gesture handler contains all the gesture logic what happens when we start the gesture what happens when the gesture is hacked active and what happens when it ends so we have this different there's different parts on start on active and the last one maybe you already know is on end so we have these different hooks that we will complete a bit later um what else do we need of course we have set our gesture handler but we need to attach it in some way to our view we need to say this view needs to become animated right we need to interact with it to do so uh we need to import something called a pad gesture handler that as you can see comes from gesture handler and reanimated has this hook use animated gesture on there that makes the connection between reanimated and gesture handler so just wrap the whole thing with pancreastry handler and here you have this prop called onto your event that will take our gesture handler here for a gesture handler to work you also need to pass it an animated view so the first child needs to be animated so i'll just turn this view into an animated one why not use bottom zero um yes that's that's a good question if you set bottom zero here the whole bottom view will be hidden and we want to see it a little bit so that's why i say push it 80 90 down instead of saying put it at bottom zero it could also be bottom height times 0.1 just so we keep it at like 10 uh off the bottom but either way both both should work just so we can still see the bottom sheet all right so we have this animated view the gesture handler but as you can see the gesture handler doesn't do anything so even even if we have the gesture activated at this point it won't do anything so we need to set the logic here yeah we're a bit uh we're not really in sync but yeah so uh basically what i'm going to do here is exactly what happens every time so i will write it first and just explain it right after don't worry again remember onstart is when it starts on active is when we're doing the gesture and on end when it ends um pan y value equals context start y plus even the translation y and on end we'll do pan y value let's do with timing zero okay so let me explain quickly what's what's happening here basically what we do at first is we want to keep like when the gesture starts we want to store the current value of our pan y value this means just imagine you have a box and you say okay we're starting a new gesture what is the current value of this punch the previous pan y value and we put it inside that box called a context then start y is just called star wave because that's what it is but you couldn't call it however you want really then on active what it does is that it's going to update the pan y value based on the current y translation but translation y only contains uh if you want the the difference between the previous event so where was your gesture a second before where is it now what's the difference and so it might be just you know minus 10 or minus three but you want to add this to the previous to the initial position of the gesture so actually that's why we have this context of start y equals pattern y value is because we want to keep what is the initial position of the gesture and then when we have it we can add what is the current difference if you want uh the the position difference between when we started the gesture and when where is it now okay uh so here we just update the pan y value and at the end we do set it to zero and we wrap it with with timing we'll which will run a timing timed animation that's very similar to animated dot timing and then you run the animation but that's with reanimated so here we have all the logic great and actually even if i start this if i save it and i use it we won't be able to do anything and the reason why is that the gesture will still work so pan while value will be updated but we need to use this panel value somewhere we need to apply a style on the view to say okay if you moved it 10 10 pixels up then apply this translation to this view and to do so in ready made it you can't just say you know you can't just pass it a style here you need to use an animated style so let me create this one here animated style we're going to import and what it does is to return a function that itself returns an object so what we'll do here is i'll just add this to the list over here and we want to apply a translation so if you know about this we'll use transform and add the translate y uh translation and for the value of this we'll just oh we'll just set it to pan y oh oh what am i doing pan y dot value so here really again just to rephrase and uh just to make sure you understand we had this shared value that comes from the app component then we have the gesture handler that we associate it to the view through this component here and what it does is updating the panel value based on what's where's your where's your touch basically where is your finger on the screen and after this shared value is updated we need to create a style an animated one because we're using reanimated and we pass the panel value as the y translation then once one once we have the style we just pass it to the component okay so i think we're good i'll just hit save and we need to reload the app again don't hesitate to ask questions if something's not clear oh i forgot to import animated that comes from reanimated i think we need to reload everything let's hope this works okay oops okay so you can't really see but i'm you know i'm just sliding up and so as you can see you see what happens on the right and then you can look at the gesture handler again we start the gesture at pan while value we see the context then we move and we update the panel value based on the translation y and as i release the touch boom it just goes back to zero and that happens because we have this animated style here there's a few problems of course in google maps you want everything to snap so if i release at this point it should snap to the top and then you know we should be able to interact with all this yes so i see something any recommended maps for react native except google maps what do you mean i think there's only react native maps that is pretty good for that just a quick tip i think it might be helpful to add a border on the element you are animated coding just to help viewers quickly see which component you're working on uh right this is true maybe i'll think about this for the next uh stream thank you but as you can see i'm just working on bottom sheet which is this view here can we add clamp also exactly so this is what we're going to do right after what is making it go back to zero at the on end yes so as i release that's the hook that is called for knowing what happens when you release the gesture just send it back to zero with a timed animation okay i think we can move to the next step which is as a poor suggested we need to clamp that thing because as you can see i can also move it down and that's something we don't want we want it to be you know even if we go down it should stay in place and only move up in one direction so to do so uh i don't know if that's the best way but i'm going to use an interpolation so if interpolation is not clear to you i have a really nice video about this on my channel but hopefully you'll understand how it works so we have this interpolate function coming from reanimated and basically again the idea is that instead of just passing this value we want to sort of change it meaning that if we go too you know too low then it shouldn't go down so we need a way to say when we go past certain value keep it at zero let's say and when you you go up then you can just apply pen panel value i'm still learning how hooks work to be honest i hadn't only ever used class components prior yes uh great yeah yeah it's i think it's um definitely like the way most people now create components even though yeah there's some there's some discussion about it but anyways let's just interpolate for now so what it does is uh take two things first one is the input range and second is the output range so the way this works is that you're going to say panoy value can take any value between zero and the height of the screen so that's our input range um well that could be sorry sorry let me um okay i'll just type the code and maybe explain later you'll see what i do so basically here i'm just saying if pan y is -1 associate to minus 1 basically don't change anything but i will add this and that's that is what will make the difference basically what happens is extrapolate left is how should i turn this value when we're out of this range so basically when pan y is -2 what should i do by default it will just extend everything so if it's minus two because here minus one is minus one zero zero then minus two should be minus two uh one should be one right so extrapolate left means what should be the behavior on the left side of this range and then we have extrapolate right which will be the same thing but for at the right side so here basically when we go down that means we go up because we do just a negative translation we just want to extend meaning just keep the panorama value on the left so i'll use extrapolate and say extend everything but on the right side meaning past 0 we want to keep it at 0 even if we go past this point so on the right side we'll do extrapolate and we'll set it to clamp so that means just keep it at 0 even if it's one two three keep it at zero extend minus two is minus two minus three is minus three etcetera so just refresh and now as you can see this works because the extrapolation on the left and now i'm trying to go down you can't see it but i'm really trying and it doesn't move that's because we clamped on the right side okay so another thing we want to be doing is to snap so that's something i said earlier basically what we want is when we release the bottom sheet if we're past a certain point we want it to snap to the top and if then we just scroll down again or maybe past this point we want to scroll back to zero okay so there's two behavior two behaviors here we need to handle and that will happen inside the on end callback here do you have to put extrapolate.extend or is that the default that's a good question actually i like to write it just so it's clear for anyone who's reading it but you can maybe give it a try at home and i guess that's the default so you know really it's up to you i just put it so it's people know people just know so what we have to do here is sorry what we have to do is if we're past a certain point we'll just put true for now okay we want to do something otherwise we want to do something else so maybe i'll just keep the else condition to go back to zero but basically we need to say if something meaning if we're past a certain point snap to the top um i'll just write the code and you'll understand how this works so if pan while value so if the current gesture value is lower than this so what this means is high times 0.4 is 40 of our screen size and because as i told you earlier when we're going to scroll up panorama value will turn negative because you know that's zero if we go down it's going to be positive and if we move it up then that's a negative gesture so we want to say when panama value is lower than 40 of the screen so meaning i think it should be around here snap to the top so so far we have this with timing zero that's not what we want but that's exactly what the if condition means when we're past this point what should you do otherwise just snap to the bottom just trying to uh read the comments i see there's a conversation about hooks hello from senegal hello mohammed if you put the panel value where it says meson pull boku's it will help us visualize the pan boy value that is true that is true but again actually i don't even know if that's possible can we show i don't know but just what you have to remember is here in that direction it will be negative and if i just move it lower which i can't anymore because of the extrapolation it should be positive just you know remember that so what we have to do at this point is snap to the top and so instead of timing using a time lamination to zero we'll just use height times 0.6 and that will be negative again because we want it to be to the top and so you might wonder why it's 0.6 as you'll see later you know if you remember there's a carousel at the top and the carousel i've decided it should be 40 of the screen so it should maybe be around here so i'm just saying put it maybe up there and the space we have left should be filled with the carousel later okay so i just saved this i think i probably need to reload because anytime you make you change something here you pretty much need to reload everything so just show you and as you can see see now it stays in place and if i go lower and release it goes back to the bottom if i go upper and release it then goes back to this knife point so see the logic is quite simple but the result really looks good right okay i think we're done with this part we're done with the bottom sheet i'll just put it back here so you can see all right um just one thing we're missing here as this will be running on the ua thread so this is the the thread that is used by uh reanimated anything that comes from outside this thread so uh here i'd height is on the javascript thread we need to pass it as a dependency so whenever height is changed then this whole thing will be recreated because we use it here and again height is an outside variable and all this here runs on the separate thread so it needs to be aware of outside variables when they change to recreate all this all right i just hit save and i think we can just move on to the next part so um now we're going to look at the search or navigation bar um so if you remember what we just had on our screen we had the we had both at the same time we have the search bar and the navigation bar at the same time the way google maps works if i just show you the final result again is that when we move to a certain point the search bar becomes hidden and then we see the navigation bar and then it's just vice versa when we pass a certain we're past a certain point you should just do the opposite hey simon oh i'm glad you could make it but when would the height ever change uh if you just i wonder actually would it change if you rotate your device hmm um either way even if it doesn't change let's say that's i think it's good practice because imagine you have your app running on the web uh you could just resize your window and that will change the height uh maybe in an app it might not i really wonder if you change the orientation if height remains the same if it just you know swaps width and height i don't know um but you're right it could be just uh secondary if you don't need the web maybe for mobile i'm not sure panoi will not change if we try to put it on screen as it is on a separate thing yes exactly okay so we need to do this second part as i just said which is the search and navigation bar so we'll just jump back to the code i still need to get familiar with all the shortcuts okay so if we go back to our application um what we need to work with is the third part and navigation bar and as what we just did with the bottom sheet we need to use this shared value to see where we are in in the gesture so if we passed a certain point then this should react to it and vice versa for the navigation part so we'll do exactly the same thing and pass this y-shared value to both components um let's start with the search bar so just open this one as you can see it's just a very simple component um i don't even have and text input inside just so it looks similar to google maps but basically what you have is um yeah just you know just a normal view um so what we need to do is to take the pan y here let me just take my notes because yes i'm doing this from from notes okay so for the search bar what we'll do as i said um we're going to have an animated style because panel is a shared value so if you want to make some view react to shared value for a style property you need to use first an animated view and second an animated style so first let's turn this view into an animated one we'll import this from reanimated from reanimated and the second part is to have an animated style so it's very similar to what we did before but just here it's going to be fairly simple because we just need to you know change the style and based on the current scroll position we don't need to deal with the gesture anymore so what we'll do here is to return a and we want to hide the search bar when it's past a certain point and we want to show it otherwise so we need to have this translate y that will move it up or down basically when it's shown it should be at zero when it's hidden it should be maybe minus minus 150 just so we make sure it's out of the screen so i'll just do this here so you can see where i'm going with this and i will add the style over here so it might take some time to refresh but it might be hidden when it gets refreshed oh it takes some time oh give me a second some reason it just stopped sharing my screen okay just put this on standby i think we're doomed you know [Music] every time i'm just sorry about this um i'll just restart everything yes let's view i really feel like we're doomed you know every time it stops working okay i got it back i got it back perfect so let's jump back to the code sorry about that you should see everything clearly again so now as you can see because i said minus 150 here it's hidden and if it's at zero it's back okay so we really need just to animate this and to do so you'll see it's very simple we should have something here called hidden let's set it to true by default and we'll see what's the logic there um and what we should do here is if it's hidden set it to minus 150 otherwise set it to zero we were so close to greatness yes i know right it's just always always but see it's it's back there so we're meant to finish this project so this is actually fine but we want to animate it uh the way to do this in reanimate it is to do this i'll just explain it in a second if i say with timing something if let's say this is minus 150 and then for some reason this becomes false then it will animate it animate the property using a timed animation okay so if i just don't set this with timing thing then it will just move the the view from -150 to zero and because we want to animate it we just need to wrap the whole thing with width timing you can also use with spring if you want a spring animation etc so this is fine now all we're missing is this part uh again all we need to do at this point is to see are we past a certain point in the gesture because if so then you need to hide or show the search bar and to do so we'll need to do something very similar to what we had here you know with the height and looking at something like that um we just need to look at where are we on the screen and if we're past a certain point hide the the view otherwise show it okay so hidden here is just pan y value is inferior to height divided by three and that's negative again you know why so height divided by three i'm just saying if you're past the third of the screen then it's actually a wonder uh it should be hidden yes and if you're over it it should be shown okay let's refer oh i don't have the height it's definitely not going to work uh we should get this from the use window dimension and now refresh oh yes okay so first it's this then it's that use window dimension okay let's see if this works c so it clearly animates past a certain point and what i really like is that it's just so simple right just do this and then it animates so i see a question can we do it like this with timing minus 150 or zero um actually that's a good question let's see i don't know myself so i guess it's maybe it's possible but we would get a different uh feeling that's my guess it would probably just animate if it's in one way yes exactly so this works but then it doesn't animate back when we show it again okay so let's just go back to what we had and here we are okay so see that's just what we had to do and actually for the navigation bar we need to do exactly the same but the opposite meaning if we pass a certain point we need to you know hide it or show it so it's not going to be using the translate y property it's going to be the opacity we want to have opacity set to zero if we want to hide it or to one if we want to show it all right please recommend other resources to learn reanimate aside this channel uh look i think i don't want to okay i don't know how to say this but there's a lot of really high quality tutorials on my channel and there's really a lot more coming up i can't say much more about this but trust me there's really a lot that is coming um documentation yeah we agree it's just so difficult i can't tell you any everything but i promise you should stay subscribed to this channel because there's really a lot more that is coming in and i think you'll see i i can't say more but yeah there's there's other channels it really depends how much time you have if you have 40 15 minutes to watch something up to you up to but there's yeah there's william um i think that's maybe the only guy who's doing this anyways so we have all the logic for the search bar and uh we'll do something similar for the navigation bar um can we do it with interpolate just let me know mubarak what do you really mean why would you need uh oh i can see where we're connecting to cut space just refresh i think internet is kind of dying have so many things connected i hope this is not going to leave us gosh okay i'll just move back to the the chat waiting for this to work stream down no oh did it happen okay i think i think it was for because of uh of my internet connection and yes mark this was also possible oh okay can you guys hear me i think it should be back whoa i'm telling you i think it's uh how do you say i'm cursed right so it should it should be a bit slow let me just start everything again um okay so we'll get there don't worry i need to delete this and just show the live so people can see the the comments at the same time and this okay i think we're back for everything let me jump back code hopefully this works this time um so we're back with our navigation bar and as i said we need to do exactly the same thing we did with the search bar so i'm just going to paste this and do something quite similar so we'll take this use window dimension from here i remove the view because we need animated so let's import it from reanimated and we need also use animated style and again it's really the same logic we need to turn this view into an animated one here we do exactly the same and we have this animated style that we can pass here so the the only difference at this point is we're not going to use transform but we're going to use uh opacity so oh i think we've lost a few people on the way but you're among the lucky ones you really want to stick to the stream um guys i've encountered this problem already attempted to find property on an object it is not extensible hmm that's quite an odd bug uh you should try online and see if something comes up maybe even ask them directly [Music] yes thanks guys for helping out each other uh so let's just change this here uh we'll need with timing just like before and all we need to do is with timing if it's hidden then opacity is zero and if not then opacity one the only difference here is instead of just this was the condition for the search bar we need to reverse the condition and just do this and now if i hit save and just refresh that you just tell me if you see my screen properly just want to make sure you do oh yeah we forgot pan y this time it should work uh i'll just need to reload everything yeah cool cool cool yeah i really don't know what happened it just oh we still needed view oh we'll get there we'll get there okay hit save i think we need to reload once again again for anyone who's joined a bit later remember to like the video it really helps you know when you're a small channel it really helps to grow so if i do this as you can see so we have two animations the one for the navigation bar and one for the search bar yeah yeah that's true um so you can see it's very nice and what i really love about reanimate is that when you look at the code and you kind of understand the logic behind it it's always the same steps and the result looks really really cool um so maybe on the screen it's a bit laggy i don't know for you but on my end it's really really smooth um i have an idea you can create a group chat for guys to join this to ask everything about react native this is something that's been suggested before uh we'll see we'll see really how we go about that i think it's good you know to really get started on youtube and have everybody gathering for live streams or videos and after that maybe we can think of expanding everything at the moment i think we have a we have something really cool um okay so we're done with this part so we can now move to something else which is the overlay so the overlay is this black part we see behind the screen and it should just go i mean the screen should become dark as you move the bottom sheet up and vice versa okay uh so if we just go back to the code you'll see i have this overlay component so it's here we got it hidden for now so i'll just uncomment it and as you can see it's just showing a black view if we look at the code it's just what it does it's an absolute view and uh the container is just said to have a black background um oh guys i got a lot of comment i like that this is just for recognitive animation rather than react basics yeah i don't think you can really see this level on different channels or maybe it's too complex or it's so simple but what i really like about this channel is that you can really see things that you use every day and it's not something really weird it's really something you could use for your own application um what's really important at this point really is you understand the logic if you understand that you can reuse it for pretty much anything you need so for the overlay as i told you we just need to play with this view opacity so again it's always always the same step you need to turn the view into an animated one so we'll need to import animated from reanimated okay and we need an animated style so use animated style from reanimated that is a function that returns an object and this object should be the style object for that we want to animate okay as i told you we're going to play with the opacity so should we should have something here for now will be zero and i'll just wrap everything here so if we refresh of course we don't see the view anymore because i set the opacity to zero now obviously we need to do something with pan y and i don't think i pass it here so we'll do just the same thing you know pan y get it from the properties i haven't used oh whoa i haven't used react ready made it yet but i definitely have to check it out now it's so cool isn't it isn't it does anyone know how to do this in android screen sharing actually the thing i'm using is called let's view and i'm pretty sure it works on android you should maybe just google it and see if that works okay so i let me see how we can do that um basically again the idea is that by default the opacity should be at zero and as we move up it should become one okay so that might remember you what interpolation does and this is actually exactly what we're going to do here so i'll call interpolate pass it the pathway value which is a shared value right and we need the input range the output range and maybe uh extrapolation so the input range is here it's zero and it might go up to the height of the screen so that means panorama value will pan y will go from zero up to the hide screen so we're going to put this here and as i told you it's not going to be positive it's going to be negative so we need to put a negative sign here because the the movement the gesture goes up which is a negative movement and we need to get the height as always from use window dimension i can also remove this view here and um so this is our input range and the output range is when we're at zero what should be the opacity where when when we're at zero it should be zero and where when we are when we are at the top of the screen it should be one because it should show the overlay over time right so let's just put one here and to be extra cautious if for some reason i can scroll past the the screen which i don't think it's possible but just to make sure we want to clamp um all of this so we'll use extrapolate clamp and as you can see this is a bit different from what we did earlier with extrapolate left extrapolate right this shortcut just says clamp on both sides okay so just hit save and it doesn't work because we don't have interplay i really have a problem with imports okay so let's see and as you can see just goes dark right see how simple it is so just see the code on the left and what it does on the right this is very powerful actually i think we're done with the overlay so that's really great we don't have many more steps after that so it might be the end of the stream very soon let me see the comments a little bit uh modi has very nice apis similar to frame and motion that was actually the intent of fernando um while developing it's very tiring switching back and forth between phone and laptop screen yes exactly and try to get your phone and component oh tibo i didn't know you were there tubo uh well there's a lot of experts in here let me just continue with all of this we're going to move to the last part um okay let me just show you what we're going to work on um what's left the carousel so that's you know all the pictures of the restaurants we want to show uh you'll see just a scroll of your horizontal score view and the icons the icons or the one at the bottom right i'll just show it to show them to you again uh it's the things you see at the bottom right you know the two icons at the bottom right behind the bottom sheet so in the google maps application uh these two icons are actually moving up for some time and past a certain point they stop going up um oh i opened something i shouldn't guys i swear it's really a curse i think i need the standby strain once again uh let me just handle this oh okay i think i need to refresh uh give me a second and i'll just show the chats for anyone who wants to see what's going on i think it's just a my screen which freeze froze okay i'm back okay let's jump back to the code and yeah i think we did this then by quite a few times already and and the fun the fun part is that i was really thinking this time no problem i prepared everything but see it still happens but that's that's internet that's out of my control um so as i told you we're going to play with the what i call the geo bar the two icons and then the pictures carousel so let's start with the simplest part which is the geo bar i'll take my notes and we can move on with the logic okay so surprisingly enough we're going to do something very very similar to what we just did for the ever components as you can see we have the safe area view so that's not something we want to touch this would be more like it so that contains both icons and as i said earlier we want to use the pan y current value to say this should go up a little bit and past a certain point it shouldn't anymore so first we're going to need this panorama value that i will pass from here pan one equals y and we can jump back to the component and here i'm going to tell you a secret we're going to do exactly the same thing so two things as always an animated style so use animated style this should return an object okay uh we can pass this to the view here that's the one we want to animate and because it's an animated view we need to say it's an animated view okay uh i'll need to import animated from here oh let's view works great yeah uh actually last time my whole quicktime player broke for some reason and i can't even see my screen anymore so i had to find a workaround okay so we have the animated view the animated style now we need to say what should happen and as i told you we're going to use a translation y transformation to move the icons up and then make them stop so we need to play with this translate y property and to do so once again we're going to use our friend interpolate that takes the pamwa value and again we have an input range an output range uh yeah i think we'll need clamping but let's see let's see what it should do uh i'll just write the code and explain it afterwards i think it's maybe more you'll understand it better so what i'm doing here is when we're at zero that's the default position when we are at minus 100 it might be around here okay so what we're saying is if you're at minus 100 you should be at minus 100 so you might think why do we need interpolation uh what we're missing is just to extrapolate um okay extrapolate and the reason for that is that when we're below zero it should stay in place when we're at 50 it should be at 50. okay the translation y should be set at fifth minus 50. but when we we are at maybe minus 120 okay they should not move anymore so they shouldn't be set to pan y value we should just say okay don't move anymore and that's what we clamp so because we clamp that means that if we're at -120 it will still remain at 1-100 same on the other side if it's 10 here it will still remain 0 because that's what clamp does otherwise it's going to extend everything so minus 200 here would be minus 200 etc so we're just clamping the value past a certain point um pan y oh i've got to import it let's do it here i'm not sure i can see my screen let's see okay it works sometimes there's a little delay with let's view actually works in windows as well might be worth trying yes i'm not a windows user anymore so i can't really tell you about that so let's see how this works see when it's at zero it's it stays at zero when we're at fifth minus fifty it's a minus fifty up to minus one hundred and then it stops because of the clamping we're really getting somewhere aren't we actually we're just one step away from finishing this project and you'll see it make it will make everything looks much better um so we're missing some some pictures at the top and what i'll do is just to hide the bottom sheet for a second just so you can see uh what we're hiding from this time so you can see all the the pictures there if you look at the components i just have a list of images put inside us an horizontal scroll view let me take a sip of water so just you know showing this horizontally and everything's quite normal have this top here which is set exactly like the bottom sheet if you remember or if you've joined the stream a bit later that's what we had here as well so that's why both of them are stacked on top of each other and we can't see this component when the bottom sheet is on top of it inside we map over all these images and we just show uh an image with a height of 40 if you were there at the beginning of the stream you know why we did um where is it here we snap back to 60 because i told you we want to snap up to 40 percent up so we still have some space to see the images um so now you'll see how it works and then the width is just set to 70 of the screen just so you know it's not 50 50 we can see a clear picture but now we can see the picture so let's add some animation and for that as always we'll need to pass this shared value over here sorry i didn't see your message i'm kind of excited because we're just so close from the final result um and we did all of this in less than an hour that's crazy so the last part we need here is to add some styling to the scroll view so let me just take my notes and maybe i i even show you the final result again so you can really see what we're heading towards so as you can see it should move pretty much at the same time as the bottom sheet but even faster actually right it doesn't really move at the same speed meaning the pictures should go up much faster than the bottom sheet and you'll see this is actually something you we can find in the code okay so again remember the step because we want to animate the scroll view position we need to turn this into an animated scroll view so let's just turn this into animated and second step as you might remember is to use boop an animated cell so reanimate it use animated style and we're going to we're going to need animated here because we use this there we used it there as always same pattern we return a side object and that will pass it to the styling there i think it's maybe it's important to look a little bit at bottom sheet the animated style we had for this one because it's it's pretty much going to be the same thing here pretty much you'll see there's there's a little difference um but as you can see we just need to interpolate the panorama value and then do something but basically just a translate y uh transformation so we'll do something very similar to that let's start transform and translate y so that is the part you probably already know no need of looking at the film now if you oh i think you guys are talking about something else let's import into our plate and oh we'll need this panorama value so let's take it from the properties pass it here again this is something i forgot to mention but maybe you got it by now to read the the current value of a shared value you need to say pan the shared value dot value that's a bit different from uh if you're used to animated so again interpolation so that means input range output range and maybe an extrapolation afterwards so what will be the input range well basically we want to show the pictures once we reach this point so that's 40 percent away from the top so meaning once we reach this point the carousel should be entirely visible and the default point will be zero okay so that's our input range i think oh i forgot to take my notes okay yeah so we'll start at zero and we need to go up to sixty percent because as i told you the pictures the the carousel will be forty percent of the screen so the input range will be height times point six and again it's negative because these will be negative values because we go up we don't go down okay so this means when it's at zero what should be the translation well it should be zero right but once we reach 60 so that's the final stop for our bottom view meaning this is 60 of the screen we should set uh the pictures to be taking the full space so this means that once we reach this stop this knob point everything should be visible so we need to send the carousel at the very top of the screen so basically we just need to say this if we read this again together at zero it's at zero when i'm reaching 60 of the screen the whole scroll view should be set at the top of the screen at the very top you know over there okay so that's why i use interpolation to send it up to the top once we reach 60 um just to make sure things don't go a little weird we'll use clamp here to make sure you know it doesn't go off boundaries and i think we're good okay let me scroll down see so once we reach 60 percent so we can still move up okay that's that's really no problem but then the carousel stops moving up because we clamped everything okay and as you can see as we move up the carousel goes up a bit faster right because we say once we reach 60 then touch the top of the screen pretty cool right so now i can just see the images or just do this everything works so we have really if you just count how many things we've done in just an hour that's the search bar that goes away the navigation bar that you know fades in fades out very nicely we have the bottom view with gestures we have this carousel at the top we have the overlay we have the geo bar the two icons at bottom left that's really a lot of stuff and as you can see the code for this and the logic was pretty similar every time and what i hope you can remember from that is that even in the apps you're using every day that look a bit fancy you can do this in react native with very small logic and i really hope that if you're still unfamiliar with reanimated that this will help you in the right direction if there's any any question feel free to ask them otherwise i think we can move the to the next part which is uh probably the thing you'll be waiting every time uh what should we be doing next week and this time we have well we have something you already know that's reddit that should be no surprise but we have another proposition so what i want you to do now in the comments is to tell you do you want next friday to see soundcloud i think the animation is quite cool actually or reddit and last week people chose google maps over reddit so up to you you just decide which one you want to see next time soundcloud i see the first soundcloud okay i don't want to give my opinion because i i i really like soundcloud very much and you know as i chose some as i chose soundcloud as an option this week uh i was even thinking well this looks so cool i i really want her how how it can be done with rec native um obviously we'll probably make this with uh reanimated again so if today was a good introduction for you for ready meeting just so that next week next week we'll use the exact same tools okay i think everyone is going for soundcloud so let's pick soundcloud look guys i really enjoyed for anyone who spent an hour or even if you join and came along at some point uh thanks thanks a lot you know this is still pretty new uh these lessons and i really enjoy the fact that we can talk and it's i don't know it's really cool isn't it and it's just one hour so thanks again for joining i'll leave you with the goodbye screen and look what can i say thanks for watching and see you next friday

Channel: evening kid

Views: 2,724

Rating: 5 out of 5

Keywords: react native, react, live, eveningkid, tutorial, evening kid, learn react native, learn, google, google maps, maps

Id: Z_dC5Mv99bI

Length: 66min 19sec (3979 seconds)

Published: Fri May 07 2021