LiveVoice SDK for React Native

The React Native SDK for integrating the LiveVoice service into your app.

Overview

The LiveVoice SDK enables your app to browse and listen to your configured LiveVoice channels, as well as present a channel's live subtitles where available.

Using the LiveVoice SDK requires an account with SDK access enabled. Depending on your subscription, the SDK allows for hiding the LiveVoice branding or building a fully customized presentation. For more information contact [email protected]. Once SDK access has been granted, you can find your personal API key in the API key section of your account page at https://livevoice.io/en/account/api.

Features

• Browse and play the channels of a LiveVoice event
• Live subtitles where the channel provides them
• A drop-in LiveVoiceView, or a fully custom presentation with your own channel cells
• Audio output selection (speaker, receiver, headphones)
• Optional branding control and custom UI (subscription-dependent)

Requirements

• React Native 0.80 or newer
• iOS 15.1 or newer
• Android 7.0 (API level 24) or newer

Installation

npm install livevoice-sdk-react-native
# or
yarn add livevoice-sdk-react-native

On iOS, install the native pods from your app's ios/ directory:

pod install

Usage

import {
  initialize,
  joinEvent,
  leaveEvent,
  LiveVoiceView,
} from 'livevoice-sdk-react-native';

// Initialize the SDK once, early in your app's lifecycle.
initialize();

// Join an event to load its channels. Arguments: (joinCode, password, apiKey).
joinEvent('YOUR_JOIN_CODE', null /* no password */, 'YOUR_API_KEY');

// Render the drop-in UI anywhere in your component tree.
function Channels() {
  return <LiveVoiceView />;
}

// Leave the event when you no longer display any channels.
leaveEvent();

joinEvent(joinCode, password, apiKey) takes an optional listener password (pass null when the event has none). The join code and password come from the event page of the admin web interface; the API key is on your account page.

Custom channel cells

To render your own channel rows instead of the built-in ones, pass renderChannel to LiveVoiceView.

import { LiveVoiceView, PlayingState } from 'livevoice-sdk-react-native';

// Custom cells require an API key that permits
// custom UI. If you provide renderChannel but the
// joined key isn't allowed, the SDK shows the
// invalid-api-key error instead of your cells.
<LiveVoiceView
  renderChannel={(channel, { isLastInList, onAudioPress }) => (
    <MyCustomCell
      name={channel.name}
      online={channel.isOnline}
      playing={channel.playingState === PlayingState.PLAYING}
      isLast={isLastInList}
      onPlayPress={onAudioPress}
    />
  )}
/>;

Android background playback

On Android, keeping playback alive in the background requires a foreground service. It is disabled by default — enable it by passing a configuration to initialize:

import {
  initialize,
  serviceEnabledWithDefaultMessage,
  serviceEnabledWithMessage,
} from 'livevoice-sdk-react-native';

// Enable the foreground service with the SDK's default notification message.
initialize(serviceEnabledWithDefaultMessage);

// Or provide your own text; %s becomes the playing channel's name.
initialize(serviceEnabledWithMessage('Channel %s is playing'));

Examples and support

The example apps are the best place to start — each is a working integration you can run and read. Find your API key on your account page. Questions: [email protected].

License

MIT