Player installation

Available in Classic and VPC

This page describes how to set up the environment for installing and running the player using the Video Player Enhancement React Native SDK in an Expo-based environment.

EXPO-based library

Runs in an Expo environment.

Expo GO not supported

Testing in Expo GO is not supported because the VPE RN SDK uses native bridges in certain areas.
Use the development build.

React Native 0.68.2 or higher required

Powered by React Native Video Library V6.x
The React Native version must be 0.68.2 or higher.

Use npm

npm install vpe-react-native

Install dependencies

npm install @sgrsoft/react-native-video react-native-svg react-native-capture-protection phosphor-react-native expo-screen-orientation expo-navigation-bar expo-localization expo-application

Configure iOS in advance

cd ios && pod install

Set up a development test key and Test AppId

Video Player Enhancement performs license checks using the AppId + AccessKey combination.
Development mode props are provided because the official AppId cannot be used in Expo GO.

<VpePlayer
   ...
   devTestAppId={'TEST DEV AppID'} //For EXPO GO. Used only in development mode
   accessKey={'VPE ACCESS KEY'} //Access key matching the AppID
   ...
/>

app.json configuration

• Add the plugins item.
• Add an option for picture-in-picture support.
• Add an option for background playback.

{
 "expo": {
   ...
   "plugins": [
       [
           "react-native-capture-protection",
           {
               "captureType": "fullMediaCapture"
           }
       ],
       [
           "@sgrsoft/react-native-video",
           {
               "enableAndroidPictureInPicture": true,
               "enableNotificationControls": true
           }
       ]
   ],
   "ios": {
     ...
     "infoPlist": {
       "UIBackgroundModes": [
           "audio",
           "fetch"
       ]
     }
     ...
   },
   "android": {
     ...
     "edgeToEdgeEnabled": true,
     "supportsPictureInPicture": true,
     "permissions": [
           "android.permission.FOREGROUND_SERVICE"
     ]
     ...
   },
 }
}