- useControlSlider
- useControlsVideoState
- useControlFullScreen
- useControlThumb
- useLayout
- useTapGesture / useLongPressGesture
- useTimeFromThumb
- useControlsVisibility
- usePinchGesture
This is the main component that will render your player and the controls on it. You can pass children if you need to render custom views that are not handled by the lib (for example a video title).
A React element that renders the video player.
If true, the controls will be visible during the initial render.
Duration in ms after which the controls automatically hide.
Map of components that will be used to render some parts of the controls (slider, state controls for example). You can pass the following keys:
slider: The slider that renders at the bottom of the player. Defaults to ControlSlider.videoState: The state controls that render at the center of the player. Defaults to ControlVideoState.
Example:
<VideoControls
components={{
slider: MySlider,
videoState: MyVideoState,
}}
videoElement={<MyPlayer />}
/>Map of props to pass to the components used to render the controls (similar to the components prop).
Just like the components prop, it allows the following keys:
slider(see ControlSlider):videoState(see ControlVideoState)
Example:
<VideoControls
componentsProps={{
slider: {
totalDuration: 5000,
},
}}
videoElement={<MyPlayer />}
/>Called when the user double taps on the right side of the controls.
Called when the user double taps on the left side of the controls.
Style to apply to the container that contains the state controls. Useful if you want to position the state controls differently, for example if you want to make them full width.
Style applied to the controls container.
Function called when zooming in the video with a pinch gesture.
Function called when zooming out the video with a pinch gesture.
Boolean indicating the auto dismiss of the controls.
Boolean indicating if the controls should be dismissed when the user taps on the controls overlay.
The control slider is a component that will render the progress bar, the current time, the total duration and a fullscreen button if provided.
The total duration of the video
Function called when the user seeks the video from the slider's thumb. It receives the time in second as an argument.
Color for the past part (left side of the thumb) of the progress bar.
Color for the future part (right side of the thumb) of the progress bar.
Color for the future part (right side of the thumb) of the progress bar that goes until the playable part of the video.
React element that will render the thumb of the slider. Defaults to ControlThumb.
Function that receives the total duration (in seconds) of the video. Returns a React element. Defaults to a white text formatted with minutes:seconds.
Function that receives the current time (in seconds) of the video. Returns a React element. Defaults to a white text formatted with minutes:seconds.
It is recommended to give a fixed width to its container so that the slider layout is not affected by the width of the text.
Note: the argument is a reanimated SharedValue. To render it as a text, you can use the CurrentTime component.
Style applied to the slider. Can be useful to set a height.
Style applied to the slider container, which includes the current time and total duration.
Border radius for the slider element and inner elements (playable part, played part).
React element that will render the fullscreen button. Defaults to ControlFullScreen.
Reanimated shared value that allows you to keep track of the current progress time.
Reanimated shared value that allows you to keep track of the current thumb progress.
Extra gesture handlers (from react-native-gesture-handler) that runs simultaneously with the main thumb gesture handler which handles its translation. Useful if you need to apply a scale effect on the thumb while its pressed.
Layout function that is applied to the slider element.
Hit slop for the thumb element. It accepts a number or an insets object, similar to the react-native hitSlop prop. For a number, the value is applied to all edges.
Set the current time of the video.
Set the playable time of the video.
Color of the thumb.
Function called when the user presses the play button.
Function called when the user presses the pause button.
Function called when the user presses the forward button.
Function called when the user presses the rewind button.
Boolean indicating if the video is playing or not.
Map of components used to render each part of the video state controls. You can pass the following keys:
play: The play icon.pause: The pause icon.forward: The forward icon.rewind: The rewind icon.
All those components receive the following props:
isPressed: boolean indicating the the touchable is being pressed or not. Useful to trigger an animation or apply different style.
Spacing applied between each controls.
It also accepts a string (space-between or space-around). In that case, the prop is applied to a justifyContent style.
The ControlFullScreen component renders a touchable icon depending if the player is in full screen or not.
Boolean indicating if the player is in fullscreen or not
Map of components used to render each part of the fullscreen button. You can pass the following keys:
fullScreen: The fullscreen icon.exitFullScreen: The exit fullscreen icon.
They receive no prop.
Function called when the user presses the fullscreen (or exit fullscreen) button.
The ControlTouchable component renders a tap gesture handler. You should use it if you want to add custom touchables to the controls.
Number of taps required to trigger the onPress function.
Function called when the gesture has completed
Maximum duration of the tap gesture.
A React element or a function. The function will receive an object as an argument, containing the following keys:
pressed: boolean indicating if the touchable is being pressed or not.
Handles shared value for the current time and the playable time. It also handles the styling for the active and playable parts of the progress bar.
It accepts an object with the following keys:
totalDuration(required) : the total duration of the video.progressLayout(required) : the layout of the slider element.timeSharedValue(optional) : See here
Returns:
setCurrentTime: function to update the current time shared value.setPlayableTime: function to update the playable time shared value.timeValue: shared value for the current time of the video.playableTimeValue: shared value for the playable time of the video.activeViewStyle: style for the active part of the progress bar.playableTimeStyle: style for the playable part of the progress bar.
Handles the interaction between the video state controls and the visibility of the controls. If a button is pressed, the timer to hide the controls is reset. See visibility.
It accepts an object with the following keys:
onPlay(required) : function called when the user presses the play button.onPause(required) : function called when the user presses the pause button.onForward(optional) : function called when the user presses the forward button.onRewind(optional) : function called when the user presses the rewind button.
Returns the same object as the one passed to the hook, with an extra:
setPressedButton: Function to indicate which button is being pressed. This allows to not hide the controls while a button is being pressed. It accepts 2 arguments: a string with the name of the button and a boolean indicating if the button is being pressed.
Handles the thumb gesture. It accepts an object with the following keys:
progressLayout(required) : the layout of the slider element.onGestureEnd(required) : function called when the gesture has ended. Receives the time in seconds as parameter.totalDuration(required) : the total duration of the video.thumbSharedValue(optional) : See herehitSlop(optional, default20) : See heretimeSharedValue(required) : the current time as a shared value.
Returns:
thumbGestureHandler: the gesture handler for the thumbthumbValue: the thumb translation as a shared valueupdateThumbFromTime: function to update the thumb position from a time in seconds.
Handles a view layout. Returns a tuple with the layout and a function to update the layout.
Example:
const [layout, onLayout] = useLayout();
return <View onLayout={onLayout} />;Both hooks handle a tap gesture or a long press gesture. They accept an object with the following keys:
onBegin(optional) : function called when the gesture has begun.onEnd(optional) : function called when the gesture has ended.onTouchesUp(optional) : function called when the finger is lifted.onTouchesDown(optional) : function called when the finger is placed on the screen.onTouchesCancelled(optional) : function called when the finger stops being tracked.
Returns a Tap Gesture or a LongPress Gesture.
Handles the time from the thumb position. It accepts an object with the following keys:
thumbValue(required) : the shared value for the thumb position.totalDuration(required) : the total duration of the video in seconds.progressLayout(required) : the layout of the slider element.
Returns an object with the following keys:
time: the time in seconds from the thumb position.
Returns the context values handled by the visibility context. See visibility.
Handles a pinch gesture. It accepts an object with the following keys:
onPinchIn(required) : function called when the users pinches with the fingers from the outside to the insideonPinchOut(required) : function called when the users pinches with the fingers from the inside to the outside
Returns a Pinch Gesture
The visibility of the controls is handled by a context, which holds a timeout that will start, stop or reset depending on the actions of the user: press on a button, trigger the slider's thumb, etc.
This context is rendered by the VideoControls component. So if you need to access this context, you should render your component as a children of VideoControls.
The context holds the following values:
resetVisibilityTimer: function that restarts the timerstartTimer: function that starts the timerstopTimer: function that stops the timerisPlaying: boolean indicating if the video is playing or not
You can access the following methods thanks to a ref to the VideoControls component:
toggleVisible: function to toggle the visibility of the controlssetVisible: function to set the visibility of the controls. Takes a boolean as an argument.