Interpolate with ScrollView like a pro (React Native Reanimated 2)

what's up homeboy devs today we are going to unleash the power of the interpolate function from reanimated package and to do it we are going to build this amazing animation so right here we can see that we are animating basically the border radius of the square in order to convert the square to a circle we are animate the scale of our circle and we are animating the translate y and the opacity value of our text so what's interesting is that everything depends on just a single shared value that is our translate x value so the amount that we are scrolling on the horizontal axis so if you like this content remember to subscribe to this channel and remember also that all the source code is fully available on github so let's start here i have created a react native project with expo cli i specified the typescript configuration right here and i've already installed the react natively animated package we need at least version 2.0 and in the end i've added in the bubble config.js the react native reanimated plugin to enable the workload keyword so let's start to define our scroll view we will use right now an animated scroll view we will understand later why actually we need an animated scroll view with animated imported from react natively animated and not a react native scroll view so let's start also to define our words here we will have the title of each page each title will be displayed in the middle of the screen so here i'm writing whatsapp mobile devs of course you can use whatever kind of words you want and let's specify right here our style so i will write dot styles.container let's define a background color red just to see if everything is set up fine so let's mark our words here i'm just returning a view so here react native is complaining about the fact that each child in a list should have a unique key property so let's specify the key i will use index [Music] from the map so everything is fine since we have to do a lot of work with a single page every single page i think it's a better option to define another component to handle the page so let's specify our components folder let's write right here page.tsx i will import react from react import view from react native so let's define our page props uh we need actually a title and an index so let's say a title is type of type string index of type number and let's write let's define our component page page will be a functional a react functional component with those properties and we can return a react native view so let's export our page we can already access our page right here we need to specify the page props so title from here and index and we are good to go so we need to understand how to display our page so the page will be will feel completely the the screen so we need to handle the screen height and width and we can do it with the dimension cpi from react native so let's say height and width and let's specify our style so height and click at the end i will just use let's say a blue background color so by default the scroll view has a vertical behavior so a vertical scroll we need to deal with a horizontal scroll view so let's specify horizontal in our animated scroll view uh we need actually to save the file and everything is working fine uh let's refactor a little bit discord using stylesheet so i will import stylesheet from react native let's define the styles equal to stylesheet.create and let's write here page container with height and background color actually we don't need a background color and let's add our style so styles dot page container so to enhance and answer the um scrolling experience usually i like to play with the same color but playing just with the color opacity so let's define a blue with the rgb notation and let's play a little bit with the opacity volume so what i like to do basically is to change the opacity depending on the current page index so i'm taking the index from the properties right here and let's say zero dot index so for for the first page we will have a zero opacity for the second page one 0.1 opacity uh 0.2 for the third page and so on and so forth and so forth so here basically we have a blue with a zero opacity usually to avoid this kind of behavior i like to sum plus two plus two offset and everything is working fine so for for the first page we will have a 0.2 opacity so a blue with a 0.2 opacity for the second page 0.3 and so on and so forth so we need to display actually a square in the middle of the screen so this square we will play after a little bit with this square we will play with the border radius and with the scale value we will actually animate the border radius in order to convert the the square to a circle so to deal with that of course we need to specify our square as an animated view with animated imported by react natively animated so let's specify starts dot square we need to specify the width and the height let's specify right here the the square size so um i will use basically the screen width multiplied by 0.7 so the square will cover the 70 percent of the screen width here we can write height equals to size and width equals to size let's add our background color i will use a rgba notation use a blue with a 0.4 opacity yeah i think it's fine we need actually to center this square in the middle of the screen so let's say align items equal to center and justify justify content equals to center so what is missing right now for this animation of course we want to interpolate but we want to interpolate the translate x value so we need to find a way to access actually the amount that we are scrolling on the horizontal axis so to deal with that let's start to define in the app component our scroll handler so the scroll handler will be basically returned by our use animated scroll handler hook from react natively animated with this hook we can access the scroll event and with the event dot content offset dot x we can access the horizontal amount that we are scrolling so to see something we need to assign on the unscrew property of the scroll view this scroll handler so um in at the beginning of the tutorial i uh i told you that we need an animated scroll view instead of a scroll view from react native the reason behind that is that we actually need to assign an animated scroll handler to the unscrolled property and we can do that because right here we have an animated scroll view so that's why actually we we need to deal with an animated scroll view so let's see what's going on so basically when we drag uh what happens here we can visualize actually the event dot content offset dot x but we can see that react native is complaining about the fact that we haven't specified the scroll even throttled so let's specify it let's say scroll even throttle equals to 16. actually why we need to to use a 16 for the school even why we need to assign 16 to the scroll even throttle property so uh let's understand what we want to achieve we want to achieve basically a 60 fps animation 60 fp fps means 60 frames per second so we need to fire and to handle basically a frame each 16 milliseconds so it's just one divided by 60 and we get 16 milliseconds so with the scrolled event throttle we are basically specifying that we want to fire the unschool method each 16 milliseconds let's see what's going on and we can finally see our translate x value so for the first page we will have a translatex value equals to a zero for the second page translate x value will be equal to width more or less so here is equal to width the width of the screen for the third page it will be equal to two multiplied by width by the screen width so uh actually the event content of set x value is pretty useful but we want we want actually to store this value in a shared value so let's create our translatex shared value and let's assign the translatex value the even dot content of the dot x to our translate x value so right now um everything will be stored in our translate x and we can start to interpolate and to animate with our translate x since all the animation will be handled on the page component actually we need to pass this translate x value to our page component so let's write translate x equals to translate x of course a typescript is complaining about the fact that uh we need actually to to add the translatex value uh to the page properties so let's write translate x is an animated shared value of type number and we can access our translatex property here so uh we want to animate let's start to animate the scale of our square so to animate the scale of course we need an animated style i'm writing just a reanimated style with the style notation let's specify use animated let's use the use animated style hook from react natively animated and let's return transform with scale set 1 so it's basically the default value of the scale our style so we want basically to understand how to define our scale depending on translate x value so we will define we are we define scale and we will use actually the interpolate method from react natively animated so interpolate use basically needs a number an input range an output range and an optional value that is basically the type let's start to define to specify the value we want to interpolate our translate x value here we need the input range here the output range so i will write right here the input range so index minus 1 multiplied by width index multiplied by width and index plus 1 multiplied by width and here we can basically write the output range so let's understand a little bit what i've done right here so basically what we are saying to what we are saying to the scale style we are basically saying that when translate x value is equal to index minus 1 multiplied by width our skill value should be equal to zero otherwise when the translate x value is equal to index multiplied by width our skill value should be equal to one and when translatex value is equal to index plus one multiplied by width our skill value should be equal to zero so just for the sake of clarity when the translate x value is a value between index multiplied by width and index plus 1 multiplied by width our scale value will be a value between 1 and 0. so let's try to understand with an example what should happen on the first page so we already know that uh here in this position the translate x is basically equal to zero and it will be therefore equals to index multiplied by width since uh for the first page index is equal to zero so when translate x value is equal to index multiplied by width the skill value should be equal to one when we the translatex value so when we will translate to the next page the translatex value will go to this value so index plus one multiplied by width so translate x value is going to be at some point index so zero plus one one multiplied by width it will be equal to the width value when uh this will happen the scale value will go to value zero so the the square will will will scale to zero so let's see is if that is true and we can actually see that everything is fine so everything is working properly so uh for the second page we can see actually that uh it it is scaling nicely and that's because the translate x value right here it will be equal to width that is basically equal to index multiplied by width since for the second page index will be equal to 1. therefore our skill value will be equal to zero so what is interesting is that we are defining our input range um with the index value so the input range will be different for each page so it is interesting also to ask to ourselves what if translatex value is greater than index plus 1 multiplied by width or what if if translatex value is less than index minus one multiplied by width so in this case by default the scale value will decrease in if the translate x value is uh my is less than uh index minus 1 by multiplied by width and it will decrease also if translate x value is greater than index plus 1 multiplied by by width and for example if our translatex value is equal to index plus 2 multiplied by width automatically the interpolate function by default will extend the behavior of the our input and output range and our skill value will be equal to -1 so we want to avoid this kind of behavior we want to clamp the scale value to a fixed value so if the translatex value is greater than index plus one multiplied by width we want that our scale stays equal to zero to force this kind of behavior we can pass to our interpolate function extrapolate dot clamp so let's see so everything is working uh as before but basically what before when we will uh when we were right here the first page the scale of the first square was uh updating its scale with a negative scale so right now instead we force the behavior to be with scale zero i i hope that this is clear this isn't a an easy concept but uh when we understand the fine when we understand in a clear way the interpolate function we can do a lot i mean a lot of stuff so let's try to animate also the border radius of the square just to be clear here we can define to interpolate the the border radius with interpolate so let's pass translate x value and let's pass the same input range as before with a default output range and extrapolate clamp so basically what we want to achieve for our border radius when we are on the first page so translate x is uh equal to zero so we are in that case right here we want that our border radius is equal to size divided by two since we want to convert our square in a circle size basically is the square size just to be clear and uh otherwise we want that uh square the circle when we move the when we scroll a little bit from left to right we want that our circle returns back to be a square so let's pass the border radius and let's see if everything works fine so we can see that everything is set up nice here we can see our circle and i think that's all for the square for the square component the animation on the square just to keep the code clean let's try to define input range and let's pass the input range here perfect so let's try to define our text we need to animate of course the text but we need the first of all to define the text component let's import text from react native and let's pass the title we will make actually a lot of animation with the with our text and therefore we need to wrap our text with an animated view to center the text let's just define as a style position absolute so everything is set up fine we need to define our our text style so let's say styles dot text let's specify right here the text we want the font size of 670 a background color a color of white we want to make everything uppercase so let's use text transform uppercase and let's say font weight equals to 700 so it it looks great so uh we need just to animate so how to deal with that let's define first of all our animated style reanimated style so as our text style equals to use animated style and let's return basically uh so first of all what we want animate first uh i think it's a good idea idea to animate first the translate y with the text value we want to animate the translate y property and the opacity property so let's start from translate y translate y i will just keep translate y equals to zero right now let's pass so we want to we need to pass the animated style to the animated view otherwise it will not work and let's specify here reanimate text style so since translate y right now is equal to 0 nothing will change so we want to animate our translate y based on the amount that we have scrolled on the horizontal axis so let's say translate y equals to we will use of course interpolate function translatex input range and we can play a little bit with our output range so when when we are in the in this position right here we know that uh this is the value to look and we want that to translate y is equal to zero because we want the the text on the middle of the screen otherwise we want to make an animation from bottom to top so if let's see what's going on if you if we write 200 and -200 so nothing will change because we need to assign translate to i so we can see a nice animation from bottom to top so instead of 200 we can use the height let's say height screen height divided by 2 and minus screen height divided by 2. so everything is working fine so we need basically just to animate the opacity let's try to animate the opacity and we will of course use as before the interpolate function let's use translatex value the same input range as before and let's say let's keep the default value for now so we want that when we are in this position uh the opacity value is equal to one otherwise we are expecting uh that the uh the text fades so to uh to fade the text we need to pass instead of one zero and it will complete the fading when we will arrive right here so let's see and that's true we can see that watts is fading nicely but we want to improve the speed of this operation so to improve the speed we can we can use two two ways to do it we can change for example the opacity right here instead of zero we can we can say for it for instance minus two let's say let's see so we can see that everything is fine because basically -2 will have the same behavior of 0 of opacity 0 but 1 will reach the value 0 much more faster than before otherwise another way to do it is by updating the input range so we can uh we can change the input range in order to animate faster and we can keep right here the opacity to zero so what is missing of course i forgot the extrapolate clamp and we need to specify it right here so to be honest extrapolate clamp right here isn't uh isn't that useful but uh is a good practice to keep things in the good place so we can avoid extrapolate clamp but when we will go forward to the other page here we will have a strange behavior without knowing it of course but we will have a strange behavior so i think we are almost done the animation looks great right now but uh since we want to enable paging and we want to make like the onboarding effect we need to specify in this we need to enable the scroll view so that is of course optional i like for example this animation much more than with the paging but if we want basically to use this animation to deal with the um let's say an onboarding we can use basically paging enable and the animation will look great so i think we are done so thanks a lot to remaining with the with me all the time uh if you like the video uh or if you have a suggestion uh leave a comment in the section below and don't forget to subscribe if you appreciate this content

Channel: Reactiive

Views: 5,619

Rating: 4.9816513 out of 5

Keywords: reanimated 2, interpolate, react native scrollview, react native, scrollview

Id: SqwpRr7kbnQ

Length: 29min 20sec (1760 seconds)

Published: Sun May 16 2021