> For the complete documentation index, see [llms.txt](https://docs.mediamelon.com/mediamelon/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.mediamelon.com/mediamelon/smartsight-player-sdk-integration/react-native/mediamelon-react-native-video-sdk-integration-document.md).

# MediaMelon React Native Video SDK Integration Document

**Step 1:** [Install MediaMelon React Native SDK](#step-1-install-mediamelon-react-native-sdk)

**Step 2:** [Import SDK Package](#step-2-import-sdk-package)

**Step 3:** [Register and Initialise SDK](#step-3-initialize-session-and-report-user-intent-to-playback)

**Step 4:** [Custom Adapter](#step-4-custom-adapter)

[Release Notes](#release-notes)

### Step 1: Install MediaMelon React Native SDK 

`$REACT_NATIVE_PROJECT = {ReactNativeVideo - v6.19.0}`

The SDK files should be added to the build environment

**Using NPM:**

1. Use this command in your terminal:-

```gradle
npm i mediamelon-js-react-native-sdk@1.5.0
```

**Using JS file:** 

* Copy `mmsmartstreaming_reactnative.min.js` provided in the release package to the React native project. Example  `$REACT_NATIVE_PROJECT/mmsmartstreaming_reactnative.min.js`

### Step 2: Import SDK Package

`$REACT_NATIVE_PROJECT/App.js`

**Using NPM:**

```javascript
import {MMReactNativeVideoSDK, MMCustomAdapter, MMPlayerState} from 'mediamelon-js-react-native-sdk';
```

**Using JS File:** 

```javascript
import {MMReactNativeVideoSDK, MMCustomAdapter, MMPlayerState} from './mmsmartstreaming_reactnative.min.js';
```

### Step 3: Register and Initialise SDK <a href="#step-3-initialize-session-and-report-user-intent-to-playback" id="step-3-initialize-session-and-report-user-intent-to-playback"></a>

{% hint style="info" %}
CUSTOMER\_ID is your MediaMelon assigned Customer ID. If you do not know your Customer ID, contact MediaMelon at <customer-support@mediamelon.com>.
{% endhint %}

Wrap your `Video` component with the `MMReactNativeVideoSDK`.

```javascript
const MMPlayer = MMReactNativeVideoSDK(Video);

<MMPlayer
    source={{ uri: 'STREAM_URL' }}
    ...
    mmOptions={{
      register: {
        customerId: 'CUSTOMER_ID',      
        subscriberId: 'SUBSCRIBER_ID',   
        subscriberType: 'SUBSCRIBER_TYPE',
        subscriberTag:'SUBSCRIBER_TAG',  
        hashSubscriberId: false,
        playerName: 'PLAYER_NAME',
        playerBrand:"PLAYER_BRAND",
        playerModel:"PLAYER_MODEL",
        playerVersion:'PLAYER_VERSION',
        basePlayerName: "BASE_PLAYER_NAME",
        basePlayerVersion: "BASE_PLAYER_VERSION",
        domainName: 'DOMAIN_NAME',
        applicationName: 'APP_NAME',            
        applicationVersion: 'APP_VERSION',      
        deviceMarketingName:'DEVICE_MARKETING_NAME'
      },
      contentMetadata: {
        assetName:'ASSET_NAME',
        assetId:"ASSET_ID",
        videoId:"VIDEO_ID",
        contentType:'CONTENT_TYPE',
        genre:'GENRE',
        drmProtection:'DRM_PROTECTION',
        episodeNumber:'EPISODE_NUMBER',
        season:'SEASON',
        seriesTitle:'SERIES_TITLE',                  
        isLive: false,
      },
      streamInfo:{
        mediaType: 'MEDIA_TYPE',
        streamFormat: 'STREAM_FORMAT',
        sourceType: 'SOURCE_TYPE'
      },
      customTags:{
        "KEY1": "VALUE_STRING1",
        "KEY2": "VALUE_STRING2"
      },
      experimentName: "EXPERIMENT_NAME",
      subPropertyId: "SUB_PROPERTY_ID",
      viewSessionId: "VIEW_SESSION_ID",
      appSessionId: "APP_SESSION_ID",
      deviceId: "DEVICE_ID",
      cdn: "CDN",
      encodingService: "ENCODING_SERVICE",
      enableLogTrace: false
    }}
/>
```

{% hint style="info" %}

* `isLive`: Set to `true` for live video stream and to `false` for the VOD stream.
* `hashSubscriberId`: Set it to `true` to hash the subscriber ID, and to `false` to process the subscriber ID without hashing.
  {% endhint %}

### Step 4: Custom Adapter

#### Step 4.1: Report Player State

Use the Custom Adapter to report player state changes during video playback.

The adapter exposes the method reportPlayerState(state) and accepts an enum value from MMPlayerState.

**Player State Mapping**

* PLAYING → Reported when playback starts or resumes.
* PAUSED → Reported when playback is paused.
* STOPPED → Reported when playback ends or the user exits playback.

```javascript
const mmAdapter = MMCustomAdapter();

mmAdapter.reportPlayerState(MMPlayerState.PLAYING);

Enum: MMPlayerState
- PLAYING
- PAUSED
- STOPPED
```

#### Step 4.2: Report Custom Metadata

Use this method to report any additional metadata that doesn’t fall under predefined fields. This allows flexibility to send custom business-specific or platform-specific information to the SDK. This is the same as `customTags` in the `contentMetadata` object.

```javascript
mmAdapter.reportCustomMetadata("KEY", "VALUE");
```

#### Step 4.3: Update Asset Info

If Asset Information needs to be updated dynamically during the live session without re-initiating the player, then the `updateAssetInfo` API can be used to update the new AssetInfo

{% hint style="info" %}
**Note**

* This API must be called for updating asset info for the live streams only&#x20;
* This API must be called after the Player has started the playback of the live stream&#x20;
* New Asset Info Object will override the previous values. Hence, set all the fields that are required every time calling this API, including all **Custom Tags.**
  {% endhint %}

```javascript
// Create a new assetInfo object with the values need to be updated
var newAssetInfo =  { 
     "assetName": "ASSET_NAME",
     "assetId": "ASSET_ID",
     "videoId": "VIDEO_ID",
     "contentType": "CONTENT_TYPE",
     "drmProtection": "DRM_PROTECTION",
     "episodeNumber": "EPISODE_NUMBER",
     "season": "SEASON",
     "seriesTitle": "SERIES_TITLE",
     "customTags":{
         "key1": "VALUE1",
         "key2": "VALUE2"
     }          
}

// Update the new assetInfo
mmAdapter.updateAssetInfo(newAssetInfo);
```

### Release Notes:

<details>

<summary>Current Release</summary>

#### v1.5.0  <sup><sub>**`May 07, 2026`**<sub></sup>

* Added support for React Native Video Player `v6.19.0`
* Introduced tracking for `buffering` and `seek` events
* Enhanced `rendition` tracking with `bitrate` and `codec` data
* Added `Seek duration` metric
* Introduced new metadata fields: `App Session ID` and `Encoding Service`
* Added `CDN_CHANGE` event support

</details>