Native Player Integration

The BB Channel React Native SDK uses @bluebillywig/react-native-bb-player for native video playback. This provides smooth, hardware-accelerated playback with full Chromecast support.

BBChannelWithPlayer

BBChannelWithPlayer is the recommended way to integrate channels with native video. It provides:

• Native inline player on detail pages
• Fullscreen modal player for main page video playback
• Back arrow navigation header
• 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';

function ChannelScreen() {
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: '#000' }}>
      <BBChannelWithPlayer
        channelUrl="https://yourdomain.bbvms.com/ch/123.json"
        playerMode="inline"
        playerAspectRatio={16 / 9}
        showBackArrow={true}
      />
    </SafeAreaView>
  );
}

Installation

Install both the channel SDK and the player SDK:

npm install @bluebillywig/react-native-channel @bluebillywig/react-native-bb-player

iOS

cd ios && pod install

Android

No additional steps needed — Gradle auto-links the native modules.

Player Modes

Inline Mode (Default)

The native player is fixed at the top of the screen. When the user navigates to a detail page, the player loads the selected video inline. The channel content scrolls below the player.

<BBChannelWithPlayer
  channelUrl="https://yourdomain.bbvms.com/ch/123.json"
  playerMode="inline"
  playerAspectRatio={16 / 9}
/>

The first Player block in the channel layout is replaced by the native player.

Fullscreen Mode

Tapping a video opens a native fullscreen modal player. The channel UI remains underneath.

<BBChannelWithPlayer
  channelUrl="https://yourdomain.bbvms.com/ch/123.json"
  playerMode="fullscreen"
/>

Configuration

BBChannelWithPlayer inherits all BBChannel props plus:

Prop	Type	Default	Description
playerMode	'inline' | 'fullscreen'	'inline'	How videos are played
playerHeight	number	-	Fixed height for the inline player (overrides aspect ratio)
playerAspectRatio	number	16/9	Aspect ratio for the inline player
showBackArrow	boolean	false	Show a back arrow above the player on detail pages
jwt	string	-	JWT for authenticated/protected content
onNativePlayerError	(error: string) => void	-	Called when the native player encounters an error
getNativePlayerRef	(ref) => void	-	Access the native player ref for direct control

Chromecast

When combined with BBCastButton from @bluebillywig/react-native-bb-player, Chromecast works automatically:

1. The user taps the cast button and selects a device
2. A cast session is established
3. Tapping any video routes playback to the Cast device — no dialog is shown
4. Tapping another video seamlessly switches content on the Cast device
5. The local player is suppressed while casting

import { BBChannelWithPlayer } from '@bluebillywig/react-native-channel';
import { BBCastButton, BBCastMiniControls } from '@bluebillywig/react-native-bb-player';

function ChannelScreen() {
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: '#000' }}>
      <View style={{ flexDirection: 'row', justifyContent: 'flex-end', padding: 12 }}>
        <BBCastButton style={{ width: 36, height: 36 }} tintColor="#fff" />
      </View>

      <BBChannelWithPlayer
        channelUrl="https://yourdomain.bbvms.com/ch/123.json"
        playerMode="inline"
        playerAspectRatio={16 / 9}
        style={{ flex: 1 }}
      />

      <BBCastMiniControls style={{ height: 64 }} />
    </SafeAreaView>
  );
}

See Chromecast guide for platform-specific setup (iOS Info.plist, Android manifest).

Custom Player Handling (Advanced)

For full control over the player lifecycle, use BBChannel directly and handle onMediaPlay events yourself with BBFullscreenPlayer or BBInlinePlayer:

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

function ChannelScreen() {
  const [media, setMedia] = useState(null);

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <BBChannel
        channelUrl="https://yourdomain.bbvms.com/ch/123.json"
        onMediaRequest={(mediaInfo) => setMedia(mediaInfo)}
      />
      <BBFullscreenPlayer
        media={media}
        visible={media !== null}
        onClose={() => setMedia(null)}
      />
    </SafeAreaView>
  );
}

Example App

A full working example is available at github.com/bluebillywig/channel-examples/react-native.