Blog
Breaking down react-native-video 6.0.0 stable release - enhancements and comparisons

Breaking down react-native-video 6.0.0 stable release - enhancements and comparisons

Explore the latest updates with the stable release of react-native-video 6.0.0. This comprehensive overview covers key new features, platform-specific improvements, and essential bug fixes. We'll also compare react-native-video with other popular video libraries like expo-av and expo-video, highlighting what makes this release a game-changer for mobile video playback.
Tags
React Native
React Native Video
Mobile development
Software development
Published on
May 21, 2024

Introduction

Since we engaged in the development of react-native-video a few months ago, our goal has been to release a stable version 6.0.0 to facilitate the work of developers and enhance the capabilities offered by this crucial library. Our journey with react-native-video has been fueled by a commitment to improve video playback experiences in React Native applications, addressing both the evolving needs of developers and the increasing demands for media integration.

When we took on the task, we were aware of the challenges that lay ahead. react-native-video is a widely-used library that plays a pivotal role in countless applications, and we wanted to ensure that our updates not only enhanced functionality but also maintained reliability. Our efforts have been focused on listening to the community, understanding pain points, and implementing features that truly make a difference.

In this article, we will explore the key new features and enhancements in version 6.0.0, examine platform-specific improvements, highlight important bug fixes, and compare react-native-video with other popular video libraries. We hope this overview provides valuable insights into what this latest release has to offer and how it can enhance your development projects.

Key new features in react-native-video 6.0.0

Version 6.0.0 of react-native-video brings several important updates designed to make things easier and better for both users and developers. This release is the result of months of hard work, listening to community feedback, and adding new features that match the latest trends in mobile video playback. Below we include the most important ones:

TypeScript support

This release introduces TypeScript definitions out of the box, providing better type safety and improved developer experience. By incorporating TypeScript, developers can now catch errors early in the development process and enjoy enhanced code completion and documentation.

Notification controls

Another significant feature is the introduction of notification controls. This allows users to manage video playback directly through notifications, without having to interact with the app interface. This feature is particularly useful for media-centric applications, providing a more seamless user experience.

Subtitle style configuration

Developers now have the ability to customize the appearance of subtitles. This feature allows for greater flexibility in how subtitles are displayed, making it easier to match the app's design and improve accessibility.

Start position

The ability to start video playback from a specified position has been added. This feature is particularly useful for resuming videos from where a user left off, enhancing the user experience.

Full screen support

Full screen support has been integrated natively, ensuring a seamless and immersive viewing experience across devices. This addition allows videos to be viewed in full screen without requiring additional custom code.

Interop layer support

Version 6.0.0 of react-native-video is now compatible with the interop layer. This enhancement allows for better integration with native modules and APIs, facilitating smoother communication between JavaScript and platform-specific code. This compatibility improves the performance and versatility of the library, making it easier to utilize native device features across both iOS and Android platforms.

Playback functions to ref

More control over video playback has been added through reference methods, enabling developers to manage playback more precisely and programmatically.

Enhanced codec support

The isCodecSupported function has been updated to return an enum, improving how codecs are handled and validated.

Volume change event

The new onVolumeChange event allows monitoring and responding to volume adjustments in real-time.

Local file source handling

Local files are now managed through source.uri, simplifying the codebase and improving file handling efficiency.

Subtitle opacity control

This feature allows developers to control the visibility of subtitles dynamically, enhancing customization and user experience.

Enhance your video projects with react-native-video!

For enterprise support or other business inquiries related to react-native-video, please contact us. Whether you need help with integration, customization, or maintenance, our team is ready to assist you. We offer both free and commercial support for this project. Let's build an outstanding video experience together!

Platform-specific enhancements

In addition to general features, version 6.0.0 includes specific improvements for Android, iOS, and tvOS platforms, ensuring a more tailored and optimized experience for each. These enhancements address various platform-specific issues and add new capabilities to leverage the unique features of each operating system.

Android

For Android, one of the major changes is the replacement of the deprecated ExoPlayer2 with AndroidX media3. This update improves performance and compatibility with newer Android versions. The release also introduces new APIs to query device capabilities, giving developers more control and insight into the hardware they are working with.

Several new events have been added for audio tracks, text tracks, and video tracks, providing more control over media playback. A new property allows developers to control the debug log level, making it easier to troubleshoot and optimize their applications. Additionally, subtitle events have been improved, and a new caching mechanism has been implemented to enhance performance.

Support for square video formats and AGP 8 has also been added. The buffering strategy is now dynamic, allowing for smoother playback, especially in varying network conditions. Other notable updates include the ability to play back assets from the device's asset folder and enhancements to the way opacity is handled for subtitle visibility.

iOS

On iOS, the update introduces the onPlaybackStateChanged callback, which provides real-time feedback on the playback state. The onBandwidthUpdate event has been added to give insights into network conditions and streaming performance.

