One React Native Video Interface. 12 Platforms.

BY ANDREI CALAZANS

/ 04/04/2019

One 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.
import { Video } from '@youi/react-native-youi' ... render() { return ( <Video ref={ref => this.videoPlayer = ref} onReady={() => { this.videoPlayer.play(); }} source={this.props.videoSource} /> ) }
JavaScript
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.
import React, { Component } from 'react'; import { Video } from '@youi/react-native-youi'; import { StyleSheet, Text, View } from 'react-native'; export class App extends React.Component { render() { return ( <View style={styles.container}> <Video style={styles.video} ref={ref => { this.videoPlayer = ref; }} onReady={() => { this.videoPlayer.play(); }} source={{ uri: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8', type: 'HLS' }} /> </View> ) } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#000' }, video: { flex: 1, }, });
JavaScript
By simply using the Video component, we have a video interface which renders to the screen as follow:
Video playback on handset (landscape)
Video playback on tablet
Video playback on OSX
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.

Content Management with Gatsby, Contentful & Netlify

Babs Craig /

02/18/2019

Gatsby, Contentful, Netlify — The Triple Threat For Content Management Success

Focus Management with React Native on TV Plaforms

Guillermo Velásquez /

03/06/2019

Helping frontend / React engineers prepare for interviews with mock interviews

How to set up a Monorepo with React Native You.I and Yarn Workspaces

Andrei Calazans /

02/06/2020

In order to simplify dependency management, code reuse, and collaboration across teams, many projects have sought out to use the Monorepo structure.