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

Preview

Dependencies

PackageVersion
@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"

Source code