Building the Worst Volume Controls in React Native - a how NOT to guide

what's up no Jazz developers welcome back to a new Friday stream and today we have something a little bit different than we usually have on Fridays We're not gonna build a project a real world project that you usually uh expect us to do today we are actually going to build the worst volume controls I've got this idea a couple of weeks ago uh when I saw a tweet Fred and actually a bunch of developers I think in 2017 uh competed to design and implement the worst volume control on web I'm super late to this trend uh like you couldn't be more late but I thought like it's a great opportunity for us to see how we can do some of this volume control in react native and as you can see there are a lot of hilarious one like um you we we can we can look at them during today's video but yeah uh we're gonna do that in react native with Expo and every dump idea is actually an opportunity to learn something new so today uh we're gonna learn different types of interactions in react native uh I think in comparison with that web on mobile we have different types of sensors and other different input methods that makes this challenge way more interesting so I'm really excited to to dive into this we're gonna try to replicate some of our ideas that people already did in uh in that competition uh only we're gonna do it in Rec native we're going to see how we can do that and by then we're gonna also get into more advanced type of volume controls and where we're gonna work with some sensors data we've reanimated to make animated volume controls that will not even not only be useless but at least they will be beautiful and they will work well so are you excited about that let me know in the description and um for this project I also provided you with a starter project so if you're interested to implement some of these volume controls yourself which I highly encourage you to do because you will definitely learn something new then you can download the starter project in their asset bundle I included it invest and bundle you can find it in the description below of this video and here I included the project which has different screens where we will be able to implement different kind of controls the default one here as you can see it's a normal it's a normal yeah like volume control very similar to what Apple music has and actually this player is working so you can test it in real time how the volume control works so yeah I encourage you to download the startup project try to implement some stupid and uh useless volume controls and share them with me on Twitter and I would love to to see your creativity and how you you will Implement them in react native I will definitely want to to see what you guys come up with but uh let's go ahead and start with some ideas first of all yeah let me quickly open like this blog post because I think this one contains uh uh some good volume control from that one and I think them uh the first one and the easiest one is one that works with random values I think it's this one you just press on a button and it changes the volume to a random value that's not how you would expect a volume control to work but that's the point of today's video so real quick let me show you how this application works it's a Xbox application built also um with Expo router so the navigation is handled by the X4 router that's why in our app folder these files that we create here they will automatically be mapped to a new uh route in our drawer Navigator here in our application and also we have this music player that we can use to to render on the screen not to have to code it ourselves other than that we have a hook which comes from our Global volume con context and this hook allows us to globally change the volume uh that is going to be used by the music player so by using this hook we can update the volume and it will automatically be set in our music player so yeah with this one we are we have like the the necessary building blocks to to put together and to focus only on volume controls today so to create a new one let's go ahead and duplicate the template file and leave a template for us to to have like a starting point and this one let's show let's say it's going to be a random volume control so for the random volume control if we navigate to this one random we don't have any volume control here so let's go ahead and import a button from react native button and let's go ahead and render the button below the music player the title will be something like change volume uh and also we should display somewhere with volume I think it will be nice to render it uh in a similar way like with this slider so let's actually copy this slider from here from index into random above the only thing is that I don't want to change the value when we move this slider because it's gonna be handled by the button and also I want to disable that this slider not to be interactive just to display the volume now if we go to a random if I press on the change volume nothing happens because we have to pre to call on press event and whenever we press let's set the volume set the volume with a random value a random value we're going to generate by calling math dot random and this will generate a value from 0 to 1 and that's actually what our volume expect a value from zero to one where zero is mute in one is uh uh yeah full full sound full volume and now if I press change volume it works and if you play the sound like you'll see that it actually works so very stupid but here we have our first uh volume control from our worst volume control series Okay so this one was quite easy we had to work only with a button and to set it using math.random for the next one let's go ahead and do what by the way guys I will definitely definitely need a lot of um recommendation from you or ideas so if you have some ideas please write them in the chat I would like to to hear them and we'll see how we can Implement them I want this live stream to be a bit more interactive so even though like we're gonna start with some very simple one by the end of the this tutorial I want to get into some interesting Concepts that will allow us also to learn something new specifically about animated that's gonna be something interesting the next one you know what let's go ahead and create um basically list all the display render on the screen for the next one let's just render on the screen all the possible values for our volume from 1 to 100 and whenever you press on one of these values you're gonna select that so it's a very similar select box and yeah let's see how we can do that here so first of all let's duplicate the template in our application uh and let's say list yeah list list will be okay now here we need to render a lot of options right so how many options we need from 0 to 100 that's going to be and that's going to be like 100 digits we need to not digits but 100 results we need to render on the screen for these options so let's go ahead and start with an array of 100 and then let's map through this array and for every array let's go ahead and render I don't know a view with a text or just a text let's start with just a text and yeah let's say one here We're not gonna see anything because we have to play a bit with Styles so let's say the color of this text should be white and still nothing because we are in random we should go to the list make sure when you are working you are on the right page that you expect to be so it's still not here if I put it outside the array it's there array dot map okay we had to fill this array with with some value not to have it undefined but yeah then we see a lot of values of one let's go ahead and actually render them basically the position of the item like one two three four and so on if we take the value here that's not gonna help because all our values are actually zero because we filled it with zero but if we take the index and work with index here that's going to be zero one two three and so one so I think that's okay that's good uh now let's put them all in the same Co in the same row so for that we're gonna wrap them inside the view like this let's put their way here and for review styles we will say Flex direction we want to render in the same row now they do not fit in the same row so we also need to say Flex drop to go from a new line if it doesn't fit in the same row perfect now let's go ahead and play a bit with the text um will it be able to work here with border color white and border with one yes and we fighting or maybe let's do something like a whiff like fix with 20. 22 we need more 30. okay and height as well 30. and maybe some fighting like five not parting I meant margin we're gonna get to the partying in a moment okay we have something okay okay uh now we need to align the the digit in the middle um text align Center I think just with I will I will I will go with a padding probably it's a hecky hacky way but it allows us to to do it like this and later if I will want to say background color red to highlight it will it will I be able yes I will be able to do it okay okay we have something so let's also render something here a text saying select the desired volume so bad it's so bad I will do it white come on font size 20. but at least it should look good guys like if it's useless but it should look good 500. yep and now these text boxes should have a OnePlus event and on press what should happen we should set the volume to that value so on press uh we cannot basically set volume to the index because indexes is a value from 0 to 99. we need the value from 0 to 1 so we're going to divide this index by 100 and in that situation we're gonna have our desired volume right or no or should we just add another state variable here um for for values set value you state let's start with a 50. and here we're gonna set value to index then every time this value updates so we're going to use a use effect we will also update the volume so set volume to what to the value divided by 100. okay let's see if it will work but we also need to provide a way to understand if it's selected or not so here background color let's say if value is equal to index then the background color should be I don't know blue magenta magenta is better color otherwise it should be a transparent so let's go to the list use state is not defined let's import it here use state index plus one I will I'm working with indexes because I want to have like volume zero so as you can see volume is zero but I set value here and then press set value index value equal to index value oh here value no no no I actually need that so I will change this value to here let's do selected value set selected so where we have value here selected value and set selected value like this if I go list where do we still have value okay here at least okay it's 50 and let me see if I can hear something if it actually works yes it works this is the perf this is the best volume control foreign should we do four of them border color as well okay maybe margin not five but two to give him a bit oh this one looks good on my device in X plus one divided by 100 as the last index is 99. um I still want to go from zero because zero is volume zero basically it's mute because if you go with index plus one divided by 100 for the first item you're gonna do one divided by one hundred so that's not going to be volume zero yeah like I think I can add one more to to go from zero to actually one hundred not 99. foreign and have 100 advantage but then it doesn't it's not centered so not by the way guys if you're interested give you access and you can in real life play with this one okay so we have two down any ideas uh whatever volume controls to create or maybe I'm thinking how to improve like how it looks yes this way with gray looks better maybe font weight 500. foreign what am I doing here yes and we have a warning each child in the list would have a unique key so for that reason um the problem here is that we are rendering a lot of text boxes based on an array and when that happens we need to provide also a key for our items so in this case I'm gonna go with index it's not always advisable to add the index as the key especially in cases where your items can change places but for us they do not we will never change places so it's okay for us to do it like this Andy hello and he's asking what's your preferred approach to build responsive UI to look good on iPhone 14 and iPhone SE use flexboxes use relative relative spacing margins not margins like positioning so if you are trying to Center something instead of I don't know setting like margin right 30 pixels and it looks okay on your screen you would actually work with a flexbox to center with item on the screen and it will be centered both on iOS and on Android and avoid using like specific weaves for for things that you want to make like full screen or relative to a screen size for example if you want to to make a button like full screen don't put like with 393 pixels put with 100 or 90 or 70 percent and so on were Flex one and then work with margins Mario is that's a very good idea volume control by having a circle you can drag this circle margin if a circle is small volume is low if a circle is Big volume is maximum that's a very good idea let me note it down and I think when we will get to to this type of gesture interactions we can Implement that definitely thank you keep them coming guys I'm really interested in your ideas um I can go with with a picker like this is a very basic one uh a picker is a basic um input type that we have on mobile devices and I can go with with that I think it's going to be not that hard to implement but also fun to to see how the Picker works and how to work with it so let's go ahead and install this speaker Library using npx Expo install react native picker and we're gonna open the documentation so let's go ahead and install the beaker Library for the next one okay that after that is going to be installed like we have to go ahead and create a new page based on our template and let's do Peak picker let's close our verse here we have it and the Picker let's see in the documentation uh it will look a bit different on Android and iOS like on Android it's going to be like a drop down and on iOS it's going to be a native picker that that we see on iOS so I really think that it's going to be hilarious to have like this type of picker for volume control uh let's go ahead and implement it so that let's copy if we have a big example from here and add it in our Beaker file let's go to our navigate to that one and we need to make sure to import it we're also going to need a state so import ant um import use State and also use effect because we're going to work in a similar way as we had in the previous example from react so here we're gonna have a state let's basically take it from our list because it's going to be the same like we have a state for the selected value that we control here and every time this state changes we're going to also update the volume in in that list in uh from our Global context now if we go to the Picker here it's not there because the selected value is selected value and on value changed we're gonna have set selected value with the item value and then for the actual picker items okay there it is for this one no set selected we're going to work with item index we don't even need the value here so this one is going to be one and we're gonna have like similar to how we did the array here so we are generating an array of 100 values while filling all of them with zero then we are mapping and based on its index we are rendering a bigger item with the index as the label and then we need to close this one so if we go to Picker okay we didn't like it maybe it actually needs a value so let's also say index my computer didn't like that one and just turned off let's try to run again replication oh you should add are you sure you want to uh to change the volume two to make it more annoying yes great idea I love it thank you uh so if we go to the Picker here oh come on what am I doing wrong here hmm is this because of this array I don't know let me try to to take it easier on it pick her no it closes it doesn't like this type of mapping what what does the log say check the render method of template each child English would have a unique that's the error okay okay the key is going to be index so now let's go to this one no it's still the same don't don't make me do oh probably the label maybe it should be to string to string what do you think it can be it can be but give me an error don't just close the application Beaker yes okay let's see what tiles can we provide here tile color white maybe for this one so Style item Style yes in this one we give it here item Style okay here we have it so if we go to picker perfect and let's dislike this one selected value and item index or even like the value like we can work with value because we set it here in the item itself and now we can go from 0 to 100 and we see that it goes to 50 because our state is 50 and if we change it changes perfect and I will add here the same select the desired volume and I just want to test it yes it works yeah I can stop here like I think this is the best one it's a bit hard to um to scroll on on here but on the phone I think it should be perfect all right so one more down we have we have already three of them the random released and the beaker the next one that I thought of I think I think I haven't saw it here so I really hope that this is original so what I'm thinking is to work with binary numbers yeah I haven't seen it here so it it should be by it it should be original but what's original nowadays nothing of course so for the next one I'm actually thinking about yeah doing working with binaries and having like a couple of digits that we can change in binary and that will translate to the volume from zero to all to 63 or from 0 to 100 we'll see so shall we give that right yes I think so for this one uh let's go ahead and yeah like create a new template and this one is going to be binary let's go ahead and display these digits so I'm going to display them in a view let's start like this with justify content not justify content but Flex Direction row and I want to render a couple of digits here the digits let's just play them with with a view and inside a view add text that will render either a zero or a one let's go to the binary page the text let's go with a style color white okay this view I want to give it I think I can go ahead and work with arrays here as well so array but I don't need a lot of digits I need I think five or six we'll we'll double check how many binary digits do we need uh for the maximum value that we want to represent which can be 100. so let's say it's uh six let's fill it with zero oh but actually that one can be our state with digits yes that one will will be our state so digits which is binary digit set digits use state and we're gonna initialize it with array field zero now let's look for this digits let's map I mean for this digit and for every digit that we have let's render this View and instead of 0 Let's render actually the digits from the state let's go here on the binary okay we have something so let's style them I don't know I will sell them with some kind of boxes so let's go ahead and do a background color or even White uh let's do I don't know Flex one to take the whole Space there I don't need this one here maybe some margin then maybe instead of Flex one should we work with a fixed width like 50. go back to binary Flex one will be okay uh height 100 let's align items Center and justify content Center to make them with text centered vertically and horizontally binary here and for the text let's do font weight bold and font size I don't know 20. 24 0 yeah foreign what I want to do is whenever we press on one of these digits I want to update it from zero to one and if it's already 1 from 1 to 0. so this view will become a pressable because I want to handle press events so let's import pressable transform from the view to pressable and now we can also add a one press event on press event what should we do we should from this digits in Array so let's do set digits I want to update the digit at index I don't know at this index I at position I no no no um existing digits or let's say current digit so with a current digits I want to say current at I is equal to the inverse value of current so if current at I is equal to zero then the value should become 1 otherwise zero and then I should return current values doesn't work each child in a list yeah we need to provide the key here but that's not the problem if I just change it like this will it work no uh because I need to copy them binary yes and now I can get back to this one or here we can check like if digit I don't know digit or I'd say update okay perfect perfect I like it so far and out of these digits we should uh create we should transform from from binary to decimal what else I want to do here maybe so whenever these digits update so let's go ahead and Define the use effect when digits update what we want to do is we want to transform from binary to decimal there is a way to do that so if I will do console warn for example Parts int and provide here a string of for example one zero one zero one zero and provide here also the uh how's it called the Radix then it's gonna parse it from here and return it in decimal so we see that it's 42 right now and if I change it here from 0 to 1 that's 58. okay so that means that we need from these digits which are an array of numbers we need to create a string and then using parsing to parse them back so we're gonna do Digis dot um join like this zero 32 48 49 yes perfect and now the maximum volume that we can get out of this one is 63. so that's okay I think I think I like it because it doesn't have to go all the way to 100 because I can go ahead and do set volume with this value divided by 64 or 63. I don't know 64 I think to go from 0 to 99 from 0 to 0.19 basically from 0 to 1 excluding so if that's going to be it like this let's give it a try yes it works and let's give it a title here in binary yes I love it foreign this one is done something to to be more programming I don't know I don't know what I'm doing here okay that one will work okay any other ideas guys what what else should we do so so far we have the random we have a list we have a picker and we have a binary let's let's Implement that with are you sure you want to update uh and let's make that one super safe so behind TV is recommending to do one where whenever you try to change the volume it will ask you like are you sure you want to to change your volume to the value so I'm gonna start with the index actually because let's provide them normal volume control but ask the user if he's sure he wants to do that so let's do an index copy and here um yeah alert or double confirm double confirm is here so here what we're gonna do on value change I will not work with on value change but with on pointer down or which one there should be one when we we stop on sliding start on sliding complete call back call when the user finishes changing the value this one so on sliding complete equal we're going to get the value and using an alert let's ask by user alert dot alert and it also change this one because we don't want to change the volume when we change this one are you are you sure Loom two let's say value and let's go to the double confirm let's change it alert is not imported we need to import it from react native are you sure are you sure you want to change the volume to 0.2 okay let's add those value multiply by 100 and let's do math dot floor and then say percent ah like 63 percent and forward alert you can provide here the buttons that you want to to have so the third one is the buttons let's go ahead and have a type or other buttons text on press Style text yes please yes please on press on press we're gonna change the volume with the value and let's provide another one for cancel hmm okay double confirm one is created thank you for the idea by the way all right so I think we're done with some easy and simple ones uh so far we have created a couple of them uh now I want to get into a bit more interesting something related to animations were the sensors of of a phone and so on for that I'm going to take advantage of our animated we're gonna user animated for it to to add some animations to spice it up a bit and also what we are interested in is in a hook that allows us to run animations based on sensors so if you look at the hooks here there is this username mated sensor that allows us yeah to to run animations based on the accelerometer the gyroscope gravity rotation and so on so if it's going to be a fun one I don't have a lot of experience with these sensors and like with how all these 3D World works but it's going to be fun fun Toto to try it out and see how we can do it um the first one that I want to do is uh very similar to this one here from this design as we can see like you you are able to to drag the Box in order to make them the slider move based on the gravity uh this is the first one that I thought like oh it would be so nice to implement with with an animator because we can actually hook to the Gravity Sensor of a phone and basically move a phone in our hands in order to move um the volume control and I wasn't the first one to think about that because someone from software Mansion already implemented exactly what I was thinking about so shout out to cockpur I guess I pronounce it correctly uh so yeah that's what what he did and basically you're moving the phone in the hand and this one changes the volume control let's have a look and try to implement it ourselves uh in the project so for that first of all we will need to install their animated in our Expo application so let's grab the npx Expo install command is it already installed by default or animated actually yeah it's installed by default okay perfect then we don't have to install anything we can right away implement it so let's go ahead and create a new one based on the template and call this one gravity gravity perfect here we will also need well let's navigate here to find gravity we also need the volume control from our basic one from index so let's grab it from there slider like this okay I will also need to run it on my physical device to see the changes foreign so the first things first let's go ahead and import the use animated sensor from react native or animated and based on this one let's start working with it I'm going to open that documentation for user animate animated sensor and when we are working with it maybe we provide them yeah they provide an example so here is the animated sensor sensor type so send sore equal use animated sensor here we need to specify the type we provide here sends or type and the one that we are interested in is in the gravity we want to know based on how we hold the phone where is the gravity pulling on which axis to have a look at that we can we can do what we can Define um we can define an animated style that will rotate basically we're gonna think like what it will do like we want to rotate our slider left and right based on this gravity so for that we need an animated style so let's go ahead and grab it use animated Style and uh slider view style equal use animated Style and this one should return the style that we want to apply okay but what I wanted here to say is let's console log sensor dot value sensor.sensor.value value Dot and here there is Vera X Y and Z actually I think we can this structure oh why I'm not sharing the code sorry guys so what I did is in our gravity.js file we imported use animated sensor from reanimated and the sensor type and this this is how we hooked into the Gravity Sensor and the next step is based on the sensor value we're gonna create an animated style that is going to control how our slider looks on the screen before that I want to check the sensor value and this sensor value has x y and z let me quickly render them here x y and z and open up I'll open my phone let me open the application on the phone to be able to rotate it in my hand thank you come on why are you not running okay here downloading here we have it gravity use animated has to return an object yes the hook use animated should return some Style so let's return an object let's go back to there with gravity and we will right away see the changes so if I'm gonna go ahead and rotate the phone in this direction as you can see the first value which represents the x-axis specify changes the value over Gravity from -9 to 9 on vowel Direction so that means that the rotation that we're looking for for is that X the gravity that pulls on the x axis the X1 okay perfect we're gonna only keep that one for now and what should we do with that well let's go ahead and rotate the slider that we see on the screen so the style prop for rotation we can rotate based with styles using a transform and here in the transform we can specify how we want to um to transform we want to rotate on what if I'm not mistaken we are we're gonna rotate around the Z axis so if I specify here I don't know 30 degree nothing will change because we are not yet using this slider view Style what we have to do is to give it to the view that contains our slider so let's go ahead and add it as an additional style here besides this static Styles as the slider view Style still nothing is going to happen because this is a normal view but in order to animate something it should be an animated component so let's import animated animated from react native animated an animated contains animated view so animated View rotate if I do here background color red oh because we are in the default if I go into the gravity yeah make sure okay if it works it works so as you can see the background color red we don't need but the transform and rotate Z if we provide here positive value it rotates on in the direction if we provide negative value it rotates in the other direction so what we're gonna do is actually we're gonna use the value from our sensor for this value let's do it like this x degree and yes it works I'm gonna connect my phone and let me let me try to show the screen of my phone here it is so now if I rotate the phone in my hand as you can see this bar rotates together with it we can multiply this by two and this will increase the amount of rotation if that's what we want save and now it will rotate more as you can see and even like you can you can play with this value to to make it look how you want it to look where's the first part and that's the easy part to rotate based on where the gravity is pulling the second part that will actually pull the value of the slider is going to be a bit more interesting for that one for that one we're gonna need a shared value that is going to represent our volume so let's import use shared value and based on this value we're going to be able to drive like the position the animation of the slider so let's go ahead and do um shared volume equal use shared value we're gonna start with I don't know zero Maybe now we need to hook the value of our slider this value to our shared value that we Define here we can no longer work with State here because the value of this variable is going to be controlled and updated based on the sensor on the UI thread so on this thread we should work with shared values to take advantage of performance benefits that's why instead of working with a volume and set volume which is a react State we're going to work with a shared volume which is a shared value and this one can be accessed both from the JavaScript thread and from the UI thread so our next goal is to send that value here to the slider to do that as I said in the previous step we need to make the component an animated component like we did here with a view animated View I think the problem is that we cannot animate it doesn't have a slider slider is not a A Primitive rack native component slider is a custom component but it's okay because we can create using Create animated how create animated component or how what's the what's the function name create animated prompt what's their function called reanimated create animated component use animated props create animated component I think it's that one create animated component create or animated create animated component create animated component now animated slider equal create animated component and we pass where a slider now instead of using the the slider where we're going to use the animated slider which is the same slider but uh and Define is not a function shouldn't be is it animated dot create animated component yes that's right so as I was saying it's the same like slider but now we are allowed to animate this slider okay uh previously we saw how we can animate the style using the use animated Style now the problem is that in our situation we don't want to animate the style we want to animate a property the property value of this slider so how can we do that we can do that by using the hook use animated prop so let's go ahead and the import first of all use animated prop use animated prop s and Define here the slider props equal use animated props and here what we want to return is we want to return the value the value prop which is should be equal to their shared volume dot value now when sharevolume.value changes it will automatically update these slider props and the last thing is to send these two animated prop and slider props and to comment out the value okay what do we have now if this one is zero if I add it to 1 will it change not sure probably not but use animated props will it actually change if I do I don't know uh sensor Dot sensor dot value dot X will something change here I should go to the gravity okay yeah as you can see it's already working something is happening there because we mapped the value we mapped the value to the sensor value so when we are moving into that direction it's going to be like maximum if we're moving that direction it's going to be minimal but uh what actually we want to do is we actually want to simulate a bit of a physics and we want to uh to accelerate in One Direction when we are moving in that direction and uh and so on so for that reason we're gonna move back to mapping the value to the shared volume value and now nothing will happen because we are not updating anywhere we shared volume where do we want to update well we want to update every for every frame every frame that we update the UI we want to calculate where should be the volume based on the gravity should it be more to the right more to the left and so on to implement this kind of frame based calculations and animations we will use them use frame callback this use frame callback let's do it here use frame callback the Callback will contain their frame info and we can do calculations here so for example we can console log frame info and you're gonna see what information it has I think I need to stop it so we can focus on one of them let's remove it and we see the values are time since first frame time since previous frame time stamp and so on so what we are interested in is in this time since previous frame to know the Delta time like how much time should we consider for updating because if we are moving for example one meter per second and one second passed we want to move the ball one meter to the right that's how physics works if we if only half a second passed we're gonna divide the the speed by the but by that number and we're gonna get half of a speed probably I'm not the best at explaining math in this situation but what we are what we want to get from here is the Delta time and the Delta time is going to come from framing for DOT time since previous frame for the first frame it's going to be null so let's check if it's null let's stop here return otherwise I want to update the shared value shared volume value I want to move it just a bit in the direction of uh of where the gravity pulls the gravity pulls into this sensor valve sensor.sensor.value.x so if I leave it like this uh uh nothing is going to happen so if I go to that gravity okay it works but it goes very fast because first of all we need to multiply this gravity by the Delta time in order to have smooth animations and to move only with the amount of of of uh only the distance relative to the time that passed now it's still a lot and for that reason we need to decrease this by multiplying with a constant like 0.001 this is going to be like a like a speed like how fast do we want this tool to move probably too much too much come on come on why it's not opening Where is the downloading let's wait and here we have our gravity oh and it works still the speed is too much so I'm gonna decrease it more save oh I know I know I know I know I know if we hold it this way too long the value goes basically it becomes too big and then when we come back we need to wait a lot of time for it to come so it's not visible that with the shared volume value probably became like Millions but what we are interested in is to clamp it from zero to one so we can say shared volume value I don't know like is equal to math Dot maximum between shared volume value and 100 and this way we will clamp it not we need to do minimum between these two and then maximum between that one and zero and this way we will clamp it from 0 to 100. this one is the default and no matter how long we will keep it this way when we move it back in the direction it will start moving no actually it's not working minimum between the value and 100 and maximum between the value and zero gravity one two three so for oh I know I know I know I know it's actually showing me 100 it should be one because we are working with zero to one yay now it works better okay so something is working it's actually moving based on the gravity but it's moving in a linear way so for the next one like so far I've been able to do it myself but at this moment I wanted to check like the source code from uh uh from reanimated because they implemented this one so they also implemented an acceleration parameter and that gave this animation an even more realistic look because at the moment if we put it this way it will go in that direction I can even slow it down a bit for it to move slower foreign so basically if it's things like this it moves constantly with the same speed in a real life the ball will actually pick up speed as it moves along right because if it stays like this it will pick up speed more and more more more until it reaches the end so this part of picking up speed is by acceleration or how fast should the the speed increase every frame and let me try to to implement it based on my my math knowledge so basically for the acceleration we're gonna need another value that is a volume hour is acceleration equal use shared value zero now here in every frame our acceleration should our acceleration foreign acceleration increases based on the gravity multiply by that time maybe we will need a bit more to decrease the value of this acceleration and changing the value of our shared volume should also work based on the acceleration so do we need the Delta time here or not the acceleration I think we um the Delta time is already in the acceleration no I think we might actually need it and we should do value acceleration that value multiplied by sensor value multiply with Delta time and then the speed I messed something up so initially acceleration is zero we turn the phone a bit we are not picking up we are not picking up based on the gravity here but based on the acceleration so I think we will remove that gravity from where from the position of a volume because that one is taken into consideration here come on hello Lucas how are you doing so something is happening should we should we multiply this to decrease this one as well oh and I think that we have the same problem with acceleration it increases unlimited number of time so when we reach if the volume reaches zero War volume reaches one then we need to reset the acceleration because we we basically stopped in the in the wall work if I reduce the speed reduce the expectation does it pick up speed yeah I think it does like slow slow slow and here faster yes yes yes now as you can see when moving it like this it behaves like an actual ball like it it will not start moving in the other direction right away but it will start changing the acceleration so it actually behaves like a ball it's just a matter of of how fast you want to change the acceleration and this will imitate like how how heavy is the ball because right now it the ball seems quite heavy like it takes a lot of time to change your acceleration in whatever Direction so if we wanted 0.5 yeah something like this let's let's have a look at them the source code from software mentioned from reanimated oh but I like this one where is it it should be here need time ASMR coding to relax um give me some ideas Lucas for useless or for the worst volume controls I'm interested let's compare with with this one for specifically I want to check them the physics logic so they have here the acceleration which is of animated sensor so for the acceleration we're not taking into consideration with Delta time no no no no wait a second no at the end of the day like they are still like for me yeah like they are still multiplying the the sensor value by a constant like how heavy you want the ball to to feel and when multiplied by Delta time yeah that's that's what they have van for the X they are just simply yeah for that for modifying web hmm here maybe should reduce okay if it's too fast and reduce it on the acceleration side zero zero one hmm okay you need to it's very hard to balance this one the ball seems to move very fast so the acceleration changes very fast I want to decrease this one or to decrease we need to increase the this number right gravity okay perfect I like it foreign that's another thing if you are implementing very physique if you want to be very um close to the physics you also need to implement friction because if it if the x is at zero it will still move in that direction but I think it it looks right it looks nice come on whatever ideas can we Implement based on this um based on these interactions I'm thinking to do something with the actual rotation of a device on the table like it would be a knob you know to move them but you know what uh the problem is that at the moment the volume will actually not work because we are only updating the shared value we're not updating with volume in um in this in the global state so maybe uh we can also use volume context we should add a shared volume and yeah let's do a shared volume which is going to be I don't know value zero and let's add the shared value here shared volume equal use shared value from reanimated and let's export this one from here and in our gravity instead of declaring the shared volume here let's import it from use volume shared volume and inside our music player let's specify how do we want to take it is it an animated one or a proper one so let's say it's an animated animated so in music player we can receive this animated prop which can be initially false and that's going to be the shared volume so basically const volume equal if it's animated it should be a shared volume dot value otherwise it should be this normal volume will it work I don't know let me let me try if I go back to the default um what system capture no no okay don't like it very much how it works wait a second so music player volume if it's animated is a shared volume otherwise it's a normal value Luke has great idea Lucas is suggesting to make the volume higher the higher you yell into the phone I have it I I think about bad the same let's let's try to see if we we can Implement that as well I just want to make sure that it works here come on okay this one works if I go to the gravity we broke it Gravity music player is animated equal true then here we're working with this shared volume on value chain should not be here actually why isn't working shared volume coming from the vet one not a number not a number not a number 4K oh because uh in the volume context I think we should initialize it with zero and yes it works and it actually controls the volume that was what I was worried about but now we hooked it up and this shared value that the the position of our slider here actually controls controls the volume so I'm happy with that and what I wanted to Oh I said what I wanted to implement something with rotations right like um some kind of a knob but the knob will be the actual physical phone so for that let's go ahead and create a new uh screen here based on the template this one will be Rod or yeah rotate so again we're gonna work with um with a use sensor use animated sensor use animated sensor and the sensor let's also import sensor type let's do sensor dot rotation rotation um something with like um I don't know I don't know I don't know how to do it but we're gonna think about it let's do a let's just cause holog sensor.sensor.sensor dot value dot what oh my God there is so many values here let's go with this free pitch roll and this one that I cannot pronounce okay if I go here to the rotation we should see these values all right uh let's go ahead and is they are not gonna update because we are [Music] they are on UI Fred so I think we're gonna still work with style so animated style equal use animated Style let's make sure to return here an empty object for the animated Style and here let's go ahead and just console log these values pitch roll and yo yoy and let's console.log so I want to put the phone on the table and rotate the phone on the table when I rotate the phone on the table I want to check which values are actually updating stop stop please stop stop stop s what's happening where do I have another console log in the gravity so when I have a phone on the table and I rotate it which value actually changes I don't know I think it's the last one yes it's the last one so it's this this one but of course we can look through the documentation I don't think it will help us a lot for example the use animated sensor for the sensor type we have rotation measurement output as rotation vector I remember like these words only visually from the time that I was I was working as a game developer but right now like we do not make any sense to me so phone maybe we can yes maybe we can see him visualization a role is that one yes it's the the last one yo yo yo yo how do you pronounce this I don't know but it's this one that we are interested in and this one goes from I think in Radiance so if I console log only this one yes yes it works so the north I think should be we should have some kind of a dial or a knob that we can rotate I don't know give me some ideas how we can take the to rotate the knob the phone I'm out of ideas um how is this device called that shows North I know it in my language but how is it called in uh in English Compass man man compass to do something with compass and volume control hmm that's an interesting uh idea but does it actually show where is north okay North busy South and if I look into my application moving it this way yeah no idea if that's what I'm looking at maybe some with no volume control where we will rotate yeah I think I think I have something like some some kind of this volume control but I need it in two layers one which is the knob and another one that will that will move okay okay I don't know how to implement this one so you'd have it like a knob rotate cannot put it together in my in my brain I think I'm I'm already tired of useless and um in worst volume controls um yeah look I think that we can uh we can stop here and I really want to see what you can Implement based on this idea go ahead and try to implement it yourself you can download the project the example the template from the description below and also I'm gonna put the source code with everything that we did today and get creative because after two hours of coding I already don't have ideas how to implement that one but there is something like I have this idea with rotation with a physical knob and to to rotate it so maybe if I will uh I will put it together I will share it with you so if you enjoy this one make sure to subscribe to the channel and not to miss any future videos usually on Fridays we do much more uh useful projects but I hope you enjoyed this one as well and you managed to learn something new today I really enjoyed it it was a great experience to look at different interactions that we can build and yeah I will see you next

Channel: notJust․dev

Views: 2,335

Keywords: vadim savin, not just development, notjust.dev, react-native tutorial, react native ui design, react native live coding, live coding, javascript, react tutorial, react native tutorial, javascript tutorial, react native ui, react native for beginners, UI/UX, CodingTutorial, first app, App Building, App Clone, Step-by-Step Guide, UI Design, Volume Controls, Frustrating UI, State Management, Event Handling, Best Practices

Id: a5HItrE0gJ8

Length: 109min 57sec (6597 seconds)

Published: Fri Apr 14 2023