tessl/npm-react-native-video

A comprehensive React Native video player component with streaming, DRM, and Picture-in-Picture support

—

Pending

Overview

Eval results

Files

Expo Configuration

Name: tessl/npm-react-native-video
Author: tessl

Expo Config Plugins for configuring native features like Picture-in-Picture, background audio, advertisement integration, video caching, and ExoPlayer extensions for seamless React Native Video integration in Expo projects.

Capabilities

Main Expo Plugin

Primary configuration plugin that orchestrates all React Native Video native features.

/**
 * Main Expo Config Plugin for React Native Video
 * Configures native features based on provided options
 */
declare const withRNVideo: ConfigPlugin<ConfigProps>;

/**
 * Configuration options for React Native Video Expo plugin
 */
interface ConfigProps {
  reactNativeTestApp?: boolean;
  enableNotificationControls?: boolean;
  enableAndroidPictureInPicture?: boolean;
  enableBackgroundAudio?: boolean;
  enableADSExtension?: boolean;
  enableCacheExtension?: boolean;
  androidExtensions?: AndroidExtensionsConfig;
}

Usage Examples:

// app.config.js - Basic configuration
export default {
  expo: {
    name: "My Video App",
    plugins: [
      ["react-native-video", {
        enableNotificationControls: true,
        enableAndroidPictureInPicture: true,
        enableBackgroundAudio: true
      }]
    ]
  }
};

// app.config.js - Advanced configuration with all features
export default {
  expo: {
    name: "Advanced Video App",
    plugins: [
      ["react-native-video", {
        enableNotificationControls: true,
        enableAndroidPictureInPicture: true,
        enableBackgroundAudio: true,
        enableADSExtension: true,
        enableCacheExtension: true,
        androidExtensions: {
          useExoplayerRtsp: true,
          useExoplayerSmoothStreaming: true,
          useExoplayerDash: true,
          useExoplayerHls: true
        }
      }]
    ]
  }
};

Notification Controls Configuration

Enable media session controls and lock screen playback information.

/**
 * Configuration for media notification controls
 * Enables lock screen controls and media session integration
 * Platforms: iOS, Android
 */
interface NotificationControlsConfig {
  enableNotificationControls: boolean;
}

Usage Examples:

// Enable notification controls
{
  plugins: [
    ["react-native-video", {
      enableNotificationControls: true
    }]
  ]
}

Features Enabled:

Lock screen media controls
Notification panel playback controls
Media session metadata display
Background audio session management
Required permissions: FOREGROUND_SERVICE, FOREGROUND_SERVICE_MEDIA_PLAYBACK (Android)

Picture-in-Picture Configuration

Configure Picture-in-Picture support for Android devices.

/**
 * Configuration for Picture-in-Picture functionality
 * Platform: Android
 */
interface PictureInPictureConfig {
  enableAndroidPictureInPicture: boolean;
}

Usage Examples:

// Enable Android Picture-in-Picture
{
  plugins: [
    ["react-native-video", {
      enableAndroidPictureInPicture: true
    }]
  ]
}

Features Enabled:

Picture-in-Picture mode support
Activity configuration for PiP
Automatic PiP on app backgrounding (if configured)
PiP controls and aspect ratio handling

Background Audio Configuration

Enable background audio playback capabilities.

/**
 * Configuration for background audio playback
 * Platforms: iOS, Android
 */
interface BackgroundAudioConfig {
  enableBackgroundAudio: boolean;
}

Usage Examples:

// Enable background audio
{
  plugins: [
    ["react-native-video", {
      enableBackgroundAudio: true
    }]
  ]
}

Features Enabled:

Background audio playback continuation
Audio session configuration
iOS background modes capability
Audio focus management (Android)

Advertisement Integration

Configure IMA SDK integration for video advertisements.

/**
 * Configuration for advertisement support using IMA SDK
 * Platforms: iOS, Android
 */
interface ADSConfig {
  enableADSExtension: boolean;
  testApp?: boolean;
}

Usage Examples:

// Enable advertisement support
{
  plugins: [
    ["react-native-video", {
      enableADSExtension: true
    }]
  ]
}

