Types
Video Types
Types related to the video player including state, configuration, and custom video track interfaces.
CustomVideoTrack
The CustomVideoTrack interface represents a custom video track with user-friendly properties. It extends the base VideoTrack from react-native-video with additional fields for better UX.
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
label | string | No | undefined | User-friendly label to display in the UI (e.g., "Auto", "1080p", "720p HD"). |
uri | string | No | undefined | Optional URI for the specific quality stream. Useful for direct links to quality renditions. |
height | number | Yes | – | The height of the video track in pixels. Used for track selection by resolution. |
If label is not provided, the UI will automatically display the height followed by "p" (e.g., "720p").
Example
import type { CustomVideoTrack } from 'react-native-video-toolkit';
const customVideoTracks: CustomVideoTrack[] = [
{ height: 0, label: 'Auto' },
{ height: 1080, label: '1080p Full HD' },
{ height: 720, label: '720p HD' },
{ height: 480, label: '480p SD' },
];VideoState
The VideoState interface represents the current state of the video player.
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
isPlaying | boolean | Yes | false | Whether the video is currently playing. |
ended | boolean | Yes | false | Whether playback reached the end of the source. |
duration | number | Yes | 0 | The total duration of the video. |
buffering | boolean | Yes | false | Whether the video is currently buffering. |
muted | boolean | Yes | false | Whether the video is currently muted. |
volume | number | Yes | 1 | The current volume of the video. |
playbackRate | number | Yes | 1 | The current playback rate of the video. |
fullscreen | boolean | Yes | false | Whether the video is currently in fullscreen. |
pictureInPicture | boolean | Yes | false | Whether the video is playing in picture-in-picture. |
error | string | Yes | null | The current error, if any. |
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.
VideoPlayerConfig
The VideoPlayerConfig interface allows you to configure the behavior of the video player.
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
autoHideControls | boolean | No | true | If true, the controls will automatically hide after a certain delay. |
autoPlay | boolean | No | true | If true, the video will start playing automatically. |
autoHideDelay | number | No | 5000 | The delay in milliseconds before the controls are hidden. |
enableDoubleTapGestures | boolean | No | true | If true, the user can double-tap to seek forward or backward. |
enableFullscreen | boolean | No | true | If true, DefaultLayout shows the fullscreen button. enterFullscreen() still works when false, for always-fullscreen players. |
enableVolumeControl | boolean | No | true | If true, the user can control the volume of the video. |
enablePictureInPicture | boolean | No | false | If true, DefaultLayout shows the picture-in-picture button. Needs native setup. |
enablePanGestures | boolean | No | true | If true, the user can use pan gestures to control volume and brightness. |
enableScreenRotation | boolean | No | true | If true, the screen will rotate automatically when the device is rotated. |
playbackRates | number[] | No | [0.5, 1, 1.25, 1.5, 2] | An array of playback rates to be displayed in the settings menu. |
useCustomAudioTracks | boolean | No | false | If true, use custom audio tracks instead of auto-extracting from source. |
useCustomVideoTracks | boolean | No | false | If true, use custom video tracks instead of auto-extracting from source. |
onEnterFullscreen | () => void | No | undefined | A callback function that is called when the player enters fullscreen mode. |
onExitFullscreen | () => void | No | undefined | A callback function that is called when the player exits fullscreen mode. |
onEnterPictureInPicture | () => void | No | undefined | A callback function that is called when the player enters picture-in-picture. |
onExitPictureInPicture | () => void | No | undefined | A callback function that is called when the player exits picture-in-picture. |
onHideControls | () => void | No | undefined | A callback function that is called when the controls are hidden. |
onShowControls | () => void | No | undefined | A callback function that is called when the controls are shown. |