Originally posted on https://www.youi.tv/react-native-video-interface-12-platforms/

When You.i TV approached G2i to help build a streaming video app using their You.i Engine One SDK, I was a bit worried. One, we as a company had never built a streaming app before so I knew we’d run into unique challenges. Two, the list of target platforms was broad; handsets, tablets, and TV devices. Three, React Native was to be the main framework.

I have been part of several React Native projects targeting handsets and tablets, but I’ve never had to deal with TV-connected devices. This, along with the streaming aspect, caused a bit of concern.

What about the cross-platform video solution?

Based on my previous experience, I knew that in order for G2i to deliver a high-quality cross-platform video player in React Native, we would need to bridge a video component to its native counterpart on each platform we were targeting.

To target TV platforms, the following native video interfaces needed to be maintained:

- AVPlayer for iOS and Apple TV, interface in Objective-C or Swift
- ExoPlayer for Android and Fire TV, interface in Java or Kotlin‍
- Roku Video Player, interface in Brightscript and SceneGraph
- AVPlay for Tizen, interface in JavaScript

I found an open sourced project called react-native-video which is an attempt to bridge a video solution for React Native. It’s quite powerful but it doesn’t offer support for Roku and Tizen. It also wouldn’t help reduce the size of the effort needed to invest to get these apps out the door. React-native-video has over 10,000 lines of code and documentation across four languages (3.2k Java, 1.6k JS, 1.6k Obj-C, 1.1k C#, 1k documentation), as well as 482 opens issues, 621 closed.

It’s not easy bridging a video interface.

You.i Engine One SDK

At first, I thought You.i Engine One was just a rendering solution which allowed developers to reference After Affects drawings as components. I was not aware of the deeper features it possessed.

Besides helping me connect my components with elements created by designers, it also provides a set of tools to get the work done. One of these tools is a video interface in React Native. Turns out, rendering a video component to 12 different platforms wasn’t a cause for concern after all. All I have to do is write the following component in React Native.

The above renders to:

- Roku
- Fire TV
- iOS & tvOS
- Android & Android TV
- PlayStation 4
- Xbox One
- Samsung Tizen
- Desktop Platforms: Windows, MacOS, and Linux

The video component is part of You.i Engine One, no bridge is necessary to access it.

I was amazed at how easy this was. Thanks to this component, we are able to focus on building the software. No time was wasted bridging and preparing underlying components for use.

Making use of the Video interface

Still not convinced? Here’s a complete example.

By simply using the Video component, we have a video interface which renders to the screen as follow:

‍

‍

‍

Congratulations, you got 100+ hours of development work done in less than 30 minutes by using the video component provided by Engine One.

The code displayed in the example above is available in this repository.

Our journey with You.i Engine One

You.i Engine One is an amazing product to work with. The product team at You.i TV is always available to help us out and give us the support we need. We are currently building an amazing application on behalf of the You.i TV team and we are eager to share our experiences once this app hits production. Feel free to read along G2i’s blog to learn more about what we’re up to.