Components

BBChannel

The main channel component. Use BBChannelWithPlayer (below) for the recommended integration with native video playback.

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

The recommended way to integrate channels with native video playback using the Blue Billywig native player. Requires @bluebillywig/react-native-bb-player as a peer dependency.

Provides:

• Native inline player on detail pages
• Fullscreen modal player for main page video playback
• Player reuse across page transitions (no re-creation overhead)
• Playlist auto-advance
• Chromecast support (automatic cast routing when a session is active)

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

<BBChannelWithPlayer
  channelUrl="https://demo.bbvms.com/ch/1152.json"
  playerMode="inline"
  playerAspectRatio={16 / 9}
  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'	inline: native player fixed at top, channel scrolls below. fullscreen: tapping a video opens a native modal player.
playerHeight	number	No	-	Fixed height for the inline player in pixels. Overrides playerAspectRatio.
playerAspectRatio	number	No	16/9	Aspect ratio for the inline player (e.g. 16/9, 4/3). Ignored when playerHeight is set.
showBackArrow	boolean	No	false	Show a back arrow above the player on detail pages
jwt	string	No	-	JWT for authenticated/protected content
onNativePlayerError	(error: string) => void	No	-	Called when the native player encounters an error
getNativePlayerRef	(ref) => void	No	-	Access the native player ref for direct control

See Native Player Integration for a full guide including Chromecast setup.