Wallpaper Animated Carousel - React Native Reanimated
Description
This code is creating a **React Native** app that displays a collection of mobile wallpapers fetched from the **Pexels API**, while animating the background, slide, and author details with **React Native Reanimated**
1. **Fetching Data with React Query**:
Wallpapers are retrieved from the Pexels API using `useQuery`. A loading spinner is shown while data is being fetched.
2. **Animated Scrolling**:
- `scrollX` is a **shared value** that stores the current scroll position of the horizontal image slider. It is updated using `useAnimatedScrollHandler` to track the horizontal scrolling and normalize the value based on the width and spacing between slides.
- **Animations**: As the user scrolls, each image is animated with smooth translations, rotations, and scaling to create depth and focus on the central slide.
3. **Backdrop and Author Details**:
The background image and photographer details animate in sync with the scroll, including **opacity** and **position** transitions, providing smooth visual feedback.
4. **Horizontal FlatList**:
An `Animated.FlatList` is used to display images/wallpapers in a snapping, horizontal scrollable list. The scrolling updates `scrollX`, driving all animations.
Installation
bunx @animatereactnative/cli@latest add wallpaper-animated-carousel-react-native-reanimated
npx @animatereactnative/cli@latest add wallpaper-animated-carousel-react-native-reanimated
yarn @animatereactnative/cli@latest add wallpaper-animated-carousel-react-native-reanimated
pnpm dlx @animatereactnative/cli@latest add wallpaper-animated-carousel-react-native-reanimated
Dependencies
| Package | Version |
|---|---|
@tanstack/react-query | ^5.59.20 |
To install these dependencies, you can use the following command:
bun add @tanstack/react-query@"^5.59.20"
npm install @tanstack/react-query@"^5.59.20"
yarn install @tanstack/react-query@"^5.59.20"
pnpm install @tanstack/react-query@"^5.59.20"