Support for visionOS ensures that applications can run smoothly on the latest Apple devices, and the addition of the onAudioTracks and onTextTracks callbacks provides better management of media tracks. There’s also new support for accessing WebVTT Subtitle Content, allowing for more advanced subtitle features.

The update also includes several performance improvements and bug fixes, such as resolving memory leaks and ensuring controls behave as expected when disabled by the user. The integration of Swift and support for accessing the iOS camera roll are additional enhancements that improve the overall development experience on iOS.

tvOS

For tvOS, react-native-video version 6.0.0 introduces a custom image metadata option, which allows developers to include and manage custom metadata properties more effectively. This is particularly useful for applications that require detailed media information.

The release also addresses various compile issues and ensures better compatibility with the tvOS platform. These enhancements make it easier to develop rich media applications for Apple TV, providing a more consistent and reliable user experience.

By focusing on these platform-specific enhancements, version 6.0.0 ensures that react-native-video can take full advantage of the capabilities offered by Android, iOS, and tvOS, delivering a superior media playback experience across all devices.

Bug fixes and improvements

New react-native-video release addresses numerous bugs and issues, making the library more stable and reliable across different platforms. These fixes enhance the overall performance, reduce crashes, and ensure a smoother experience for both developers and users.

General fixes

In this release, we’ve significantly improved the initial checks for URL validity, ensuring that any invalid URLs are caught early, which helps prevent crashes or playback errors. Accessibility has been enhanced with the addition of accessibility and testID properties, making the app easier to use and test.

Crashes related to the interop layer have been resolved, and the missing shutterColor type has been added, ensuring consistent behavior across various devices. We’ve also fixed the getLicense function’s type definition, removed the use of setNativeProps, and improved code generation types, all of which contribute to a more stable development experience. Additionally, poster images now work as expected, and they’ve been included in the sample app to showcase their functionality. Track availability in the sample app has been ensured, and crashes related to video track selections with specific resolutions have been fixed. We’ve also addressed issues with setting track selection indices to zero, preventing crashes during track changes.

Android fixes

For Android, playback progress is now accurately reported even when the video is paused, ensuring users and developers receive precise playback updates. We fixed an issue where the play button would not appear after pausing the video for the first time, enhancing user interaction.

The hardware back button functionality has been corrected to ensure it works properly during video playback. We also made sure the player stops when an invalid URI is configured, preventing potential crashes. A stub for IMA (Interactive Media Ads) has been added, along with an option to enable it on demand, enhancing ad support. We’ve removed kotlin-android-extensions to improve compatibility and reduce conflicts with other libraries.

Audio volume changes are now handled on the UI thread, preventing potential issues during playback. A memory leak caused by removing the lifecycle listener too early has been fixed, enhancing overall stability. We’ve also ensured the save function does not crash on Android, improving the reliability of video state saving. Subtitle visibility is now properly supported with the correct handling of opacity. Re-layout controls after exiting fullscreen mode have been fixed, ensuring smooth transitions. The disableFocus property is now checked when the state is ready, improving focus handling during playback. We’ve implemented EnableDecoderFallback to reduce decoder errors and ensured the playback rate is never set to zero, maintaining consistent video playback speeds. Track selection parameters have been updated for compatibility with the latest changes, and the screen remains on during full screen playback to prevent interruptions.

iOS fixes

On iOS, we’ve fixed an issue that prevented the disabling of sideloaded text tracks in AVPlayer, improving subtitle management. Memory leaks have been resolved, and the controls are now correctly hidden when disabled by the user. Audio and subtitle tracks are accurately reported, and a memory leak due to [weak self] and a non-weak delegate has been fixed.

We addressed a Fairplay DRM issue where different keys were required for different assets, ensuring reliable DRM playback. Video ads can now resume correctly after closing the in-app browser, and false calls at onPlaybackRateChange have been removed. The player no longer freezes when refocusing on the app, and crashes related to external text tracks and m3u8 files have been resolved.

Picture-in-Picture (PiP) mode now works correctly even when the player does not fill the screen. We’ve also ensured that URLs are properly encoded, preventing crashes when access logs return nil. Missing bridges in bridgeless mode have been addressed, and video cropping issues in repeat mode have been fixed. License URL management has been improved, and playback is stopped correctly in the background. The iOS DRM header parser has been fixed, and PiP callbacks now work correctly with native controls. PiP state is applied on start, and pause state is no longer saved before seeking. A workaround for rate changes has been implemented, and touch handling has been improved with a workaround for TouchableWithoutFeedback. Sideloading external subtitles now works reliably, duration is correctly reported for live content, and orientation issues on iOS have been resolved.

tvOS fixes

For tvOS, we addressed compile issues related to the earpiece and PiP functionality, ensuring stable builds and reliable performance. These fixes contribute to a more consistent and dependable experience for tvOS users.

By addressing these bugs and issues, the 6.0.0 release of react-native-video significantly enhances the library's stability and reliability, providing a smoother and more dependable experience across different platforms. These fixes contribute to a better development process and a more enjoyable user experience.

