Skip to main content

React Native SDK installation and setup

The current npm package is react-native-meshstream 1.0.5, published on npm. It provides a shared JavaScript client/session API while the application continues to own the player.

Before you start​

  • React Native 0.72+;
  • an SDK Key created for the React Native application in the console;
  • a playable HLS .m3u8, DASH .mpd, or an MP4/MP3 URL with Range support;
  • a player such as react-native-video.

The plugin declares Android API 21 and iOS 15+ as lower bounds. The application must satisfy the highest requirement from the plugin, React Native, player, and other dependencies; the current example uses Android API 24 and iOS 15.1. The Android bridge pins io.meshstream:meshstream-android-sdk:1.0.9; the iOS bridge pins MeshStreamKit 1.0.8.

The Android dependency includes armeabi-v7a, arm64-v8a, x86, and x86_64. Devices and emulators must also meet the OS and architecture requirements of your framework and player.

Install​

See native project configuration for Android permissions and compilation requirements, and shrinking and memory for R8 and cache budgets. Retain the Java/Kotlin targets required by your React Native project.

npm install --save-exact react-native-meshstream@1.0.5
npm install react-native-video
cd ios && pod install --repo-update

In android/settings.gradle (or settings.gradle.kts), merge the following repository configuration. PREFER_SETTINGS ensures that repositories added by the React Native Gradle plugin do not override these settings:

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.PREFER_SETTINGS)
    repositories {
        google()
        mavenCentral()
        maven {
            url = uri("https://sdk.meshstream.net/maven")
            content { includeGroup("io.meshstream") }
        }
    }
}

Retain the other repositories required by your application in this same settings block, including any local repository required by an alternative JavaScript engine. Merge an existing dependencyResolutionManagement block rather than declaring it twice.

Native dependencies resolve from the published Maven/CocoaPods channels. Use the repository configuration above and the released versions.

Android local proxy network configuration​

The playback URL uses an HTTP loopback proxy even when the media origin uses HTTPS. Add android:networkSecurityConfig="@xml/meshstream_network_security_config" to <application> in android/app/src/main/AndroidManifest.xml and create android/app/src/main/res/xml/meshstream_network_security_config.xml so both Debug and Release builds use the policy:

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="false" />
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="false">127.0.0.1</domain>
        <domain includeSubdomains="false">localhost</domain>
    </domain-config>
</network-security-config>

Merge the loopback rules into any existing network policy and retain its other settings. Public HTTP media origins require their own domain rules; prefer HTTPS. For Android 6.0 (API 23), see the Android local proxy configuration.

iOS local proxy network configuration​

Merge the following settings into your application target's ios/YourApp/Info.plist to allow the player to access the local HTTP proxy:

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsLocalNetworking</key>
    <true/>
</dict>

If an ATS dictionary already exists, merge this key and retain its other restrictions. Rebuild the native application after changing network settings; reloading JavaScript does not update the Manifest or Info.plist.

Next step​

After completing the setup above, continue to Quick integration to create a session, connect your player, and release playback resources.