0
# Expo Configuration
1

2
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.
3

4
## Capabilities
5

6
### Main Expo Plugin
7

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

10
```typescript { .api }
11
/**
12
 * Main Expo Config Plugin for React Native Video
13
 * Configures native features based on provided options
14
 */
15
declare const withRNVideo: ConfigPlugin<ConfigProps>;
16

17
/**
18
 * Configuration options for React Native Video Expo plugin
19
 */
20
interface ConfigProps {
21
  reactNativeTestApp?: boolean;
22
  enableNotificationControls?: boolean;
23
  enableAndroidPictureInPicture?: boolean;
24
  enableBackgroundAudio?: boolean;
25
  enableADSExtension?: boolean;
26
  enableCacheExtension?: boolean;
27
  androidExtensions?: AndroidExtensionsConfig;
28
}
29
```
30

31
**Usage Examples:**
32

33
```javascript
34
// app.config.js - Basic configuration
35
export default {
36
  expo: {
37
    name: "My Video App",
38
    plugins: [
39
      ["react-native-video", {
40
        enableNotificationControls: true,
41
        enableAndroidPictureInPicture: true,
42
        enableBackgroundAudio: true
43
      }]
44
    ]
45
  }
46
};
47

48
// app.config.js - Advanced configuration with all features
49
export default {
50
  expo: {
51
    name: "Advanced Video App",
52
    plugins: [
53
      ["react-native-video", {
54
        enableNotificationControls: true,
55
        enableAndroidPictureInPicture: true,
56
        enableBackgroundAudio: true,
57
        enableADSExtension: true,
58
        enableCacheExtension: true,
59
        androidExtensions: {
60
          useExoplayerRtsp: true,
61
          useExoplayerSmoothStreaming: true,
62
          useExoplayerDash: true,
63
          useExoplayerHls: true
64
        }
65
      }]
66
    ]
67
  }
68
};
69
```
70

71
### Notification Controls Configuration
72

73
Enable media session controls and lock screen playback information.
74

75
```typescript { .api }
76
/**
77
 * Configuration for media notification controls
78
 * Enables lock screen controls and media session integration
79
 * Platforms: iOS, Android
80
 */
81
interface NotificationControlsConfig {
82
  enableNotificationControls: boolean;
83
}
84
```
85

86
**Usage Examples:**
87

88
```javascript
89
// Enable notification controls
90
{
91
  plugins: [
92
    ["react-native-video", {
93
      enableNotificationControls: true
94
    }]
95
  ]
96
}
97
```
98

99
**Features Enabled:**
100
- Lock screen media controls
101
- Notification panel playback controls
102
- Media session metadata display
103
- Background audio session management
104
- Required permissions: `FOREGROUND_SERVICE`, `FOREGROUND_SERVICE_MEDIA_PLAYBACK` (Android)
105

106
### Picture-in-Picture Configuration
107

108
Configure Picture-in-Picture support for Android devices.
109

110
```typescript { .api }
111
/**
112
 * Configuration for Picture-in-Picture functionality
113
 * Platform: Android
114
 */
115
interface PictureInPictureConfig {
116
  enableAndroidPictureInPicture: boolean;
117
}
118
```
119

120
**Usage Examples:**
121

122
```javascript
123
// Enable Android Picture-in-Picture
124
{
125
  plugins: [
126
    ["react-native-video", {
127
      enableAndroidPictureInPicture: true
128
    }]
129
  ]
130
}
131
```
132

133
**Features Enabled:**
134
- Picture-in-Picture mode support
135
- Activity configuration for PiP
136
- Automatic PiP on app backgrounding (if configured)
137
- PiP controls and aspect ratio handling
138

139
### Background Audio Configuration
140

141
Enable background audio playback capabilities.
142

143
```typescript { .api }
144
/**
145
 * Configuration for background audio playback
146
 * Platforms: iOS, Android
147
 */
148
interface BackgroundAudioConfig {
149
  enableBackgroundAudio: boolean;
150
}
151
```
152

153
**Usage Examples:**
154

155
```javascript
156
// Enable background audio
157
{
158
  plugins: [
159
    ["react-native-video", {
160
      enableBackgroundAudio: true
161
    }]
162
  ]
163
}
164
```
165

166
**Features Enabled:**
167
- Background audio playback continuation
168
- Audio session configuration
169
- iOS background modes capability
170
- Audio focus management (Android)
171

172
### Advertisement Integration
173

174
Configure IMA SDK integration for video advertisements.
175

176
```typescript { .api }
177
/**
178
 * Configuration for advertisement support using IMA SDK
179
 * Platforms: iOS, Android
180
 */
181
interface ADSConfig {
182
  enableADSExtension: boolean;
183
  testApp?: boolean;
184
}
185
```
186

187
**Usage Examples:**
188

189
```javascript
190
// Enable advertisement support
191
{
192
  plugins: [
193
    ["react-native-video", {
194
      enableADSExtension: true
195
    }]
196
  ]
197
}
198

199
// Enable ads for test app
200
{
201
  plugins: [
202
    ["react-native-video", {
203
      enableADSExtension: true,
204
      reactNativeTestApp: true
205
    }]
206
  ]
207
}
208
```
209