Comparing Video Libraries

In this section, we’ll compare react-native-video with two other popular React Native video libraries: expo-av and expo-video. Each of these libraries has its unique features and strengths, catering to different needs and use cases in mobile video playback.

react-native-video

Ads support

react-native-video stands out with its robust support for advertisements. The library includes options for integrating ads, making it a powerful choice for apps that rely on ad revenue.

DRM support

Digital Rights Management (DRM) is crucial for many commercial video applications. React Native Video provides comprehensive DRM support, including Fairplay on iOS and Widevine on Android. This ensures that video content is protected against unauthorized distribution and piracy.

Stream handling

The library excels in stream handling, supporting various streaming protocols and adaptive bitrate streaming. This ensures smooth playback across different network conditions and device capabilities.

visionOS support

With version 6.0.0, react-native-video introduces support for visionOS, Apple's new operating system for their Vision Pro headset. This makes it future-proof for developers looking to create immersive video experiences on Apple’s latest devices.

Picture-in-Picture (PiP)

Picture-in-Picture mode is fully supported on iOS, allowing users to continue watching videos while using other apps. Although PiP support for Android is still in progress, the library’s commitment to enhancing this feature is evident.

Subtitles and sideloaded subtitles

React Native Video offers extensive subtitle support, including the ability to style subtitles and sideload external subtitle files. This makes it a versatile choice for international content and accessibility features.

expo-av

Ads support

Expo-av does not support ads, which might be a limitation for apps that rely on ad-based revenue models.

DRM support 

The library also lacks built-in DRM support, making it less suitable for applications that need to protect video content from unauthorized access.

Stream handling

Expo-av provides good support for streaming video content, including adaptive bitrate streaming. This ensures smooth playback under varying network conditions.

visionOS support

visionOS support in expo-av is limited to iOS compatibility mode, which means it does not fully leverage the capabilities of Apple’s Vision Pro headset.

Picture-in-Picture (PiP)

PiP mode is not supported in the expo-av library. For PiP functionality, consider using react-native-video, which has ongoing enhancements and may offer more robust support for this feature.

Subtitles and sideloaded subtitles

While expo-av supports subtitles, it lacks support for sideloaded subtitle files. This could be a drawback for applications needing comprehensive subtitle management.

expo-video

Ads support

Similar to expo-av, expo-video does not support ads, limiting its use for ad-driven applications.

DRM support 

Expo-video does provide DRM support, making it suitable for applications that require content protection.

Stream handling

The library supports streaming and adaptive bitrate streaming, ensuring reliable playback performance.

visionOS support

Like expo-av, expo-video's visionOS support is restricted to iOS compatibility mode, which limits its use in developing cutting-edge experiences for Apple’s Vision Pro headset.

Picture-in-Picture (PiP)

PiP functionality is supported on both iOS and Android.

Subtitles and sideloaded subtitles

While expo-video handles basic subtitle support, it does not support sideloaded subtitles, limiting its flexibility in managing different subtitle formats and styles.

Conclusion

In conclusion, the release of react-native-video 6.0.0 brings substantial improvements and new features, making it a powerful choice for video playback in React Native applications. By addressing various bugs and introducing new functionalities, it stands out as a comprehensive solution compared to other libraries like expo-av and expo-video. Developers can look forward to a more stable and feature-rich experience with this latest version.

For more detailed information on the release, you can check the official release notes on GitHub.

Thank you! Your submission has been received! 📨
Oops! Something went wrong while submitting the form.
React Native
React Native Video
Mobile development
Software development

React Native Video on VisionOS

React Native
React Native Video
visionOS
Mobile
Exploring the intersection of React Native Video and VisionOS, this article offers a detailed roadmap for developers looking to harness the power of React Native for video viewing and manipulation in the VisionOS environment.
See article

How to set video as a background in React Native application

React Native Video
Video background
React Native
Explore step-by-step guidance on integrating video backgrounds into your React Native applications using the react-native-video library. This article provides practical tips and code examples to enhance your app's UI with dynamic video elements, suitable for both beginners and experienced developers in React Native.
See article

React Native Video: The ultimate video solution for React Native developers

React Native
React Native Video
Mobile development
Software development
If you are making ReactNative apps with videos, react-native-video is more than just a library for simple video playback. It’s a comprehensive toolkit that empowers you to create immersive, secure, and interactive video experiences. Check out this article to explore the advanced features supported by React Native Video.
See article

DRM and React Native Video: Ensuring content security across platforms

React Native
React Native Video
Mobile development
Software development
DRM
The article examines DRM support in React Native Video, highlighting its role in protecting video content through customizable DRM configurations and advanced licensing mechanisms. It covers essential features like custom license acquisition and header customization for enhanced security across platforms.
See article
Do you need help with developing react solutions?

Leave your contact info and we’ll be in touch with you shortly

Leave contact info
Become one of our 10+ ambassadors and earn real $$$.