FullscreenButton

Usage

import { FullscreenButton } from 'react-native-video-toolkit';
import React from 'react';

const MyFullscreenButton = () => {
  return <FullscreenButton />;
};

Props

Prop	Type	Required	Default	Description
`size`	`number`	No	–	Size of the icon.
`color`	`string`	No	–	Color of the icon.
`style`	`StyleProp<ViewStyle>`	No	–	Optional styles applied to the button container.
`renderEnterIcon`	`() => React.ReactNode`	No	`Maximize` (from `lucide-react-native`)	Custom renderer for the "enter fullscreen" icon.
`renderExitIcon`	`() => React.ReactNode`	No	`Minimize` (from `lucide-react-native`)	Custom renderer for the "exit fullscreen" icon.

Examples

Default Fullscreen Button

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

<FullscreenButton size={24} color="white" />;

Custom Icons

import { FullscreenButton } from 'react-native-video-toolkit';
import { ArrowsOut, ArrowsIn } from 'phosphor-react-native';
import React from 'react';

<FullscreenButton
  renderEnterIcon={() => <ArrowsOut size={24} color="white" />}
  renderExitIcon={() => <ArrowsIn size={24} color="white" />}
/>;

Integration Example

Typically used within a VideoPlayer:

import { VideoPlayer, FullscreenButton } from 'react-native-video-toolkit';

const MyVideoPlayer = () => {
  return (
    <VideoPlayer source={{ uri: 'https://example.com/video.mp4' }}>
      <VideoPlayer.Controls>
        <FullscreenButton size={28} color="white" />
      </VideoPlayer.Controls>
    </VideoPlayer>
  );
};

Handles tap gestures internally using useFullscreen and GestureDetector, so you don't need to wire gestures yourself. - Works seamlessly with both custom layouts and pre-built control sets.

FullscreenButton

Usage

Props

Examples

Default Fullscreen Button

Custom Icons

Integration Example

On this page