// Enable ads for test app
{
  plugins: [
    ["react-native-video", {
      enableADSExtension: true,
      reactNativeTestApp: true
    }]
  ]
}

Features Enabled:

Google IMA SDK integration
Pre-roll, mid-roll, and post-roll advertisement support
VAST/VMAP advertisement parsing
Advertisement event handling and analytics
Skip functionality and interactive ads

Video Caching Configuration

Enable video caching capabilities for iOS.

/**
 * Configuration for video caching functionality
 * Platform: iOS
 */
interface CacheConfig {
  enableCacheExtension: boolean;
  testApp?: boolean;
}

Usage Examples:

// Enable video caching (iOS)
{
  plugins: [
    ["react-native-video", {
      enableCacheExtension: true
    }]
  ]
}

Features Enabled:

Video content caching for offline playback
Cache management and cleanup
Cached content verification
Storage optimization

Android ExoPlayer Extensions

Configure ExoPlayer protocol extensions for Android.

/**
 * Configuration for ExoPlayer extensions on Android
 * Controls which streaming protocols are included to optimize app size
 * Platform: Android
 */
interface AndroidExtensionsConfig {
  useExoplayerRtsp?: boolean;
  useExoplayerSmoothStreaming?: boolean;
  useExoplayerDash?: boolean;
  useExoplayerHls?: boolean;
}

Usage Examples:

// Default configuration (recommended)
{
  plugins: [
    ["react-native-video", {
      androidExtensions: {
        useExoplayerRtsp: false,           // Minimal use case
        useExoplayerSmoothStreaming: true, // Common for streaming
        useExoplayerDash: true,            // Common for adaptive streaming
        useExoplayerHls: true              // Very common for streaming
      }
    }]
  ]
}

// All extensions enabled
{
  plugins: [
    ["react-native-video", {
      androidExtensions: {
        useExoplayerRtsp: true,
        useExoplayerSmoothStreaming: true,
        useExoplayerDash: true,
        useExoplayerHls: true
      }
    }]
  ]
}

// Minimal configuration for basic MP4 playback
{
  plugins: [
    ["react-native-video", {
      androidExtensions: {
        useExoplayerRtsp: false,
        useExoplayerSmoothStreaming: false,
        useExoplayerDash: false,
        useExoplayerHls: false
      }
    }]
  ]
}

Protocol Support:

