Expandable carousel

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.

Scan the QR to check the animation on your device.

Install the app:

iOS|Android