Implementing a basic Player screen

The following is the simplest working component one can create using the Bitmovin Player React Native library:

import React, {useEffect, useCallback} from 'react';
import {View, Platform, StyleSheet} from 'react-native';
import {
  usePlayer,
  SourceType,
  PlayerView,
  AudioSession,
} from 'bitmovin-player-react-native';

export default function PlayerSample() {
  const player = usePlayer({
    // The only required parameter is the license key but it can be omitted from code upon correct
    // Info.plist/AndroidManifest.xml configuration.
    //
    // Head to `Configuring your License` for more information.
    licenseKey: '<ENTER-YOUR-LICENSE-KEY>',
  });

  useEffect(() => {
    // iOS audio session category must be set to `playback` first, otherwise playback
    // will have no audio when the device is silenced.
    //
    // Usually it's desireable to set the audio's category only once during your app's main component
    // initialization. This way you can guarantee that your app's audio category is properly
    // configured throughout the whole lifecycle of the application.
    AudioSession.setCategory('playback').catch(error => {
      // Handle any native errors that might occur while setting the audio's category.
      console.log("Failed to set app's audio category to `playback`:\n", error);
    });

    player.load({
      url:
        Platform.OS === 'ios'
          ? 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8'
          : 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
      type: Platform.OS === 'ios' ? SourceType.HLS : SourceType.DASH,
      title: 'Art of Motion',
    });
  }, [player]);

  // onReady is called when the player has downloaded initial
  // video and audio and is ready to start playback.
  const onReady = useCallback(
    event => {
      // Start playback
      player.play();
      console.log(event.timestamp);
    },
    [player],
  );

  return (
    <View style={styles.flex1}>
      <PlayerView style={styles.flex1} player={player} onReady={onReady} />
    </View>
  );
}

const styles = StyleSheet.create({
  flex1: {
    flex: 1,
  },
});

You can find a complete working example in our GitHub repository's example/ folder.

If receive an error highlighting an incorrect PackageName, please visit the bitmovin dashboard/player licence section, and ensure your app's package name is permitted. For example if your app was called "myVideoApp", the required package (default name) would be com.myVideoApp .