Expandable carousel

Description

An animated horizontal carousel that supports expandable content on vertical scroll. When a slide is expanded, it stretches to fill the entire screen, creating an immersive full-screen view. During this state, horizontal swiping is disabled to prevent accidental navigation, and a progressive blurred header appears at the top—achieved using `MaskedView` combined with a `LinearGradient`, and designed to work seamlessly on both iOS and Android. You can fetch data either with `react-query` for more robust caching and management, or simply use `useState` with `useEffect` for a lighter setup. The current implementation fetches content from the [DummyJSON](https://dummyjson.com) API, making it easy to plug in real-world or mock data. All animations are powered by `react-native-reanimated`. It uses `useAnimatedProps` to toggle horizontal scrolling dynamically and `useAnimatedScrollHandler` within each slide to handle vertical interactions. The vertical scroll position is interpolated to animate elements like the blurred header and content transitions, ensuring smooth and responsive UX.

Installation

bunx @animatereactnative/cli@latest add expandable-carousel

npx @animatereactnative/cli@latest add expandable-carousel

yarn @animatereactnative/cli@latest add expandable-carousel

pnpm dlx @animatereactnative/cli@latest add expandable-carousel

Preview

Dependencies

PackageVersion
@tanstack/react-query^5.59.20
expo-blur~15.0.7
expo-constants~18.0.9
expo-linear-gradient~15.0.7
expo-status-bar~3.0.8
lucide-react-native^0.456.0
react-native-reanimated~4.1.0

To install these dependencies, you can use the following command:

bun add @tanstack/react-query@"^5.59.20" expo-blur@"~15.0.7" expo-constants@"~18.0.9" expo-linear-gradient@"~15.0.7" expo-status-bar@"~3.0.8" lucide-react-native@"^0.456.0" react-native-reanimated@"~4.1.0"

npm install @tanstack/react-query@"^5.59.20" expo-blur@"~15.0.7" expo-constants@"~18.0.9" expo-linear-gradient@"~15.0.7" expo-status-bar@"~3.0.8" lucide-react-native@"^0.456.0" react-native-reanimated@"~4.1.0"

yarn install @tanstack/react-query@"^5.59.20" expo-blur@"~15.0.7" expo-constants@"~18.0.9" expo-linear-gradient@"~15.0.7" expo-status-bar@"~3.0.8" lucide-react-native@"^0.456.0" react-native-reanimated@"~4.1.0"

pnpm install @tanstack/react-query@"^5.59.20" expo-blur@"~15.0.7" expo-constants@"~18.0.9" expo-linear-gradient@"~15.0.7" expo-status-bar@"~3.0.8" lucide-react-native@"^0.456.0" react-native-reanimated@"~4.1.0"

Source code