React Native Video on VisionOS

Introduction

In the dynamic world of mobile app development, React Native stands out as a powerful framework for creating cross-platform applications with a single codebase. Among its many capabilities, react-native-video has proven to be a versatile tool for integrating video playback seamlessly. However, to truly meet the diverse needs of developers and users alike, it’s essential to ensure compatibility with various platforms.

This brings us to the exciting development that this blog post revolves around – the addition of VisionOS support to react-native-video. VisionOS, with its unique set of features and functionalities, expands the reach of our video playback solution, making it even more accessible and powerful.

In this article, we’ll guide you through the process of integrating VisionOS support into your react-native-video component. Along the way, we’ll explore how the integration transforms the appearance of video playback on VisionOS and offer a step-by-step installation guide to ensure a smooth implementation process.

React Native on VisionOS

Support for VisionOS in React Native was introduced by Oskar Kwaśniewski towards the end of 2023. This addition enables us to build native applications for Apple’s innovative platform, opening up opportunities to leverage APIs such as RealityKit for displaying 3D objects and ARKit for augmented reality experiences. This enhancement not only marks a significant leap forward in cross-platform development but also empowers developers to harness cutting-edge features for creating immersive and engaging applications on the latest Apple ecosystem. Dive into the world of possibilities as we explore the seamless integration of VisionOS support in React Native and unlock the potential of native app development for Apple’s groundbreaking technologies

React Native Video on VisionOS

Support for VisionOS was introduced in version 6.0.0-beta.4 and older versions will not compile for VisionOS. Most of the react-native-video API functions seamlessly on VisionOS, and for a comprehensive list of functionalities, we encourage checking the documentation and pull requests.

How to install

Firstly, you need to install react-native-video:

yarn add react-native-video@beta

After installation, navigate to the visionos folder and add the following lines to your Podfile

+ pod 'PromisesSwift', :podspec => '../node_modules/react-native-video/ios/patches/PromisesSwift.podspec'
+ pod 'PromisesObjC', :podspec => '../node_modules/react-native-video/ios/patches/PromisesObjC.podspec'

⚠️ This step is temporary and will be removed in the future.

And that’s it! You are ready to go!

Demo

As evident from the images, the utilization of native APIs pays off immediately. Without adding any additional code, our video player seamlessly adopts its native appearance. Experience the synergy of React Native Video and VisionOS, where the integration not only ensures compatibility but also provides a polished, native look for your video playback.

Feel free to test the demo yourself by clicking here. If you encounter any issues during installation, ensure you have met all the prerequisites outlined in the react-native-visionos documentation.

DRM support

While React Native Video on VisionOS offers a robust and native video playback experience, it’s essential to highlight that DRM streams are currently not supported in this release. We recognize the importance of DRM in securing and protecting digital content and are committed to adding support for DRM streams in the future.

To expedite the integration of DRM support, we invite interested parties to contribute to this effort by sponsoring the development. If DRM support is crucial for your project, please reach out for sponsorship details, and together, we can enhance the capabilities of React Native Video on VisionOS.

For more details you can checkout this ticket

Need DRM support for your project? Contact us for sponsorship details and let's enhance React Native Video on VisionOS together.

Summary

Our exploration into integrating React Native Video with Apple’s VisionOS marks a significant stride in cross-platform development. This integration enhances the react-native-video library, enabling developers to create immersive video experiences within the Apple ecosystem more seamlessly. This advancement leverages VisionOS’s native capabilities, including APIs like RealityKit and ARKit, to elevate app development to new heights.

For further updates and community engagement, visit our GitHub repository.

Thank you for joining us on this journey, and here’s to the boundless potential of React Native on VisionOS! 🚀✨