Skip to main content
Skip table of contents

Integrating the plugin for Apple and Android

Setting up a new project

Unless you have react-native installed globally, NAGRA recommends you use npx to run react-native. 

CODE
npx react-native init basicPlaybackApp [email protected]

For tvOS support use [email protected]_ , otherwise use [email protected]_ .

For generating a project with typescript templating (and compatible version of React Native) use _---template [email protected]_ 

See also https://reactnative.dev/docs/environment-setup for details of how to set up a React Native project.

Adding dependencies

To add the plug-in as a dependency to an existing project:

  1. Extract the plug-in from the opy-react-native-<version>-react-otvplayer.zip file.
  2. Add the extracted plug-in as a dependency in the project folder.

    CODE
    yarn add file:/path/to/plug-in/folder

Apple iOS/tvOS

For Apple iOS/tvOS, take the following extra steps:

  1. Open the basicPlaybackApp/ios/Podfile, change the platform :ios, '10.0' to "platform :ios, '12.0'.
  2. Add React-otvplayer into <project_folder>/ios/Podfile for both iOS and tvOS.

    RUBY
    config = use_native_modules!
    # Add react-otvplayer podspec here:
    pod 'React-otvplayer', :path => '../node_modules/@nagra/react-otvplayer/React-otvplayer.podspec' , :modular_headers => true
    use_react_native!(
    ...
  3. Run pod install:
    • cd basicPlaybackApp/ios pod install
    • Open <project_folder> /ios/<project>.xcworkspace
    • Select the build TARGET and change the Signing & Capabilities with your Team and Bundle Identifier.
  4. Build and deploy the iOS or tvOS Target and run the app on your device.

Android

For Android, include the following extra steps:

  1. Open <project_folder>/android/build.gradle, and change the'minSdkVersion' to 21.

    CODE
    buildscript {
    	ext {
    		...
    		minSdkVersion = 21
    		...
  2. Before building for Android, define your Android SDK path by:
    • Setting ANDROID_SDK_ROOT in your environment, or
    • Adding sdk.dir path in your project's local properties file at <project_folder>/android/local.properties.
  3. Build and run the Android app on your device using yarn android.

Additional Help

Missing Android SDK errors

Ensure that the local.properties file which contains Android SDK install path exists in the Android path of the React plugin.

Android manifest collided

If your application uses Android Gradle plugin version 3.6.0 or higher, it may encounter the error: "Entry name 'AndroidManifest.xml' collided" when building the application. The application can work around this issue by adding the following into the <project_folder>/android/app/build.gradle file:

CODE
packagingOptions {
	exclude 'AndroidManifest.xml'
}
JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.