CastButton

The Cast button displays the Cast icon. It automatically changes appearance based on state (available, connecting, connected).

When clicking the button, the native Cast Dialog is presented which enables the user to connect to a Chromecast, and, when casting, to play/pause and change volume.

import { CastButton } from 'react-native-google-cast'

// ...
  render() {
    // ...
    <CastButton style={{width: 24, height: 24, tintColor: 'black'}} />
  }

The default Cast button behavior can be customized but this is not supported yet by this library.

Custom Cast Button and Cast Dialog

Instead of using the CastButton component and the default Cast dialog, you may build custom UI for choosing a device to cast to.

First, you need to retrieve a list of nearby Cast devices using DiscoveryManager or the useDevices hook. You may then use startSession to connect to a device, and endCurrentSession to stop casting.

import GoogleCast, { useDevices } from 'react-native-google-cast'

function MyComponent() {
  const castDevice = useCastDevice()
  const devices = useDevices()
  const sessionManager = GoogleCast.getSessionManager()

  return devices.map((device) => {
    const active = device.deviceId === castDevice?.deviceId

    return (
      <Button
        key={device.deviceId}
        onPress={() =>
          active
            ? sessionManager.endCurrentSession()
            : sessionManager.startSession(device.deviceId)
        }
        title={device.friendlyName}
      />
    )
  })
}