Monitor React native video

import app from './package.json' // this is your application's package.json
import Video from 'react-native-video'; // import Video from react-native-video like your normally would
import muxReactNativeVideo from '@mux/mux-data-react-native-video';

// wrap the `Video` component with Mux functionality
const MuxVideo = muxReactNativeVideo(Video);

// Pass the same props to `MuxVideo` that you would pass to the
// `Video` element. All of these props will be passed through to your underlying react-native-video component
// Include a new prop for `muxOptions`
<MuxVideo
  style={styles.video}
  source={{
    uri:
      'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8',
  }}
  controls
  muted
  muxOptions={{
    application_name: app.name,            // (required) the name of your application
    application_version: app.version,      // the version of your application (optional, but encouraged)
    data: {
      env_key: 'YOUR_ENVIRONMENT_KEY',     // (required)
      video_id: 'My Video Id',             // (required)
      video_title: 'My awesome video',
      player_software_version: '5.0.2',     // (optional, but encouraged) the version of react-native-video that you are using
      player_name: 'React Native Player',  // See metadata docs for available metadata fields https://docs.mux.com/docs/web-integration-guide#section-5-add-metadata
    },
  }}
/>

muxOptions={{
    application_name: app.name,            // (required) the name of your application
    application_version: app.version,      // the version of your application (optional, but encouraged)
    data: {
      env_key: 'ENV_KEY',
      // Site Metadata
      viewer_user_id: '', // ex: '12345'
      experiment_name: '', // ex: 'player_test_A'
      sub_property_id: '', // ex: 'cus-1'
      // Player Metadata
      player_name: '', // ex: 'My Main Player'
      player_version: '', // ex: '1.0.0'
      player_init_time: '', // ex: 1451606400000
      // Video Metadata
      video_id: '', // ex: 'abcd123'
      video_title: '', // ex: 'My Great Video'
      video_series: '', // ex: 'Weekly Great Videos'
      video_duration: '', // in milliseconds, ex: 120000
      video_stream_type: '', // 'live' or 'on-demand'
      video_cdn: '' // ex: 'Fastly', 'Akamai'
    },
  }}
});

MuxVideo.updateData({ video_title: 'My Updated Great Video' });

muxOptions={{
    application_name: app.name,              // (required) the name of your application
    application_version: app.version,        // the version of your application (optional, but encouraged)
    beaconCollectionDomain: 'CUSTOM_DOMAIN', // ex: 'foo.bar.com'
    data: {
      env_key: 'ENV_KEY',
      // Site Metadata
      viewer_user_id: '', // ex: '12345'
      experiment_name: '', // ex: 'player_test_A'
      sub_property_id: '', // ex: 'cus-1'
      // Player Metadata
      player_name: '', // ex: 'My Main Player'
      player_version: '', // ex: '1.0.0'
      player_init_time: '', // ex: 1451606400000
      // Video Metadata
      video_id: '', // ex: 'abcd123'
      video_title: '', // ex: 'My Great Video'
      video_series: '', // ex: 'Weekly Great Videos'
      video_duration: '', // in milliseconds, ex: 120000
      video_stream_type: '', // 'live' or 'on-demand'
      video_cdn: '' // ex: 'Fastly', 'Akamai'
    },
  }}
});