React Native for Video — What You Need to Know

React Native is quickly becoming a favorite among developers when it comes to building mobile apps. The community has embraced the speed, efficiency, and user experience that comes with building in React Native. The popularity has spread among developers and businesses alike, expanding the development framework past mobile, to broader TV experiences.

If you’re considering using React Native to build your suite of video apps, or you’re already using React Native for your mobile video app and are looking to extend to TV devices, here’s what you need to know.

For Your Consideration

Video apps are a beast of their own. The complexities of building, hosting, and maintaining video apps brings a suite of challenges for any developer.

Even working with a component-friendly programming language like React Native doesn’t improve the experience. TV-specific React Native modules are sparse. A fairly simple pause/play video player is the extent of what you’re going to get when building for TV using React Native.

Here are some common video app elements that will need to play well with React Native, regardless of which platform you choose:

UI Components

React Native is a great tool when establishing a robust user-experience, but video apps demand complex UI components that need to be addressed. TV-specific features such as episode drawers, squeeze credits, profile management, bookmarking, and predictive search (to name a few) will require extensive work.

Player

As mentioned, a standard React Native video player exists, but video apps are more complex than pause/play. Multilingual closed captioning, trickplay scrubbing, Chromecast/Airplay integration, and download-to-go are all permanent fixtures in many popular players.

Search

Voice integration and content consolidation via apps like Apple TV App and Movies Anywhere means universal search is on the rise. Deep linking straight to video content from a platform home screen or smart home speaker should be on your deliberation list.

Authentication

Authentication options are a major part of the UX process for your video app. Sign-on functions can be split into the following:

• Cable provider — enter the username and password of your cable provider account.
• Platform single-sign-on — use your Gmail, Amazon account, Apple ID, etc.
• App single-sign-on — have a login portal specific to your app. This would require a user management system.
• Pin activation for TV platforms — instead of typing in long usernames and passwords

In-App Purchase

If developing an app similar to iTunes or Google Movies and TV, in-app purchasing will bring heightened challenges with paywalls and added security measures. This includes support for monthly payments like SVOD services as well as pay-per-title TVOD services.

Analytics

Measuring how well your app is performing with users is key. Here, we see the most diversity in vendors; analytics for video usage, video quality of service, app usage patterns, and A/B testing to name a few.

Advertising

The addition of ads into a video application is one of the most complex systems to implement. First off, there are video ads–pre, mid, post. These, in turn, can be served via server-side ad insertion (SSDI) or client-side ad insertion (CSAI). Then, there are other forms of digital ad insertion (DAI), which are served mainly as display ads–and these use a number of standards like VPAID2 and MRAID.

Managing Expectations

Considerations are one thing, managing expectations are another. Even if you are prepared to go all-in on React Native for every element of your video app, you need to realize that some features are not ready for React Native support just yet. As such, you need to budget and plan the effort it will take to create the necessary module extensions.

These could be either native modules or pure JS, depending if your vendor has a server-side API you can use. Some vendors have started to offer React.js or React Native support directly–but because it is a relatively new programming framework, and only slightly experimenting past mobile, many vendors are not up to the task of switching. Not because they can’t, they just haven’t had the conversation internally, themselves.
You undoubtedly have a slew of technical vendors powering various aspects of your company. You will need to do your due diligence in identifying which of them can still support you and which ones need to catch up. If your vendor does not supply a React-based API, you can go full custom and build external modules for your development needs.

If this is an option for you, you’re probably looking at some open-source libraries and some custom development. React Native has a flourishing community that is eager to share custom components with the development world. You will find some amazing components to work with. Keep in mind, most TV-specific components don’t exist yet. They’re just too niche.

You will find plenty of UI components but those are leaps and bounds simpler to produce than a full-fledged React Native video player, or ad integration. In addition, you need to go eyes wide open when adopting any third party external module. The more uncommon the module, the more chance that it only solves a small subset of what you are looking for. Definitely take a close look at the commit activity to see if there is more than one author and that the project is actively being worked on.

All this to say, custom is doable but get ready to empty your wallet. It will be a labor-intensive feat that will require substantial resources.

Building a React Native Video Community

This, by no means, is meant to deter you from working with React Native. In fact, it’s meant to make that daunting jump, easier. React Native is a powerful tool which is still in its infancy. As more and more developers use it, the more versatile and stronger it will get. Better components, higher quality, and more subject matter experts.

We here at You.i TV have fully embraced React Native as our development framework of choice. In fact, we launched a React Native Early Adopters program earlier this year and have worked with some of the leading media brands to extend the power of React Native to 11+ platforms (including Roku) with great results. Learn more about React Native for TV and video at www.youi.tv/react-native.