A high-fidelity Netflix mobile UI clone built with React Native and Expo, featuring advanced animations and gesture interactions.
- 👥 Animated profile selection screen with staggered loading
- 🔄 Smooth profile switching transitions
- 🎵 Sound effects and haptic feedback
- 🔄 Custom tab navigation with sliding animations
- 💫 Gesture-based content interactions
- 🌟 Shared element transitions between screens
- 📱 iOS-style modal presentations
- 🎨 Dynamic blur effects and scaling
- 🔄 Tilt animations for featured content
- 🏠 Animated home screen with featured content
- 🔥 "New & Hot" section with Netflix-style layout
- 🎮 Mobile games showcase
- 🔍 Dynamic search with instant results
- ⬇️ Downloads management
- 📺 Full-screen video player
- 📋 Expandable categories list
- ℹ️ X-Ray style content details
- ⚡ Optimized animations using Reanimated
- 📊 Efficient list rendering
- 🎯 Native gesture handling
- 🔄 Smart transition management
- Expo - React Native development platform
- Expo Router - File-based routing
- React Native Reanimated - Smooth animations
- React Native Gesture Handler - Native gestures
- Expo Haptics - Haptic feedback
- Expo AV - Audio/video playback
- Custom tab screen wrapper for consistent transitions
- Worklet-based animations for optimal performance
- Shared element transitions for content previews
- Gesture-based modal interactions
- Context-based profile management
- Animation state coordination
- Tab navigation state handling
- Reusable animated components
- Custom Netflix-style icons and layouts
- Dynamic blur effects
- Responsive grid systems
project-root/
├── app/
│ ├── (tabs)/
│ │ ├── (profile)/ # Profile management
│ │ ├── index.tsx # Home screen
│ │ ├── new.tsx # New & Hot screen
│ │ └── _layout.tsx # Tab navigation
│ ├── movie/
│ │ └── [id].tsx # Content details modal
│ ├── search.tsx # Search functionality
│ ├── downloads.tsx # Downloads screen
│ └── switch-profile.tsx # Profile switcher
├── components/
│ ├── MovieList/ # Content listing
│ ├── GameList/ # Games showcase
│ ├── TabScreenWrapper/ # Animation wrapper
│ └── WhoIsWatching/ # Profile selection
├── contexts/
│ ├── UserContext.tsx # Profile state
│ └── RootScaleContext.tsx # Animation state
└── hooks/ # Custom hooks
- Use color extraction from images for dynamic theming
- Implement proper gesture priority management
- Handle modal transitions separately from tab transitions
- Shared transition on modal navigation
- Bug: Disable shift animation on back (fixed on branch router-4)
- Fork the repository
- Create a feature branch
- Submit a pull request
MIT License