A comprehensive video player toolkit for React Native applications with modern controls and gesture support.

React Native Video Toolkit

React Native Video Toolkit is a powerful, feature-rich video player component built for React Native applications. It provides a modern, customizable video player with intuitive controls, gesture support, and a beautiful interface that works seamlessly across platforms.

Features

🎥 Modern Video Player - Beautiful, customizable video player with modern controls
🤏 Gesture Support - doubleTap gesture to seek, swipe controls, and touch interactions
🎨 Themeable - Customizable themes and styling options
📱 Cross-Platform - Works on Android with planned iOS support
⚡ Performance - Built with React Native Reanimated for smooth animations
🎵 Audio Controls - Volume control and audio management

Platform Support

Android

Full support with all features available.

iOS

Due to lack of mac machine, I am unable to add TurboModules support for iOS. Contributions are welcome for iOS support 🙏

Quick Example

Here's a basic example demonstrating how to use the VideoPlayer component in your application:

If using react-native-safe-area-context, add edges={['top']} to prevent the video content from being obscured by device notches or status bars.

-0s

+0s

Demo

Video Player

0:00

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { VideoPlayer, DefaultLayout, VideoProvider } from 'react-native-video-toolkit';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
export function GettingStartedExample() {
  const videoSource = {
    uri: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
  };

  return (
    <GestureHandlerRootView style={styles.container}>
      <VideoProvider
        config={{
          onShowControls() {
            console.log('controls shown');
          },
          onHideControls() {
            console.log('controls hidden');
          },
        }}>
        <View>
          <VideoPlayer
            videoProps={{
              onLoad(e) {
                console.log('Video loaded', e);
              },
            }}
            containerStyle={styles.videoPlayer}
            source={videoSource}>
            <DefaultLayout title="Demo" subtitle="Video Player" />
          </VideoPlayer>
        </View>
      </VideoProvider>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
    width: '100%',
  },
  videoPlayer: {
    width: '100%',
    height: '100vh', // for web, take full height of the viewport, since the example is been rendered on web
  },
});

export default GettingStartedExample;

Next Steps

Ready to get started? Head over to the Installation guide to add React Native Video Toolkit to your project.

For more advanced examples and use cases, check out our examples folder on GitHub.

Introduction