Setup · React Native Google Cast

Expo

If you're using Expo, you can configure your build using the included plugin (see below) and then continue to Usage.

The plugin provides props for extra customization. Every time you change the props or plugins, you'll need to rebuild (and prebuild) the native app. If no extra properties are added, defaults will be used.

receiverAppId (string): custom receiver app id. Default CC1AD845 (default receiver provided by Google). Sets both iosReceiverAppId and androidReceiverAppId.
expandedController (boolean): Whether to use the default expanded controller. Default true.
androidReceiverAppId (string): custom receiver app id. Default CC1AD845.
androidPlayServicesCastFrameworkVersion (string): Version for the Android Cast SDK. Default + (latest).
iosReceiverAppId (string): custom receiver app id. Default CC1AD845.
iosDisableDiscoveryAutostart (boolean): Whether the discovery of Cast devices should not start automatically at context initialization time. Default false. if set to true, you'll need to start it later by calling DiscoveryManager.startDiscovery.
iosStartDiscoveryAfterFirstTapOnCastButton (boolean): Whether cast devices discovery start only after a user taps on the Cast button for the first time. Default true. If set to false, discovery will start as soon as the SDK is initialized. Note that this will ask the user for network permissions immediately when the app is opened for the first time.
iosSuspendSessionsWhenBackgrounded (boolean): Whether sessions should be suspended when the sender application goes into the background (and resumed when it returns to the foreground). Default true. It is appropriate to set this to false in applications that are able to maintain network connections indefinitely while in the background.

{
  "expo": {
    "plugins": [
      [
        "react-native-google-cast",
        {
          "receiverAppId": "...",
          "iosStartDiscoveryAfterFirstTapOnCastButton": false
        }
      ]
    ]
  }
}

iOS

In AppDelegate.m (or AppDelegate.swift) add

import GoogleCast

#import <GoogleCast/GoogleCast.h>

and insert the following in the application:didFinishLaunchingWithOptions method:

let receiverAppID = kGCKDefaultMediaReceiverApplicationID // or "ABCD1234"
let criteria = GCKDiscoveryCriteria(applicationID: receiverAppID)
let options = GCKCastOptions(discoveryCriteria: criteria)
GCKCastContext.setSharedInstanceWith(options)

NSString *receiverAppID = kGCKDefaultMediaReceiverApplicationID; // or @"ABCD1234"
GCKDiscoveryCriteria *criteria = [[GCKDiscoveryCriteria alloc] initWithApplicationID:receiverAppID];
GCKCastOptions* options = [[GCKCastOptions alloc] initWithDiscoveryCriteria:criteria];
[GCKCastContext setSharedInstanceWithOptions:options];

If using a custom web receiver, replace kGCKDefaultMediaReceiverApplicationID with your receiver app id.

You need to add local network permissions to Info.plist:
```
<key>NSBonjourServices</key>
<array>
  <string>_googlecast._tcp</string>
  <string>_CC1AD845._googlecast._tcp</string>
</array>
<key>NSLocalNetworkUsageDescription</key>
<string>${PRODUCT_NAME} uses the local network to discover Cast-enabled devices on your WiFi network.</string>
```
If using a custom receiver, make sure to replace CC1AD845 with your custom receiver app id.

You may also customize the local network usage description (See #355).

Furthermore, a dialog asking the user for the local network permission will now be displayed immediately when the app is opened.
By default, Cast device discovery is initiated when the user taps the Cast button. If it's the first time, the local network access interstitial will appear, followed by the iOS Local Network Access permissions dialog.

You may customize this behavior in AppDelegate.m by either:
- setting disableDiscoveryAutostart to true:
```
options.disableDiscoveryAutostart = true
```
  Note: If you disable discovery autostart, you'll need to start it later by calling startDiscovery.
- or setting startDiscoveryAfterFirstTapOnCastButton to false. In this case, discovery will start as soon as the SDK is initialized.
```
options.startDiscoveryAfterFirstTapOnCastButton = false
```

Android

Add to AndroidManifest.xml (in android/app/src/main):

<application ...>
  ...
  <meta-data
    android:name="com.google.android.gms.cast.framework.OPTIONS_PROVIDER_CLASS_NAME"
    android:value="com.reactnative.googlecast.GoogleCastOptionsProvider" />
</application>

Additionally, if you're using a custom receiver, also add (replace ABCD1234 with your receiver app id):

  <meta-data
    android:name="com.reactnative.googlecast.RECEIVER_APPLICATION_ID"
    android:value="ABCD1234" />

Alternatively, you may provide your own OptionsProvider class. See GoogleCastOptionsProvider.java for inspiration.

In your MainActivity.java, initialize CastContext by overriding the onCreate method.

// ...
import android.os.Bundle;
import androidx.annotation.Nullable;
import com.google.android.gms.cast.framework.CastContext;

public class MainActivity extends ReactActivity {
  // ...

  @Override
  protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    try {
      // lazy load Google Cast context
      CastContext.getSharedInstance(this);
    } catch (Exception e) {
      // cast framework not supported
    }
  }
}

This works if you're extending ReactActivity (or NavigationActivity if you're using react-native-navigation). If you're extending a different activity, make sure it is a descendant of androidx.appcompat.app.AppCompatActivity.

The Cast framework requires Google Play Services to be available on your device. If your device doesn't have them by default, you can install them either from the Play Store, from OpenGApps or follow tutorials online.

Chrome

Not supported yet