Parallax Carousel - Reanimated and Sensors
Tags
Description
Custom React Native animated Carousel/Slider that has the same API as FlatList, that's using React Native Reanimated to animate each individual Carousel Item but also `useAnimatedSensor` to apply the "Parallax" effect/illusion to the active carousel item.
We're redefining `CellRendererComponent` from React Native FlatList to animate each item and also change the `zIndex` order because the "active" item should be positioned in front of "neighbors" (left item, right item)
Installation
bunx @animatereactnative/cli@latest add parallax-carousel-reanimated-and-sensors
npx @animatereactnative/cli@latest add parallax-carousel-reanimated-and-sensors
yarn @animatereactnative/cli@latest add parallax-carousel-reanimated-and-sensors
pnpm dlx @animatereactnative/cli@latest add parallax-carousel-reanimated-and-sensors
Dependencies
| Package | Version |
|---|---|
expo-blur | ~15.0.7 |
react-native-reanimated | ~4.1.0 |
To install these dependencies, you can use the following command:
bun add expo-blur@"~15.0.7" react-native-reanimated@"~4.1.0"
npm install expo-blur@"~15.0.7" react-native-reanimated@"~4.1.0"
yarn install expo-blur@"~15.0.7" react-native-reanimated@"~4.1.0"
pnpm install expo-blur@"~15.0.7" react-native-reanimated@"~4.1.0"