Skip to main content

Casting

Play to Chromecast and AirPlay devices through one API — getCastManager(). See the Cast manager API for the full surface.

Chromecast

Enable the plugin flag

{
"expo": {
"plugins": [["react-native-queue-player", {
"chromecast": true,
"chromecastReceiverAppId": "CC1AD845"
}]]
}
}
  • On iOS this adds the Cast pod, the Bonjour / local-network Info.plist keys, and the AppDelegate Cast init. chromecastReceiverAppId sets the iOS receiver app (defaults to Google's Default Media Receiver).
  • On Android the Cast components are merged from the library manifest automatically.

Run npx expo prebuild after changing the flag.

Bare React Native: there's no plugin — add pod 'QueuePlayer/Chromecast' to your Podfile, the Bonjour / local-network Info.plist keys (NSLocalNetworkUsageDescription, NSBonjourServices, QueuePlayerChromecastReceiverApplicationID), and call ChromecastSupport.installWithDefaults() in your AppDelegate by hand. See the bare-RN setup table.

Local-network permission

Chromecast discovery needs local-network access. Check and request it before discovering:

import { getCastManager } from 'react-native-queue-player';

const cast = getCastManager();
if (cast.getLocalNetworkPermissionState() !== 'granted') {
await cast.requestLocalNetworkPermission();
}

On newer Android versions, also request the runtime local-network permission from your app.

AirPlay

  • iOS — AirPlay is OS-managed. Present the system route picker:

    await getCastManager().showSystemPicker(); // AVRoutePickerView
  • Android — a native AirPlay sender is included and wired automatically; AirPlay receivers appear alongside Chromecast devices in discovery.

    AirPlay receivers running on Mac computers are hidden by default: macOS AirPlay Receiver only accepts Apple senders on the same Apple ID, so it can't be cast to from here and would only be a dead entry in your picker. To surface them anyway:

    await getCastManager().configure({ deviceName: 'My App', hideAirPlayComputers: false });

Discover, connect, control

const cast = getCastManager();

await cast.startDiscovery();
const receivers = cast.getReceivers(); // CastReceiver[]
await cast.connect(receivers[0].id, { password: '' });

await cast.setRouteVolume(0.6); // 0.0 – 1.0
await cast.disconnect();

Playback state — the queue, position, and play/pause — is maintained across local ↔ remote transitions.

React

import { useCast, useAudioRoute } from 'react-native-queue-player';

function CastButton() {
const { receivers, route, isDiscovering } = useCast();
const output = useAudioRoute(); // current output route (speaker, BT, AirPlay, Chromecast, …)
// render a picker from `receivers`, show `route` / `output` as the active target
}

See the Cast manager API for events, pairing, and the Cast convenience namespace.