React Native Expo Assignment - README
Project Overview
A React Native Expo application demonstrating WebView integration, local notifications, and HLS video playback with navigation between screens.
Architecture & Implementation Choices
Technology Stack React Native + Expo: Chosen for rapid development and cross-platform compatibility
React Navigation 6: Native stack navigator for smooth screen transitions
Expo Notifications: Local notifications without complex setup
Expo AV: Reliable HLS video streaming support
React Native WebView: Mature WebView implementation with good performance
Project Structure src/ ├── components/ │ ├── WebViewScreen.js # Main WebView with notification triggers │ └── VideoPlayerScreen.js # HLS video player with controls ├── navigation/ └── AppNavigator.js # Navigation stack configuration
Core Features Implementation
- WebView Integration
Choice: Expo-compatible react-native-webview Rationale: Better performance and security than basic WebView Implementation: Embedded Expo website as demo content Loading state management Error handling for network issues
- Local Notifications
Choice: expo-notifications over third-party solutions Rationale: Native Expo integration, simpler setup, no additional dependencies Implementation: Two distinct notification types with different delays (3s & 5s) Permission handling with user-friendly alerts Custom notification handler for consistent behavior
- Video Player
Choice: expo-av for HLS streaming Rationale: Built-in HLS support, good performance, Expo ecosystem integration Implementation: Test HLS stream from Mux for reliable playback Native controls enabled for user familiarity Fullscreen support and playback status tracking
- Navigation
Choice: React Navigation 6 Native Stack Rationale: Performance optimized, platform-specific animations Implementation: Clean stack structure with proper screen options Header customization for better UX
- Bonus Features Added
Smart Notifications
WebView Load Notifications: Automatic notification when webpage finishes loading Navigation from Notifications: Tap notifications to navigate between screens Enhanced Data: Additional metadata in notification payloads
Technical Enhancements
Loading States: Visual feedback during WebView loading Error Handling: Comprehensive error management Performance: Optimized re-renders and memory usage Code Organization: Modular structure for maintainability
Setup & Installation
bash
npm install
npx expo install expo-notifications expo-av react-native-webview npx expo install @react-navigation/native @react-navigation/native-stack npx expo install react-native-screens react-native-safe-area-context
npx expo start
Testing Requirements Important: Use a physical device for testing notifications - they don't work on iOS Simulator or Android Emulator.
Test Flow: Launch app → WebView loads → Load notification appears Tap "Trigger Notification 1" → Wait 3 seconds → Notification appears Tap "Trigger Notification 2" → Wait 2 seconds → Notification appears
Tap any notification → Automatically navigates to Video Player
Test video controls → Play, pause, fullscreen functionality
Navigate back using header button