Setup
Expo
If you're using Expo, follow instructions at @config-plugins/react-native-google-cast and then continue to Usage.
iOS
- In
AppDelegate.m
(orAppDelegate.swift
) add
#import <GoogleCast/GoogleCast.h>
import GoogleCast
and insert the following in the application:didFinishLaunchingWithOptions
method, ideally at the beginning (or right after Flipper initialization):
NSString *receiverAppID = kGCKDefaultMediaReceiverApplicationID; // or @"ABCD1234"
GCKDiscoveryCriteria *criteria = [[GCKDiscoveryCriteria alloc] initWithApplicationID:receiverAppID];
GCKCastOptions* options = [[GCKCastOptions alloc] initWithDiscoveryCriteria:criteria];
[GCKCastContext setSharedInstanceWithOptions:options];
let receiverAppID = kGCKDefaultMediaReceiverApplicationID // or "ABCD1234"
let criteria = GCKDiscoveryCriteria(applicationID: receiverAppID)
let options = GCKCastOptions(discoveryCriteria: criteria)
GCKCastContext.setSharedInstanceWith(options)
If using a custom receiver, replace kGCKDefaultMediaReceiverApplicationID
with your receiver app id.
For iOS 14+, 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.
(Optional iOS 14+) 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
totrue
:options.disableDiscoveryAutostart = true
Note: If you disable discovery autostart, you'll need to start it later by calling startDiscovery.
or setting
startDiscoveryAfterFirstTapOnCastButton
tofalse
(only available on Google Cast iOS SDK 4.5.3+). In this case, discovery will start as soon as the SDK is initialized.options.startDiscoveryAfterFirstTapOnCastButton = false
If using iOS 13+ and you need guest mode support, add
<key>NSBluetoothAlwaysUsageDescription</key> <string>${PRODUCT_NAME} uses Bluetooth to discover nearby Cast devices.</string> <key>NSBluetoothPeripheralUsageDescription</key> <string>${PRODUCT_NAME} uses Bluetooth to discover nearby Cast devices.</string> <key>NSMicrophoneUsageDescription</key> <string>${PRODUCT_NAME} uses microphone access to listen for ultrasonic tokens when pairing with nearby Cast devices.</string>
Also make sure you've installed guest mode in step 2 of the Installation.
The official Guest Mode documentation explains how guest mode works. Note that most use cases work fine without guest mode so you may decide you don't need it if it's not worth asking for the extra privacy permissions.
Android
Add to
AndroidManifest.xml
(inandroid/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. SeeGoogleCastOptionsProvider.java
for inspiration.In your
MainActivity.java
, initialize CastContext by overriding theonCreate
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
(orNavigationActivity
if you're using react-native-navigation). If you're extending a different activity, make sure it is a descendant ofandroidx.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