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.