Rainbow Charts - “Can it be done in React Native?”

hello react native developers this episode is the opportunity to celebrate an app made by our community and to get better acquainted with one of the most powerful mathematical tools to build [Music] there animations [Music] hello react native developers i hope you are well william here recording from beautiful switzerland in this episode we are looking at the rambo app it's a crypto wallet more specifically a wallet for ethereum assets and the app is done in react native this seems to be a great team of react native developers behind the app most notably michaels danic from react native reanimated gesture handler and react navigation and not only the app is made in react native it's also entirely open source and not only the app is open source but the specific component we're going to look at this interactable graph is also published as a standalone npm package that you can use in your own app it's using reanimated2 which makes sense for such a use case you really need reanimated2 for performance reasons because in order to have the cursor following along the path you need to execute some math which is fairly trivial to do on the ui thread by executing some javascript code in v1 in order to solve the equation of finding the y position for the x value we will need to create really a lot of animation nodes and they would have some impact on performance we're here it's a more or less on trivial javascript code we we can execute on the ui thread and we also need you see on the top to we need to format consistently the values on the ui thread which cannot really be done in version one so using random 82 makes perfect sense my goal with this video is to show you the mathematical tools used behind such graph interaction so to enable you to build also similar graph interactions but also to take this knowledge of how to manipulate basic curves onto other types of animations like shape morphing you name it so how would we do this in react native there are a couple of steps and couple of [Music] math we need to use so first we have a list of values a list of points and we need to go from values to this nice curve so we need to do some instead of having straight lines we need to do some smoothing between the points there are a couple of algorithms you can use in order to do this here we're going to use d3 the since the app is open source they have built also some smoothing functions we ship some most of i think all of these actually is moving functions part of ray dash so we basically took the code from the package and added the worklet directive so you can run also such function on the ui thread so you can also potentially modify the value of the points entirely on the ui thread and based on straight lines calculate the curve you need to apply and then there are a couple of so we have we go from points to basic curves and we have these nice curves and then we need to do two types of operations so interpolate from one curve to the other and that's what happens here when we switch from one month to one week to one day so we have the same number of bezier curves and we just interpolate the values of all these basic curves from one to the other and that will enable us to morph from one curve curve to the other and then the last mathematical uh formula we need to apply is when i'm sliding the finger across the graph so i have x value which is the position of my finger and then i need to find the y value for this particular x position so in redarch we ship a function that allows you to get this value automatically the math behind is super interesting and finally we have the y value we can so we scaled prices to pixels on the screen so we can display the graph so now we have the point pixel value with the finger we calculated we need to go back to a price value and on the ui thread display here these values you see here and formatting the price on the ui thread but what do you guys think can it be done in red native let's have a look before we get started one thing if you're interested to learn the fundamentals of gestures and animations in react native i hope that you will check out my online course at start react native dot dev my goal with this course is to provide you with all the tools and knowledge necessary in order to build incredible user experiences in react native that really run at 60fps even on low end devices so if you are interested to learn the fundamentals i hope that you will check it out at start reacnative.there we are into vs code if you want to code along the boilerplate project is available in the video description and here i've built some graph using d3 i scraped the data from coinbase building the graph here using d3 again so thanks to d3 we can go from points straight lines to nice basic curves in re dash we provide the function that does exactly the same and we have some scaling which is pretty which is linear which i think is pretty easy to do so you actually not necessarily need to use d3 in order to do this we have our graphs and we have a state in our component which is the graph that is selected so here it's a graph at index zero one two three four we are gonna do this in three steps first we're gonna move from this react state to an animation value and morph from one graph to the other when selecting a new value and we're also gonna animate the button selection that's step one step two we're gonna build the gesture handler for this cursor that you see here and we're gonna make it so that it follows along with the finger the path of the curve then we're gonna use gesture handler of course and redash to give us the y value for the x position of the finger once we have the y value step three and final step we're going to use this value this y value to go back to a data point to a price value and do the formatting and animation of these values on the ui thread so three steps and let's tell start with step one morphing the graphs and the first thing i'm gonna do is this i'm gonna remove this um react state into an animation value so i'm gonna do use i'm gonna move everything to the ui frame so selected becomes an animation value and here i'm going to use current 0 and since this one is now an animation value we can start with the beginning which is going to be to animate the this button here so you know the background selection so this is going to become an animated style and so this is going to become an animated view so let's create this style so we return here the same same value but so here it's that value it's a shared value and we want to transition so when we select here we say selected dot value equals index but it's going to be discrete so you see it it's moving but what we want is to we want it to slide nicely so we're going to do it with timing and now it slides nicely okay now we need to update the graph we need a couple of animation values to do this we need three i think no we need three animation values i know that we need three animation values we need one animation value which for each graph so the starting graph the current graph and the one we are transitioning to so once we click here so there is a previous graph and the new graph where we need to display so we need two graphs and then we need a transition value so a value which is going to transition from zero to one every time and using these values we're going to be able to morph the graphs so let's create so here we have current this one is going to become an animation value so use shared [Music] value and we're gonna create one for previews called previous as well now [Music] this is fair um actually can i call it for now current.value okay so now when we switch previews.value becomes current.value we swap the current.value becomes the graph that we selected so graphs at index and that data okay and now we need a transition from zero to one in order to make the graph maybe before let's do it step by step let's see if we can display at one value and then uh transition to it so current here the path becomes an animation value and since we're going to transition it's not a string anymore but a path from redash so this one becomes an animated path and this is an animated props animated props so let's create the path serialization in use animated props since we transition so here i'm gonna serialize um yeah i'm gonna serialize the path so current dot value dot and here path is already a string but actually we are gonna pop this guys we're gonna instead of returning a string here we're gonna do so this is a path we're gonna use parse from redash and what pars is gonna do is to create an object representing these bezier curves so that we can easily interpolate from one path to the other so let's do it and pass is from redash okay so we have one path that's that's good uh now let's create our transition value so i'm gonna create transition use a shared value so transition always starts at zero and then we transition to one when we click so transition.value equals weave also with timing to one right so here's the start value finish value is one so now here we're gonna interpolate from previous and current we have a function which is called there is interpolate path and then there is a mix path if your animation values is always from zero to one and you go from one path to the other it's like mix but for paths uh it's just a nice convenient function from re dash so transition.value that goes from 0 to 1 and the first path we go from previous value to current value dot path same here so you see now it morphs from one shape to the other nicely isn't that cool i really like these things um okay so that was step one pretty easy now and you see how we can use this to morph from any shape to the other right you can morph a square into a circle also in redash this parse function you can give it any svg path and it will normalize so it can be lines it can be harks and we will normalize the path to be on your sequences of basic curves and by normalizing the path into only a sequence of basic curves we can treat shapes which seems to be super heterogeneous into a homogeneous manner so can do a lot of cool things with it so now let's do step two which is going to be to move this cursor along and here we have the cursor which we need to animate we have the path which we're going to need to calculate the y position for next position given by the finger so the finger detect d directs the x position and uh thanks to the path value we're going to have the y position but it's not a string here anymore it's a path from redash so you see that's it doesn't look up to date but let's see [Music] so here we can use animated shared value of this type um i think here i need to update the version of redash i'm just so path is a black box you don't have to know how it looks like internally but i can tell that it's using an old version but that's fine we i will upgrade after um so that's why i got confused so we have the data so let's wrap so we have we want so the base so we have the cursor which is this component here here we have an absolute feel and this is what we're gonna wrap the gesture and learn around because we want basically to be able to put the finger everywhere in this area and then translate this part here so this becomes an animated view because the first child of the panges chandler is and the unique child is an animated view so we're going to put the panges chandler and this one also so this is the component we're going to translate we're going to add also an animated view so uh up and we need to create the pungest handler from react native chandler and we need to add our gesture event so we need [Music] so use animated suggestion we need a couple of things we need to know if the gesture is active or not because on the rainbow app this cursor you don't see it if the gesture is not active so i'm going to create active is force use shard value first and we need to create a x value which we're going to assign to know the x position of the cursor so onstart active is true on end active is false active dot value is false on active okay perfect on active x dot value is the x position of the finger oh sorry is event dot x and now i think we have enough to create the style to move this guy here so let's create a style so use animated style and um so opacity is and we can add i guess some transition to it so is timing of active.the value true is one or 4 or 0 if it's false and maybe i need actually so i'm gonna move this into okay return statement we can assign the style here to the animated view so now we can add the transform so we can do translate x is x w and translate y we need the y value on the path for the x value and so here we use get y for x from redash we give it a path which is which we get here as a so data.path so data i guess.value.path and we give it an x value so this function gateway x for y and here let me write the transform so we have translate x translate y so okay let's see number number up okay um so nothing is happening let me um let me just put a random value to see if it's the issue so the x value works i think was it just i need to refresh yeah that looks good it's opacity back what i wrote so we move the finger it follows along the path we need you see what follows the path here is as it should be the top left corner of this component and we can center it so by doing so the size is cursor divided by two on x and y so now you see it's perfectly centered in the middle so cursor is the size here of this component what this function does it does it knows we know that the path is a sequence of basic curve and we pass a path it can be a completely heterogeneous path we normal path we normalize it into a sequence of basic curves we look at the x value we select which curve is within this range of x and then we use a formula but it's a polynomial of third degree so degree free to find the y value for this particular curve and so to find t for this particular curve and from t we use the cubic bezier formula to get the y value and so this is how we're able to nicely follow along the path so that was step two now step three is formatting these values here and so we're gonna here to show the graph we go from prices to points now we have the y value here so we're gonna go back from points to prices and display these values on the ui thread which since uh so this is this component here the header we need the y value so i'm gonna extract y here into the main component so i'm going to create y as a shared value and we're going to assign it in cursor so cursor assigns a value based on the x position and header reads it to format its value so i'm gonna pass it here and pass it here also so here where y which is an animated shared value and so here we're going to use y dot value directly and assign it into onactive um that's also i guess more efficient because here we want to calculate x for y only when the y value changes so it's almost like as if we memorize the y y value so actually it's much better like this i think so it's still work and now we have access to the y value from the header so this one here becomes a shared value so now we need to animate these here so this one becomes a short value and we have y which is also sharp value so these guys here now are dynamic so are done on the ui thread and here you see we use text so we're going to use retex from re dash where basically we can assign a string animation value which will animate as a text so i'm gonna well i need to do a couple of things there we need to move these into derived values these become animation values now and then usually text here so let's do it quickly bear with me so this price becomes a derived value because here it's data dot value max price and up use derive value same here up same dot value thank god for typescript same here for label label is use derived value what did they what was it data.value.label yeah okay perfect and same here for style it becomes a used animated style because the color here is interpolated from the animation value something like this data.value [Music] okay so where do we use style here okay so this becomes retext and text is percent change which has become an animation value because we use use the right value same everywhere here label text is labeled [Music] and here as well [Music] so we re text retex from redash [Music] and undefined and this value we need to actually interpolate based on the y value but let's it doesn't seem to be [Music] happy yeah of course i need to remove [Music] you see again typescript i mean i think most of you are already convinced but if you are not every time you watch such a video you see that it's a life saver every time so here i change the graph the value changes that's good the color everything and now we need to use the y value to interpolate these values so to scale we scaled from values to points now we're gonna go back from points to prices and this is why also at the beginning i mentioned oh we are using d3 you could use it without d3 so here's the scale it's so simple what we're going to be able to calculate it easily on the ui thread and this is why you don't really need d3 for such an example because you see here we have to build our own interpolation anyways it's simple interpolation and i should mention also here you see that originally this local formatting was done on the javascript thread we switched to do this formatting on the ui thread completely seamlessly so you can have like consistent formatting between ui thread javascript thread which is a novelty in reality 2 and i find it to be extremely convenient so now let's interpolate here the price value depending on y so we interpolate on why that value the input range goes from so at zero it's um size and then at maximum value it's max price it's zero right translation zero here and so that would be mean price max price so it would be dated on value dot mean price data.value dot max price we need to import interpolate and even so the local tostring even the rounding of the number i just love that we can do these things consistently between javascript thread and ui thread so you see now the value goes goes up gets updated nicely with the cursor entirely on the ui thread and the formatting of the value the rounding of the value is also done consistently between ui thread and javascript thread is not cool guys i hope you enjoyed this example here we use a couple of tools around basic curves in order to build this interactive graph so morphing from one curve to the other creating curves from data points and sliding an object along a curve here we use it for interactable graphs but this tool is super versatile and we can use it for other types of animation use cases for instance shape morphing and we are starting to leverage the power of reanimated2 not only to run these mathematical tools efficiently on the ui thread but also to do things like formatting the values entirely on the ui thread in the next can it bearing recognitive we are going to again leverage the power of reanimate 2 in order to build an incredible example so i am looking forward to talk to you soon and until next time happy hacking [Music] you

Channel: William Candillon

Views: 38,900

Keywords: React, React Native

Id: i20R4lwkJzw

Length: 32min 41sec (1961 seconds)

Published: Tue Nov 10 2020