Wallpaper Animated Carousel - React Native Reanimated
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.