Advanced React Native Animated FlatList Picker - Synchronised FlatLists

hey guys and welcome back to my channel in this video we will gonna take a look at how we can synchronize two different flat lists in real native i was inspired by darek he created this beautiful picker animation and i'll show you my way of doing it in react native by using animated api and two different flat lists i will teach you how to synchronize two different flat lists based on scroll y position before jumping into vs code i would like to thank you all for supporting this channel especially to aditya bren vane and gel van de viet for supporting this channel and buying me a couple of coffees and by the way if you like this content and you like to support me the link to buy me a coffee and paypal is down in the description and now let's play the intro and jump straight into vs code and start synchronizing two different flat lists alrighty guys so we are in vs code here i've created a project using expo and i've built couple of components so let me walk you through what we have so far we have a data file here uh that's basically a collection of items each item will have an icon and a name and inside the application i have a component called icon that's gonna render a simple line icons which is coming from vector icons and it's getting the icon and the color as a prop and passing to it then we have an item component which will wrap this icon uh into a view and based on a show text property that's receiving it's gonna display either a text or an empty view just for spacing purposes and then we have a connect with text component which is this guy here the text and the last component it's connect button that will receive an on press callback and will display this line plus the button itself so when you press on it it's gonna call the on press prop and the on press prop we treat it as a we basically take the uh active index and take the data and make it uppercase so we will display tumblr in our case uh and the index it's it's a you state hook and what i like to do is basically create two different flat lists so let me show you how an item actually look like so we'll get the from data and the index so we will get one one item we will like to show the text and the color is gonna be colors yellow so this one will display tumblr and the icon uh with with yellow and we'll have another variant of this one which is show text it's false basically right and we will display two different flat lists one with uh only with with the icon as a render item and the other one will have both the text and the icon but this time we will apply the color dark plus switch the background so let's let's start with creating this flat list component and we'll have a flat list here we'll pass the data data we'll have a key extractor which is item dot name and dash item dot icon and for the render item we'll have we'll get the item and will render the item pass the item properties which is the icon and the name right which is getting from this this collection of data and also pass the color as colors yellow and then show text is true and we have this this flat list right which is rendering all the possible items here and what i like to do now is to style it properly so we will start from the middle of the screen and to do that we need to pass the content container style and we'll assign a padding top of height divided by two so the entire screen half of the entire screen minus item height divided by two so we will we will start from the middle and same for the padding bottom here so padding bottom it's gonna be the same thing and also pass some padding horizontal just to create some space to breathe here and now we have this this list right and one thing i would like to get rid of this bounces effect so pass bounces it's equal to false and we don't have it anymore and now in order to to make this reusable we would like to do uh two things right we would like to have access to the flat list ref and in order to do that we need to create a forward ref so copy copy this component and create it here so const list it's equal to a react forward ref and this for ref will receive couple of properties and then the key the ref sorry and this one will return directly the flat list and if i hit save now and don't forget to also pass the ref it's equal to ref and i will also like to pass the color and show text as props so color and show text and modify this guy here show text and show text and now if i'm going back to this component let me comment it out this these two components because you don't need it for now and create this component render this component and pass the color as colors yellow and show text it's true we should have the same the same list but this time we have access to the ref that that we've passed here right and let me create those refs so we'll have a yellow ref it's a react use ref and all the same for the dark ref and pass the ref here so first is gonna be the yellow ref and now uh why we did this is because we would like to synchronize those right and based on the y position of the big list which will only have the icons we would like to modify the the y or the offset of the the other list right and in order to do that we need to have access to the refs so that's that's the main reason of doing it and now i will also like to create a special style here and i like to stylesheet absolute uh fill object so the first list is gonna be absolute position so it's gonna be stretched we will get this style and apply here the style received as prop so this is the first list and for the second list i like to copy everything and this time i like to have a dark color and i like to send a different prop a different style and i like to position this absolute i like to give it a background color of colors yellow so because we've changed the colors to dark it's not visible and we've applied like the opposite right we've inverted the colors we also need to apply a full width the entire screen and in this example we don't need a show text anymore and we would like to have a fixed height so it's the item height and also position this to the center so high divide by two and minus item height divide by two so this will start from the top and you notice that uh this list it's uh it's also playing the padding top and bottom and we don't want to do it so based on this show text because we know this this flat list will have the show text true we would like to remove the padding top and bottom so show text in case if it's show text we like to remove the padding top and bottom so this will start from the top and now we would also like to get this event the scroll event in order to to to modify the uh the list so if if i'm um applying here on opacity of 0.3 let's say you see this is uh perfectly aligned with the bottom list and now the the missing part is to synchronize the lists in order to do that we need here to create an on scroll event and pass it to the big list only the big list will be uh scrollable so if only the big list is going to be scrollable let's disable the scroll if uh the show text is true so we will we will disable as well the the scroll for the small list and or enable it only for the big one and to to make this synchronized uh thing we need to create an animated event and we'll get from the native event the content of set d y and assign it to the scroll y and also create the scroll y here which is a react use ref and the new animated value starting from zero and get the current and pass this on scroll event only to the uh to the yellow list right so on scroll it's equal to scroll and i also notice that i am passing the same ref here so and also don't forget about the use native driver in this example and now we get this this this unscrolled property inside the list that we've just created and we need to pass it as a prop here so on scroll and in order to get this event at 60 fps we also need to pass an a scroll event throttle of 60 16 right and this is a throwing an error because we also need to convert this flat list to be an animated flat list so we'll have access to this animation event right and now that we have this event we need to when this component will mount so we will get this via use effect hook we need to listen to scroll y events so scroll y add event we'll get the value so and here we will check if the dark ref exists we would like to scroll to a particular offset and in our case the offset is directly the the value of the scroll y right so offset is gonna be the value and we will like to ensure that this is not animated and now because we've uh actually listening to the scroll-wide changes and we're modifying the scroll y from the big list with this on scroll event we would also uh modify the dark to be like to scroll to the dark and this this one will create this this beautiful effect like a a masked view right and now that uh i'm looking in uh at it i'm not scrolling to a particular uh interval so we would like to snap uh to interval with uh an item height so now it's gonna move uh it's creating this slider slider-like animation and we also now need to pass the deceleration rate of fast so it's gonna snap to this interval faster right and one more thing before uh before wrapping up this tutorial is to let's uh uncomment those two guys those two components right and now when when you press on the done button uh notice that we don't change the index and in order to do that we need to first um create here a callback so on item index change we like to have react use callback and call this set index with it and there are no dependencies so basically we will pass this event to uh to the to the big list and whenever the list will end the uh the animation we would like to call uh with with a particular index where the list ended the transition right so if i'm going to the list component and get this on item index change in order to get the event when the animation ended we will use the on momentum scroll and and this one will get the event and we will create a new index here and from the event we'll get from the native event content offset and then the y and we will divide it with the item height because to get to get the the index right and here we will also like to math or actually math round it's better and now we will check if there is an uh uh an on item in the exchange we will call it with ein with the new index that we've just got from from this on momentum scroll land and now if if i'm going to instagram for example we get instagram as the index and so on so forth that was it guys thank you so much for staying so long with me hopefully you learned something new and you can apply it in your existing or new projects recently i've received the comments saying i should change my vs code theme to a dark one i did it let me know down in the comment section if you like this new theme and i'll know in the future videos to use it otherwise i'll fall back to the white one also if you have any other issues don't hesitate to to leave a comment here i'll do my best to answer all of them and help you out as much as i can don't forget to also subscribe and smash the like button if you like this video other than that see you in the next video thank you so much guys bye foreign

Channel: Catalin Miron

Views: 22,291

Keywords: react native flatlist picker, react native picker flatlist, react native flatlist sync, react native flatlist masked view, react native flatlist animation, React native picker list, react native masked view, React native picker select, react native flatlist, react native advanced animation, react native flatlist performance, catalin miron, react native animations, react native social login, react native social auth, react native performance, React native expo

Id: frNf5VMGjsk

Length: 16min 53sec (1013 seconds)

Published: Wed Aug 19 2020