VideoProvider

UsageCopy Anchor Link

To use the VideoProvider, you need to wrap your component with it. This is usually done in the component that contains the video player.

import { VideoProvider } from 'react-native-video-toolkit';

export const VideoPlayerComponent = () => <VideoProvider>{/* Your video player content */}</VideoProvider>;

PropsCopy Anchor Link

VideoPortalHostCopy Anchor Link

The settings sheet opens in a portal host that VideoProvider renders after its children. If the provider sits inside a screen (for example one tab of a tab navigator), the sheet is drawn inside that screen, so the navigator's tab bar or header can end up on top of it.

To open the sheet above your navigation instead, render a VideoPortalHost at the app root, after the navigator, and pass its name to portalHost. One host can serve every player in the app.

import { Slot } from 'expo-router';
import { DefaultLayout, VideoPlayer, VideoPortalHost, VideoProvider } from 'react-native-video-toolkit';

// App root, e.g. app/_layout.tsx
export default function RootLayout() {
  return (
    <>
      <Slot />
      <VideoPortalHost name="app" />
    </>
  );
}

// Any screen
export const PlayerScreen = () => (
  <VideoProvider portalHost="app">
    <VideoPlayer source={{ uri: 'https://example.com/video.mp4' }}>
      <DefaultLayout />
    </VideoPlayer>
  </VideoProvider>
);

StateCopy Anchor Link

The VideoProvider manages the following state. Read it with useVideoSelector(), which re-renders only when the part you select changes, or useVideo(), which re-renders on every change:

The playback position (currentTime and playableDuration) isn't part of the state. Read it with useProgress(): it changes on every progress event, and keeping it out of the state means only the components that call useProgress() re-render.

ActionsCopy Anchor Link

The VideoProvider handles the following actions:

useVideoCopy Anchor Link

The useVideo hook provides access to the video state and dispatch function.

ReturnsCopy Anchor Link