Skip to main content

Getting Started

Welcome to react-native-video-toolkit . This guide will help you get started with installing and using the video player component in your React Native application.

Installation​

To install the library, run the following command in your project:

npm install react-native-video-toolkit react-native-video react-native-gesture-handler react-native-reanimated react-native-svg lottie-react-native react-native-orientation-director react-native-safe-area-context
note

react-native-video-toolkit works with new architecture (Fabric + TurboModules) enabled projects. If you are using an older version of React Native, please ensure that you have upgraded to at least React Native 0.76.

iOS​

danger

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

Usage​

Here's a basic overview of how to use the VideoPlayer component.

Example​

Here's a full example demonstrating basic usage of the VideoPlayer component. For more examples check the example folder.

note

If using react-native-safe-area-context, add edges={['top']} (mainly in Expo). If you are using SafeAreaView from react-native, no extra steps are needed. This prevents the video content from being obscured by device notches or status bars.

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { VideoPlayer, DefaultLayout, VideoProvider, defaultTheme } from 'react-native-video-toolkit';
import { SafeAreaView } from 'react-native-safe-area-context'; // Import SafeAreaView from react-native-safe-area-context
function App(): React.ReactElement {
  const videoSource = {
    uri: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
  };

  return (
    <SafeAreaView style={styles.container}>
      <VideoProvider theme={defaultTheme}>
        <View style={styles.videoContainer}>
          <VideoPlayer source={videoSource}>
            <DefaultLayout />
          </VideoPlayer>
        </View>
      </VideoProvider>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
  },
  videoContainer: {
    width: '100%',
    height: 200,
    backgroundColor: '#000',
  },
});

export default App;