Gesture Hooks

Hooks for handling single tap, double tap, and pan gestures for video player interactions.

When using the VideoPlayer component, functions passed to gestureProps are automatically wired up to the corresponding gesture hooks internally. This means that when you use pre-built layouts, you only need to provide functions via gestureProps — you don't have to call the hooks yourself.

`useSingleTapGesture()`

A hook for handling single tap gestures to toggle the visibility of the video controls.

Usage

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

export const Player = () => {
  const { singleTapGesture } = useSingleTapGesture();
  return (
    <GestureDetector gesture={singleTapGesture}>
      <VideoPlayer source={{ uri: 'https://example.com/video.mp4' }} />
    </GestureDetector>
  );
};

Props

Prop	Type	Default	Description
onSingleTap`	`(event: TapGestureHandlerEventPayload) => void`	`undefined`	A callback function that is called when a single tap gesture is performed anywhere on the screen.

Returns

Value	Type	Description
`singleTapGesture`	`Gesture.Tap()`	A `Gesture.Tap()` object configured for single taps. This gesture should be applied to a `GestureDetector` component that wraps the video player.

Example

import { useSingleTapGesture } from 'react-native-video-toolkit';
import { GestureDetector } from 'react-native-gesture-handler';
import { VideoPlayer } from 'react-native-video-toolkit';

const MyVideoPlayer = () => {
  const { singleTapGesture } = useSingleTapGesture({
    onSingleTap: () => console.log('Single tap gesture performed'),
  });

  return (
    <GestureDetector gesture={singleTapGesture}>
      <VideoPlayer source={{ uri: 'https://example.com/video.mp4' }}>
        <VideoPlayer.Controls>
          <VideoPlayer.PlayButton />
          <VideoPlayer.ProgressBar />
        </VideoPlayer.Controls>
      </VideoPlayer>
    </GestureDetector>
  );
};

`useLongPressGesture()`

A hook for handling long press gestures to temporarily increase playback rate.

Usage

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

export const Player = () => {
  const { longPressGesture, isPlaybackRateIncreased } = useLongPressGesture({
    onLongPressStart: () => console.log('Long press started'),
    onLongPressEnd: () => console.log('Long press ended'),
  });

  return (
    <GestureDetector gesture={longPressGesture}>
      <VideoPlayer source={{ uri: 'https://example.com/video.mp4' }} />
    </GestureDetector>
  );
};

Props

Prop	Type	Default	Description
`onLongPressStart`	`(event: GestureTouchEvent) => void`	`undefined`	A callback function that is called when a long press gesture starts.
`onLongPressEnd`	`(event: GestureStateChangeEvent<LongPressGestureHandlerEventPayload>) => void`	`undefined`	A callback function that is called when a long press gesture ends.

Returns

Value	Type	Description
`longPressGesture`	`Gesture`	The gesture handler for long presses.
`isPlaybackRateIncreased`	`boolean`	Whether the playback rate is increased.

Example

import { useLongPressGesture } from 'react-native-video-toolkit';
import { GestureDetector } from 'react-native-gesture-handler';
import { VideoPlayer } from 'react-native-video-toolkit';
import { Text } from 'react-native';
import Animated, { FadeInUp, FadeOutDown } from 'react-native-reanimated';

const MyVideoPlayer = () => {
  const { longPressGesture, isPlaybackRateIncreased } = useLongPressGesture();

  return (
    <GestureDetector gesture={longPressGesture}>
      <VideoPlayer source={{ uri: 'https://example.com/video.mp4' }}>
        {isPlaybackRateIncreased && (
          <Animated.View
            entering={FadeInUp.duration(250)}
            exiting={FadeOutDown.duration(200)}
            style={{ alignItems: 'center', zIndex: 99, top: '5%' }}>
            <Text
              style={{
                color: 'white',
                fontSize: 16,
                fontWeight: 'bold',
                paddingHorizontal: 16,
                textAlign: 'center',
                borderRadius: 6,
              }}>
              2x
            </Text>
          </Animated.View>
        )}
        <VideoPlayer.Controls>
          <VideoPlayer.PlayButton />
          <VideoPlayer.ProgressBar />
        </VideoPlayer.Controls>
      </VideoPlayer>
    </GestureDetector>
  );
};

`useDoubleTapGesture()`

A hook for handling double tap gestures to seek forward or backward in the video.

Usage

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

export const Player = () => {
  const { doubleTapGesture } = useDoubleTapGesture({
    videoRef: videoRef,
  });
  return (
    <GestureDetector gesture={doubleTapGesture}>
      <VideoPlayer source={{ uri: 'https://example.com/video.mp4' }} />
    </GestureDetector>
  );
};

Props

Prop	Type	Default	Description
`videoRef`	`React.RefObject<Video>`	`required`	A ref to the `Video` component from `react-native-video`.
`doubleTapSeekInterval`	`number`	`10`	The number of seconds to seek forward or backward.
`onDoubleTapSeekStart`	`() => void`	`undefined`	A callback function that is called when a double tap seek starts.
`onDoubleTapSeekEnd`	`() => void`	`undefined`	A callback function that is called when a double tap seek ends.

Returns

Value	Type	Description
`doubleTapGesture`	`Gesture.Tap()`	The `Gesture.Tap()` object configured for double-tap seeking. This gesture should be applied to a `GestureDetector` component that wraps the video player.
`isDoubleTap`	`boolean`	A boolean indicating whether a double tap animation is currently in progress.
`doubleTapValue`	`{ forward: number, backward: number }`	An object representing the accumulated seek values for consecutive forward or backward double taps.
`backwardRippleRef`	`React.RefObject<View>`	A ref for the backward ripple animation container.
`forwardRippleRef`	`React.RefObject<View>`	A ref for the forward ripple animation container.
`backwardAnimatedRipple`	`StyleProp<ViewStyle>`	The animated style for the backward ripple effect.
`forwardAnimatedRipple`	`StyleProp<ViewStyle>`	The animated style for the forward ripple effect.
`forwardAnimatedStyle`	`StyleProp<ViewStyle>`	The animated style for the forward seek animation (e.g., showing "+10").
`backwardAnimatedStyle`	`StyleProp<ViewStyle>`	The animated style for the backward seek animation (e.g., showing "-10").

Example

import { useDoubleTapGesture } from 'react-native-video-toolkit';
import { GestureDetector } from 'react-native-gesture-handler';
import { VideoPlayer } from 'react-native-video-toolkit';
import React, { useRef } from 'react';
import { View, Text } from 'react-native';
import Animated from 'react-native-reanimated';

const MyVideoPlayer = () => {
  const videoRef = useRef(null);
  const { doubleTapGesture, isDoubleTap, doubleTapValue, forwardAnimatedStyle, backwardAnimatedStyle } =
    useDoubleTapGesture({
      videoRef,
      doubleTapSeekInterval: 15,
      onDoubleTapSeekStart: () => console.log('Double tap seek started'),
      onDoubleTapSeekEnd: () => console.log('Double tap seek ended'),
    });

  return (
    <GestureDetector gesture={doubleTapGesture}>
      <VideoPlayer source={{ uri: 'https://example.com/video.mp4' }} videoRef={videoRef}>
        {isDoubleTap && (
          <>
            <Animated.View style={forwardAnimatedStyle}>
              <Text>+{doubleTapValue.forward}</Text>
            </Animated.View>
            <Animated.View style={backwardAnimatedStyle}>
              <Text>-{doubleTapValue.backward}</Text>
            </Animated.View>
          </>
        )}
        <VideoPlayer.Controls>
          <VideoPlayer.PlayButton />
          <VideoPlayer.ProgressBar />
        </VideoPlayer.Controls>
      </VideoPlayer>
    </GestureDetector>
  );
};

`usePanGesture()`

A hook for handling pan gestures, typically used for controlling volume and brightness by vertical swipes on different sides of the screen.

Usage

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

export const Player = () => {
  const { verticalPanGesture } = usePanGesture({
    onLeftVerticalPan: () => {},
    onRightVerticalPan: () => {},
  });
  return (
    <GestureDetector gesture={verticalPanGesture}>
      <VideoPlayer source={{ uri: 'https://example.com/video.mp4' }} />
    </GestureDetector>
  );
};

Props

Prop	Type	Default	Description
`onLeftVerticalPan`	`(event: PanGestureHandlerEventPayload) => void`	`required`	A callback function that is called when a vertical pan gesture is detected on the left side of the screen.
`onRightVerticalPan`	`(event: PanGestureHandlerEventPayload) => void`	`required`	A callback function that is called when a vertical pan gesture is detected on the right side of the screen.
`onGlobalVerticalPan`	`(event: PanGestureHandlerEventPayload) => void`	`optional`	A callback function that is called when a vertical pan gesture is detected anywhere on the screen.

Returns

Value	Type	Description
`verticalPanGesture`	`Gesture.Pan()`	The `Gesture.Pan()` object configured for vertical pan gestures. This gesture should be applied to a `GestureDetector` component that wraps the video player.

Example

import { usePanGesture } from 'react-native-video-toolkit';
import { GestureDetector } from 'react-native-gesture-handler';
import { VideoPlayer } from 'react-native-video-toolkit';
import React from 'react';
import { View, Text } from 'react-native';

const MyVideoPlayer = () => {
  const handleLeftPan = (event) => {
    // Implement brightness control
    console.log('Left vertical pan:', event.translationY);
  };

  const handleRightPan = (event) => {
    // Implement volume control
    console.log('Right vertical pan:', event.translationY);
  };

  const { verticalPanGesture } = usePanGesture({
    onLeftVerticalPan: handleLeftPan,
    onRightVerticalPan: handleRightPan,
  });

  return (
    <GestureDetector gesture={verticalPanGesture}>
      <VideoPlayer source={{ uri: 'https://example.com/video.mp4' }}>
        <VideoPlayer.Controls>
          <VideoPlayer.PlayButton />
          <VideoPlayer.ProgressBar />
        </VideoPlayer.Controls>
      </VideoPlayer>
    </GestureDetector>
  );
};

Gesture Hooks

On this page