Chromecast and React Native
Chromecast is one of the most well-known and used entertainment devices today: over 36 million people in the US alone use it. It grants easy access to entertainment as just by plugging in a small device you can enjoy streaming content and games on any TV or monitor that has an HDMI port. You can use Chromecast from your smartphone, tablet, React Native App or even from your laptop or PC using the Google Chrome browser.
If you are thinking about, or already are, developing an application that focuses on streaming video and/or music content, the possibility of including support for Chromecast within your application will certainly be crucial if you want your app to grow and offer users the best possible experience.
The React Native Library
In order to include Chromecast, we recommend using react-native-google-cast, a React Native library that allows you to easily integrate and provide your app with the streaming features that Chromecast includes and that also works for both mobile platforms, Android and iOS.
The library is based on a wrapper or trimmed version of the official SDK that Google provides for the use of your device. It includes a casting button, which is only rendered and shown if a Chromecast device is available on the phone connected network. When pressed, the button displays a list of the available devices and then the connection is ready to send content to the selected device. Once connected, the icon will be shown in color to indicate this. Moreover, it also has an introductory Overlay that highlights the Cast button for new users when they are near a Chromecast device for the first time. The native framework ensures that the user is only shown this once the first time the application is opened.
To be able to take control of the streaming, the library also offers expanded media control, which consists of a full-screen panel with the necessary controls to manage the streaming, such as a play/pause button, volume control and connection with the Chromecast device, as well as letting you see the cover image, title and subtitle of the content that is currently being played.
The library also owns and supports three types of events: session events, casting events and channel events. Let’s take a look a closer look at them.
Session events
Session events are based specifically on the connection-type communication between the device and the application, such as connection established, connection failed, trying to reconnect and others.
Media events
Media events refer to reproduction-type events, where you can find and cache states such as media started, media ended and media progress updated.
Channel events
These are a specific type of events to exchange messages between the sender device—which is the one that owns the app—and a receiver device—i.e. the Chromecast device. This allows several Chromecast devices to subscribe to the same reception channel making the connection multipoint.
The library also offers the possibility of linking the playback controls to certain actions, as it provides methods such as GoogleCast.play(), GoogleCast.pause(), GoogleCast.setVolume(volume), GoogleCast.stop () and many more.
You can see the complete list and other documentation in this link.
Below, you’ll be able to see a more visual step-by-step guide of the installation and setup process for both iOS and Android.
Installation
$ npm install react-native-google-cast
or
$ yarn add react-native-google-cast
Linker
$ react-native link react-native-google-cast
Setup
-
iOS
In AppDelegate.m add:
Make sure you also enable Access WiFi Information in:
your target > capabilities.
-
Android
Make sure your device or emulator has Google Play Services installed.
Add to AndroidManifest.xml:
AndroidManifest.xml source code
In MainActivity.java, change your MainActivity to extend GoogleCastActivity:
Example React Native Code Chromecast integration
MyChromecastApp.js source code
Chromecast and React Native final thoughts
As we’ve said, if you plan to develop a React Native app meant to play any type of video or audio content, adding Chromecast will open the door to a lot more possibilities and users and is something you should definitely consider. We hope this tutorial was helpful and you can take advantage of this and many other tools the React Native community has to offer.
