PerplexityAI animated vertical list - Reanimated

🔥 In this video tutorial re-create Perplexity AI app vertical list using an Animated.FlatList. We'll leverage React Native Reanimated's useAnimatedScrollHandler to capture the scroll.Y value and use interpolate to animate the list items as they render.

Additionally, we’ll take advantage of the FlatList’s snapToInterval and decelerationRate properties to simulate a carousel-like animation, providing a smooth and engaging scrolling experience.


You'll be learning how to:
use useAnimatedScrollHandler and store the offset value to a shared value
how to place the active item in the middle of the screen and snap to a particular offset
how to use useAnimatedStyle with interpolate to animate each renderItem

----
👉👉 Access 120+ React Native Animations, the biggest react native animation collection in the world: https://www.AnimateReactNative.com
----

👉👉 Have any questions? Join Discord:   / discord  .

You can find me on:

Twitter:   / mironcatalin  
Website: https://www.AnimateReactNative.com
---

#react-native-reanimated #react-native-animation #react-native-skeleton #react-native-loading #react-native-layout-animation #reanimated-stagger #react-native-moti #reanimated-sequence #reanimated #microinteractions #mobileappdevelopment #mobileappanimation