Getting started

This guide walks you through adding PRESTOplay for React Native to your project, initializing the SDK, and playing your first stream.

Prerequisites

• React 18.3 or higher

• React Native 0.76.9 or higher

• iOS 15.1 or higher (for iOS builds)

• Android 8.0 or higher (for Android builds)

• A Castlabs license key (create one at https://downloads.castlabs.com)

Install the SDK

npm install --save @castlabs/react-native-prestoplay

Android setup

Add the Castlabs Maven repository to ./android/build.gradle:

allprojects {
  repositories {
    google()
    mavenCentral()
    maven { url 'https://mvn.players.castlabs.com/' }
  }
}

iOS setup

The SDK is distributed as a dynamic library. Static linkage is not supported.

Add the Castlabs pod source in ./ios/Podfile:

source 'https://github.com/castlabs/Specs.git'

Then run pod install from the ios/ directory.

Initialize the SDK and start playback

Call Sdk.initialize() once during your app’s startup with platform-specific license keys. Then use the PlayerProvider and PlayerView components to render the player:

import React from 'react';
import { Platform, SafeAreaView } from 'react-native';
import {
  Sdk,
  ContentType,
  PlayerProvider,
  PlayerView,
} from '@castlabs/react-native-prestoplay';

Sdk.initialize({
  licenseKey: Platform.select({
    ios: () => Platform.isTVOS ? 'my-tvos-key' : 'my-ios-key',
    android: () => 'my-android-key',
    default: () => {
      throw new Error(`Unsupported platform: ${Platform.OS}`);
    },
  })(),
});

export default function App() {
  const playerConfig = {
    autoPlay: true,
    source: {
      url: 'https://demo.cf.castlabs.com/media/prestohls/master.m3u8',
      type: ContentType.Hls,
    },
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <PlayerProvider playerConfig={playerConfig}>
        <PlayerView />
      </PlayerProvider>
    </SafeAreaView>
  );
}

Sdk.initialize() must be called once before any player components are rendered. The PlayerProvider creates and manages the underlying native player, and PlayerView renders the video surface.

Using player hooks

React hooks give you access to player state and controls from any component inside a PlayerProvider:

import { usePlayer, usePlayerState, usePosition } from '@castlabs/react-native-prestoplay';

function PlayerControls() {
  const player = usePlayer();
  const state = usePlayerState();
  const position = usePosition();

  return (
    <View>
      <Text>State: {state}, Position: {position}s</Text>
      <Button title="Pause" onPress={() => player.pause()} />
    </View>
  );
}

Next topic: Thumbnails

Previous topic: PRESTOplay for React Native