Components

BBChannel

The main component that renders a BB Channel inside a WebView.

import { BBChannel, BBChannelRef } from '@bluebillywig/react-native-channel';

const ref = useRef<BBChannelRef>(null);

<BBChannel
  ref={ref}
  channelUrl="https://demo.bbvms.com/ch/1152.json"
  options={{ autoPlay: true }}
  onReady={() => console.log('Channel loaded')}
  onMediaPlay={(media) => console.log('Playing:', media.title)}
  onNavigate={(event) => console.log('Page:', event.pageType)}
/>

Props

Prop	Type	Required	Default	Description
channelUrl	string	Yes	-	URL to the channel JSON configuration
options	BBChannelOptions	No	-	Configuration options
style	ViewStyle	No	-	Container view styles
initialNavigationState	BBNavigationState	No	-	Initial navigation state for deep linking
handleBackButton	boolean	No	false	Handle Android hardware back button
bundleUrl	string	No	-	Custom JS bundle URL (overrides CDN)
safeAreaEdges	SafeAreaEdge[]	No	['top']	Safe area edges to respect
safeAreaInsets	SafeAreaInsets	No	-	Custom safe area inset values

Lifecycle callbacks

Prop	Type	Description
onReady	() => void	Channel finished loading
onError	(error: BBErrorEvent) => void	An error occurred

Navigation callbacks

Prop	Type	Description
onNavigate	(event: BBNavigationEvent) => void	User navigated to a page
onNavigationStateChange	(state: BBNavigationState) => void	Navigation state changed
onCanGoBackChange	(canGoBack: boolean) => void	Back navigation availability changed

Media callbacks

Prop	Type	Description
onMediaPlay	(media: BBMediaInfo) => void	A video started playing
onMediaPause	(media: BBMediaInfo) => void	A video was paused
onMediaEnd	(media: BBMediaInfo) => void	A video finished playing
onFirstPlayerMedia	(media: BBMediaInfo) => void	First auto-playing video loaded

Player callbacks

Prop	Type	Description
onPlayerStateChange	(state: BBPlayerState) => void	Player state changed
onPlayerEvent	(event: any) => void	Raw player event
onTimeUpdate	(event: any) => void	Playback time updated
onClipLoaded	(event: any) => void	A clip was loaded in the player
onAdStart	(event: any) => void	An ad started playing
onAdEnd	(event: any) => void	An ad finished playing

Multi-player callbacks

Prop	Type	Description
onPlayersChange	(players: any) => void	Registered players changed
onActivePlayerChange	(player: any) => void	Active player changed

Other callbacks

Prop	Type	Description
onSearch	(event: BBSearchEvent) => void	User performed a search
onExternalLink	(url: string) => void	External link clicked. If not provided, external links are silently blocked
onAnalyticsEvent	(event: any) => void	Analytics event fired

BBChannelOptions

interface BBChannelOptions {
  autoPlay?: boolean;
  playout?: string;
  searchBar?: boolean;
  noStats?: boolean;
  jwt?: string;
  rpcToken?: string;
  contentId?: string;
  contentType?: string;
}

Option	Type	Description
autoPlay	boolean	Auto-play the first video
playout	string	Override the playout ID
searchBar	boolean	Show the search bar
noStats	boolean	Disable analytics/statistics
jwt	string	JWT for authenticated content
rpcToken	string	RPC token for API access
contentId	string	Initial content ID to display
contentType	string	Initial content type

---

BBFullscreenPlayer

A fullscreen video player overlay. Use this to play a video in a modal fullscreen player triggered from your own UI.

import { BBFullscreenPlayer } from '@bluebillywig/react-native-channel';

<BBFullscreenPlayer
  media={selectedMedia}
  visible={isPlayerVisible}
  onClose={() => setIsPlayerVisible(false)}
/>

Props

Prop	Type	Required	Default	Description
media	BBMediaInfo | null	Yes	-	Media to play
visible	boolean	Yes	-	Whether the player is visible
onClose	() => void	Yes	-	Called when the player should close
onError	(error: BBErrorEvent) => void	No	-	Error callback
fullscreenMode	'fullscreen' | 'landscape'	No	'fullscreen'	Fullscreen presentation mode

---

BBInlinePlayer

An inline video player component for embedding a player within your layout.

import { BBInlinePlayer } from '@bluebillywig/react-native-channel';

<BBInlinePlayer
  media={media}
  style={{ height: 220 }}
  autoPlay={true}
/>

Props

Prop	Type	Required	Default	Description
media	BBMediaInfo	Yes	-	Media to play
style	ViewStyle	No	-	Container view styles
autoPlay	boolean	No	false	Auto-play on mount
onError	(error: BBErrorEvent) => void	No	-	Error callback

---

BBChannelWithPlayer

Extended channel component that integrates a native player for video playback instead of the WebView-based player. Supports all BBChannel props plus player-specific configuration.

import { BBChannelWithPlayer } from '@bluebillywig/react-native-channel';

<BBChannelWithPlayer
  channelUrl="https://demo.bbvms.com/ch/1152.json"
  playerMode="inline"
  playerHeight={240}
  showBackArrow={true}
  onMediaPlay={(media) => console.log('Playing:', media.title)}
/>

Props

Inherits all BBChannel props plus:

Prop	Type	Required	Default	Description
playerMode	'inline' | 'fullscreen'	No	'inline'	How videos are played — inline above the channel or in a fullscreen overlay
playerHeight	number	No	-	Height of the inline player (only applies when playerMode is 'inline')
showBackArrow	boolean	No	false	Show a back arrow in the player area