Animating removal of carousel items.

[thekevinbrown]

Is this a bug report, a feature request, or a question?

Question

Question

I have a bunch of images in a carousel, and the user can press a button outside the carousel that removes them. This works fine, but it's a bit abrupt visually as the carousel doesn't animate the removal of the item, it just chunks into place.

I'd like to animate this removal smoothly. Is there a recommended way to do this or an example I could have a look at that does this?

[bd-arc]

@thekevinbrown I never had to do it, but I just remembered this old article: https://hackernoon.com/how-to-animate-the-items-of-a-react-native-flatlist-32c8cbf7ea3d

The exact same principles can be applied. However, all the website's code sections have been replaced with a picture of the author — don't know what's going on there...

[thekevinbrown]

I'm not sure how exactly this'd work with the carousel. Reason being, how do I replicate the animation the carousel does when it moves a page into the centre from the edges?

I might have a look at adding this to core as it seems like it'd be easier to do from within the component than trying to replicate all the logic outside of it.

[bd-arc]

@thekevinbrown Definitely feel free to push a PR for that; you'd make a lot of users happy 👍

[xaleth09]

bump :D did this ever get a PR? wanting to animate the removal of cards in our carousel as well! Thanks!!

[thekevinbrown]

Nope, couldn't figure it out.

[dohooo]

Sorry, please allow me to advertise for my open source library! ~ I think this library react-native-reanimated-carousel will solve your problem. It is a high performance and very simple component, complete with React-Native reanimated 2

[Dovydastc]

			carouselRef.current.snapToNext();

			setTimeout(() => {
				setData(data.filter((v, index) => index !== activeSlide));
				setActiveSlide(activeSlide);
				carouselRef.current.snapToItem(activeSlide, false);
			}, 300);