This is a new React Native project, bootstrapped using @react-native-community/cli.

Getting Started

Note: Make sure you have completed the React Native - Environment Setup instructions till "Creating a new application" step, before proceeding.

Step 1: Start the Metro Server

First, you will need to start Metro, the JavaScript bundler that ships with React Native.

To start Metro, run the following command from the root of your React Native project:

# using npm
npm start

# OR using Yarn
yarn start

Step 2: Start your Application

Let Metro Bundler run in its own terminal. Open a new terminal from the root of your React Native project. Run the following command to start your Android or iOS app:

For Android

# using npm
npm run android

# OR using Yarn
yarn android

For iOS

# using npm
npm run ios

# OR using Yarn
yarn ios

If everything is set up correctly, you should see your new app running in your Android Emulator or iOS Simulator shortly provided you have set up your emulator/simulator correctly.

This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.

Overview

This app compares React Native Video, Expo-AV (for both audio and video), and the newer Expo libraries—expo-video and expo-audio—under stress testing conditions. The main goal is to see how many players and views we can run before hitting performance issues or crashes.

From our findings:

• Expo-AV and react-native-video package both the player and its view together, making each instance heavier. Running multiple instances often leads to instability or crashes sooner.
• expo-video separates the player from the view, enabling you to manage a single video player across multiple views. This approach shows roughly 5× the capacity in terms of number of views without significant slowdown.
• However, when expo-video is used in a “standalone” manner (where the view and player share the same component), performance under stress does drop significantly compared to without, however still roughly 2x more players can be loaded from testing, which is substantial.
• For audio alone, performance improves further because no view element is involved. Both expo-av (audio) and expo-audio handle more simultaneous audio players—about 2–3× more than the video combinations—before crashing.
• Combining audio and video (e.g., expo-av with both audio and video in one component) creates additional overhead, resulting in fewer possible instances before a crash.
• Overall, expo-video + expo-audio perform similarly (and slightly better) compared to expo-av when combining audio and video.

Key Takeaway

1. expo-video and expo-audio significantly outperform expo-av and react-native-video (v6) in stress testing. This means that 2-3x more views can be rendered on avg before switching sources causing noticeable un-responsiveness or crashing from the app.
2. Performance bottlenecks primarily arise when each component holds both the player and its view. Splitting the player from the view greatly improves scalability.
3. Problems begin to arise when sources are changed, so this seems to indicate and ineffective cleanup or handling of new sources.

Disclaimer:
These observations are based on initial, informal tests and should be taken with a grain of salt. However, early indications strongly favor a strategy in which the player and view are decoupled (as in expo-video) and where audio and video usage are optimized or split across newer Expo libraries.

Testing Guide

This app contains several configurations accessible from the main screen. There are two main sections:

1. Expo
2. React Native Video

Each section showcases different approaches using its respective libraries. The titles and subtitles indicate which library is in use (e.g., "expo-video") and the configuration type.

For instance, "multiple players, multiple views" means the demo instantiates multiple video players, each paired with its own view. Meanwhile, "single player, multiple views" means a single player instance is shared by multiple views. If a library doesn’t support separating the video player from its view, each instance includes both the player and view together.

Within each test configuration, you can:

• Adjust the number of instances
• Play or pause playback
• Cycle through various media assets
• Toggle the asset origin (local or remote)
• Track how many assets have been skipped while cycling