HLS (HTTP Live Streaming): Apple's adaptive streaming protocol (.m3u8)
DASH (Dynamic Adaptive Streaming): MPEG standard for adaptive streaming (.mpd)
SmoothStreaming: Microsoft's adaptive streaming protocol (.ism)
RTSP (Real Time Streaming Protocol): Live streaming protocol (rtsp://)

Complete Configuration Examples

Media Streaming App Configuration

// app.config.js - Comprehensive streaming app setup
export default {
  expo: {
    name: "StreamMax",
    slug: "streammax",
    version: "1.0.0",
    platforms: ["ios", "android"],
    plugins: [
      ["react-native-video", {
        // Core features
        enableNotificationControls: true,
        enableBackgroundAudio: true,
        enableAndroidPictureInPicture: true,
        
        // Monetization
        enableADSExtension: true,
        
        // Offline support
        enableCacheExtension: true,
        
        // Streaming protocols
        androidExtensions: {
          useExoplayerHls: true,          // For live streaming
          useExoplayerDash: true,         // For adaptive streaming  
          useExoplayerSmoothStreaming: true, // For legacy content
          useExoplayerRtsp: false         // Not needed for most apps
        }
      }]
    ]
  }
};

Educational Video App Configuration

// app.config.js - Educational content with offline support
export default {
  expo: {
    name: "EduVideo",
    plugins: [
      ["react-native-video", {
        // Essential for educational content
        enableBackgroundAudio: true,
        enableNotificationControls: true,
        
        // Offline learning support
        enableCacheExtension: true,
        
        // No ads for educational content
        enableADSExtension: false,
        
        // Basic streaming support
        androidExtensions: {
          useExoplayerHls: true,
          useExoplayerDash: false,
          useExoplayerSmoothStreaming: false,
          useExoplayerRtsp: false
        }
      }]
    ]
  }
};

Live Streaming App Configuration

// app.config.js - Live streaming focused configuration
export default {
  expo: {
    name: "LiveStream",
    plugins: [
      ["react-native-video", {
        // Live streaming essentials
        enableNotificationControls: true,
        enableBackgroundAudio: true,
        enableAndroidPictureInPicture: true,
        
        // Comprehensive protocol support for live content
        androidExtensions: {
          useExoplayerHls: true,    // Primary live streaming
          useExoplayerDash: true,   // Alternative live streaming
          useExoplayerRtsp: true,   // Direct live streams
          useExoplayerSmoothStreaming: false // Not common for live
        }
      }]
    ]
  }
};

Minimal Video Player Configuration

// app.config.js - Minimal setup for basic video playback
export default {
  expo: {
    name: "SimpleVideo",
    plugins: [
      ["react-native-video", {
        // Basic functionality only
        enableNotificationControls: false,
        enableBackgroundAudio: false, 
        enableAndroidPictureInPicture: false,
        enableADSExtension: false,
        enableCacheExtension: false,
        
        // No additional protocols (supports basic MP4/MOV)
        androidExtensions: {
          useExoplayerHls: false,
          useExoplayerDash: false,
          useExoplayerSmoothStreaming: false,
          useExoplayerRtsp: false
        }
      }]
    ]
  }
};

Plugin Architecture

Sub-Plugin Components

The main plugin orchestrates several specialized sub-plugins:

/**
 * Individual plugin components (internal)
 */
declare const withNotificationControls: ConfigPlugin<boolean>;
declare const withAndroidPictureInPicture: ConfigPlugin<boolean>;
declare const withBackgroundAudio: ConfigPlugin<boolean>;
declare const withAds: ConfigPlugin<{ enableADSExtension: boolean; testApp?: boolean }>;
declare const withCaching: ConfigPlugin<{ enableCachingExtension: boolean; testApp?: boolean }>;
declare const withAndroidExtensions: ConfigPlugin<AndroidExtensionsConfig>;

Native Configuration Changes

The plugins modify native project files to enable features:

iOS (ios/Podfile, Info.plist):

Background audio capabilities
Picture-in-Picture entitlements
IMA SDK pod dependencies
Cache framework integration

Android (android/app/build.gradle, AndroidManifest.xml):

ExoPlayer extension dependencies
Picture-in-Picture activity configuration
Media service permissions
Advertisement provider configurations

Best Practices

Selective Feature Enablement

// Enable only features you actually use to minimize app size
{
  plugins: [
    ["react-native-video", {
      // Only enable features your app actually uses
      enableNotificationControls: true,  // If you want lock screen controls
      enableBackgroundAudio: false,      // If no background playback needed
      enableAndroidPictureInPicture: true, // If PiP is desired
      enableADSExtension: false,          // If no advertisements
      
      androidExtensions: {
        // Only include protocols you actually support
        useExoplayerHls: true,   // Most common
        useExoplayerDash: false, // Only if needed
        useExoplayerSmoothStreaming: false, // Legacy protocol
        useExoplayerRtsp: false  // Specialized use case
      }
    }]
  ]
}

Testing Configuration

// Development/testing configuration
{
  plugins: [
    ["react-native-video", {
      reactNativeTestApp: true, // Enable test app specific configurations
      enableADSExtension: true,
      enableCacheExtension: true
    }]
  ]
}

Production Optimization

// Production configuration - optimized for performance and size
{
  plugins: [
    ["react-native-video", {
      // Core features most apps need
      enableNotificationControls: true,
      enableBackgroundAudio: true,
      enableAndroidPictureInPicture: true,
      
      // Only enable if monetizing
      enableADSExtension: false,
      
      // Only enable if offering offline content
      enableCacheExtension: false,
      
      // Minimal protocol support
      androidExtensions: {
        useExoplayerHls: true,    // Essential for streaming
        useExoplayerDash: false,  // Add only if needed
        useExoplayerSmoothStreaming: false,
        useExoplayerRtsp: false
      }
    }]
  ]
}

Install with Tessl CLI

npx tessl i tessl/npm-react-native-video

docs

event-handling.md

expo-configuration.md

tessl/npm-react-native-video