🔴 Soundcloud in React Native and Reanimated 2

so hello again for anyone who's just joined uh the chat right now i'll show you before we start what we're going to work on today so if you haven't seen it yet this is what we're going to work on today uh it's very very similar to what you can see in the soundcloud app and as simple as it looks it's actually not that easy to make and that's why i'm making this today basically there's a few things involved in what you're seeing right now uh it's you know showing all the waveforms from the music so that's something we're going to look at in first place then how do you make it move and also when you tap on the screen it should just stop you know when you play the music it should just progress automatically and when you tap it should stop and that's when you see the whole wave forms uh squeezing so there's a few different things we're going to focus on today um it was really something i didn't know how to make at first and i was very happy when when it was finally working so let's see how we can do this uh together okay so let me show you my screen up all right so you should see the phone on the right and the editor on the left what i really want to start with oh i forgot something sorry i never really used that the first part we're going to to work on is the waveforms and there's something you might not know about is a mass view and if you don't know about it it's okay we're going to go through it together so let me go back to the coding i always prepare these slides and i think it's just structure everything better all right so as you can see um the code is pretty simple so far so we have just the status bar uh that keeps the the status bar the time and all this in white and inside this app component i just have a safe error view that keeps the notch away inside that view so we have this black background okay very simple uh inside that we have a few it has two waveforms and that is the interesting part we'll look at right after uh the styling is pretty simple flex one so it takes the whole space justify content center so it's right in the middle of the screen and we have this margin left on the on the the side if i remove it see uh it just so the whole thing starts on the middle of the screen now if we just take a look at the waveform so you see there's one that is normal and one that is reversed so that's why we have these two waveforms i that are kind of you know uh i don't know how to say but it's very similar it's just that they're uh rotated so i'll show you how i've done this uh it's just a view so that's a container and inside that view you have lots lots of views oh one thing i've got to tell you is that i have this gateway forms a function that returns a list of values so you don't really need to understand that basically if you're working with a real-life app you would have real data but i had to mock up all of this and all this is doing is returning an array with 150 values in it so that's very simple and then this is what you get on the screen you know all the different values that we're showing inside waveforms so what i do is i take this gate web forms and i pass it as a prop two waveforms and inside here i just loop through all of them so all the sticks you see in that component are just normal views every stick if you look at the code again very simple it's a white background that's why you see it white the width is defined inside here so you understand why but i put a few constants here so each stick is just two pixels wide uh there's a margin that's why it's not all next to each other and then i have this other constant stick full width that we'll use later on and you'll see why okay now about the reverse thing you sew as the property here again very simple uh it just basically just change the opacity so that's why it's not as wide as the upper part and uh you have a different height because actually in this soundcloud app both waveforms are not uh do not have the same height and then i just change the outline item so that you have this reversed effect if i remove this you'll see what happens see just duplicate but we want it to be in the other direction all right so that's pretty simple and if you don't understand this correctly don't worry i will share all the code on github so you can have a look uh after the live stream all right inversed instead oh yes that's true okay so i made that mistake it's rever it's inverse i did that again uh okay i call it reversed that's inverse okay don't pick up on me um okay so that that's all we have but as you can see there's a bit of a problem because we have all these sticks and we want to show an orange background right as the song goes on we want to fill all of this and to do this we're going to use a masked view so i don't know if you've tried that before but basically the way it works here there's a there's a really good example uh you have a mask element so when you're using a mask view it's just like a view but it behaves a bit differently um so you have a mask element and you understand in a second how this works with a text that says basic mask all right and below you have all these views that are just flex one with different color as the background and if you look at the result of that this is the the part we should look at so you have the mask element which is some text basic mask and what you have inside that masked view is how you should fill all of these uh letters so basically again the mask element is as if you had to cut something in a piece of paper so here it's as if you had to cut basic mask the text and then you would fill this with different colors all right so what we want to do on in it for our app is to cut all the waveforms and then we want to fill them with some white or orange based on the progress of the song all right so it's exactly the same as with text and the colors below but with sticks and the waveforms and some orange all right so for this you'll see it might be not so difficult if you don't really understand mass view you'll see how this how this works here so i'll start by importing it that's the first step import last view from this one and i will come and add it to the render method all right so i'm just looking at my notes um i think we'll just replace this one with the mask view actually we need to keep this one so we'll just rub the whole thing with as a mask view all right oops okay so as i told you in in the previous example there was the text was the mask element and here we want the waveforms to be the mask elements so we'll just take all of this and put it as the mask element here all right one thing that is important and they mentioned in the example is that we need to keep the background color transparent okay so let's just do that exactly the same here oops i couldn't background color transparent and i think everything else should be fine maybe we'll just put this on the outside view um and let's make sure this is taking the full space so this again works just like a view and it's going to put the mask element inside it and then we're going to put some elements inside the mask view to have the white and orange colors against the height and width 100 okay what do we get after this actually okay we don't see anything um i think that's that's normal actually um let me just try to add a view here that is flex one and it has background color orange okay so see this is how it works oh sorry i just have a look at the chat uh the naming variables programmer's name yeah exactly uh heist and turn oh it's good to see you center good to see you so as you can see this is how the mass view works you have the mask element all the way forms all the sticks and then what you put inside here it's just going to fill what you have a cut with the mask element okay so if i say red here just going to fill everything with red etc if you see the waveforms changing every time just because fast refresh is just recreating this every time so we get new values but here really just the color is changing okay so in our case we're just going to need to do this based on uh the current progress of the song right so to do this uh we'll need two things we don't want the whole thing to be white or orange we want to be white by default and then based on the current progress we want to fill all the sticks with some orange okay so the default one will be white oops white again if something's not clear please say it in in the chat and what we want so just imagine this is taking the whole space okay and we want to put another view on top of it that will work pretty much the same so it's going to be position absolute because we want to put it on top of the review so position absolute z index of one because we really want it to be on top of it and i'll just say background colors wait it's a bit of complex color that's the one from soundcloud five eight three six and we shouldn't have anything yet because it's position absolute but we didn't set any you know any size so let's put it left zero so it sticks on the left side bottom zero so that's full height top zero and if we do let's say width ten percent okay just to see if it works see you can see it's already starting to fill the white sticks all right if i do 20 it's going to go 20 etc okay if i go 100 you get it all right so to make it work we'll need to play with this a little so based on the current movement uh you know as we go from left to right we should fill in this part but we'll see this in the second part of this live stream all right so i think we have all the building blocks to do the next part i hope this part is clear because if you haven't played with mass view before it might not be i hope it is all right if everything's clear we can just move to the second part so what we're going to do now is to make it all move all right and as you might know already we're going to use a pan gesture handler if you're unfamiliar and familiar with this don't worry again i'll just go through all this with you so basically panchester handler is something that comes from the uh react native gesture handler library and now we can just interpolate it with uh actually you'll see um we don't even need interpolation disk in this case but you'll see how i do it also there's probably other ways of doing of doing this stuff so let's just you know let's just see so the panchester handler what is that um i will start just by importing from the library okay from react native gesture handler i will just import it here manchester handler um this is just something that basically say for example if you want this view to be interactive you're just going to rub it with a panchester handler and then you're going to say okay if someone touches that view what should happen all right what's the logic behind it and this is exactly what we're going to do the only difference in our case is that we want this whole mass view to be interactive so it's not going to be this view but we're going to put the panchester handler around the mask view all right now inside of pantry handler that's just a rule you need to put a view so that just you know if i run this it's not going to work i really need to pass it a few and it doesn't have to be it can't be just a regular view it has to be an animated one if you're familiar with this i really encourage you to watch more videos on my channel that really explains how animated animation works with rec native so let me import this from reanimated that's just a better version of animated um alright and it's not just animated it's animated.view alright so we're ooh that's not good we got their building blocks and we need to make it flex one just so it takes the whole space so now if i refresh all that it's not going to change anything because we're not setting what this handler should do so it might just listen to gestures but it's not going to do anything we have to let it know what you should do with the gesture okay so to do this we need to create a gesture handler here so let's create it hand gesture handler and this time it's going to use a hook from reanimated i think it's use animated gesture handler and this will define uh what should happen when we do a pan movement pan gesture on the mask view here okay so i'll just grab this and attach it on just your event so that's how you connect the logic with the panchester handler component and then what matters is what we put inside so that's really the difficult part okay so what we're going to put inside this is the different steps that you have in a movement so whenever you have a gesture it starts then it goes to active mode okay we're moving the finger on the screen and then the end event so that's when you stop you release your finger because you have three different hooks that constitutes every movement so the way it works in reanimate it is you're going to have unstart so that's when the movement the gesture starts on active well that's when it's active okay and on end and you'll see we'll put different things inside of these okay so someone say why didn't wrap mask element with gesture actually that's it that's that's a good that's a good thought both are possible uh you could definitely i think put i'm not so sure uh i did this way but either way i think it's it's going to work okay i just did this way the other way would be correct as well i just have to make a decision i just that the math view is taking the whole screen so i just said okay let's wrap the whole thing with a pad gesture holder i hope that makes sense so back to the hooks so you have uh three different callbacks when it starts when it's active when it ends and we're going to put different things in there uh what i'll start by writing is the example you get from the documentation and i'll explain it right after so this is exactly what you might see in the documentation oh sorry i forgot to mention something i forgot i was about to use something that i haven't declared uh basically the way it works is that you're going to declare the logic but you have to keep somewhere where is the current touch on the screen okay because if you move the finger you have to say okay now we update the value where i'm maybe 10 pixels on the right okay update this value that contains the current position of the touch and to do so you know usually in react you'd have a state but with reanimated we use shared values if you have some experience with animated just a regular thing from react native you probably know animated values that's exactly the same so i will create a value and again if you're very unfamiliar with this i'm pretty sure it's going to make a lot of sense very soon so by default this value is zero and as we move on this screen this value will change all right so it's just like a state really that's how you should see it so when it starts we're going to say context start x and you might be thinking what is this context and don't worry i'll explain very quickly here it was pan x value equals so that's the part you know as we move the touch on the screen it's going to update this value just like a state really context start x plus even translation oh we don't have this yet so let me add it event context any particular reason for not using typescript well i use it all the time personally it's just that i always think maybe someone doesn't use it yet and is watching the stream and you know might not understand it's already complex with animations and all this i really want to keep things simple but i totally agree uh it would be better with typescript all right so this is really the default example you'll see if you go into documentation and the way this works uh it's not so difficult you'll see basically here this is the the first really important part whenever you're moving your finger on the screen it's going to update this so again see it just that as a this that set state and you're updating the the state as you're moving on the screen and what you're saying here is add this value that is the distance you've you've made between the moment you started the gesture and where you are right now so let's say you just touch anywhere on the screen and you move 10 pixels on the right translation x will be will equal to 10 okay if you move it to 10 20 pixels it's going to be to be 20 etc the problem is that this value is always related to the current gesture meaning that for example if you made a gesture 20 pixels on the right then you release your gesture and you start again and you move maybe 30 pixels on the right it's just going to be 30 pixels it's not going to be 20. so what you want is to actually whenever you start a new movement you want to source store somewhere what's the current value of our touch and then whenever we have this value that is just relative to the current movement we want to add this constant that is where was our touch before we start this new touch so that i mean i hope it's clear just that you if you didn't have this it would always start from the from the beginning again okay so if this is 10 then it's just going to scroll back to 10 it's not going to take in consideration where you were before making that new gesture actually i think this is not going to do much because we're updating this value but we're not updating any styling anywhere and the way it works uh we've reanimated is that you need some reanimated style so let me show you how you can do this uh basically what we want to do is as we move our touch on the right or on the left we want to add a transformation to do let me see which part [Music] couldn't find it hold on yeah we want to add it here uh so let me show you basically what we want to do is to have something like that translate x and if i say 10 i need to refresh the average give me a second up and just put it back to zero so you can see the difference all right maybe if i say minus 100 okay so see as we move we want to update this value and that's very handy at this point because we have this pan x value that records uh how far we moved on the x axis the horizontal axis and we can use this uh here so it automatically maps the gesture and keeps translating this view so for that i'll need to create an animated style so i'll just call it mask animated style and you quickly see how all the pieces come into place with animated style and reanimated you have this hook use animated style that returns an object that is that is exactly what you have in a regular uh styling in in recognitive so if you say like for example opacity zero that is just a regular style okay but what we want here is to have an animated style so to do this i want to do exactly what i had here transform and we'll pass it translate x and here we can use the panic's value that we had there so it might be a bit weird for you to do this right if it's the first time but i'll just show you how it looks like all right so just add it here refresh and now as i move on my screen see it just adds transform so we have a problem uh we can move way too far right but see it's already working so we need to put some batteries etc but it's already it's already working all right um okay we'll add a bit more stuff here uh for the batteries but this already looks fine and see maybe i can show you what would happen if we don't have this uh you might understand i think i need to refresh every time i make changes to this again don't ask date to stop me if something's not clear okay so now i'm moving and i release and then i start again and see it starts all over see every single time and that's because if you don't use context it forgets where it was before and that's why why when we start a new movement we say context start x equals current panic's value and then we add it every time we're inside there so it remembers where it was before starting this new gesture okay so i just put it back okay it's working uh is this going to be recorded as christian every time it's recorded and you can find it on the channel a few hours later so don't worry and also there will be the code and everything so all right so we got somewhere but we can't see uh you know on soundcloud when you move you see it feeling with orange in the background and that's why i explained everything to you earlier with this and we're going to be able to make it working so again we have the hispanics value and we're going to use it to see where we are on the screen to fill this view with orange all right so so so so to do so it's not going to be so so difficult we'll need another animated style because it's going to be a style property that changes based on panic's value and because panax value is a shared value you can't just say you know you can't put the styling right in there you need to use an animated style to hook uh to connect both things together okay so here because i want to change the width of this view based on panic's value uh i need to use an animated style so let's go let's call it played animate style use animated style and once again this only returns an object as i told you we're going to play with uh the width um maybe i should just do this so this equals minus one times it's it's the same it's just a shortcut uh okay now we'll pass it to here we use an array otherwise we can't pass it and let's see what we get okay so it's working here but i feel like you can't see my screen hold on so as always for those are not familiar there's always some problems but okay here we are um see it's all coming into place so now as i move it's filling the background part with the mask element all right so you have this weird thing now because there's no boundaries you can really go really far uh we're going to fix that don't worry but see that's pretty cool that's pretty cool ready all right all right so now it's working but as i said we need boundaries so for example i shouldn't be able to you know go this far right it should just stop right in the middle and here it should stop at this point right shouldn't go any further all right so to make this uh again it's very very simple as you'll see also i forgot i forgot to explain really this part uh maybe it's unclear why i say -1 times this basically if you move on the right to move on the right you need to move your finger on the left and that's a bit counter-intuitive but that's what you're doing so basically the movements the transform will be negative because if i move on the left then you go from a position position 0 to minus 10 minus 20 etc as you move on the left side uh so if i said width equals panic's value it will be width equals a negative value right but what you want is if you're at zero it shouldn't show anything if you're a 10 pixel it should fill the whole thing for 10 pixels but because it's going to be -10 you want to multiply this by -1 so that's why i put this minus sign in front of it i hope everything's clear so now back to the boundaries part guess you need to tell me i don't see any comment i'm really worried it's not clear or maybe it's that it's too clear so that that would be good but you have to let me know if it's i don't have i don't have feedback um okay so for the boundaries uh what we need to do is here instead of always updating panic's value we want to say okay are we allowed to go this far so instead of updating straight away we want to say are we too far if so don't do anything and if not just fill the whole part right so we need some conditions there uh everything is clear thank you oh cool okay but you know it's just i'm facing my screen and i'm not too sure because you know where in your classroom you see people nodding or totally lost so you can tell but you're still a different uh cool guys cool guys thank you um all right so back to the boundaries basically as i said instead of straight away updating this uh we want to check if the next value is going to be outside of the boundaries so instead of updating straight away let's put this inside uh next panics okay and here we're going to have some conditions so we're just too amazed how easy it is it's easy after you had some after you went through after you went through the thought process um you know when you do it it's not it's not that simple right so the first thing we need to check is when we have this situation okay so here we're at zero uh and if i go on the left we're basically going to positive right as i told you when we go on the left it's going to be negative and if i go past here it's going to be positive so if the next pan x is superior to 0 well instead of saying panics dot value equals next pan x we just want to say okay keep it at zero don't go any further so let's do panic's value equals zero uh another condition we need because at this point then we won't be able to move anymore because then there's not the panic still value equals something so we need another condition and this one will be when we're past this moment right when we're here we shouldn't be able to keep going right it should just stop there uh i will write the code for this and i will explain it right after because again it might not be very clear panics that value equal max panics and for that i also need to define what max ban x is just give me a second uh max max equals no that's not correct i'm adding a lot of stuff but don't worry i'll i will go through each step so you understand what's happening all right so uh what i'm doing here is a bit arbitrary but you know you kind of need this at some point um what i'm doing here is i get the full dimension of the screen and the reason for that is that in soundcloud for some reason uh when you hear that's the default position and actually the last point you can be at is the width of your screen so you can basically only scroll so here i'm scrolling half of my screen and then scrolling for the our half um and so what i want to do is to say is to check sorry is to check when we're past this distance so this distance should be the full width of the screen right because this is 100 remember i had the margin left 50 but the whole thing here we see in white is a hundred percent so that's the width of my screen and so all i should be checking is are we past the width of my screen or not with pan x so what i have here the max pan x variable is what is the the width of my screen and again i put a negative because panics is going to be negative as we go on the right so the maximum value we can get from pat for panics is the width of our screen okay again negative because panics is going to be negative and so now that you understand this part if we look at this here was just we're just checking if the next band x value so that's the current position on our screen is lower than the maximum value okay and if it's slower that means we're past this point and i know this is misleading because again these are negative values so we would rather say you know if this is bigger than max pan x then keep it max span x that's how you would set a boundary but again we're working with negative values so we're using the opposite sign all right so we have our two boundaries i haven't refreshed yet but that's the next spanx period to zero we just keep it at zero if it's lower than max spanx keep it at max panics and the last case is just oh someone told me i missed the that value where nexpanix.value oh because no this is not a shared value so we don't need the value here it's just a regular variable uh you only need that value when you're using a shared value so if you want to get the value for panics you're going to say panic.value otherwise you don't need it okay so the last part here is panic.value equals what we had before so you know we had panic's value equals all this so it's just going to be next panics all right um let me refresh everything and i think this time it's going to be much better because we won't be able to go past this point so now you can't see it but i'm really trying hard to go on the left and see i can't if i go on the other side same thing happens it just gets stuck there so that's exactly what we want right and see what i really love about all of this is that with just simple logic we were able to make this and it's it's not it's not a big deal once you have it but see it just it just works um okay i think we're good with the second part and we'll be good to go to the final part so today just three parts not four part i'm about to be out of breath um okay i'm just thinking if there's something else but i think that's that's all right okay let me show you what we're going to do in the last part so what we want to do here is the play or not to play part uh which is when you tap on the screen so if i show you the final result again this will what we want so this is normal okay and when you tap see the whole thing just squeezes back to to be very small right maybe you'll see it again in a second see when i tap it just all squeeze in and then i when i tap again just goes back to normal the only thing you might not really see clearly on this part is that if you're not touching your screen and if it's playing uh it should automatically keep scrolling so without us touching the screen it should just keep scrolling so in this part we'll see how to do these two things and uh how everything will be clear so let me jump back to the code all right so the first question you should ask yourself is how do i detect a touch on the screen right um as we're working with as we're working with reanimated you're not going to be able to use just a regular touchable you're going to need to use tap gesture handler which is just something else to detect touches with reanimated and gesture handler okay so let me first import it from uh gesture handler tab to shareholder again this is exactly like a touchable but for these libraries and because we want to check when someone is touching the screen here i just wrap the whole thing again with that and if you remember earlier i said uh when you have the pancreas your handler you need to put an animated view inside it so that's exactly the same thing here let me put animated view and again just going to be flex 1 and let's rub everything with it all right so if i refresh nothing should happen at all because we need to add a gesture handler here so that's exactly what we did with the puncher handler but this time we're going to do with this one and you'll see it's it's really much simpler so we have once your event and we don't have the uh just your handler yet so let let me make it here uh tap gesture handler and you'll see really the logic will be just the same use animated uh gesture handler and here we just want to say when we tap so then that's when the gesture is active do something okay so we don't need on uh start or on end and by the way this one here we have on end we didn't put anything yet here but i will add it later maybe i should start by doing this okay maybe i should start by doing this sorry i'm thinking at the same time maybe we should do this before we continue basically there's one problem you don't really see on screen because the sticks are very uh they're not really wide but if i stop here for example right in the middle okay i can stop in the middle of a stick and that's a problem because we want every time when we release the touch we want it to snap to the you know nearest stick so if i stop it let's say here in the middle i would want it to just scroll back to maybe the previous one so in a way when we stop on a stick if it's in the middle of it we want to snap back to the nearest stick on screen okay i hope that makes sense and the way to do this is that is that when you release the touch you should do something here you should update panic's value based on what's the current the sorry the nearest stick you have on screen and so to do this you just need to say panic's value equals and here we need to find the value the for panics which is where's the nearest stick to do this i created this helper function so you can see worklight if you don't know what a worklet is it's just a function that you will run on the ui thread this is used internally by reanimated because basically the way readymade works if you don't know is that it's running all the animations all the computation in a different box than your react native app is usually using so that's why it's very smooth on every device because it's just running in a different box and so when you say worklet it just says run this whole cod uh whole card on the different box okay so so so so so this is an helper you don't really need to understand it but it just helps you to find the nearest multiple um as you can see all the sticks have the same width so when i stop here i just want to see okay where maybe 100 pixels on the right where is the nearest multiple of the width of a stick okay so that's just math if you don't understand it well maybe you're a bit like me you were not good at maths before but you'll see what i mean okay so i'll just use that uh i need to update it here and use it find nearest multiple and it will take the current panic value so that's the value maybe where we stopped in the middle of a stick and the multiple will be stick full width and if you were there earlier you know this value equals to the width of the stick and the margin on the right so what i'm doing is just find a nearest uh position on this if i just save oh oh yeah that's because uh hold up maybe this one i forgot to add it before okay so you might see there's there's a tiny now when i release there's a tiny bump because it tries to just snap back to the nearest stick right i think you can see it on your on your screen the only problem i think is that it's a bit harsh you know you release and snaps back straight away we might want to animate this a little so to do this nothing simpler with reanimated you need to wrap the whole thing with with timing what it does is run a timed animation to update this value so instead of saying panic's value equals the next value it's going to slowly move to that value you also have with spring which is a common one if you want to have a spring animation that will make the whole thing kind of bouncy timing is just a very simple animation over time so if i hit save and i do the same thing again see it's it's not as harsh as it used to be when you release it just slowly moves back right so you can't really see it all the time but i think it i hope it's clear on the screen okay so that was really just one last thing i wanted to do um for the top gesture handler here we are basically all of this is going to do is to check whenever you tap this gesture handler it's going to update your shared value that says are we playing or not okay so to keep this somewhere we just need to say cons playing equals u shared value so again it's going to be a value that will be updated by gesture handlers and by default we're not playing and when you're when we're inside on active we're going to update this value so playing the value because it's a shared value and just set set it to the opposite of the current value so if it's true it's going to be false if we tap again it's going to be true etc just toggles the value playing at this point it's not going to do anything except updating this value so what we need is to update the styling uh if you remember the final result the whole thing would shrink and squeeze uh we need to make that thing based on playing uh all right so let me see how we can make that okay okay i talk so much like my my throat is i'm really dying okay so what we have here in the waveform so remember the waveforms component just shows all these sticks we have some height here that is set to 50 40 pixels but what we want is when we play or when we stop yeah i drink a lot of wire trust me when we press play or pose everything should shrink so basically the height should change right and instead of setting the height here we could put it we could put it here uh we could have views here so let me just show you what's the idea height 50 okay just write the first one and the second one will be exactly the same but equals 40. all right um so let me just change this to height 100 percent so that it will take the whole space it has and see it's pretty terrible but as soon as i add these wrappers around this view around it will just put it back in place okay so we get the same thing and you might wonder what's the point why do you do this well the thing is as we now have a listener for the tap gesture handler we want to we want to change we want to play with the styling of these views and set it instead of having height 50 pixels we want to say heights one pixel for example or height zero um and we can do this with animated styles and shared values so i'll show you in a second how this works so basically we're going to need to replace these two and to do so we need two animated styles one will be for the first one one will be for the second one so let me just add these two oh also i forgot to add this here number of tabs you can also use this tap just handler for detecting double taps three three tabs etc uh you just need to say okay this gesture handler should only listen to single tabs okay so as i told you two animated style top waves animated style which will be uh animated style i think you're getting used to it and again this returns just the style object and as i told you we're going to play with the height and here the logic will be very very simple if we're playing well keep it at 50 pixels that that was the original value otherwise just one okay so it will be very very little um for the other one actually i can just copy copy paste this bottom waves uh the difference here it's going to be 40 and yeah let's just keep it at one pixel as well so now we can use these two animated style uh here but remember it's animated style so i need animated view so i'll make an update here i made it just a quick question for the for the people watching um is there like how much do you know about reanimated because i can also adapt to who's watching i always try to keep it simple for everybody but just let me know how good are you we've reanimated what's your knowledge about it okay so we have animated views and i will instead of setting the height like this i will just say top waves animated style and this one will get the bottom one bottom waves animated style okay let me hit save and see by default because we're not playing uh we have this so you can't really see very well but it's just two pixels high okay and if i if i tap so if i tap then we're going to update this one okay so let me tell see it jumps back to the other value so okay that's pretty good but we should animate this right it's it's pretty i mean no it's not pretty at all so we need to animate it a little um and to do this we can use just like what we had before with timing so it works exactly the same we can wrap the whole thing here with with timing with timing and if i hit save again see now it's much smoother isn't it all right i think we we've come a long way already uh it's pretty cool and see you can do it as fast as you want and it doesn't it doesn't slows down anything okay okay um so i think that's pretty good i'm i love how much more sensory matu makes compared to the oh yeah reanimated one and i made it that's true i mean they really did a good work at this oksana i'm not very good i am learning a lot right now type of con is the best for me cool okay look um i really hope this is helpful that's why i do it so i'm glad you're learning a lot of things all right uh i say we're close to one hour so let's finish with the last uh part of this which is uh you know when it's playing so when it's not playing should be you know just like that and when it's playing it should automatically progress right so to do so it's really really simple as you'll see i know i say that a lot but i mean it you'll see it's very simple uh basically we're going to have a function called update progress so for now just going to be empty and what we want to do is to uh as soon as we mount the component we want to call this every let's say 150 milliseconds um so it's just something that's constantly going to be cold and that should just check okay should it play and if so you should just do something like this automatically so now i'm doing it with my finger but it should do it automatically when we're not sliding ourselves okay so what i'll do here is something very usual in react we'll set an interval to call function it's going to be update progress and just call it every 150 milliseconds and as always with use effect you need to return the cleanup function so clear interval if you don't know really how this works it just cleans the interval when the component and mounts okay so in this case it's app so unless you close the app it's not going to unmount but just to keep things clear anyways so this is just going to call this function every 150 milliseconds but for now this doesn't do much right um again what it should do is update panics when we're not touching the screen right when it's playing and when we're not touching the screen so it's going to update panic value and because panic value again is a shared value you can't do this in a regular function you need to do it inside a worklet function because again that's how reanimate it works it's not going to understand it because reanimate run reanimated sorry runs in a different box so you need to say this function if it runs in a different box is not just a regular function it's a workload function so here what we're going to do is i'm if we're playing so we need to check for this well we're going to update panic value automatically and what we could do is to say panics.value minus stick full width okay so you might be thinking what is that again i think i've said that so many times panic's value is negative all right so if i say panic value plus this so stick full width is the width of the whole you know thing i think you understood that uh it's just going to go backwards right every 150 is just going to go like that and we want to move in different directions so that's why we need to say minus all right uh oh i missed a message from amir uh thank you it was very useful as i tweeted please share the initial oh i think i forgot to answer you i'm here okay don't worry i will answer you after after the live stream actually for anyone who's watching this um [Music] the code will be on github but also the initial version of the project will be on github so you can if you want to start from scratch and rewatch everything or it's really up to you you'll have the final version and the initial version i worked with uh with all of you at the beginning of the stream okay so if we're playing update panic's value alright but if we do this as i mentioned earlier we need to say this is a timed animation otherwise it's just going to jump like like that right we don't want it we want to slightly animate all this so let's do what we do best at with timing everywhere alright um you know what actually let's run this and see how it looks like so we're not playing so actually at this point it's calling update progress but because this returns false it's not doing anything uh if i go playing it starts moving but there's one problem here uh the first one is as i move oh actually see um as i'm all like right now i'm holding on the screen but because i'm holding uh it's calling on active from panchester handler here and it's also trying to update here so we need to have a way to say when we're when we're sliding don't do this okay it's only when it's playing and we're not sliding that it should just go forward and the other problem is if we go past this point as you'll see it will keep increase the panic value so we need also to check if we're not past the max pan x value because that's just two things and actually we'll be done with the project for today so the first one is let's do the the simple part is to check are we sliding and we'll do exactly the same thing as we do with playing by default we're not sliding and this should be updated when we're here so when we start to move the screen like this we should set sliding the value equals true when we stop the gesture well you get it just sliding the value equals false right uh so now we have this shared value we can use it here and just say if we're playing and we're not oops we're not sliding then do this and as i told you the last problem is if we're past a certain point we shouldn't go any further right you shouldn't just keep keep like that and this is very similar to what we had over over here um so i'll just add some code and explain to you so if panics.value is bigger than max pen x this is actually the opposite so here we're just checking if we're not to the final point yet if we're not there yet okay keep scrolling if we are past this point stop all right so i just hit save and now we can try the two problems we had so the first one is when we're playing and i move around it shouldn't update see if i release it just starts from this point so that's working and the last one is if we're past a certain point it shouldn't go beyond that point and this is working as well okay uh look i'm happy to say it's four i mean it's four here four pm and everything's done so yeah i guess we're done i think there's nothing else i'm just looking at the chat what happens if you use use state instead of shared value that's a really good question um basically i think it just goes back to having these two boxes um if you're going to work with shared values at some point so that's what we have with panics you just want to keep everything inside the same box all right because otherwise you're going to say you're in that order box but take that over value from the different box it's just going to be not as smooth because it's as if you had two toolboxes and you all constantly you know using tools from one to and for the other if that makes sense so you just try to to keep all the animation all the gesture logic on the ui thread which comes with shared values with animation uh gesture handler etc and all that comes uh i mean should be done in my opinion inside worklet it's not impossible to do it with states but it's just that you know only these parts are using shared values so why would you want to have a state that you know generate free renders and all that you want all of this to run onto your thread so that's why i'm using your shirt value here yeah exactly i poor said it sorry very well all right um i won't take any more of your time but before we end uh as always it's kind of a ritual uh you get to decide you get to decide what we're going to do next week and so as you'll see there's two options as always what's for next friday the first one is the alphabet scroll uh so maybe if you don't have an iphone you don't really know how this works but it's just that when you move your finger on the right so you have all the letters from the alphabet you automatically jumps to a different section of the the scroll view on the left side so it's it's interesting and we could do that with reanimate as well has some interesting gestures otherwise we have the beloved reddit has been out there for i think it's been three times already and every time people decide to go with the other one so you get to choose you just tell me do you want to see the alphabet scroll just say alphabet or scroll or the reddit part i always find funny because you know i'm pretty sure there's people coming in and they leave after maybe 20 30 40 minutes and they always forget or miss this part although that's that's pretty cool you get to give your opinion and decide read it please okay look i'm surprised i think it's it's the first time we get more reddits than the other one okay that's cool cool then yeah right it's been defeated three times okay so let's go for reddit next time um i hope you had a good time everyone uh for me i'm out of breath but i'm i'm i'm really happy if that helped you uh i will leave you with the final screen as always so that's this one thanks for joining see you next friday again same time same place thanks for being here really and have a good weekend bye you

Channel: evening kid

Views: 1,783

Rating: 5 out of 5

Keywords: react native, react, live, eveningkid, tutorial, evening kid, learn react native, learn, google, soundcloud, waveforms, waveform, music, player, reanimated, reanimated 2

Id: lhOXm2UFB18

Length: 61min 25sec (3685 seconds)

Published: Fri May 14 2021