Create a Drag and Drop Puzzle/Sorting in React Native

hey reactant Developers hope you are doing well this is Amit welcome to another tutorial of react native animations today we are going to build this beautiful drag and drop animation in react native using react native reanimated and react native gesture Handler so let's get started with the code now so I have done the initial setup where we have the boxes ready and we have an array of 25 elements and we are rendering the Box in a row and we are defining the color based on their count or the index position so after that what I will do is I will create a component named draggable dot JS and in that component whatever children we will pass the children will become draggable item so let's create that component here [Music] draggable.js and name it draggable and we will pass the children [Music] and now we can wrap this box inside this draggable [Music] we are getting a warning for the keys so let's set the key for this so now it looks good we have the component ready and we have still these items are not draggable because we are just passing them inside the children and not doing anything else so let's work on the trackable let's create this an animated view first and then we will do the pan gesture Handler eliminated View [Music] and I will again wrap it with animated.view because [Music] a view which is animated and we if we try to reactant review that it will not work so if we do this okay also we need to set the gesture Handler root view so that we can perform the gestures on the app so just render root views right now placed and we will pass the style styles of container [Music] now everything is fixed everything is looking good it is still the same item is not draggable but we have animated view we have pen gesture Handler and we have the children so let's create a pen gesture Handler now const ant gesture is equal to use animated gesture Handler on active we will get the event and the context and let's create a shared value const translate X is equal to 0 Translate Y is equal to use well in zero and we will change these values [Music] translation X and same for the Translate Y [Music] and now we will pass this gesture event here in the slope and we will create an animated style so that we can move the element based on the translation [Music] use animated Style and we will transform the Target accent tablet by [Music] and I will pass the style here so now if I drag any item then you can see these items are draggable now whatever the item I drag it is working fine [Music] so there is one thing which we have right now there is one issue when I am dragging 23 let's say so it starts from this its initial position and not from where it was right there so we will check and we will set the initial position in the onstart so event context [Music] start X is equal to translate x dot value and same for this y [Music] EP so now if we do this and I will lock this component so as you can see right now 0 is here and when I'm moving it again it moves from the same position so it is working fine now one more thing we have right now is when I am moving 0 on this boxes so it is not visible because that index of this 0 is right now zero and there are 25 Elements which are on top of this so let's set this index when this gesture is moving so we will create a state is gesture active initially it will be false and on start we will make it true and on finish we will make it again false [Music] and now we will change that index [Music] I am setting it to 1000 but right now 12 there are 25 elements only we can if we set only 25 then that will also work so we will pass the Z index here and now if I move 0 then you can see Zero is visible on all the boxes also we need to make sure that when the gesture is active we will scale it up to 1.1 so that it is properly visible like right now I'm hovering on 6 and 0 we are not able to see that if 0 is active or not so let's scale it up const scale is gesture active we will scale it to 1.1 else it will be 1 only [Music] foreign [Music] that we are able to see that okay this is active right now [Music] so far we are good now let's create the draggable and sorting mechanism so the Sorting mechanism right now which we are using is I take the reference from the Williams YouTube video which was published like three years back for the draggables and we will be using the same mechanism here so let's do that first I will create the position of all the elements to Absolute now what that will make is it will stack all the items into each of like on top of each other so if I move 24 there is 23 22 21 20 and it will go the same way also I will set the margin equal to margin into eight so that we get the paddings note the eight merge into two yeah so now these are the center and I will create a worklet function where we can get the position of X and Y value based on the index of the item so let's create that in the utils folder I have already created these things where we are defining columns how much margin we want to give and what will be the size of the item so now let's create that function expert const get position we will pass the index we will make it work left and now we have to return the X and Y so what will be the X X will be index modulus column count [Music] and then the into size and same for the Y but this time we will do the math dot floor index by column into size so if we let's create a constant where we will take these positions and we will get the index is so const positions is equal to U said value I will create a object start from the empty and then we will do array.map [Music] item and what I will return is item an item because right now whatever the index is the item will be same but for you you have to make sure what id you are checking for the positions so these are the positions and I will pass it here comes positions and then I will also pass the ID of the current element so ID is equal to item and I will use it here positions and ID [Music] and now we will get the initial position with this const [Music] position get position s.value and we will pass the ID so let me log it for you what will be the position based on all the boxes so position [Music] now you can see we are getting these positions based on the index value for the first it will be 0 0 for the second X will be 78 so it will be here and Y will be zero like this is the size of the box right now and say for the third fourth fifth and from sixth again x is 0 y 78 so it will come here so now let's set that position here position dot X [Music] position dot y and if we do this and reload it now we will be able to see our boxes back to their places because with this function we are getting the exact position of those boxes and we are showing them right here okay so this part is done and again we're still able to move and drag the items but we are not able to place them in the position so let's do that [Music] on active we are going to change the positions when we are moving the item or the gesture is active so we will check the old index and new index and then like old index will be zero so I'm moving it from here then I move it to this position so I have to create another function where I will get the index of this item based on its position and then I will swap the values in the positions which is defined here so let's do that const [Music] old order it will be positions.value and ID so this is the old order or old index and now we will get the New Order and to get the New Order we have to create a function here let's create that foreign const get order [Music] and we will pass the X and Y value and then we will return the order or index of that item again it will be a worklet so let's do that const [Music] rho is equal to [Music] math dot round it will be y by size and column will be same but it will be X [Music] and we will return it row into column count plus column and I will show you what will happen when we are doing this get order and I will pass the translate x dot value and Translate Y dot value console.log [Music] new powder and now you will see the positions exactly where I am moving the object so right now it is at zero one two 12 16 22 23 19. so we are getting the same position or same order of the item where we are moving or dragging the item so now let's swap these values we will check if all loader is not equal to New Order if it is same we don't have to do the calculation or do the mechanism first then we will find the ID for which ID we want to swap and I will show you what id looks like so ID to swap [Music] it will be object we will get the objects we will create an array from the positions foreign and then we will find the item if it this item is available or not [Music] and this will be ID to swap [Music] so we are doing this because let's say this is one and we are on the 6 11 16 21 and right now you can see we have we are at this position for this location but we don't have that item available so we need to check if that ID is available or not in the boxes and on then only we can swap so that when we are here it goes back to the same position if the ID is not defined so we will check if ID to swap is available then we will create another array and we will copy everything from the previous address so we will do this way I am not doing the iterations method because that will not work for the shared value so positions dot value now [Music] new position ID is equal to New Order new positions ID to swap hold order and now I will set the positions value to new positions [Music] so right now I have done the swapping part but it is not reflecting as I'm moving it because when we are changing something in this shared value then we have a function in the reacting to the animated which will which is going to take the reaction of that change and will implement or animate the boxes so let's do that we have a function which is as use animated reaction so use animated reaction and the first will be the width part we want to check so it will be positions not value and ID if it changes then we will check for the New Order and we will swap the positions so new position we will get the position from [Music] nor method New Order and then we will change the positions translate x dot value is equal to [Music] so if I do this you can see right now I am able to move this but this is pretty fast let me set a timing here so we get a smooth animation [Music] with timing [Music] and let's import with timing from here so now you can see we are moving them nicely [Music] but when I am dragging it we also need to set the on and action and if destination is not available we have to make them again to that same position so how we will do this so first let me explain like how this is working how use animated reactions working this is working like we are changing the positions but the other components which are not active are not aware of that change so we will check for the death change and we will change their values with this position so that's why we are doing the use animated reaction and now let's add the own end here so on end we will check for the destination position like where it is we will do the get position and now we will move it to that position [Music] thank you [Music] and now let me reload this so our draggable is working fine when I'm moving it here it is going back to that position okay so right now it is working fine and this is the exact animation which we wanted for our app which you can see right now also if you want to see the other boxes which I will say which I shared previously on Twitter so for doing that we will minus the margin here and same for this and we will add margins and Border radius to it so that it looks good and now you can see we have the boxes and margins and I can move them exactly the same way which I sold only Twitter and it is exactly the same animations foreign

Channel: Amit Khatkar - Untangle Code

Views: 5,237

Keywords: react native, react native animation, expo, drag and drop, reactjs, mobile, ios, tutorial, animation tutorial, react native reanimated, react native gesture handler

Id: 219Rv7qUEZw

Length: 22min 4sec (1324 seconds)

Published: Wed Aug 02 2023