Screen Mirror - React Native Screen Mirroring App

A cross-platform React Native application that allows you to mirror your phone screen to any TV using multiple protocols including AirPlay, Chromecast, and DLNA.

Features

• Multi-Protocol Support: Connect to TVs using AirPlay, Chromecast, DLNA, or Miracast
• Cross-Platform: Works on both iOS and Android
• Automatic Device Discovery: Automatically finds compatible TVs on your local network
• Real-time Screen Mirroring: Low-latency screen casting with audio support
• Quality Settings: Adjustable resolution (480p to 4K), frame rate, and bitrate
• Modern UI: Clean React Native interface with smooth animations

Requirements

iOS

• iOS 14.0 or later
• iPhone or iPad

Android

• Android 5.0 (API 21) or later

General

• TV connected to the same Wi-Fi network
• Node.js 18+ and npm/yarn

Supported Devices

AirPlay

• Apple TV (all generations)
• AirPlay 2 compatible smart TVs
• Mac computers

Chromecast

• Chromecast (all generations)
• Chromecast with Google TV
• Android TV devices
• Google Nest Hub

DLNA

• Samsung Smart TVs
• LG Smart TVs
• Sony Smart TVs
• Most Smart TVs manufactured after 2012
• PlayStation 4/5
• Xbox consoles

Project Structure

Screen-mirroring/
├── src/
│   ├── App.tsx                    # Main app component
│   ├── components/
│   │   ├── DeviceCard.tsx         # TV device card component
│   │   ├── StatusBadge.tsx        # Connection status indicator
│   │   ├── StatsCard.tsx          # Streaming statistics display
│   │   ├── FilterModal.tsx        # Protocol filter modal
│   │   └── PickerModal.tsx        # Settings picker modal
│   ├── screens/
│   │   ├── DevicesScreen.tsx      # Device discovery screen
│   │   ├── MirrorScreen.tsx       # Mirroring controls screen
│   │   └── SettingsScreen.tsx     # Quality settings screen
│   ├── services/
│   │   ├── DeviceDiscoveryService.ts  # Network discovery
│   │   ├── StreamingService.ts        # Connection & streaming
│   │   └── ScreenCaptureService.ts    # Screen capture wrapper
│   ├── context/
│   │   └── AppContext.tsx         # Global state management
│   ├── types/
│   │   └── index.ts               # TypeScript type definitions
│   └── native/
│       └── ScreenMirrorModule.ts  # Native module interface
├── ios/
│   ├── ScreenMirrorModule.swift   # iOS native module
│   └── ScreenMirrorModule.m       # Objective-C bridge
├── android/
│   └── app/src/main/java/com/screenmirror/
│       ├── ScreenMirrorModule.kt  # Android native module
│       └── ScreenMirrorPackage.kt # React Native package
├── package.json
├── tsconfig.json
└── babel.config.js

Installation

1. Clone the repository:

   git clone https://github.com/your-username/Screen-mirroring.git
   cd Screen-mirroring

2. Install dependencies:

   npm install
   # or
   yarn install

3. Install iOS pods (macOS only):

   cd ios && pod install && cd ..

4. Run the app:

   # iOS
   npm run ios
   
   # Android
   npm run android

Configuration

iOS Setup

1. Open ios/ScreenMirror.xcworkspace in Xcode

2. Select your development team

3. Add required capabilities:

   • App Groups (for broadcast extension)
   • Local Network Usage

4. Add to Info.plist:

   <key>NSLocalNetworkUsageDescription</key>
   <string>Screen Mirror needs access to discover TVs on your network</string>
   <key>NSBonjourServices</key>
   <array>
     <string>_googlecast._tcp</string>
     <string>_airplay._tcp</string>
   </array>

Android Setup

1. Add to AndroidManifest.xml:

   <uses-permission android:name="android.permission.INTERNET" />
   <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
   <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
   <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />

2. Register the native package in MainApplication.kt:

   packages.add(ScreenMirrorPackage())

Usage

1. Launch the app and grant network permissions when prompted

2. Discover Devices: The app automatically scans for compatible TVs

3. Select a TV: Tap on a discovered device to connect

4. Start Mirroring: Tap the "Start Mirroring" button

5. Adjust Settings: Configure quality in the Settings tab

Architecture

The app uses a clean architecture with React Context for state management:

• Screens: Main views for navigation
• Components: Reusable UI components
• Services: Business logic and native module communication
• Context: Global state management with React Context
• Native Modules: Platform-specific screen capture and streaming

Key Services

• DeviceDiscoveryService: Discovers TVs via Bonjour/NSD and SSDP
• StreamingService: Manages connections and streaming
• ScreenCaptureService: Handles platform screen capture APIs

Technical Details

Screen Capture

• iOS: Uses ReplayKit for system-level screen capture
• Android: Uses MediaProjection API for screen capture

Network Protocols

• Bonjour/NSD: For AirPlay and Chromecast discovery
• SSDP/UPnP: For DLNA device discovery
• WebSocket/HTTP: For streaming data

Scripts

# Start Metro bundler
npm start

# Run on iOS
npm run ios

# Run on Android
npm run android

# Run tests
npm test

# Lint code
npm run lint

# Install iOS pods
npm run pod-install

Troubleshooting

Device Not Found

• Ensure your phone and TV are on the same Wi-Fi network
• Check that the TV's screen mirroring feature is enabled
• Pull down to refresh the device list

Connection Failed

• Restart both the app and the TV
• Check for firewall restrictions
• Ensure the TV supports the selected protocol

Poor Quality / Lag

• Lower the resolution or frame rate in Settings
• Move closer to your Wi-Fi router
• Reduce network congestion

Build Errors

iOS:

cd ios && pod install --repo-update && cd ..

Android:

cd android && ./gradlew clean && cd ..

License

MIT License - See LICENSE file for details

Contributing

Contributions are welcome! Please read our contributing guidelines before submitting pull requests.

Support

For issues and feature requests, please use the GitHub Issues page.