React Native Video is a very popular player to play videos on mobile applications built in React Native.

Step 1: Install the Gumlet Insights React Native Video package and its dependencies

npm i @gumlet/insights-react-native react-native-crypto react-native-device-info @react-native-async-storage/async-storage react-native-uuid react-native-video react-native-url-polyfill

Step 2: Import package in code

import gumletReactNativeVideo from '@gumlet/insights-react-native';

If you have not already imported React-Native-Video, import that as well.

import Video from 'react-native-video';

Step 3: Initialise gumletReactNativeVideo wrapper with react-native-video object

const GumletVideo = gumletReactNativeVideo(Video);

Step 6: Call the GumletVideo component

Create a config object which would be passed to the Gumlet Video component to track the data.

const gumletConfig = {
    property_id: 'BNVzRZKD',
    screen_name : 'ABCD',
    customData1: 'customData1',
    customData2: 'customData2',
    videoId: 'Sintel',
    userId: 'customer#1',
    screen_type:'RN',
    player_integration_version:'1.0.0',
    player_name:'react-native-video',
}

Call the component

<GumletVideo
        muted={false}
        ref={ref => (videoPlayer.current = ref)}
        source={{
          uri: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
        }}
        style={styles.mediaPlayer}
        volume={10}
        config={config}
/>

You will have to create a reference to the video player and pass i.t

const videoPlayer = React.useRef(null);

👍
Done
Once you integrate with these steps, you should start seeing data on your customised dashboard.

How to?

Add custom data

You can send first-party user data to our dashboard via the SDK. While building the configuration to initialise the SDK object, you can pass these parameters.

const gumletConfig = {
		property_id : 'PROPERTY_ID_GOES_HERE', // required:  please replace with correct property id.
		userId : '123',
	  screen_name : 'ABCD',
		userName : 'Océane Bourgeois',
		userEMail : 'oceane.bourgeois@example.com',
		userPhone  : '(840)-295-4133',
		userProfileImage : 'https://assets.gumlet.io/assets/gumlet-logo-white-font.png?w=240&format=auto',
		userAddressLine1 : '8774, Rue de la Mairie',
		userAddressLine2 : '',
		userCity : 'Reims',
		userState : 'Landes',
		userCountry : 'France',
		userZipcode : '83894',
		customContentType : 'episode',
		customVideoDurationMillis : 2600000, // 43 minutes 20 seconds
		customEncodingVariant : 'test1',
		customVideoLanguage : 'English',
		customVideoId : 'HIMYMSeason1Episode1',
		customVideoSeries : 'HIMYMSeason1',
		customVideoProducer : 'Ece Tekelioglu',
		customVideoTitle : 'Pilot',
		customVideoVariantName : '',
		customVideoVariant : '',
		customPlayerIntegrationVersion : 'v1.1',
		customPlayerName : 'Trailer',
		customPageType : 'Homepage',
		customData1 : '',
		customData2 : '',
		customData3 : '',
		customData4 : '',
		customData5 : '',
		customData6 : '',
		customData7 : '',
		customData8 : '',
		customData9 : '',
		customData10 : ''
 };