Adding Videos to React Native with react-native-video

Introduction to react-native-video

Video playback has become an essential feature in modern mobile applications. Whether you're building a social media app, an educational platform, an entertainment streaming service, or an e-commerce application, the ability to seamlessly integrate video content directly impacts user engagement and application success.

The react-native-video library represents the cornerstone of video playback implementation in React Native applications. As the most widely adopted and thoroughly tested open-source video player component for React Native, this library provides a unified, easy-to-use API for integrating video playback across both iOS and Android platforms.

Key Features of react-native-video

• DRM support for protected content
• Offline playback capabilities
• HLS and DASH streaming protocol support
• Full customization options for appearance and behavior
• Native performance with React Native development experience

What sets react-native-video apart is its commitment to native performance while maintaining the React Native development experience. The library leverages native video rendering capabilities on each platform, ensuring smooth playback, proper hardware acceleration, and correct handling of media codecs. This approach means you get smooth playback without sacrificing the declarative component model that makes React Native development productive. The library's active maintenance and large community mean that solutions are typically available when issues arise, and the library continues to evolve alongside React Native itself.

For developers choosing between library options, react-native-video offers several compelling advantages. Its maturity means comprehensive documentation, numerous tutorials, and a wealth of resources addressing common scenarios. The library's modular architecture allows you to include only the features you need, keeping your application bundle size manageable. Whether you're building a simple video preview feature or a full-fledged streaming platform, react-native-video provides the foundation upon which you can build. As part of our comprehensive web development services, we help clients implement video features that enhance user engagement and application functionality.

Installation and Setup

Getting started with react-native-video begins with a straightforward installation process, though the specific steps vary depending on your project setup.

Basic Installation

For standard React Native projects, install the library using your preferred package manager:

npm install react-native-video
# or
yarn add react-native-video

This core package provides the fundamental video playback functionality, while additional packages can be added later for specific features like advertising support or advanced controls. The library uses React Native's autolinking system to automatically link native dependencies in most cases.

Expo Project Setup

Expo projects require slightly different handling due to the framework's managed workflow approach. While the library can be used in Expo Go for development, the full native capabilities require building a development build that includes the library's native dependencies.

For managed Expo projects, you have two primary paths:

Using Expo's config plugins to automatically link native dependencies, or ejecting to a bare workflow where you have full control over the native project structure. The config plugin approach is preferred for most cases, as it maintains the benefits of the Expo managed workflow while still allowing native module usage.

To create a development build:

# Create development build for iOS
npx expo run:ios

# Create development build for Android
npx expo run:android

These commands generate a development build that includes all native dependencies, which is necessary because Expo Go does not have react-native-video built in. The resulting builds can be installed on devices or simulators and used for testing throughout your development cycle per The Widlarz Group's Expo integration guide.

Platform-Specific Configuration

On iOS, you may need to add NSAppTransportSecurity keys to your Info.plist if loading videos from HTTP sources. Android requires no special configuration for basic usage, though you might need to update your app's build.gradle if targeting older API levels.

Core Props and Configuration

Essential Props

At its simplest, a video component needs a source from which to load content and styling to define its dimensions. The source prop accepts either a URI string for remote videos or a require statement for local video files bundled with your application.

Resize Mode Options

The resizeMode prop controls how the video content fits within the defined dimensions:

• contain: Fit within bounds while maintaining aspect ratio - ideal for video previews and thumbnails
• cover: Fill bounds while maintaining aspect ratio (may crop) - best for fullscreen and background videos
• stretch: Fill bounds without maintaining aspect ratio - use sparingly as it distorts video

Understanding the Controls Prop

The controls prop enables the native playback controls provided by each platform. These controls include play/pause functionality, a timeline scrubber for seeking, volume control, a fullscreen toggle button, and playback rate options on supported platforms. For many use cases, enabling controls provides a complete, accessible playback experience without requiring additional development effort as documented by MageComp.

The native controls also handle orientation changes automatically, providing a seamless experience when users rotate their devices during playback. When you need more control over appearance and behavior, you can build custom controls using the library's programmatic APIs while still leveraging the underlying video rendering capabilities.

Callback Props for Interactive Experiences

Callback props transform your video player from a passive display component into an interactive element integrated with your application's logic.

Available Callbacks

• onEnd: Triggered when video playback completes - useful for tracking completion metrics, advancing to the next content item, or showing related videos
• onError: Fires when playback fails - enables graceful error handling with fallback content, retry logic, or user-friendly error messages
• onLoad: Called when video metadata is loaded - provides duration and video dimensions for progress indicators
• onProgress: Called periodically during playback - useful for tracking watch time or implementing custom progress bars

Building Interactive Video Experiences

These callbacks, combined with React state management, enable sophisticated playback scenarios such as:

• Pausing all videos when one enters fullscreen
• Synchronizing multiple video players
• Implementing watch-time tracking and analytics
• Auto-advancing to the next video in a playlist
• Showing completion celebrations or related content

The paused prop provides programmatic control over playback state, enabling features like autoplay on scroll, play/pause buttons in custom UI, or automatic playback when content comes into view. Combined with state management in your React components, you can implement sophisticated playback scenarios that respond to user interactions and application events as demonstrated by The Widlarz Group.

