DefaultLayout
The DefaultLayout component provides a ready-to-use, opinionated layout for the video player. It includes standard controls like a play/pause button, progress bar, time display, and settings menu, arranged in a familiar and intuitive way.
Usage
You can use DefaultLayout by passing it as a child to the VideoPlayer component.
import { VideoPlayer, DefaultLayout } from 'react-native-video-toolkit';
export const Player = () => {
return (
<VideoPlayer source={{ uri: 'https://example.com/video.mp4' }}>
<DefaultLayout title="My Awesome Video" subtitle="An example of the DefaultLayout" />
</VideoPlayer>
);
};Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | The main title of the video, displayed in the top-left corner. | |
subtitle | string | A subtitle or secondary text, displayed below the main title. | |
slots | object | An object that allows you to render custom components in predefined slots. |
Slots
The slots prop allows you to inject your own components or elements into specific areas of the layout. This is useful for adding extra functionality or customizing the UI without having to rebuild the entire layout.
The slots prop provides a powerful way to extend the DefaultLayout while maintaining its overall structure.
Here are the available slots:
| Slot | Description |
|---|---|
beforeSettingsButton | Renders a component before the settings button. |
afterSettingsButton | Renders a component after the settings button. |
beforeSubtitleToggleButton | Renders a component before the subtitle toggle button. |
afterSubtitleToggleButton | Renders a component after the subtitle toggle button. |
beforeProgressBar | Renders a component above the progress bar. |
afterProgressBar | Renders a component below the progress bar. |
beforeTimeDisplay | Renders a component before the time display. |
afterTimeDisplay | Renders a component after the time display. |
beforeMuteButton | Renders a component before the mute button. |
afterMuteButton | Renders a component after the mute button. |
beforeFullscreenButton | Renders a component before the fullscreen button. |
afterFullscreenButton | Renders a component after the fullscreen button. |
beforeCenterPlayButton | Renders a component before the center play button. |
afterCenterPlayButton | Renders a component after the center play button. |
Examples
Basic Usage
Here's a basic example of how to use the DefaultLayout with a title and subtitle.
import { VideoPlayer, DefaultLayout } from 'react-native-video-toolkit';
export const BasicUsage = () => {
return (
<VideoPlayer
containerStyle={{
width: '100%',
height: '50vh', // for web, take full height of the viewport, since the example is been rendered on web
}}
videoStyle={{ height: '50%' }}
source={{ uri: '/test.mp4' }}>
<DefaultLayout title="My Awesome Video" subtitle="An example of the DefaultLayout" />
</VideoPlayer>
);
};Using Slots
This example demonstrates how to use the slots prop to add a custom "Like" button next to the fullscreen button.
import { VideoPlayer, DefaultLayout, BaseIconButton, useVideo } from 'react-native-video-toolkit';
import { Heart } from 'lucide-react-native';
export const SlotsUsage = () => {
const { state } = useVideo();
const { theme } = state;
const LikeButton = () => (
<BaseIconButton IconComponent={Heart} onTap={() => alert('Liked!')} size={theme.iconSizes.md} color="white" />
);
return (
<VideoPlayer
containerStyle={{
width: '100%',
height: '50vh', // for web, take full height of the viewport, since the example is been rendered on web
}}
videoStyle={{ height: '50%' }}
source={{ uri: '/test.mp4' }}>
<DefaultLayout
title="My Awesome Video"
slots={{
beforeFullscreenButton: <LikeButton />,
}}
/>
</VideoPlayer>
);
};The DefaultLayout includes the following controls: