Animated FlatList in React Native (Reanimated)

what's up Mobile devs today we are going to build from scratch this super simple react native animation using just the react native animated package this animation from my point of view isn't only an educational purpose but can be easily reused in so many use cases to make it I referenced an animation I found on Twitter a few months ago that really engaged me if you want to take a look I leave the tweet in the video description before moving on I would like also to remind you that if you are interested in react native in general you can support me by simply subscribing to the channel or by going to the buy me a coffee website that said let's jump to the next part so here I've already initialized the react native project with the Expo CLI and I've already installed the reanimated package inside this project so in order to complete the reanimated installation process I've also included the reanimated plugin inside the bubble config.js file that said we can start to remove this status bar and this text and we can start to Define our flat list component so we are going basically to define the list as a flat list and we are going to return the we are going to create the list item inside the render item function so uh here we are going to specify each item as a view with an height equal to it here with with the 90 percent of the screen width and let's say for now a background color equal to red so we need to remove these two Styles and we need to Define just an item to see something so here we are going to fill this data property with the an array of 50 different objects so let's create here our data array we are going to fit it just with zero for now and we are going to iterate throughout the index and to return a different object with the incremental IDs so basically the array will be something similar to this to that so the first element will be ID 0 the second one id1 third one id2 and so on and so forth until ID 49 so here we can pass the data array right here and we can see all our data here so of course let's add the margin top between the list items let's see 20. let's add some radius equal to 15. let's Center the item so and let's change the background color so I believe we can use this color it wasn't this one so let me check a second so I've just copied the color used inside the Twitter example that I showed you previously so for a styling purposes we can simply add the padding top property to the content container style equal to 14. and we are good to go so basically uh we are going to deal with the animation and we are going to animate just this render item so just the list item component but we are going to do that for each item of the data array and in order to write a better code it is a better option to create a separate component for this list item component so let's create the components folder and let's define here the list item file dot TSX so we are just going to Define here the list item component and we are going to copy the same component that we have defined previously so we can simply import the list item from the components list item file and we are good to go so here um we can see that the result is identical to the previous result so how we are going to animate so how we are going to deal with the item list item animation first of all we are going to animate by checking the if the current item is visible or not and in order to do that we are going to use the unviewable items changed callback from the react native flat list so thankfully with this callback we can access the current viewable items and we can check if an item is visible or not so here uh react native is complaining about the fact that we are reloading and therefore we are changing the unviewable items property but it isn't a huge issue of course in production we are not going to reload and the application will not crash so let's reload right now and we can see right here all the viewable items so we can see that uh the index and we can see inside the item property our current item with the ID and the effective Item ID and by scrolling we can see that this callback is called again with the different items inside the item property so uh basically we are going to access this property inside the list item and we are going to check inside this list item component if the item is currently visible or not and in order to do that we are going to store these viewable items proper these viewable items array inside a shared value we are going to pass this shared value throughout this list item and inside this list item we are going to check if it is feasible or not so uh of course that your ethically is a hard to follow but we are going to do that step by step so first of all let's create these viewable items shared value with the user shared value Hook from reanimated it will be at the beginning just an empty array and the type of viewable items will be the same of these viewable items from these unviewable items change callback so basically we just need to copy view token here let's import view token from react native and we need to store these viewable items inside this one so by writing viewable items you can see that react native is complaining and that's because these uh there is a conflict between the name of these viewable items and this one so let's rename it in the items so viewable items dot value will be will store the V items return from these undoable items called backup and we are going to pass this view these viewable items shared value to this list item so viewable items so right now we need of course to define the viewable items property inside the list item props let's see here viewable items equal to animated shared value of type view token and here we go so you can see that typescript is not complaining anymore and we can save so inside the list item component we are going to check if the current item is a inside is included inside the viewable items array and in order to do that we need to pass to this list item also the effective data item so we can simply access the current item from the render item function and we can pass it to this list item so item will be will just be an object from this data array so it will have an ID of type number so you can see it right here but of course we need to add this item type inside the list item props and you can see again that the typescript is not complaining anymore so right now we have all the ingredients I needed in order to complete our animation so first of all inside the list item component since we are going to animate this view we need to to convert this view into an animated view so remember that I'm always taking animated from react native reanimated and not from react native so right now we can start to Define our reanimated style we are going to use the hook use animated Style and we are just going to return the opacity equal to one for now so we are going to pass this reinvented style to this animated view Style and here we are going to check if it is visible or not so let's access the item and viewable items property and here let's retrieve if the item is visible or not so in order to do that we are going to iterate iterate all over the viewable items values we are going first of all to filter all the items that are not viewable so here item is viewable and we are going to check if this item is included inside this filtered array so here let's check if there is a viewable viewable item let's check if a viewable items contains this item right here so and we are going to check just the idea so let's wrap everything with Boolean and here we are good to go so uh let me explain again what we are doing we are just taking the viewable items so we are we are filtering uh these viewable items just by taking uh the items that are currently viewable and that we are trying to check if there is a inside this array an item that has the same ID of this item if there is an item that has the same idea we can see we can see that this item is currently viewable so it's currently visible otherwise we are going to return false so if the response of this find code of the defined method is a undefined we are just going thanks to this Boolean function we are just going to return false otherwise if it is an object the Boolean function will just return true so inside this uh inside this return we can simply wrap everything with the width timing function and we can check if it is visible if it is visible we are going to return one otherwise if it is not visible the opacity will be equal to zero so by reloading of course nothing is working as expected and that's because I made a simple mistake here I'm not checking actually the viewable item.item idea so that's simply that hopefully and we can see right now that the animation is working in ice cream so of course we don't want just to animate the opacity we can also animate the scale property so here let's simply use again the width timing high order function of course I'm importing with timing from react native reanimated so if it is visible the scale will be equal to 1 otherwise it will be equal to 0.6 for instance so and here you can see the animation working nicely so you can for instance also just animate the scale you can really animate whatever you want to inside this animation so I think that this animation is very useful to know it's a quite simple and you can apply in a lot of different use cases so hopefully if this video was helpful remember to subscribe to the channel and leave a comment if you want to give to leave some suggestion for the future videos on this channel thank you very much for staying with me all the time and see you to the next one

Channel: Reactiive

Views: 27,944

Keywords: react native, reanimated, animations, react native animations, app development, gestures

Id: 3ox0R5jPb04

Length: 13min 58sec (838 seconds)

Published: Thu Nov 03 2022