The repeat prop enables looping playback, which is essential for video backgrounds, product showcases, and continuous content displays. When set to true, the video automatically restarts from the beginning immediately upon completion, creating a seamless loop without any visible gap or pause.

Performance Optimization

Optimizing video playback performance requires attention to several key areas to ensure smooth playback and efficient resource utilization.

Video Source Optimization

• Encode videos with efficient codecs like H.264 for broad compatibility across iOS and Android devices
• Use appropriate bitrates for target devices and network conditions - higher quality for WiFi, reduced for cellular
• Host videos on content delivery networks (CDN) for reduced latency and improved start times
• Implement HLS or DASH for adaptive streaming that adjusts quality based on available bandwidth

Memory Management

Memory management becomes critical when dealing with multiple video players or long playback sessions. Each Video component allocates native video decoding resources that may not be automatically released when components unmount.

• Properly unmount video components when they're no longer visible
• Implement player management systems for scrollable lists to limit concurrent players
• Consider limiting active video players to one at a time in feeds and lists
• Use the onEnd callback to clean up resources when playback completes

Preloading and Caching Strategies

Preloading strategies can significantly improve the perceived performance of video features:

• Preload videos at the top of feeds or lists to eliminate initial buffering
• Load content users have expressed interest in based on their behavior
• Preload preview content for video-enabled features
• Balance preloading benefits against memory consumption for different device capabilities

Background Video Considerations

For atmospheric video backgrounds, use resizeMode="cover" to fill the space, disable user interaction with pointerEvents="none", and pause when the app moves to background. Consider using reduced quality for background use to conserve resources while maintaining visual appeal.

Common Implementation Patterns

Videos in Lists and Feeds

Implementing video in lists and feeds presents unique challenges that many applications must address. When displaying multiple videos, typically only one should actively play at a time, with others either paused or completely unloaded.

const [activeVideoIndex, setActiveVideoIndex] = useState(0);

// Render videos paused by default, enable only active one
{videos.map((video, index) => (
 <Video
 key={video.id}
 source={{ uri: video.url }}
 paused={activeVideoIndex !== index}
 onPress={() => setActiveVideoIndex(index)}
 />
))}

This approach both improves performance by limiting resource consumption and provides a better user experience by preventing audio conflicts. The common implementation pattern involves tracking the currently active video index in your list's state.

Fullscreen Video Playback

Implementing custom fullscreen behavior requires coordinating between your inline player and the fullscreen experience:

1. Track fullscreen state in your component
2. Render fullscreen overlay when activated
3. Handle back button/gesture to exit fullscreen
4. Maintain application state during fullscreen session

When users tap the fullscreen button, you can either allow the native fullscreen transition or implement custom behavior by detecting the orientation change and rendering a fullscreen video overlay.

Picture-in-Picture Mode

Picture-in-picture (PiP) allows users to continue watching video while using other apps. This feature requires additional configuration on iOS through your app's configuration files. The library documentation provides specific steps for enabling PiP support, including required background modes and audio session configuration.

DRM and Protected Content

For applications streaming premium or copyrighted content, react-native-video supports DRM (Digital Rights Management) for protected content. This requires additional setup and may involve integration with platform-specific DRM systems like FairPlay (iOS) or Widevine (Android). Plan for DRM integration early if your content strategy includes protected videos.

Conclusion

Implementing video playback in React Native using react-native-video provides a robust foundation for adding multimedia content to your mobile applications. The library's maturity, comprehensive feature set, and active maintenance make it the recommended choice for production applications requiring video playback capabilities.

From simple embedded videos to complex streaming applications, the patterns and practices outlined in this guide provide a foundation for implementing video features that perform well, provide good user experiences, and integrate smoothly with your application's overall architecture. The library's battle-tested nature means it has been refined through countless production deployments, addressing edge cases and platform-specific nuances that newer alternatives may not yet have encountered.

Key Takeaways:

• react-native-video is the most widely adopted video library for React Native with active maintenance
• Installation varies between bare React Native and Expo projects - plan accordingly
• Core props provide essential playback control while callbacks enable interactive experiences
• Performance optimization requires attention to memory management and source quality
• Test your implementation across multiple devices, network conditions, and usage scenarios

For developers building React Native applications, mastering video implementation opens possibilities for social features, content platforms, marketing integrations, and rich media experiences. Combined with our React Native development services, you can create compelling mobile applications that leverage video to engage users and deliver value. Our web development team also specializes in building modern web applications with React and related technologies.

If you're also interested in optimizing how these video experiences are discovered through search, our SEO services can help ensure your video content reaches your target audience effectively. Video content, when properly optimized with schema markup and descriptive metadata, significantly improves engagement metrics that search engines value.

The React Native and react-native-video communities provide valuable resources when you encounter challenges, and the library's ongoing development means new features and improvements continue to arrive with each release.

Sources

1. The Widlarz Group - How to Play Video in an Expo App - Complete installation and customization guide with code examples
2. MageComp - How to Play Video in a React Native App - React Native video implementation tutorial
3. GitHub - TheWidlarzGroup/react-native-video - Official repository with documentation and examples