Perplexity vertical list animation - Reanimated
Tags
Description
In this example, we'll replicate the Perplexity 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.
Installation
bunx @animatereactnative/cli@latest add perplexity-vertical-list-animation-reanimated
npx @animatereactnative/cli@latest add perplexity-vertical-list-animation-reanimated
yarn @animatereactnative/cli@latest add perplexity-vertical-list-animation-reanimated
pnpm dlx @animatereactnative/cli@latest add perplexity-vertical-list-animation-reanimated
Dependencies
| Package | Version |
|---|---|
@faker-js/faker | ^9.2.0 |
react-native-reanimated | ~4.1.0 |
To install these dependencies, you can use the following command:
bun add @faker-js/faker@"^9.2.0" react-native-reanimated@"~4.1.0"
npm install @faker-js/faker@"^9.2.0" react-native-reanimated@"~4.1.0"
yarn install @faker-js/faker@"^9.2.0" react-native-reanimated@"~4.1.0"
pnpm install @faker-js/faker@"^9.2.0" react-native-reanimated@"~4.1.0"