Gesture Hooks

note

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>
  );
};

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();

  return (
    <GestureDetector gesture={singleTapGesture}>
      <VideoPlayer source={{ uri: 'https://example.com/video.mp4' }}>
        <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.

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>
  );
};