Chromecast Integration

Add Chromecast (Google Cast) support to your React Native app when using the BB Channel SDK.

Chromecast is provided by @bluebillywig/react-native-bb-player, which wraps the native Google Cast SDK. Two components are available:

• BBCastButton — Cast icon button, typically placed in the app header. Auto-shows when a Cast device is discovered, auto-hides when none are available.
• BBCastMiniControls — Mini cast controller bar shown at the bottom of the screen during an active cast session.

Prerequisites

Install @bluebillywig/react-native-bb-player and configure the Google Cast SDK for each platform.

iOS

In your Podfile, include the GoogleCastSDK subspec. Replace any existing BlueBillywigNativePlayerKit-iOS line:

pod 'BlueBillywigNativePlayerKit-iOS', :subspecs => ['GoogleCastSDK']

Initialize the Cast context in your AppDelegate before React Native initialization:

import GoogleCast

// In application(_:didFinishLaunchingWithOptions:), before RCTAppDelegate setup:
let criteria = GCKDiscoveryCriteria(applicationID: "1F61A3A5")
let options = GCKCastOptions(discoveryCriteria: criteria)
GCKCastContext.setSharedInstanceWith(options)

Replace 1F61A3A5 with your Cast application ID if using a custom receiver. This must be called exactly once — calling it twice crashes the app.

Add the required keys to Info.plist:

<key>NSLocalNetworkUsageDescription</key>
<string>This app uses the local network to discover Cast devices.</string>

<key>NSBonjourServices</key>
<array>
  <string>_googlecast._tcp</string>
  <string>_1F61A3A5._googlecast._tcp</string>
</array>

<key>NSBluetoothAlwaysUsageDescription</key>
<string>This app uses Bluetooth for casting video to external devices.</string>
<key>NSBluetoothPeripheralUsageDescription</key>
<string>This app uses Bluetooth for casting video to external devices.</string>

warning

These entries are required. Without them, Cast device discovery causes excessive CPU usage and battery drain.

Android

The Google Cast SDK is included automatically. The BB Native Player SDK registers a default CastOptionsProvider. If you need a custom Cast application ID, create your own provider and register it in AndroidManifest.xml:

<meta-data
  android:name="com.google.android.gms.cast.framework.OPTIONS_PROVIDER_CLASS_NAME"
  android:value="com.yourapp.CastOptionsProvider" />

If you don't need a custom Cast app ID, no additional setup is needed.

Usage

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

function ChannelScreen() {
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}>
        <BBCastButton style={styles.castButton} tintColor="#ffffff" />
      </View>

      <BBChannelWithPlayer
        channelUrl="https://demo.bbvms.com/ch/123.json"
        playerMode="inline"
        style={styles.channel}
      />

      <BBCastMiniControls style={styles.miniControls} />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#000' },
  header: { flexDirection: 'row', justifyContent: 'flex-end', padding: 12 },
  castButton: { width: 36, height: 36 },
  channel: { flex: 1 },
  miniControls: { height: 64 },
});

How It Works

When the user taps BBCastButton, the Google Cast SDK presents a device picker. Once a device is selected, a cast session is established.

BBChannelWithPlayer handles cast routing automatically:

• No dialog — tapping a video routes playback to the Cast device directly
• Seamless switching — tapping a second video replaces the current content on the Cast device
• Local player suppressed — the on-device player is paused during casting
• Mini controls — BBCastMiniControls shows play/pause, title, and stop casting controls

No additional JavaScript configuration is needed.

BBCastButton

Renders the native Google Cast button (iOS: GCKUICastButton, Android: MediaRouteButton). Invisible when no device is available, auto-shows when discovered.

Prop	Type	Description
tintColor	ColorValue	Icon color
style	ViewStyle	Container size — set width and height explicitly

BBCastMiniControls

Renders the native mini cast controller (iOS: GCKUIMiniMediaControlsViewController, Android: MiniControllerFragment). The native view manages its own visibility — always keep it mounted with a fixed height.

Prop	Type	Description
style	ViewStyle	Container size — use height: 64

Tips

• Place BBCastButton in the app header so it's always accessible
• Keep BBCastMiniControls always mounted at the bottom of the screen
• The cast button is invisible when no devices are available — use fixed dimensions so your layout doesn't shift