In this section we start from an empty React Native template, include a dependency to react-native-theoplayer
,
and deploy it on an Android or iOS device.
There is no React Native UI included in this app, as this is covered in the accompanying example application.
- Setting up a new project
- Getting started on Android
- Getting started on iOS
- Getting started on Web
- Building and running the app
- Final notes
First initialize a new project with a React Native app template:
$ npx react-native init rntheodemo --template=react-native-template-typescript
$ cd rntheodemo
Alternatively use a template that also provides support for tvOS, as it will create a dependency to
react-native-tvos
, a fork of the main React Native branch:
$ npx react-native init rntheodemo [email protected]
$ cd rntheodemo
Next, include the dependency to react-native-theoplayer
.
$ npm i
$ npm i react-native-theoplayer
or optionally specifying a specific version of the package:
$ npm i react-native-theoplayer@<version>
Note: depending on your node version, an extra --legacy-peer-deps
option has to be added:
$ npm i
$ npm i react-native-theoplayer --legacy-peer-deps
Finally, replace the App.tsx
with this minimal code:
import React from 'react';
import { Platform, View } from 'react-native';
import { PlayerConfiguration, THEOplayerView } from 'react-native-theoplayer';
const playerConfig: PlayerConfiguration = {
license: undefined, // insert THEOplayer React Native license here
};
const source = {
sources: [
{
src: 'https://contentserver.prudentgiraffe.com/videos/dash/webvtt-embedded-in-isobmff/Manifest.mpd',
type: 'application/dash+xml',
},
],
};
const App = () => {
return (
<View style={{position: 'absolute', top: 0, left: 0, bottom: 0, right: 0}}>
<THEOplayerView config={playerConfig} source={source} paused={false}/>
</View>
);
};
export default App;
A license for the React Native SDK needs to be obtained through the 'Licenses' built in the THEOplayer portal or request a free trial license.
After completing the initial project setup, which is shared for all platforms,
this packaging option needs to be added to Android's Gradle config ./android/app/build.gradle
.
android {
// ...
packagingOptions {
exclude 'META-INF/kotlin-stdlib.kotlin_module'
}
}
The following Gradle buildConfig fields can be used in your Gradle file to override or set various react-native-theoplayer options:
buildscript {
ext {
// ...
// Override compileSdkVersion
THEOplayer_compileSdkVersion = 31
// Override minSdkVersion
THEOplayer_minSdkVersion = 21
// Override targetSdkVersion
THEOplayer_targetSdkVersion = 31
// Specify a specfic SDK version (default: the lastest available version).
THEOplayer_sdk = "3.5.0"
// Optionally limit timeUpdate rate, which could improve performance. Possible values:
// - "com.theoplayer.TimeUpdateRate.UNLIMITED"
// - "com.theoplayer.TimeUpdateRate.LIMITED_ONE_HZ"
// - "com.theoplayer.TimeUpdateRate.LIMITED_TWO_HZ"
// - "com.theoplayer.TimeUpdateRate.LIMITED_THREE_HZ"
THEOplayer_timeUpdateRate = "com.theoplayer.TimeUpdateRate.LIMITED_ONE_HZ"
// Toggle player event logging
THEOplayer_logPlayerEvents = "false"
// Toggle playerView event logging
THEOplayer_logViewEvents = "false"
}
}
For optimal performance, make sure to build your app in release mode, and optionally limit the number of timeupdate
events send by the player as shown in the config above. A timeupdate
event typically triggers a number of
React Native component updates and could affect performance in negative way.
After completing the initial project setup, which is shared for all platforms, for iOS/tvOS set the source to the following HLS stream:
const source = {
sources: [
{
src: 'https://cdn.theoplayer.com/video/elephants-dream/playlist.m3u8',
type: 'application/x-mpegurl',
},
],
};
You need an additional change for tvOS, since the tvOS SDK needs to be prepared before it can be used in a RN context. First, include TheoplayerSDK into your project's AppDelegate:
#if TARGET_OS_TV
#import <THEOplayerSDK/THEOplayerSDK-Swift.h>
#endif
Next, prepare the THEOplayer right after the creation of the rootViewController in your AppDelegate's didFinishLaunchingWithOptions:
#if TARGET_OS_TV
[THEOplayer prepareWithFirstViewController: [UIViewController new]];
#endif
Some RN templates miss a specific Swift version setting for tvOS. To fix this add a custom build setting to your tvOS app target:
SWIFT_VERSION 5.0
Run pod install in your app's ios folder
pod install
Make sure to first complete the initial project setup, which is shared for all platforms. Deploying a web app requires a little more work. The example uses react-native-web to support web-based platforms, which translates React Native components to React DOM components. In addition, the project relies on webpack to create the bundle that is loaded in the hosting web page.
We refer to the example application and its code for a full demonstration.
When passing the PlayerConfiguration
object while creating the player, the
libraryConfiguration
parameter specifies
where the THEOplayer web worker files are located. The worker files are dynamically loaded and
necessary to play-out MPEG-TS based HLS streams. By default it is set to the location where npm installed THEOplayer
('./node_modules/theoplayer').
Finally build and deploy the app. Make sure an emulator is available, or there is a physical device connected to deploy to.
$ npm run android
$ npm run ios
$ npm run web
On some platforms issues with React Native Flipper, a platform for debugging apps, can occur, either during building or running the app. If so, it is advised to just remove it for this demo app.