Apple TV and React Native
We recently shared an article on how to integrate Chromecast into a React Native app; today we want to show you how to give your application the AirPlay functionality to connect your music and video streaming content to the famous Apple streaming device: the Apple TV.
As you know, the Apple TV is television’s best ally for the Apple ecosystem, providing the AirPlay service that lets you stream multimedia content from your Apple devices—including your iPhone, MacBook, iPod, iPad and iPad Mini— to your Apple TV. Quite recently, in 2019, a new generation of televisions was released whose software includes the new AirPlay version, AirPlay 2. These televisions are manufactured by companies like Samsung, LG and Sony.
React Native Libraries for Apple TV
To successfully integrate Apple TV services to your React Native app, you’ll need two libraries: one that will allow you to make the connection between the device and the Apple TV and another that will be in charge of sending the video and controlling it remotely through the app or the Apple TV remote. Let’s take a look at them.
‘react-native-airplay-btn’ library
The library in charge of the connection is the ‘react-native-airplay-btn’ library. Basically, what you’ll have to do is import the library that lets you render the AirPlay button, which the user will press and a native popup dialog will open to show the devices that are currently available to make the connection.
It is advisable to restrict the display of the button only to iOS devices as there’s not much of a point in showing it on devices running on an Android operating system as there is currently no AirPlay support for that platform.
Let’s take a look at how to install it:
$ npm install react-native-airplay-btn
or
$ yarn add react-native-airplay-btn
Linker
$ react-native link react-native-airplay-btn
Integration snippet:
‘react-native-video’ library
Once you have connected your device via AirPlay, you’ll need to be able to send the content and play it on the Apple TV. To do this, you can use the ‘react-native-video’ library, which will allow you to use and render a player for mobile phones and is also fully compatible with streaming playback to the Apple TV. The videos and/or music that are played on the Apple TV through this library will not be played on the device; this happens automatically when the library detects that the content is being played somewhere else.
Let’s take a look at how to install it:
$ npm install react-native-video
or
$ yarn add react-native-video
Linker
$ react-native link react-native-video
iOS installation
React Native 0.60 and above
Run pod install in the ios directory. Linking is not required in React Native 0.60 and above.
React Native 0.59 and below
Run react-native link react-native-video to link the react-native-video library.
Android installation
Run react-native link react-native-video to link the react-native-video library.
Full code integration snippet:
Apple TV & React Native Conclusion
With these two libraries working together, you’ll have your video/audio application fully connected to any AirPlay-compatible devices in no time. Keep in mind that, as mentioned above, TV playback can be controlled from the player <video/> that sends the content to the TV, but as AirPlay is a service that is interconnected and shared between all Apple devices on the same network, you can also control the playback from any Apple device (such as iPhone, iPad, iPod, Apple Watch, etc.) that is connected to the Apple TV at the time of playing the content, which gives you greater freedom of control. If you’d like more information about Apple TV App Development, feel free to contact us online, we’d be happy to help.
