AI Image Playground - React Native Marquee
Description
Sharing with you a screen that showcases a visually engaging **three-row looping marquee**, built using open-source [@animatereactnative/marquee](https://github.com/animate-react-native/marquee). It enhances the standard marquee behavior by integrating **Pan Gesture support**, allowing users to interact with the animations dynamically.
### ✨ Features
✅ **Looping Marquee Effect** – Seamlessly scrolls images in alternating directions.
✅ **Pan Gesture Support** – Users can manually interact with the marquee.
✅ **Smooth Enter/Exit Animations** – Powered by **React Native Reanimated** for a fluid experience.
✅ **Hero Content Fading** – Uses `expo-linear-gradient` for a polished transition effect.
✅ **Optimized Performance** – Configured for both **mobile and web** with platform-specific optimizations.
This component creates an immersive experience by blending animation, interactivity, and smooth UI transitions. 🚀
I have built this component during a live stream. You can watch the [live stream on YouTube](https://www.youtube.com/watch?v=zuIp-NWMlJQ).
Installation
bunx @animatereactnative/cli@latest add ai-image-playground-react-native-marquee
npx @animatereactnative/cli@latest add ai-image-playground-react-native-marquee
yarn @animatereactnative/cli@latest add ai-image-playground-react-native-marquee
pnpm dlx @animatereactnative/cli@latest add ai-image-playground-react-native-marquee
Dependencies
| Package | Version |
|---|---|
@animatereactnative/marquee | ^0.5.2 |
expo-linear-gradient | ~15.0.7 |
To install these dependencies, you can use the following command:
bun add @animatereactnative/marquee@"^0.5.2" expo-linear-gradient@"~15.0.7"
npm install @animatereactnative/marquee@"^0.5.2" expo-linear-gradient@"~15.0.7"
yarn install @animatereactnative/marquee@"^0.5.2" expo-linear-gradient@"~15.0.7"
pnpm install @animatereactnative/marquee@"^0.5.2" expo-linear-gradient@"~15.0.7"