Implement an infinite list picker animation in React-Native

22 views Asked by At

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.

0

There are 0 answers