210
**Features Enabled:**
211
- Google IMA SDK integration
212
- Pre-roll, mid-roll, and post-roll advertisement support
213
- VAST/VMAP advertisement parsing
214
- Advertisement event handling and analytics
215
- Skip functionality and interactive ads
216

217
### Video Caching Configuration
218

219
Enable video caching capabilities for iOS.
220

221
```typescript { .api }
222
/**
223
 * Configuration for video caching functionality
224
 * Platform: iOS
225
 */
226
interface CacheConfig {
227
  enableCacheExtension: boolean;
228
  testApp?: boolean;
229
}
230
```
231

232
**Usage Examples:**
233

234
```javascript
235
// Enable video caching (iOS)
236
{
237
  plugins: [
238
    ["react-native-video", {
239
      enableCacheExtension: true
240
    }]
241
  ]
242
}
243
```
244

245
**Features Enabled:**
246
- Video content caching for offline playback
247
- Cache management and cleanup
248
- Cached content verification
249
- Storage optimization
250

251
### Android ExoPlayer Extensions
252

253
Configure ExoPlayer protocol extensions for Android.
254

255
```typescript { .api }
256
/**
257
 * Configuration for ExoPlayer extensions on Android
258
 * Controls which streaming protocols are included to optimize app size
259
 * Platform: Android
260
 */
261
interface AndroidExtensionsConfig {
262
  useExoplayerRtsp?: boolean;
263
  useExoplayerSmoothStreaming?: boolean;
264
  useExoplayerDash?: boolean;
265
  useExoplayerHls?: boolean;
266
}
267
```
268

269
**Usage Examples:**
270

271
```javascript
272
// Default configuration (recommended)
273
{
274
  plugins: [
275
    ["react-native-video", {
276
      androidExtensions: {
277
        useExoplayerRtsp: false,           // Minimal use case
278
        useExoplayerSmoothStreaming: true, // Common for streaming
279
        useExoplayerDash: true,            // Common for adaptive streaming
280
        useExoplayerHls: true              // Very common for streaming
281
      }
282
    }]
283
  ]
284
}
285

286
// All extensions enabled
287
{
288
  plugins: [
289
    ["react-native-video", {
290
      androidExtensions: {
291
        useExoplayerRtsp: true,
292
        useExoplayerSmoothStreaming: true,
293
        useExoplayerDash: true,
294
        useExoplayerHls: true
295
      }
296
    }]
297
  ]
298
}
299

300
// Minimal configuration for basic MP4 playback
301
{
302
  plugins: [
303
    ["react-native-video", {
304
      androidExtensions: {
305
        useExoplayerRtsp: false,
306
        useExoplayerSmoothStreaming: false,
307
        useExoplayerDash: false,
308
        useExoplayerHls: false
309
      }
310
    }]
311
  ]
312
}
313
```
314

