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
- 📺 Teaser Video player
- 📋 Expandable categories list
- 🔤 Custom font
- ⚡ Optimized animations using Reanimated
- 📊 Efficient list rendering [wip]
- 🎯 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
project-root/
├── app/
│ ├── (tabs)/
│ │ ├── (profile)/ # Profile section
│ │ ├── index.tsx # Home screen
│ │ └── new.tsx # New & Hot screen
│ ├── movie/
│ ├── _layout.tsx # Root layout
│ └── search.tsx # Search functionality
├── components/
│ ├── MovieList/ # Movie listings
│ ├── GameList/ # Games section
│ ├── FeaturedContent/ # Featured content
│ ├── BottomSheet/ # Bottom sheets
│ ├── navigation/ # Navigation components
│ └── WhoIsWatching/ # Profile selection
├── hooks/
│ ├── useCachedResources.ts
│ ├── useColorScheme.ts
│ ├── useDeviceMotion.ts
│ └── useOverlayView.ts
├── data/
│ ├── movies.json # Movie data
│ ├── new.json # New content data
│ └── users.json # User profiles
└── contexts/ # App-wide state management
- Shared transition on modal navigation
- Bug: Disable shift animation on back (fixed on branch router-4 (React Navigation 7))
- X-Ray style content details
- Full screen video player
- Color extraction from images for dynamic theming
- Fork the repository
- Create a feature branch
- Submit a pull request
MIT License