React Native Track Player
Get V5 Access

Casting

Stream audio to external devices — AirPlay speakers and Apple TV on iOS, Chromecast on Android.

OutputDeviceButton

A cross-platform component that renders the system device picker button. On iOS it shows the AirPlay picker; on Android it shows the Chromecast picker. Returns null on other platforms.

import { OutputDeviceButton } from '@rntp/player';

<OutputDeviceButton style={{ width: 36, height: 36 }} />
PropTypeDefaultDescription
style ViewStyle—Standard React Native view style. Set width and height to control the button size.
tintColor string—(iOS only) Color of the AirPlay icon.
On Android, Cast support must be enabled in setupPlayer before the button will show any devices.

iOS — AirPlay

AirPlay works out of the box with no additional configuration. The player automatically enables external playback so audio streams to AirPlay speakers and Apple TV.

await TrackPlayer.setupPlayer({ contentType: 'music' });

Render the button anywhere in your UI:

import { OutputDeviceButton } from '@rntp/player';

function PlayerControls() {
  return <OutputDeviceButton style={{ width: 36, height: 36 }} />;
}

Android — Chromecast

Cast support is opt-in. Pass a receiver app ID to setupPlayer to enable it.

Enable Cast

import TrackPlayer, { DEFAULT_CAST_RECEIVER_APP_ID } from '@rntp/player';

await TrackPlayer.setupPlayer({
  android: {
    cast: DEFAULT_CAST_RECEIVER_APP_ID,
  },
});

DEFAULT_CAST_RECEIVER_APP_ID uses Google’s Default Media Receiver — no account or registration required. If you have a custom Cast receiver app, pass its app ID instead:

await TrackPlayer.setupPlayer({
  android: { cast: 'YOUR_APP_ID' },
});

Android manifest

Add the Cast Options Provider to your app’s AndroidManifest.xml. This is required — without it, CastContext will fail to initialize and audio will never transfer to the Chromecast even if the button appears to connect.

<meta-data
  android:name="com.google.android.gms.cast.framework.OPTIONS_PROVIDER_CLASS_NAME"
  android:value="androidx.media3.cast.DefaultCastOptionsProvider" />

Render the button

import { OutputDeviceButton } from '@rntp/player';

function PlayerControls() {
  return <OutputDeviceButton style={{ width: 36, height: 36 }} />;
}

When a Cast session starts, the player seamlessly switches from the device speaker to the Chromecast. When the session ends it switches back, preserving queue position and playback state.

Limitations

Local files (file:// URIs) cannot be cast — the Chromecast device is a separate network device and cannot access files on the phone. Tracks with local URIs are skipped by the Cast receiver. Only remote HTTP/HTTPS URLs are supported for Chromecast playback.

URLs without a file extension (e.g. bare Icecast/Shoutcast streams) must include a mimeType in the media item, otherwise the Cast receiver cannot identify the format and will skip the track silently:

TrackPlayer.setMediaItem({
  url: 'https://stream.example.com:8000/live',
  title: 'My Radio',
  isLive: true,
  mimeType: 'audio/mpeg', // required for Cast when URL has no extension
});

Platform-specific buttons

If you need to render the buttons independently:

import { AirPlayButton, CastButton } from '@rntp/player';

// iOS only
<AirPlayButton style={{ width: 36, height: 36 }} tintColor="#fff" />

// Android only
<CastButton style={{ width: 36, height: 36 }} />
ende