CODEWITHSUNDEEP
react-nativereact-animated
Keselme
Keselme

Reputation: 4249

Animating FlatList items

In my application I want to create a couple animations on my FlatList. For example, after fetching the data and feeding it to the list I want the items that should be visible to slide from the left. When I'm scrolling each item (at the top) that supposed to disappear will slide out to the right and each item that should appear (at the bottom) should slide from the left. Is it possible in React Native? I only managed to create one type of animation - items sliding right when they are about to disappear, but I don't have any idea how to make the items to appear from the left. My Animated.View can receive only one type of transform. So how can create different types of input/output ranges for the top and the bottom of the list? I tried to find some examples on the internet but couldn't find any for multiple animations, only for one type.

Upvotes: 1

Views: 2519

Answers (1)

eeshankeni
eeshankeni

Reputation: 283

I think you will find React Native Reanimated's Entering and Exiting Animations API useful for this task. It greatly simplifies animations like this in my experience.

In case you want to get more control. Using a FlatList, you can also use its onScroll prop to get the current value for YOffset (contentOffset.y) via the Reanimated useAnimatedScrollHandler. Thus you can figure out how much has been scrolled.

Which you could then use to manually apply any translateX's required to the Animated.View of whatever items the flatlist is rendering. The logic you'll of course have to figure out though. But it's a start.

Be sure to do any animation interpolates using UI thread worklets on Reanimated only. Good luck!

Upvotes: 0

Related Questions