Parallax Carousel

A study project focused on creating an interactive parallax carousel effect using React Native and React Native Reanimated.

🎯 Project Overview

This project is a learning exercise to understand and implement parallax scrolling effects within a mobile carousel component. It serves as an educational resource for developers interested in advanced animation techniques and interactive mobile UI elements.

🚀 Technologies Used

• React Native
• Expo
• TypeScript
• Nativewind for styling
• React Native Reanimated for parallax effects with interpolate function
• Animated FlatList for smooth carousel scrolling

📦 Installation

1. Clone the repository:

git clone https://github.com/danieltgfischer/parallax-carousel.git

2. Navigate to the project directory:

cd parallax-carousel

3. Install dependencies:

npm install

4. Start the Expo development server:

npx expo start

5. Run on your device or simulator:
   • Press a for Android
   • Press i for iOS
   • Scan the QR code with Expo Go app on your physical device

🎓 Educational Purpose

This project is created for educational purposes to demonstrate:

• Implementation of parallax scrolling effects in React Native
• Using react-native-reanimated's interpolate function for parallax animations
• Working with Animated.FlatList for smooth scrolling experiences
• TypeScript integration with React Native components
• Modern mobile app development practices