315
**Protocol Support:**
316
- **HLS (HTTP Live Streaming)**: Apple's adaptive streaming protocol (.m3u8)
317
- **DASH (Dynamic Adaptive Streaming)**: MPEG standard for adaptive streaming (.mpd)
318
- **SmoothStreaming**: Microsoft's adaptive streaming protocol (.ism)
319
- **RTSP (Real Time Streaming Protocol)**: Live streaming protocol (rtsp://)
320

321
## Complete Configuration Examples
322

323
### Media Streaming App Configuration
324

325
```javascript
326
// app.config.js - Comprehensive streaming app setup
327
export default {
328
  expo: {
329
    name: "StreamMax",
330
    slug: "streammax",
331
    version: "1.0.0",
332
    platforms: ["ios", "android"],
333
    plugins: [
334
      ["react-native-video", {
335
        // Core features
336
        enableNotificationControls: true,
337
        enableBackgroundAudio: true,
338
        enableAndroidPictureInPicture: true,
339
        
340
        // Monetization
341
        enableADSExtension: true,
342
        
343
        // Offline support
344
        enableCacheExtension: true,
345
        
346
        // Streaming protocols
347
        androidExtensions: {
348
          useExoplayerHls: true,          // For live streaming
349
          useExoplayerDash: true,         // For adaptive streaming  
350
          useExoplayerSmoothStreaming: true, // For legacy content
351
          useExoplayerRtsp: false         // Not needed for most apps
352
        }
353
      }]
354
    ]
355
  }
356
};
357
```
358

359
### Educational Video App Configuration
360

361
```javascript
362
// app.config.js - Educational content with offline support
363
export default {
364
  expo: {
365
    name: "EduVideo",
366
    plugins: [
367
      ["react-native-video", {
368
        // Essential for educational content
369
        enableBackgroundAudio: true,
370
        enableNotificationControls: true,
371
        
372
        // Offline learning support
373
        enableCacheExtension: true,
374
        
375
        // No ads for educational content
376
        enableADSExtension: false,
377
        
378
        // Basic streaming support
379
        androidExtensions: {
380
          useExoplayerHls: true,
381
          useExoplayerDash: false,
382
          useExoplayerSmoothStreaming: false,
383
          useExoplayerRtsp: false
384
        }
385
      }]
386
    ]
387
  }
388
};
389
```
390

391
### Live Streaming App Configuration
392

393
```javascript
394
// app.config.js - Live streaming focused configuration
395
export default {
396
  expo: {
397
    name: "LiveStream",
398
    plugins: [
399
      ["react-native-video", {
400
        // Live streaming essentials
401
        enableNotificationControls: true,
402
        enableBackgroundAudio: true,
403
        enableAndroidPictureInPicture: true,
404
        
405
        // Comprehensive protocol support for live content
406
        androidExtensions: {
407
          useExoplayerHls: true,    // Primary live streaming
408
          useExoplayerDash: true,   // Alternative live streaming
409
          useExoplayerRtsp: true,   // Direct live streams
410
          useExoplayerSmoothStreaming: false // Not common for live
411
        }
412
      }]
413
    ]
414
  }
415
};
416
```
417

418
### Minimal Video Player Configuration
419

420
```javascript
421
// app.config.js - Minimal setup for basic video playback
422
export default {
423
  expo: {
424
    name: "SimpleVideo",
425
    plugins: [
426
      ["react-native-video", {
427
        // Basic functionality only
428
        enableNotificationControls: false,
429
        enableBackgroundAudio: false, 
430
        enableAndroidPictureInPicture: false,
431
        enableADSExtension: false,
432
        enableCacheExtension: false,
433
        
434
        // No additional protocols (supports basic MP4/MOV)
435
        androidExtensions: {
436
          useExoplayerHls: false,
437
          useExoplayerDash: false,
438
          useExoplayerSmoothStreaming: false,
439
          useExoplayerRtsp: false
440
        }
441
      }]
442
    ]
443
  }
444
};
445
```
446

447
## Plugin Architecture
448

449
### Sub-Plugin Components
450

451
The main plugin orchestrates several specialized sub-plugins:
452

453
```typescript { .api }
454
/**
455
 * Individual plugin components (internal)
456
 */
457
declare const withNotificationControls: ConfigPlugin<boolean>;
458
declare const withAndroidPictureInPicture: ConfigPlugin<boolean>;
459
declare const withBackgroundAudio: ConfigPlugin<boolean>;
460
declare const withAds: ConfigPlugin<{ enableADSExtension: boolean; testApp?: boolean }>;
461
declare const withCaching: ConfigPlugin<{ enableCachingExtension: boolean; testApp?: boolean }>;
462
declare const withAndroidExtensions: ConfigPlugin<AndroidExtensionsConfig>;
463
```
464

465
### Native Configuration Changes
466

467
The plugins modify native project files to enable features:
468

469
**iOS (ios/Podfile, Info.plist):**
470
- Background audio capabilities
471
- Picture-in-Picture entitlements
472
- IMA SDK pod dependencies
473
- Cache framework integration
474

475
**Android (android/app/build.gradle, AndroidManifest.xml):**
476
- ExoPlayer extension dependencies
477
- Picture-in-Picture activity configuration
478
- Media service permissions
479
- Advertisement provider configurations
480

481
## Best Practices
482

483
### Selective Feature Enablement
484

485
```javascript
486
// Enable only features you actually use to minimize app size
487
{
488
  plugins: [
489
    ["react-native-video", {
490
      // Only enable features your app actually uses
491
      enableNotificationControls: true,  // If you want lock screen controls
492
      enableBackgroundAudio: false,      // If no background playback needed
493
      enableAndroidPictureInPicture: true, // If PiP is desired
494
      enableADSExtension: false,          // If no advertisements
495
      
496
      androidExtensions: {
497
        // Only include protocols you actually support
498
        useExoplayerHls: true,   // Most common
499
        useExoplayerDash: false, // Only if needed
500
        useExoplayerSmoothStreaming: false, // Legacy protocol
501
        useExoplayerRtsp: false  // Specialized use case
502
      }
503
    }]
504
  ]
505
}
506
```
507

508
### Testing Configuration
509

510
```javascript
511
// Development/testing configuration
512
{
513
  plugins: [
514
    ["react-native-video", {
515
      reactNativeTestApp: true, // Enable test app specific configurations
516
      enableADSExtension: true,
517
      enableCacheExtension: true
518
    }]
519
  ]
520
}
521
```
522

523
### Production Optimization
524

525
```javascript
526
// Production configuration - optimized for performance and size
527
{
528
  plugins: [
529
    ["react-native-video", {
530
      // Core features most apps need
531
      enableNotificationControls: true,
532
      enableBackgroundAudio: true,
533
      enableAndroidPictureInPicture: true,
534
      
535
      // Only enable if monetizing
536
      enableADSExtension: false,
537
      
538
      // Only enable if offering offline content
539
      enableCacheExtension: false,
540
      
541
      // Minimal protocol support
542
      androidExtensions: {
543
        useExoplayerHls: true,    // Essential for streaming
544
        useExoplayerDash: false,  // Add only if needed
545
        useExoplayerSmoothStreaming: false,
546
        useExoplayerRtsp: false
547
      }
548
    }]
549
  ]
550
}
551
```