Provider Hooks
useVideo()
A hook to access the current video player state and dispatch actions to control the player. It provides access to the video player's state, a dispatch function to send actions, and a helper function to set the theme.
The component re-renders on every change to the state, a tap that shows or hides the controls included. If you only need part of it, use useVideoSelector() instead.
Usage
import { useVideo } from 'react-native-video-toolkit';
const MyComponent = () => {
const { state, dispatch } = useVideo();
// ...
};Returns
| Value | Type | Description |
|---|---|---|
state | VideoState | An object containing the current state of the video player. |
dispatch | (action: VideoAction) => void | A function that allows you to dispatch actions to update the video player's state. |
Example
import { useVideo, useProgress } from 'react-native-video-toolkit';
import { View, Text, Button } from 'react-native';
import React from 'react';
const MyComponent = () => {
const { state, dispatch } = useVideo();
// The playback position isn't in `state`; it comes from `useProgress()`
const { currentTime, seek } = useProgress();
// Example: Toggle play/pause
const handlePlayPause = () => {
dispatch({ type: 'TOGGLE_PLAY_PAUSE' });
};
// Example: Seek to a specific time
const handleSeek = (time: number) => {
seek(time);
};
return (
<View>
<Text>Current Time: {currentTime}</Text>
<Button onPress={handlePlayPause} title={state.isPlaying ? 'Pause' : 'Play'} />
<Button onPress={handleThemeChange} title="Change Theme" />
</View>
);
};useVideoSelector()
Subscribes to part of the video player state. The component re-renders only when the selected value changes, so a screen that reads fullscreen doesn't re-render on every tap or buffering change.
Usage
import { useVideoSelector } from 'react-native-video-toolkit';
const MyComponent = () => {
const fullscreen = useVideoSelector((state) => state.fullscreen);
// ...
};Parameters
| Parameter | Type | Required | Default | Description |
|---|---|---|---|---|
selector | (state: VideoState) => T | Yes | – | Picks the value to subscribe to. |
isEqual | (a: T, b: T) => boolean | No | Object.is | Compares the new and previous selection. Pass one when the selector builds a new object each time. |
Returns
| Type | Description |
|---|---|
T | The selected value. It keeps its identity while isEqual holds. |
The playback position isn't in the state. Read it with useProgress().
useVideoComponents()
Returns the components the player renders internally (Sheet, Slider, Spinner, PressFeedback), with any replacements passed to VideoProvider's components prop applied. Use it in your own controls so they match the rest of the player. See Custom Components.
Usage
import { useVideoComponents } from 'react-native-video-toolkit';
const MyControl = () => {
const { Slider, PressFeedback } = useVideoComponents();
// ...
};Returns
| Value | Type | Description |
|---|---|---|
Sheet | ComponentType<SheetProps> | Hosts the settings menu. |
Slider | ComponentType<SliderProps> | Used by ProgressBar and VolumeControl. |
Spinner | ComponentType<SpinnerProps> | Shown while the video is buffering. |
PressFeedback | ComponentType<PressFeedbackProps> | Wraps every control button. |
The prop types are documented in Components Types.