Bart Widlarz
CEO of TheWidlarzGroup
You need to get in touch ASAP?
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.
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:
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.
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.
.jpg)
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.
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 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.
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.
More control over video playback has been added through reference methods, enabling developers to manage playback more precisely and programmatically.
The isCodecSupported function has been updated to return an enum, improving how codecs are handled and validated.
The new onVolumeChange event allows monitoring and responding to volume adjustments in real-time.
Local files are now managed through source.uri, simplifying the codebase and improving file handling efficiency.
This feature allows developers to control the visibility of subtitles dynamically, enhancing customization and user experience.
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!
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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 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.
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 does not support ads, which might be a limitation for apps that rely on ad-based revenue models.
The library also lacks built-in DRM support, making it less suitable for applications that need to protect video content from unauthorized access.
Expo-av provides good support for streaming video content, including adaptive bitrate streaming. This ensures smooth playback under varying network conditions.
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.
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.
While expo-av supports subtitles, it lacks support for sideloaded subtitle files. This could be a drawback for applications needing comprehensive subtitle management.
Similar to expo-av, expo-video does not support ads, limiting its use for ad-driven applications.
Expo-video does provide DRM support, making it suitable for applications that require content protection.
The library supports streaming and adaptive bitrate streaming, ensuring reliable playback performance.
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.
PiP functionality is supported on both iOS and Android.
While expo-video handles basic subtitle support, it does not support sideloaded subtitles, limiting its flexibility in managing different subtitle formats and styles.
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.
