Introduction

Cross-platform frameworks such as React Native have become a popular trend for simplifying OTT app development. React Native allows developers to create apps that work smoothly across multiple platforms using just one codebase. With this approach, apps can be deployed on iOS, Android, and Web without needing separate development for each platform. It speeds up the process, uses resources more efficiently, and delivers a native-like performance, making it a more efficient choice than traditional native development.

However, building an OTT app with React Native can still require diving into native development for tasks like configuring platform-specific settings, managing native modules, and setting up complex build environments. This is why the React Native community advises to build React Native apps using a framework, a toolbox with all the necessary APIs to let you build production ready apps, and reduce the steep learning curve of some of the core React Native APIs. There is a variety of available React Native frameworks, but as of recently, the recommended community framework for React Native is called Expo¹.

In this article, we’ll explore what Expo is, why it has become a popular choice for OTT apps that are using React Native development. We’ll discuss the crucial role of video playback for OTT providers and evaluate the pros and cons of using Expo. Additionally, we’ll explore how OTT app providers can leverage Expo to efficiently build cross-platform streaming applications while delivering a premium viewing experience.

What is Expo?

Expo is an open-source platform for making universal native apps for Android, iOS, and Web-based platforms with JavaScript and React². It streamlines the process of building, testing, and deploying React Native OTT applications with minimal configuration.

The Expo framework itself is free and open source, while the set of tools provided by Expo Application Services (EAS) is an optional paid service.

Expo workflows for different customisation levels

Expo provides two main workflows for developing React Native applications: Managed Workflow and Bare Workflow.

In the default Managed Workflow, Expo takes care of most of the native configuration and management for you. There is no need to write any native code or worry about updates, builds, and asset management. This is particularly advantageous for OTT developers seeking a straightforward approach, as they can quickly implement features without getting bogged down by the complexities of native code.

Developers who need more control over native code could benefit more from the Bare Workflow. It provides full access to native project files for both Android and iOS, enabling customisation and the ability to add any native modules or libraries. This is ideal for OTT applications requiring specific native features or integrations. Naturally, it comes with increased complexity.

Key features of Expo

The Expo SDK extends the capabilities of the React Native core libraries by providing access to a wide range of device and system functionalities, including libraries for features like OAuth authentication tools. The most popular ones include:

1. Expo Go: Expo Go is a sandbox app available on the App Store and Google Play store that allows you to quickly experiment with creating native Android and iOS applications. You can preview your app on physical devices or share it with other developers by simply scanning a QR code, eliminating the need to build and install the app every time.
2. Over-The-Air (OTA) updates: Expo allows developers to push updates to their applications without requiring users to download a new version from the app store. When changes are made to the app's code, developers can publish these updates to Expo's servers, which users' devices can then access. The app checks for updates on launch, downloads the new code in the background. This is particularly beneficial for OTT apps, as it ensures that viewers have immediate access to the latest content and features, enhancing user engagement.
3. Expo Application Services (EAS), the optional paid service, enhances the development process even further with tools like EAS Build, allowing developers to easily generate apps for distribution, such as publishing an app to the App Store or Google Play. EAS Update provides advanced management for Over-The-Air updates, enabling developers to push quick fixes or new features without resubmitting to the app stores.

Building your React Native OTT app with Expo

For sports, media, and entertainment companies, Expo presents significant advantages in OTT app development. By using a single codebase, teams can streamline maintenance and updates, ultimately saving time and resources. The built-in support for OTA updates means users can access new features instantly, keeping them engaged without waiting for app store approvals.

However, there are some limitations to consider. Expo's “shield” layer limits access to certain native modules, which may restrict the integration of certain third-party libraries and low-level device features. 

Video player options for Expo OTT apps 

For OTT apps, video playback is a significant part of the application and a great viewer experience will be a differentiator from other OTT platforms. In this case, the basic playback function is often insufficient for a cross-platform OTT app today. Viewers now expect a premium experience similar to that offered by Netflix and other leading platforms. To meet these expectations, streams must be uninterrupted, with smooth ad transition, and available across all devices.

The Expo library includes its own open source player, expo-av, as well as dedicated expo-video and expo-audio components that are set to replace the current video and audio components of expo-av. Although the more popular react-native-video can be used with Expo as well, the expo-video and expo-audio components provide a better integration with the Expo ecosystem.

THEOplayer is a leading cross-platform commercial video player, which includes a React Native SDK. The THEOplayer React Native SDK (“react-native-theoplayer”) comes with a premium feature set and ready-made connectors for third-party ads, analytics and advertising solutions.

The following table compares feature support of expo-video and expo-audio with react-native-theoplayer.

Table 1: Comparison table of the expo-video and expo-audio with react-native-theoplayer³

From the comparison table above, it is clear that the THEOplayer React Native SDK offers a more advanced feature set and broader platform support compared to expo-video / expo-audio. For use cases requiring advanced video player features, DRM, ads and/or analytics integrations, expo-video/expo-audio may not fully meet these needs. 

Using THEOplayer React Native video player in your Expo app

When it comes to integrating THEOplayer’s React Native SDK, the process is straightforward. The react-native-theoplayer library is designed to be compatible with Expo, enabling developers to integrate THEOplayer's robust video playback capabilities into their Expo projects with ease.

To further simplify this process, there is an Expo plug-in that automatically configures THEOplayer’s native extension libraries. This eliminates the need for manual setup in the native build process, saving time and simplifying integration. For a closer look, check out our sample app. 

Conclusion

React Native allows companies to quickly and cost-effectively develop and iterate cross-platform OTT apps. With Expo as the recommended framework, the development process is streamlined through the provision of pre-built components and APIs, significantly reducing the amount of code developers need to write. This allows the engineering teams to concentrate on building features rather than configuring the environment. Additionally, developers benefit from a user-friendly experience enriched with features like Expo Go for instant previews, Over-The-Air (OTA) updates, and pre-built libraries for faster development.

However, the OTT apps developed with Expo may not support all native modules, making it challenging to implement specific features that require custom native code. For video playback, developers could use the default expo-video module for basic video playback functionality or choose a commercial solution like the THEOplayer React Native SDK for enhanced features, advanced APIs, more extensive platform reach, and seamless integration with 3rd party solutions such as advertising. With the THEOplayer Expo plugin, companies can easily integrate the react-native-theoplayer library to their app, ensuring a superior Quality of Experience (QoE) for their viewers across all platforms.

¹ Expo is recommended by the React Native community

²  Expo.dev website

³ This is a comparison conducted in 2024 November, the availability of features might evolve over time.