Setup

Quick Start

import { useRef } from 'react';
import {
  BambuserVideoView,
  type BambuserVideoViewRef,
} from '@bambuser/react-native-commerce-sdk';

export function LiveVideoScreen() {
  const playerRef = useRef<BambuserVideoViewRef>(null);

  return (
    <BambuserVideoView
      ref={playerRef}
      style={{ flex: 1 }}
      id="your-video-id"
      server="US"
      configuration={{
        autoplay: true,
        currency: 'USD',
        locale: 'en-US',
      }}
      onStatus={(e) => console.log('state:', e.nativeEvent.state)}
      onError={(e) => console.error(e.nativeEvent.message)}
    />
  );
}

<BambuserVideoView /> Props

Prop	Type	Default	Platform	Description
id	string	required	Both	Video identifier.
server	'US' | 'EU'	'US'	Both	Organization server region.
mode	'live'	'live'	Both	Video mode.
events	string[]	['*']	Both	Custom events to subscribe to. Changing this prop creates a new player.
configuration	Record<string, any>	{}	Both	Player configuration. Changing this prop creates a new player; memoize it.
ignoredSafeAreaEdges	SafeAreaEdge[]	[]	Both	Edges to ignore when the player computes safe-area padding.
onEvent	(e) => void	n/a	Both	Player emitted a custom event. See Events.
onStatus	(e) => void	n/a	Both	Playback state changed.
onProgress	(e) => void	n/a	Both	Periodic progress updates.
onError	(e) => void	n/a	Both	An error occurred.
onPiPStateChanged	(e) => void	n/a	Both	Picture-in-Picture state changed.
onThumbnailTapped	(e) => void	n/a	iOS only	User tapped the video thumbnail (pre-play).

⚠️ Memoize configuration. Passing a new object literal on every render rebuilds the player. Use useMemo, a module-level constant, or a state-stable object. The same applies to events.

Configuration

configuration is forwarded to the underlying SDK. Common options:

configuration={{
  autoplay: true,
  currency: 'USD',
  locale: 'en-US',
  buttons: { dismiss: 'none' },
  ui: { hideShareButton: true, hideEmojiOverlay: true },
}}

For the complete list of supported keys (per-event, per-feature) consult the Bambuser Player API Reference.

Safe-area handling

By default, the player applies its own safe-area padding. To opt out for specific edges, pass ignoredSafeAreaEdges:

<BambuserVideoView
  ignoredSafeAreaEdges={['top']}
  ...
/>

type SafeAreaEdge = 'all' | 'top' | 'bottom' | 'leading' | 'trailing';

Types

import type {
  BambuserVideoViewRef,
  BambuserPlayerState,
  BambuserPiPState,
  SafeAreaEdge,
  NotifyInfo,
} from '@bambuser/react-native-commerce-sdk';

type BambuserPlayerState =
  | 'ready' | 'loading' | 'playing' | 'paused' | 'stopped'
  | 'completed' | 'error' | 'idle' | 'buffering';

type BambuserPiPState =
  | 'willStart' | 'willStop' | 'started' | 'stopped' | 'restored';

type SafeAreaEdge = 'all' | 'top' | 'bottom' | 'leading' | 'trailing';

type NotifyInfo =
  | boolean | number | string | null | undefined
  | Record<string, any> | Array<any>;

Continue to Player API for imperative ref methods, lifecycle, and Picture-in-Picture, or to Events for callback payloads.