In my app, I have a vertical FlatList that contains images. I would like to implement an animation where any image I click will move as the second item and all the other images will shift accordingly.
So if I have the list A B C D E and I click on D, the list will become C D E A B.
I manage to implement the moving of the items:
//this function runs on clicking an image
const _selectProduct = product => {
props.setSelectedProduct(product);
props.setData(prevData => {
const toIndex = 1;
let copyData = [...prevData];
while (copyData[toIndex] !== product) {
const popped = copyData.pop();
copyData.unshift(popped);
}
return copyData;
});
};
But I am unable to implement the Animation. Any tip would be helpful. Thanks!
I tried using the:
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
which almost works as expected, but the items look like are jumping from start to end and I want to animation to work smoothly without any jump.